/* =============================================================================
   kujo-dark.css -- WiseCP Modern Theme Dark Override
   Kujo Technologies | billing.kujo.tech
   Generated: 2026-04-29
   ============================================================================= */

/* --- Font Import ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =============================================================================
   CSS CUSTOM PROPERTIES (Kujo Brand Palette)
   ============================================================================= */
:root {
  --navy-950: #050810;
  --navy-900: #0a0e17;
  --navy-800: #0f1520;
  --navy-700: #161d2e;
  --navy-600: #1e2740;
  --navy-500: #2a3654;
  --navy-400: #3d4d6e;
  --navy-300: #5a6d8e;
  --brand-600: #155f96;
  --brand-500: #1a8fcb;
  --brand-400: #3aa8e0;
  --brand-300: #6ec2eb;
  --success-500: #22c55e;
  --warning-500: #f59e0b;
  --danger-500: #ef4444;
  --purple-500: #8b5cf6;
  --text-primary: #e2e8f0;
  --text-secondary: #5a6d8e;
  --text-muted: #3d4d6e;
}

/* =============================================================================
   TASK 1 -- CORE: Body, layout, typography, utilities, info boxes, scrollbars
   ============================================================================= */

/* --- Body & Global Reset --------------------------------------------------- */
body,
html {
  background-color: var(--navy-900) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#wrapper,
#fullwidth,
#home {
  background-color: var(--navy-900) !important;
  color: var(--text-primary) !important;
}

/* --- Links ----------------------------------------------------------------- */
a {
  color: var(--brand-400) !important;
  transition: color 0.2s ease !important;
}
a:hover,
a:focus {
  color: var(--brand-300) !important;
}

/* --- Headings -------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* --- Paragraphs ------------------------------------------------------------ */
p {
  color: var(--text-primary) !important;
}

/* --- Dividers / Lines ------------------------------------------------------ */
.line,
hr {
  border-color: var(--navy-700) !important;
  background-color: var(--navy-700) !important;
}

/* --- Padding Utility Sections ---------------------------------------------- */
.padding,
.padding1,
.padding2,
.padding3,
.padding4,
.padding5,
.paddingt,
.paddingb,
.paddingtb {
  background-color: transparent !important;
}

/* --- Info Boxes ------------------------------------------------------------ */
.red-info,
.error {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
  border-radius: 6px !important;
}

.orange-info,
.notice {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
  border-radius: 6px !important;
}

.green-info,
.complete {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
  border-radius: 6px !important;
}

.blue-info {
  background-color: rgba(26, 143, 203, 0.15) !important;
  border: 1px solid rgba(26, 143, 203, 0.4) !important;
  color: var(--brand-300) !important;
  border-radius: 6px !important;
}

.gray-info {
  background-color: rgba(90, 109, 142, 0.15) !important;
  border: 1px solid rgba(90, 109, 142, 0.4) !important;
  color: var(--navy-300) !important;
  border-radius: 6px !important;
}

/* --- Scrollbars ------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-track {
  background: var(--navy-800) !important;
}
::-webkit-scrollbar-thumb {
  background: var(--navy-500) !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--navy-400) !important;
}

/* =============================================================================
   TASK 2 -- NAVIGATION: Header, menus, dropdowns, mobile menu, breadcrumbs,
             language/currency selector
   ============================================================================= */

/* --- Header & Head --------------------------------------------------------- */
.header,
.head,
.headerwhite,
.sabithead,
.sayfaustheader,
.fullwidthhead,
.menucolor {
  background-color: var(--navy-950) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--navy-700) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Kill ALL stock photo header backgrounds */
.header[style*="background-image"] {
  background-image: none !important;
  background-color: var(--navy-950) !important;
}

/* Section background images -- force dark */
.nedenbiz {
  background-image: none !important;
  background-color: var(--navy-900) !important;
}
.ebulten {
  background-image: none !important;
  background-color: var(--navy-800) !important;
}
.footer {
  background-image: none !important;
}

/* Page content backgrounds -- force dark on all inner pages */
.page-detail,
.page-detail-normal,
[class*="page-detail"],
.modernclient-rightcon,
.rightcontent {
  background-color: var(--navy-900) !important;
}

/* --- Logo ------------------------------------------------------------------ */
.logo,
.logo a,
.companylogo,
.companylogo a {
  color: var(--text-primary) !important;
}
.logo img,
.companylogo img {
  filter: brightness(1.1) !important;
}

/* --- Main Navigation Menu -------------------------------------------------- */
.menu a,
.menu li a,
nav a,
nav li a {
  color: var(--text-primary) !important;
  transition: color 0.2s ease !important;
}
.menu a:hover,
.menu li a:hover,
nav a:hover {
  color: var(--brand-400) !important;
}
.menu li.active > a,
.menu li.current > a {
  color: var(--brand-400) !important;
}

/* --- Dropdown / Mega Menu -------------------------------------------------- */
.ulup,
ul.ulup,
#megamenu,
.dropdown-menu,
.submenu,
ul.submenu {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.ulup li a,
#megamenu li a,
.dropdown-menu li a,
.submenu li a {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-700) !important;
}
.ulup li a:hover,
#megamenu li a:hover,
.dropdown-menu li a:hover,
.submenu li a:hover {
  background-color: var(--navy-600) !important;
  color: var(--brand-400) !important;
}

/* --- Mobile Menu ----------------------------------------------------------- */
#mobmenu,
.mobmenu,
.mobile-menu {
  background-color: var(--navy-950) !important;
  border-top: 1px solid var(--navy-700) !important;
}
#mobmenu a,
.mobmenu a,
.mobile-menu a {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-700) !important;
}
#mobmenu a:hover,
.mobmenu a:hover,
.mobile-menu a:hover {
  background-color: var(--navy-700) !important;
  color: var(--brand-400) !important;
}

/* --- Hamburger / Toggle ---------------------------------------------------- */
.toggle,
.toggle-menu,
.hamburger {
  color: var(--text-primary) !important;
}
.toggle span,
.toggle i {
  background-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}

/* --- Header Buttons -------------------------------------------------------- */
.headbutonlar {
  background-color: transparent !important;
}
.paypasbutonlar {
  display: none !important;
}
.headbutonlar a {
  color: #5a6d8e !important;
  border: none !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}
.headbutonlar a:hover {
  color: #e2e8f0 !important;
  background-color: rgba(26, 143, 203, 0.1) !important;
}

/* Nav bottom spacing */
.header {
  padding-bottom: 10px !important;
}
.head {
  padding-bottom: 5px !important;
}

/* --- Cart Icon ------------------------------------------------------------- */
#sepeticon,
.sepeticon {
  color: var(--text-primary) !important;
}
.basket-count {
  background-color: var(--brand-500) !important;
  color: #fff !important;
}

/* --- Currency / Language Selector ----------------------------------------- */
.scurrencyicon,
.langandcur,
#selectLangCurrency,
.selectlangcurrency {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
}
.scurrencyicon a,
.langandcur a,
#selectLangCurrency a {
  color: var(--text-primary) !important;
}
#selectLangCurrency .dropdown,
#selectLangCurrency ul {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
}
#selectLangCurrency li a:hover {
  background-color: var(--navy-600) !important;
}

/* --- Social Buttons in Header ---------------------------------------------- */
.sosyalbtns,
.sosyalbtns a {
  color: var(--navy-300) !important;
}
.sosyalbtns a:hover {
  color: var(--brand-400) !important;
}

/* --- Page Top Header / Title Bar ------------------------------------------ */
.sayfabaslik,
.page-title,
.pagetitle {
  background-color: var(--navy-800) !important;
  border-bottom: 1px solid var(--navy-700) !important;
  color: var(--text-primary) !important;
}
.sayfabaslik h1,
.sayfabaslik h2,
.page-title h1,
.page-title h2 {
  color: var(--text-primary) !important;
}

/* --- Breadcrumbs ----------------------------------------------------------- */
.sayfayolu,
.breadcrumb,
.breadcrumbs {
  background-color: transparent !important;
}
.sayfayolu a,
.breadcrumb a,
.breadcrumbs a {
  color: var(--brand-400) !important;
}

/* --- Order Steps (merged here for parse reliability) ---------------------- */
.ilanasamax h3 {
  background: #161d2e !important;
  background-color: #161d2e !important;
  color: #5a6d8e !important;
  text-shadow: none !important;
}
#asamaaktif h3 {
  background: #1a8fcb !important;
  background-color: #1a8fcb !important;
  color: #fff !important;
  text-shadow: none !important;
}
#asamaaktif {
  color: #1a8fcb !important;
}
.headerwhite {
  background-color: transparent !important;
  background: none !important;
}
.sayfayolu span,
.breadcrumb span,
.breadcrumbs span,
.sayfayolu li,
.breadcrumb li {
  color: var(--navy-300) !important;
}
.sayfayolu li.active,
.breadcrumb li.active {
  color: var(--text-primary) !important;
}

/* =============================================================================
   TASK 3 -- HOMEPAGE: Slider/hero, features, about, stats, testimonials, domain
   ============================================================================= */

/* --- Slider / Hero --------------------------------------------------------- */
.rev_slider_wrapper,
.rev_slider,
.tp-banner,
.hero,
.slider-section {
  background-color: var(--navy-950) !important;
}
.tp-caption,
.tp-caption *,
.slider-caption {
  color: var(--text-primary) !important;
}

/* --- Features / Why Us Section -------------------------------------------- */
.nedenbiz,
.features-section,
.why-us {
  background-color: var(--navy-800) !important;
}
.nedenbiz h2,
.nedenbiz h3,
.features-section h2,
.features-section h3 {
  color: var(--text-primary) !important;
}
.nedenbiz p,
.features-section p {
  color: var(--navy-300) !important;
}

/* --- Feature Icons / Service Icons ---------------------------------------- */
.ozellik,
.servisikon,
.servisikonalt,
.servisinfos,
.feature-block,
.feature-item {
  background-color: var(--navy-700) !important;
  border: 1px solid var(--navy-600) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}
.ozellik:hover,
.servisikon:hover,
.feature-block:hover {
  background-color: var(--navy-600) !important;
  border-color: var(--brand-600) !important;
  box-shadow: 0 4px 20px rgba(26, 143, 203, 0.15) !important;
}
.ozellik h3,
.servisikon h3,
.servisinfos h3,
.feature-block h3 {
  color: var(--text-primary) !important;
}
.ozellik p,
.servisikon p,
.servisinfos p,
.feature-block p {
  color: var(--navy-300) !important;
}
.ozellik i,
.servisikon i,
.feature-block i {
  color: var(--brand-400) !important;
}

/* --- About / Intro Section ------------------------------------------------- */
.anatanitim,
.about-section,
.intro-section {
  background-color: var(--navy-900) !important;
}
.tanslogan,
.about-slogan {
  color: var(--brand-400) !important;
}
.anatanitim h2,
.about-section h2 {
  color: var(--text-primary) !important;
}
.anatanitim p,
.about-section p {
  color: var(--navy-300) !important;
}

/* --- Stats / Numbers ------------------------------------------------------- */
.rakamlarlabiz,
.istatistik,
.stats-section,
.numbers-section {
  background-color: var(--navy-800) !important;
  border-top: 1px solid var(--navy-700) !important;
  border-bottom: 1px solid var(--navy-700) !important;
}
.istatistik .number,
.istatistik .stat-value,
.rakamlarlabiz .count {
  color: var(--brand-400) !important;
  font-weight: 700 !important;
}
.istatistik .label,
.istatistik p,
.rakamlarlabiz p {
  color: var(--navy-300) !important;
}

/* --- Testimonials ---------------------------------------------------------- */
.musterigorusleri,
.testimonials-section {
  background-color: var(--navy-900) !important;
}
.musyorum,
.testimonial-card {
  background-color: var(--navy-700) !important;
  border: 1px solid var(--navy-600) !important;
  border-radius: 10px !important;
}
.musyorum p,
.testimonial-card p {
  color: var(--navy-300) !important;
}
.yorumyapan,
.testimonial-author {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.yorumyapan span,
.testimonial-author span {
  color: var(--navy-300) !important;
}

/* --- Domain Check ---------------------------------------------------------- */
.homedomainarea,
.domain-search-section {
  background-color: var(--navy-800) !important;
  border-top: 1px solid var(--navy-700) !important;
  border-bottom: 1px solid var(--navy-700) !important;
}
.homedomainarea h2,
.domain-search-section h2 {
  color: var(--text-primary) !important;
}
.homedomainarea input,
.domain-search-section input {
  background-color: var(--navy-700) !important;
  border: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
  border-radius: 6px 0 0 6px !important;
}
.homedomainarea input::placeholder {
  color: var(--navy-400) !important;
}

/* --- Blog / News Section --------------------------------------------------- */
.blogvehaber,
.haberblog,
.blog-section {
  background-color: var(--navy-900) !important;
}
.haberblog .haber-card,
.blog-post-card {
  background-color: var(--navy-700) !important;
  border: 1px solid var(--navy-600) !important;
  border-radius: 10px !important;
}
.haberblog h3,
.blog-section h3 {
  color: var(--text-primary) !important;
}
.haberblog p,
.blog-section p {
  color: var(--navy-300) !important;
}

/* =============================================================================
   TASK 4 -- PRODUCTS: Category pages, pricing cards, product tables, FAQ,
             feature blocks, jQuery UI, discount labels, tabs
   ============================================================================= */

/* --- Package / Pricing Title ----------------------------------------------- */
.pakettitle,
.tpakettitle,
.pricing-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

/* --- Pricing Table Wrapper ------------------------------------------------- */
.tablopaketler,
.pricing-table,
.plans-table {
  background-color: transparent !important;
}

/* --- Pricing Card ---------------------------------------------------------- */
.tablepaket,
.pricing-card,
.plan-card {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}
.tablepaket:hover,
.pricing-card:hover {
  border-color: var(--brand-600) !important;
  box-shadow: 0 8px 32px rgba(26, 143, 203, 0.2) !important;
  transform: translateY(-4px) !important;
}

/* --- Popular / Featured Card ----------------------------------------------- */
.tablepopular,
.popular-card,
.featured-plan {
  background-color: var(--navy-700) !important;
  border: 2px solid var(--brand-500) !important;
  box-shadow: 0 8px 32px rgba(26, 143, 203, 0.25) !important;
}
.tablepopular .tpakettitle,
.popular-card .plan-name {
  color: var(--brand-400) !important;
}

/* --- Price Display --------------------------------------------------------- */
.amount_spot_view,
.price-amount,
.plan-price {
  color: var(--brand-400) !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
}
.currpos,
.currpos1,
.currpos2,
.currency-pos,
.price-currency {
  color: var(--brand-400) !important;
}

/* --- Product / Hosting Features List -------------------------------------- */
.products_features,
.paketline,
.feature-list,
.plan-features {
  border-top: 1px solid var(--navy-700) !important;
}
.paketline li,
.products_features li,
.feature-list li {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-700) !important;
  padding: 8px 0 !important;
}
.paketline li i.fa-check,
.paketline li .check-icon {
  color: var(--success-500) !important;
}
.paketline li i.fa-times,
.paketline li .times-icon {
  color: var(--danger-500) !important;
}

/* --- Order / Submit Buttons in Products ------------------------------------ */
.gonderbtn,
.green.lbtn,
.order-btn,
.addtocart-btn {
  background-color: var(--brand-600) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease !important;
}
.gonderbtn:hover,
.green.lbtn:hover,
.order-btn:hover {
  background-color: var(--brand-500) !important;
}

/* --- Out of Stock ---------------------------------------------------------- */
#sunucutukenbtn,
.sunucustok,
.out-of-stock {
  background-color: var(--navy-600) !important;
  color: var(--navy-300) !important;
  border-radius: 8px !important;
}

/* --- Product Category / Server List --------------------------------------- */
.categoriesproduct,
.sunucular,
.product-categories {
  background-color: transparent !important;
}
.horizontal-list,
.servercattitle,
.category-title {
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--brand-600) !important;
  padding-bottom: 8px !important;
}

/* --- Table Slogan ---------------------------------------------------------- */
.tableslogan {
  color: var(--navy-300) !important;
}

/* --- Hosting Features Detail ----------------------------------------------- */
.detail-products-features,
.hostingozellikler,
.hostozellk {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 8px !important;
}
.detail-products-features h3,
.hostingozellikler h3 {
  color: var(--text-primary) !important;
}
.detail-products-features li,
.hostingozellikler li {
  color: var(--navy-300) !important;
  border-bottom: 1px solid var(--navy-700) !important;
}

/* --- FAQ / Accordion ------------------------------------------------------- */
.sss,
.faq-section {
  background-color: transparent !important;
}
#accordion,
.accordion {
  border: 1px solid var(--navy-700) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
#accordion .ui-accordion-header,
.accordion-header,
.accordion h3 {
  background-color: var(--navy-800) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-700) !important;
  cursor: pointer !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
}
#accordion .ui-accordion-header:hover,
.accordion-header:hover {
  background-color: var(--navy-700) !important;
  color: var(--brand-400) !important;
}
#accordion .ui-accordion-header.ui-state-active,
.accordion-header.active {
  background-color: var(--navy-700) !important;
  color: var(--brand-400) !important;
  border-bottom-color: var(--brand-600) !important;
}
#accordion .ui-accordion-content,
.accordion-content {
  background-color: var(--navy-800) !important;
  color: var(--navy-300) !important;
  border-top: none !important;
  padding: 16px !important;
}

/* --- jQuery UI Widgets ----------------------------------------------------- */
.ui-widget,
.ui-widget-content {
  background-color: var(--navy-800) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--navy-700) !important;
}
.ui-widget-header {
  background-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--navy-600) !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
  background-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
  border-color: var(--navy-600) !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-state-hover,
.ui-widget-content .ui-state-hover {
  background-color: var(--brand-600) !important;
  color: #fff !important;
  border-color: var(--brand-500) !important;
}
.ui-state-focus,
.ui-widget-content .ui-state-focus {
  outline: 2px solid var(--brand-400) !important;
}

/* --- Discount / Ribbon Labels ---------------------------------------------- */
.indirim,
.discount-badge,
.sale-badge {
  background-color: var(--warning-500) !important;
  color: #000 !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}
.ribbon,
.ribbon1,
.ribbon2,
.ribbon3,
.ribbonperiod {
  background-color: var(--brand-600) !important;
  color: #fff !important;
}
.dnewprice,
.new-price {
  color: var(--brand-400) !important;
  font-weight: 700 !important;
}
.doldprice,
.old-price {
  color: var(--navy-400) !important;
  text-decoration: line-through !important;
}

/* --- Tabs (MioTab) --------------------------------------------------------- */
.miotab-nav,
.miotab-header,
.tab-navigation {
  background-color: var(--navy-800) !important;
  border-bottom: 2px solid var(--navy-700) !important;
}
.miotab-nav li,
.miotab-header li,
.tab-navigation li {
  color: var(--navy-300) !important;
}
.miotab-nav li.active,
.miotab-nav li:hover,
.miotab-header li.active,
.tab-navigation li.active {
  color: var(--brand-400) !important;
  border-bottom: 2px solid var(--brand-500) !important;
}
.miotab-content,
.tab-content {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-top: none !important;
  color: var(--text-primary) !important;
  padding: 16px !important;
}

/* =============================================================================
   TASK 5 -- FOOTER: Footer blocks, social, newsletter, cookie popup, GDPR badge
   ============================================================================= */

/* --- Footer Main ----------------------------------------------------------- */
.footer,
footer,
.site-footer {
  background-color: var(--navy-950) !important;
  border-top: 1px solid var(--navy-700) !important;
  color: var(--navy-300) !important;
}

/* --- Footer Slogan --------------------------------------------------------- */
.footslogan {
  color: var(--navy-300) !important;
}

/* --- Footer Blocks --------------------------------------------------------- */
.footblok,
.footer-block,
.footer-widget {
  background-color: transparent !important;
}
.footblok h3,
.footblok h4,
.footer-block h3,
.footer-block h4,
.footer-widget h3,
.footer-widget h4 {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-700) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}
.footinfos,
.footer-info {
  color: var(--navy-300) !important;
}
.footblok ul li a,
.footer-block ul li a,
.footer-widget ul li a {
  color: var(--navy-300) !important;
  transition: color 0.2s ease !important;
}
.footblok ul li a:hover,
.footer-block ul li a:hover,
.footer-widget ul li a:hover {
  color: var(--brand-400) !important;
}

/* --- Footer Copyright ------------------------------------------------------ */
.footcopyright,
.footer-copyright,
.copyright-bar {
  background-color: var(--navy-950) !important;
  border-top: 1px solid var(--navy-700) !important;
  color: var(--navy-400) !important;
  padding: 16px 0 !important;
}
.footcopyright a,
.footer-copyright a {
  color: var(--navy-300) !important;
}
.footcopyright a:hover,
.footer-copyright a:hover {
  color: var(--brand-400) !important;
}

/* --- Footer Logo ----------------------------------------------------------- */
.footlogo,
.footer-logo {
  color: var(--text-primary) !important;
}
.footlogo img,
.footer-logo img {
  filter: brightness(1.1) !important;
}

/* --- Footer Social Icons --------------------------------------------------- */
.footsosyal,
.footer-social {
  background-color: transparent !important;
}
.footsosyal a,
.footer-social a {
  background-color: var(--navy-700) !important;
  color: var(--navy-300) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.footsosyal a:hover,
.footer-social a:hover {
  background-color: var(--brand-600) !important;
  color: #fff !important;
}

/* --- Email/Newsletter ------------------------------------------------------ */
.ebulten,
.ebultencont,
.newsletter-section,
.newsletter-form {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 8px !important;
}
.ebulten h3,
.newsletter-section h3 {
  color: var(--text-primary) !important;
}
.ebulten p,
.newsletter-section p {
  color: var(--navy-300) !important;
}
.ebulten input[type="email"],
.newsletter-form input[type="email"] {
  background-color: var(--navy-700) !important;
  border: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
}
.ebulten input[type="email"]::placeholder,
.newsletter-form input[type="email"]::placeholder {
  color: var(--navy-400) !important;
}

/* --- Cookie Popup (must match #mio-cookie-popup .class specificity from theme.css) */
#mio-cookie-popup,
.cookie-popup,
.cookie-banner {
  background-color: #0f1520 !important;
  background: #0f1520 !important;
  border: 1px solid #161d2e !important;
  color: #e2e8f0 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4) !important;
}
#mio-cookie-popup .mio-cookie-popup__card,
#mio-cookie-popup .mio-cookie-popup__c-p-card {
  background: #0f1520 !important;
  background-color: #0f1520 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4) !important;
}
#mio-cookie-popup button {
  background: #155f96 !important;
  background-color: #155f96 !important;
}
#mio-cookie-popup p,
.cookie-popup p {
  color: var(--navy-300) !important;
}
#mio-cookie-popup a,
.cookie-popup a {
  color: var(--brand-400) !important;
}
#mio-cookie-popup .btn,
.cookie-popup .btn {
  background-color: var(--brand-600) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* --- GDPR Badge -- Hidden --------------------------------------------------- */
.gprimage {
  display: none !important;
}

/* --- Social Share Buttons -- hidden (not useful on game server billing) ----- */
.paypasbutonlar {
  display: none !important;
}

/* --- Order Steps Number Circle --------------------------------------------- */
.ilanasamax h3 {
  background: #161d2e !important;
  background-color: #161d2e !important;
  color: #5a6d8e !important;
  text-shadow: none !important;
}

#asamaaktif h3 {
  background: #1a8fcb !important;
  background-color: #1a8fcb !important;
  color: #fff !important;
  text-shadow: none !important;
}

#asamaaktif {
  color: #1a8fcb !important;
}

/* --- Cookie Popup ----------------------------------------------------------- */
.mio-cookie-popup__c-p-card,
.mio-cookie-popup__card,
[class*="mio-cookie-popup"] {
  background-color: #0f1520 !important;
  background: #0f1520 !important;
  border: 1px solid #161d2e !important;
  color: #e2e8f0 !important;
}

[class*="mio-cookie-popup"] a {
  color: #3aa8e0 !important;
}

[class*="mio-cookie-popup"] button,
[class*="mio-cookie-popup"] [class*="btn"] {
  background-color: #155f96 !important;
  background: #155f96 !important;
  color: #fff !important;
}

/* --- Header White / Breadcrumb container ----------------------------------- */
.headerwhite {
  background-color: transparent !important;
  background: none !important;
}

.tablopaketler {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* =============================================================================
   TASK 6 -- FORMS & AUTH: Input types, sign-in/sign-up, contact, buttons
   ============================================================================= */

/* --- All Inputs ------------------------------------------------------------ */
input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="file"],
textarea,
select {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(26, 143, 203, 0.2) !important;
  outline: none !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--navy-400) !important;
}
select option {
  background-color: var(--navy-800) !important;
  color: var(--text-primary) !important;
}

/* --- Custom Checkbox ------------------------------------------------------- */
.checkbox-custom,
.custom-checkbox {
  border: 2px solid var(--navy-500) !important;
  background-color: var(--navy-800) !important;
  border-radius: 4px !important;
}
.checkbox-custom:checked,
.custom-checkbox:checked {
  background-color: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
}

/* --- Captcha Input --------------------------------------------------------- */
.captchainput {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
}

/* --- Auth Page Wrapper ----------------------------------------------------- */
#uyeolgirisbody,
.auth-page,
.login-page {
  background-color: var(--navy-900) !important;
}
.uyeolgirishead,
.auth-header,
.login-header {
  background-color: var(--navy-800) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-700) !important;
}
.uyeolgirisslogan,
.auth-slogan {
  color: var(--navy-300) !important;
}

/* --- Auth Form Container --------------------------------------------------- */
.uyeol,
.girisyap,
.auth-form,
.login-form,
.register-form {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* --- Sign-Up Container ----------------------------------------------------- */
.signupcon,
.signup-container {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 12px !important;
}

/* --- Social Connect -------------------------------------------------------- */
.socialconnect,
.social-login {
  border-top: 1px solid var(--navy-700) !important;
}
.socialconnect a,
.social-login a {
  background-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--navy-600) !important;
  border-radius: 6px !important;
}
.socialconnect a:hover,
.social-login a:hover {
  background-color: var(--navy-600) !important;
}

/* --- Secure Options -------------------------------------------------------- */
.secureoptions {
  color: var(--navy-300) !important;
}
.secureoptions i {
  color: var(--success-500) !important;
}

/* --- Forgot Password / Create Account Links -------------------------------- */
.sifreunuttulink,
.createnewaccountlink,
.auth-link {
  color: var(--brand-400) !important;
}
.sifreunuttulink:hover,
.createnewaccountlink:hover,
.auth-link:hover {
  color: var(--brand-300) !important;
}

/* --- Contact Page ---------------------------------------------------------- */
.iletisimpage {
  background-color: var(--navy-900) !important;
}
.iletisimblok,
.contact-block {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
}
.iletisimblok h3,
.contact-block h3 {
  color: var(--text-primary) !important;
}
.iletisimblok p,
.iletisimblok address,
.contact-block p {
  color: var(--navy-300) !important;
}
.iletisimformu,
.contact-form {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
  padding: 24px !important;
}
.iletisimtitle,
.contact-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
.iletisimslogan,
.contact-slogan {
  color: var(--navy-300) !important;
}

/* --- Buttons -- Base -------------------------------------------------------- */
.btn,
button,
[type="submit"],
[type="button"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* --- Link Button (lbtn) ---------------------------------------------------- */
.lbtn {
  background-color: var(--brand-600) !important;
  color: #fff !important;
  border: none !important;
}
.lbtn:hover {
  background-color: var(--brand-500) !important;
  color: #fff !important;
}

/* --- Small Button (sbtn) --------------------------------------------------- */
.sbtn {
  background-color: var(--navy-600) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--navy-500) !important;
  font-size: 0.875rem !important;
  padding: 4px 12px !important;
}
.sbtn:hover {
  background-color: var(--navy-500) !important;
  color: var(--brand-400) !important;
}

/* --- Green Button ---------------------------------------------------------- */
.yesilbtn,
.btn-success,
.btn-green {
  background-color: var(--success-500) !important;
  color: #fff !important;
  border: none !important;
}
.yesilbtn:hover,
.btn-success:hover {
  background-color: #16a34a !important;
  color: #fff !important;
}

/* --- Blue Button ----------------------------------------------------------- */
.mavibtn,
.btn-primary,
.btn-blue {
  background-color: var(--brand-600) !important;
  color: #fff !important;
  border: none !important;
}
.mavibtn:hover,
.btn-primary:hover {
  background-color: var(--brand-500) !important;
  color: #fff !important;
}

/* --- Metal / Gray Button --------------------------------------------------- */
.metalbtn,
.graybtn,
.btn-secondary,
.btn-gray {
  background-color: var(--navy-600) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--navy-500) !important;
}
.metalbtn:hover,
.graybtn:hover,
.btn-secondary:hover {
  background-color: var(--navy-500) !important;
  color: #fff !important;
}

/* --- Red / Danger Button --------------------------------------------------- */
.redbtn,
.btn-danger,
.btn-red {
  background-color: var(--danger-500) !important;
  color: #fff !important;
  border: none !important;
}
.redbtn:hover,
.btn-danger:hover {
  background-color: #dc2626 !important;
  color: #fff !important;
}

/* --- Orange / Warning Button ----------------------------------------------- */
.turuncbtn,
.btn-warning,
.btn-orange {
  background-color: var(--warning-500) !important;
  color: #000 !important;
  border: none !important;
}
.turuncbtn:hover,
.btn-warning:hover {
  background-color: #d97706 !important;
  color: #000 !important;
}

/* --- Bordered / Outline Button --------------------------------------------- */
.borderedbtn,
.btn-outline,
.btn-bordered {
  background-color: transparent !important;
  color: var(--brand-400) !important;
  border: 2px solid var(--brand-500) !important;
}
.borderedbtn:hover,
.btn-outline:hover {
  background-color: var(--brand-600) !important;
  color: #fff !important;
}

/* =============================================================================
   TASK 7 -- CLIENT AREA: Dashboard, sidebar, tickets, invoices, account,
             orders, cart, knowledge base, DataTables, modals, tooltips
   ============================================================================= */

/* --- Modern Panel Wrapper -------------------------------------------------- */
#modernpanel,
.modernpanel {
  background-color: var(--navy-900) !important;
}

/* --- Left Sidebar ---------------------------------------------------------- */
.leftbar,
.sidebar,
.left-sidebar {
  background-color: var(--navy-950) !important;
  border-right: 1px solid var(--navy-700) !important;
}

/* --- Right Content Area ---------------------------------------------------- */
.rightcontent,
.main-content,
.right-content {
  background-color: var(--navy-900) !important;
  color: var(--text-primary) !important;
}
.rightconhead,
.content-header {
  background-color: var(--navy-800) !important;
  border-bottom: 1px solid var(--navy-700) !important;
  color: var(--text-primary) !important;
}

/* --- Client Menu ----------------------------------------------------------- */
.modernclientmenu,
.client-menu {
  background-color: var(--navy-950) !important;
}
.modernclientmenu a,
.client-menu a {
  color: var(--navy-300) !important;
  border-bottom: 1px solid var(--navy-800) !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}
.modernclientmenu a:hover,
.client-menu a:hover {
  background-color: var(--navy-700) !important;
  color: var(--brand-400) !important;
}
.modernclientmenu a.active,
.modernclientmenu li.active > a,
.client-menu a.active {
  background-color: var(--navy-700) !important;
  color: var(--brand-400) !important;
  border-left: 3px solid var(--brand-500) !important;
}
.modernclientmenu i,
.client-menu i {
  color: var(--navy-400) !important;
  margin-right: 8px !important;
}
.modernclientmenu a:hover i,
.modernclientmenu a.active i {
  color: var(--brand-400) !important;
}

/* --- Client Dashboard Blocks ----------------------------------------------- */
.moderncliendblock,
.mclientlastblocks,
.dashboard-block,
.stat-block {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
  transition: box-shadow 0.2s ease !important;
}
.moderncliendblock:hover,
.dashboard-block:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
.moderncliendblock h3,
.mclientlastblocks h3,
.dashboard-block h3 {
  color: var(--text-primary) !important;
}
.moderncliendblock p,
.mclientlastblocks p,
.dashboard-block p {
  color: var(--navy-300) !important;
}

/* --- Panel Title & Content ------------------------------------------------- */
.mpaneltitle,
.panel-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--navy-700) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}
.mpanelrightcon,
.panel-right-content {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 8px !important;
}
.mpanelbtns,
.panel-buttons {
  border-top: 1px solid var(--navy-700) !important;
  padding-top: 12px !important;
}
.mpanelblok,
.panel-block {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

/* --- No Entry / Empty State ------------------------------------------------ */
.noentryblock,
.empty-state {
  background-color: var(--navy-800) !important;
  border: 1px dashed var(--navy-600) !important;
  border-radius: 10px !important;
  color: var(--navy-300) !important;
  text-align: center !important;
  padding: 40px !important;
}
.noentryblock i,
.empty-state i {
  color: var(--navy-500) !important;
  font-size: 3rem !important;
}

/* --- Notifications --------------------------------------------------------- */
.wclientnotifi,
.notifications,
.notification-panel {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.wclientnotifi .notif-item,
.notification-item {
  border-bottom: 1px solid var(--navy-700) !important;
  color: var(--text-primary) !important;
}
.wclientnotifi .notif-item:hover,
.notification-item:hover {
  background-color: var(--navy-700) !important;
}
.notifi-count,
.notification-badge {
  background-color: var(--danger-500) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

/* --- Product Info ---------------------------------------------------------- */
.productinfo,
.product-detail {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
}
.productinfo h3,
.product-detail h3 {
  color: var(--text-primary) !important;
}
.productinfo p,
.product-detail p {
  color: var(--navy-300) !important;
}

/* --- Invoices -------------------------------------------------------------- */
.faturalarim,
.invoices-page {
  background-color: transparent !important;
}
.faturabilgisi,
.invoice-info {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
  padding: 20px !important;
}
.inv-header,
.invheader,
.invoice-header {
  background-color: var(--navy-700) !important;
  border-bottom: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
}
.inv-row,
.invrow,
.invoice-row {
  border-bottom: 1px solid var(--navy-700) !important;
  color: var(--text-primary) !important;
}
.inv-row:hover,
.invrow:hover,
.invoice-row:hover {
  background-color: var(--navy-700) !important;
}
.inv-total,
.invtotal,
.invoice-total {
  background-color: var(--navy-700) !important;
  color: var(--brand-400) !important;
  font-weight: 700 !important;
}
.inv-status-paid,
.status-paid {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: var(--success-500) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}
.inv-status-unpaid,
.status-unpaid {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: var(--warning-500) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}
.inv-status-overdue,
.status-overdue {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: var(--danger-500) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}

/* --- Payment Methods ------------------------------------------------------- */
.odemeyontem,
.payment-methods {
  background-color: transparent !important;
}
.bankablok,
.payment-block {
  background-color: var(--navy-800) !important;
  border: 2px solid var(--navy-700) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.bankablok:hover,
.payment-block:hover {
  border-color: var(--brand-500) !important;
  background-color: var(--navy-700) !important;
}
.bankablok.selected,
.payment-block.selected,
.bankablok.active {
  border-color: var(--brand-500) !important;
  background-color: rgba(26, 143, 203, 0.1) !important;
}
.bankablok h4,
.payment-block h4 {
  color: var(--text-primary) !important;
}
.bankablok p,
.payment-block p {
  color: var(--navy-300) !important;
}

/* --- Balance Page ---------------------------------------------------------- */
.balancepage,
.credit-page {
  background-color: transparent !important;
}
.balancepage .balance-card {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
}
.balancepage .balance-amount {
  color: var(--success-500) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
}

/* --- Support / Ticket Info ------------------------------------------------- */
.destekinfo,
.support-info {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
}
.destekinfo h3,
.support-info h3 {
  color: var(--text-primary) !important;
}
.destekinfo p,
.support-info p {
  color: var(--navy-300) !important;
}
.ticketdetail,
.ticket-detail {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
}
.ticketinfos,
.ticket-info {
  background-color: var(--navy-700) !important;
  border-bottom: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
  padding: 12px 16px !important;
  border-radius: 10px 10px 0 0 !important;
}

/* --- Ticket Detail Messages ------------------------------------------------ */
.destekdetaymsj,
.ticket-message {
  border-bottom: 1px solid var(--navy-700) !important;
  padding: 16px !important;
}
.destekdetaymsj:nth-child(even),
.ticket-message:nth-child(even) {
  background-color: var(--navy-700) !important;
}
.destekdetaymsj p,
.ticket-message p {
  color: var(--text-primary) !important;
}
.destekdetaymsj .msj-meta,
.ticket-message .meta {
  color: var(--navy-300) !important;
  font-size: 0.8rem !important;
}
#yetkilimsj,
.staff-reply {
  background-color: rgba(26, 143, 203, 0.08) !important;
  border-left: 3px solid var(--brand-500) !important;
}

/* --- Account Settings ------------------------------------------------------ */
.hesapbilgilerim,
.account-settings {
  background-color: transparent !important;
}
.hesapbilgilerim .form-section,
.account-form-section {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

/* --- Order Information ----------------------------------------------------- */
.siparisbilgileri,
.order-info {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
}

/* --- Order Steps / Stages -------------------------------------------------- */
.ilanasamalar,
.order-steps,
.checkout-steps {
  background-color: var(--navy-800) !important;
  border-bottom: 1px solid var(--navy-700) !important;
  padding: 12px 0 !important;
}
.ilanasamalar .asama,
.order-step,
.checkout-step {
  color: var(--navy-300) !important;
}
#asamaaktif,
.asama-aktif,
.order-step.active,
.checkout-step.active {
  color: var(--brand-400) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--brand-500) !important;
}
.ilanasamalar .asama.completed,
.order-step.completed {
  color: var(--success-500) !important;
}

/* --- Order Period Block ---------------------------------------------------- */
.orderperiodblock,
.orderperiodblock1,
.orderperiodblock2,
.period-block,
.billing-period {
  background-color: var(--navy-800) !important;
  border: 2px solid var(--navy-700) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.orderperiodblock:hover,
.period-block:hover {
  border-color: var(--brand-500) !important;
  background-color: var(--navy-700) !important;
}
.orderperiodblock.selected,
.period-block.selected {
  border-color: var(--brand-500) !important;
  background-color: rgba(26, 143, 203, 0.1) !important;
}
.periodselectbox {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
}

/* --- Shopping Cart --------------------------------------------------------- */
.sepet,
.sepetblok,
.sepetinfo,
.sepettoplam,
.cart-wrapper,
.cart-block,
.cart-total {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
}
.sepetblok h3,
.cart-block h3 {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-700) !important;
  padding-bottom: 8px !important;
}
.sepetinfo,
.cart-info {
  color: var(--text-primary) !important;
}
.sepettoplam,
.cart-total {
  border-top: 2px solid var(--navy-700) !important;
}
.sepettoplam .total-label,
.cart-total .total-label {
  color: var(--navy-300) !important;
}
.sepettoplam .total-amount,
.cart-total .total-amount {
  color: var(--brand-400) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

/* --- Checkout / Order Flow Aliases ----------------------------------------- */
#alisveris,
#alisverissepeti,
#alisverisasamalari,
.alisveris-wrapper {
  background-color: var(--navy-900) !important;
}

/* --- User Hosting (uh) ----------------------------------------------------- */
.uhblok,
.uhbaslik,
.uhaltbaslik,
.uhinfo,
.uhoverview,
.user-hosting-block {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 8px !important;
}
.uhbaslik,
.uhaltbaslik {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.uhinfo p,
.uhinfo span {
  color: var(--navy-300) !important;
}

/* --- Knowledge Base -------------------------------------------------------- */
.bilgibankasi,
.bilgibanka,
.kb-page,
.knowledge-base {
  background-color: transparent !important;
}
.bilgibankasi .kb-category,
.bilgibanka .category-block,
.kb-category {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
.bilgibankasi .kb-category:hover,
.kb-category:hover {
  border-color: var(--brand-600) !important;
  box-shadow: 0 4px 16px rgba(26, 143, 203, 0.15) !important;
}
.kb-category h3 {
  color: var(--text-primary) !important;
}
.kb-category p,
.kb-category a {
  color: var(--navy-300) !important;
}
.kb-category a:hover {
  color: var(--brand-400) !important;
}
.kb-article-content,
.article-content {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 10px !important;
  padding: 24px !important;
  color: var(--text-primary) !important;
}

/* --- DataTables ------------------------------------------------------------ */
.dataTables_wrapper {
  color: var(--text-primary) !important;
}
.dataTables_filter label,
.dataTables_length label {
  color: var(--text-primary) !important;
}
.dataTables_filter input {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}
.dataTables_info {
  color: var(--navy-300) !important;
}
.dataTables_paginate .paginate_button {
  background-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--navy-600) !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
  background-color: var(--brand-600) !important;
  color: #fff !important;
  border-color: var(--brand-500) !important;
}
.dataTables_paginate .paginate_button.disabled {
  background-color: var(--navy-800) !important;
  color: var(--navy-500) !important;
}

/* --- Tables (General & Striped) ------------------------------------------- */
.table,
table,
table.dataTable {
  background-color: var(--navy-800) !important;
  color: var(--text-primary) !important;
  border-color: var(--navy-700) !important;
}
.table thead th,
table thead th {
  background-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--navy-600) !important;
  font-weight: 600 !important;
}
.table tbody td,
table tbody td {
  border-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
}
.table-striped tbody tr:nth-of-type(odd),
table.dataTable tbody tr:nth-of-type(odd) {
  background-color: var(--navy-800) !important;
}
.table-striped tbody tr:nth-of-type(even),
table.dataTable tbody tr:nth-of-type(even) {
  background-color: var(--navy-700) !important;
}
.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: var(--navy-600) !important;
}
.table-bordered,
table.dataTable.table-bordered {
  border: 1px solid var(--navy-700) !important;
}
.table-bordered th,
.table-bordered td {
  border: 1px solid var(--navy-700) !important;
}

/* --- Modal Dialogs --------------------------------------------------------- */
.modalDialog,
.modal-wrapper {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.modalDialog > div,
.modal-content {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
  color: var(--text-primary) !important;
}
.modalDialog .modal-header,
.modal-header {
  background-color: var(--navy-700) !important;
  border-bottom: 1px solid var(--navy-600) !important;
  color: var(--text-primary) !important;
  border-radius: 12px 12px 0 0 !important;
}
.modalDialog .modal-footer,
.modal-footer {
  background-color: var(--navy-700) !important;
  border-top: 1px solid var(--navy-600) !important;
  border-radius: 0 0 12px 12px !important;
}
.modalDialog .close,
.modal-close,
button.close {
  color: var(--navy-300) !important;
  opacity: 1 !important;
}
.modalDialog .close:hover,
.modal-close:hover {
  color: var(--text-primary) !important;
}

/* --- SweetAlert2 ----------------------------------------------------------- */
.swal2-popup {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
}
.swal2-title {
  color: var(--text-primary) !important;
}
.swal2-content,
.swal2-html-container {
  color: var(--navy-300) !important;
}
.swal2-actions button {
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.swal2-confirm {
  background-color: var(--brand-600) !important;
  color: #fff !important;
}
.swal2-cancel {
  background-color: var(--navy-600) !important;
  color: var(--text-primary) !important;
}
.swal2-icon.swal2-warning {
  border-color: var(--warning-500) !important;
  color: var(--warning-500) !important;
}
.swal2-icon.swal2-error {
  border-color: var(--danger-500) !important;
  color: var(--danger-500) !important;
}
.swal2-icon.swal2-success {
  border-color: var(--success-500) !important;
  color: var(--success-500) !important;
}
.swal2-icon.swal2-info {
  border-color: var(--brand-500) !important;
  color: var(--brand-500) !important;
}

/* --- iziModal -------------------------------------------------------------- */
.iziModal {
  background-color: var(--navy-800) !important;
  border: 1px solid var(--navy-700) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
  color: var(--text-primary) !important;
}
.iziModal .iziModal-header {
  background-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--navy-600) !important;
}
.iziModal .iziModal-content {
  color: var(--text-primary) !important;
}

/* --- Tooltips -------------------------------------------------------------- */
[data-tooltip],
[data-tooltip]::after {
  background-color: var(--navy-700) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--navy-600) !important;
  border-radius: 6px !important;
  font-size: 0.8rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* --- Back to Top ----------------------------------------------------------- */
.cd-top,
.back-to-top,
#backToTop {
  background-color: var(--brand-600) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
.cd-top:hover,
.back-to-top:hover {
  background-color: var(--brand-500) !important;
}

/* =============================================================================
   INLINE STYLE OVERRIDES -- Catch WiseCP's hardcoded inline backgrounds
   ============================================================================= */

/* --- White/Light Backgrounds - Navy --------------------------------------- */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background-color: #FFFFFF"],
[style*="background-color:#FFFFFF"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background: #ffffff"],
[style*="background:#ffffff"] {
  background-color: var(--navy-800) !important;
}

[style*="background-color: #f5f5f5"],
[style*="background-color:#f5f5f5"],
[style*="background-color: #f9f9f9"],
[style*="background-color:#f9f9f9"],
[style*="background-color: #eeeeee"],
[style*="background-color:#eeeeee"],
[style*="background-color: #e8e8e8"],
[style*="background-color:#e8e8e8"],
[style*="background: #f5f5f5"],
[style*="background:#f5f5f5"],
[style*="background: #f9f9f9"],
[style*="background:#f9f9f9"] {
  background-color: var(--navy-700) !important;
}

/* --- WiseCP Teal/Green Brand - Kujo Brand ---------------------------------- */
[style*="background-color: #009595"],
[style*="background-color:#009595"],
[style*="background: #009595"],
[style*="background:#009595"],
[style*="background-color: #00a4a4"],
[style*="background-color:#00a4a4"],
[style*="background-color: #00b0b0"],
[style*="background-color:#00b0b0"] {
  background-color: var(--brand-600) !important;
}

/* --- Dark Text Colors - Light ---------------------------------------------- */
[style*="color: #333"],
[style*="color:#333"],
[style*="color: #333333"],
[style*="color:#333333"],
[style*="color: #444"],
[style*="color:#444"],
[style*="color: #555"],
[style*="color:#555"],
[style*="color: #222"],
[style*="color:#222"],
[style*="color: #111"],
[style*="color:#111"],
[style*="color: black"],
[style*="color:black"],
[style*="color: #000"],
[style*="color:#000"] {
  color: var(--text-primary) !important;
}

/* --- Gray Text - Muted ----------------------------------------------------- */
[style*="color: #666"],
[style*="color:#666"],
[style*="color: #777"],
[style*="color:#777"],
[style*="color: #888"],
[style*="color:#888"],
[style*="color: #999"],
[style*="color:#999"],
[style*="color: #aaa"],
[style*="color:#aaa"],
[style*="color: #bbb"],
[style*="color:#bbb"] {
  color: var(--navy-300) !important;
}

/* --- Light Borders - Dark -------------------------------------------------- */
[style*="border-color: #fff"],
[style*="border-color:#fff"],
[style*="border-color: #ddd"],
[style*="border-color:#ddd"],
[style*="border-color: #eee"],
[style*="border-color:#eee"] {
  border-color: var(--navy-700) !important;
}

/* --- WiseCP Teal Brand Color (text) --------------------------------------- */
[style*="color: #009595"],
[style*="color:#009595"],
[style*="color: #00a4a4"],
[style*="color:#00a4a4"] {
  color: var(--brand-400) !important;
}

/* =============================================================================
   THEME VARIABLE OVERRIDES -- CSS custom properties WiseCP may use
   ============================================================================= */
:root {
  --primary-color: var(--brand-500) !important;
  --primary-dark: var(--brand-600) !important;
  --primary-light: var(--brand-300) !important;
  --secondary-color: var(--navy-500) !important;
  --text-color: var(--text-primary) !important;
  --body-bg: var(--navy-900) !important;
  --card-bg: var(--navy-800) !important;
  --border-color: var(--navy-700) !important;
  --input-bg: var(--navy-800) !important;
  --header-bg: var(--navy-950) !important;
  --footer-bg: var(--navy-950) !important;
  --success-color: var(--success-500) !important;
  --warning-color: var(--warning-500) !important;
  --danger-color: var(--danger-500) !important;
}

/* =============================================================================
   ADDITIONAL POLISH -- Final touches and edge cases
   ============================================================================= */

/* --- Selection Color ------------------------------------------------------- */
::selection {
  background-color: rgba(26, 143, 203, 0.4) !important;
  color: #fff !important;
}

/* --- Focus Visible --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-500) !important;
  outline-offset: 2px !important;
}

/* --- Images (prevent pure white bg bleed) ---------------------------------- */
img {
  max-width: 100% !important;
}

/* --- Pre / Code Blocks ----------------------------------------------------- */
pre, code {
  background-color: var(--navy-700) !important;
  color: var(--brand-300) !important;
  border: 1px solid var(--navy-600) !important;
  border-radius: 6px !important;
}
code {
  padding: 2px 6px !important;
}
pre code {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* --- Blockquotes ----------------------------------------------------------- */
blockquote {
  border-left: 4px solid var(--brand-600) !important;
  background-color: var(--navy-800) !important;
  color: var(--navy-300) !important;
  padding: 12px 16px !important;
  border-radius: 0 6px 6px 0 !important;
}

/* --- Loading / Spinner ----------------------------------------------------- */
.loading,
.spinner,
.preloader {
  background-color: var(--navy-900) !important;
}

/* --- Progress Bars --------------------------------------------------------- */
.progress {
  background-color: var(--navy-700) !important;
  border-radius: 6px !important;
}
.progress-bar {
  background-color: var(--brand-500) !important;
}

/* --- Alert Boxes (Bootstrap-style) ---------------------------------------- */
.alert {
  border-radius: 8px !important;
}
.alert-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}
.alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
}
.alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}
.alert-info {
  background-color: rgba(26, 143, 203, 0.15) !important;
  border-color: rgba(26, 143, 203, 0.4) !important;
  color: var(--brand-300) !important;
}

/* --- Lists in Content Areas ------------------------------------------------ */
ul li, ol li {
  color: var(--text-primary) !important;
}

/* --- Label / Form Labels --------------------------------------------------- */
label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* --- Strong / Bold Text ---------------------------------------------------- */
strong, b {
  color: var(--text-primary) !important;
}

/* --- Horizontal Rules ------------------------------------------------------ */
hr {
  border-color: var(--navy-700) !important;
}

/* (Playwright fixes moved to line ~975 -- before Task 6) */

/* =============================================================================
   MOBILE / RESPONSIVE OVERRIDES
   WiseCP sets explicit light colors in mobile breakpoints -- must counter them
   ============================================================================= */

@media only screen and (min-width: 320px) and (max-width: 1024px) {

  /* Mobile menu -- WiseCP sets background:#009595 */
  .menu ul {
    background: var(--navy-800) !important;
    border: 1px solid var(--navy-700) !important;
  }

  .menu li a {
    background: transparent !important;
    color: var(--navy-300) !important;
    border-bottom: 1px solid var(--navy-700) !important;
  }

  .menu li a:hover,
  .menu li:hover a {
    background: var(--navy-600) !important;
    color: var(--text-primary) !important;
  }

  .menu ul li ul {
    background: var(--navy-900) !important;
  }

  .menu ul li ul li a {
    background: transparent !important;
    color: var(--navy-300) !important;
  }

  .menu ul li ul li a:hover {
    background: var(--navy-600) !important;
    color: var(--text-primary) !important;
  }

  /* Mobile menu toggle icon */
  .menuAc {
    color: var(--text-primary) !important;
    text-shadow: none !important;
  }

  /* Mobile header */
  .sabithead {
    background-color: var(--navy-950) !important;
  }

  .sabithead .menu ul {
    background: var(--navy-800) !important;
  }

  .sabithead #sepeticon {
    color: var(--text-primary) !important;
  }

  /* Product cards -- full width on mobile */
  .tablepaket {
    background-color: var(--navy-800) !important;
    border: 1px solid var(--navy-700) !important;
    border-radius: 10px !important;
  }

  /* Footer blocks on mobile */
  .footblok {
    color: var(--navy-300) !important;
  }

  .footblok a {
    color: var(--navy-300) !important;
  }

  .footinfos {
    color: var(--navy-400) !important;
  }

  /* Modal on mobile */
  .modalDialog > div {
    background-color: var(--navy-800) !important;
    border: 1px solid var(--navy-700) !important;
    color: var(--text-primary) !important;
  }

  /* Sign-in/up mobile */
  .uyeol, .girisyap, .signupcon {
    background-color: var(--navy-800) !important;
    border-color: var(--navy-700) !important;
  }

  /* Feature cards on mobile */
  .ozellik {
    background-color: var(--navy-800) !important;
    border: 1px solid var(--navy-700) !important;
  }

  /* Stats section mobile */
  .istatistik {
    color: var(--text-primary) !important;
  }

  .istatistik h1 {
    color: var(--brand-400) !important;
  }

  /* Client area mobile */
  .mclientmobbtn {
    background-color: var(--navy-800) !important;
    border-color: var(--navy-700) !important;
    color: var(--text-primary) !important;
  }

  .leftbar {
    background-color: var(--navy-950) !important;
  }

  /* Breadcrumb on mobile */
  .sayfabaslik {
    background-color: var(--navy-800) !important;
  }

  /* Contact form mobile */
  .iletisimblok {
    background-color: var(--navy-800) !important;
    border-color: var(--navy-700) !important;
  }

  .iletisimformu {
    background-color: var(--navy-800) !important;
    border-color: var(--navy-700) !important;
  }
}

/* Small phone overrides */
@media only screen and (min-width: 320px) and (max-width: 374px) {
  .tablepaket {
    background-color: var(--navy-800) !important;
    border-color: var(--navy-700) !important;
  }
}

/* Tablet-specific */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .menu ul {
    background: var(--navy-800) !important;
  }
}

/* ─── Sign-up page fixes ─────────────────────────────────────────────────── */
.signup-stages-block {
  background: #161d2e !important;
  color: #5a6d8e !important;
  border-radius: 6px !important;
}
.signup-stages-block.active {
  background: #1a8fcb !important;
  color: #fff !important;
}
.clean-theme-signup-box-title,
[class*="signup-box-title"] {
  background: #0f1520 !important;
  color: #e2e8f0 !important;
  border-color: #161d2e !important;
}

/* ─── Order configuration page fix ───────────────────────────────────────── */
.skonfiginfo,
.skonfigside,
.sunucukonfigurasyonu,
.sunucugereksinim,
.sungenbil {
  background: #0f1520 !important;
  background-color: #0f1520 !important;
  border-color: #161d2e !important;
  color: #e2e8f0 !important;
}

/* End of kujo-dark.css */

/* --- Order period blocks: kill the inherited white gradient (theme.css sets a white
       background-image which background-color alone does not override) ----------- */
.orderperiodblock,
.orderperiodblock1,
.orderperiodblock2,
.period-block {
  background: var(--navy-800) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}
.orderperiodblock h2,
.orderperiodblock h3,
.orderperiodblock h4,
.orderperiodblock p {
  color: var(--text-primary) !important;
}
.orderperiodblock.active,
.orderperiodblock.selected {
  background: rgba(26, 143, 203, 0.12) !important;
  background-image: none !important;
  border-color: var(--brand-500) !important;
}
.orderperiodblock-con .periodselectbox {
  background: var(--navy-700) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}