/* ══════════════════════════════════════════════════════════════
   TEKNOROX — Light Mode Overrides
   Brand neon color: #99d51a  |  Dark navy: #0b1120
   ══════════════════════════════════════════════════════════════ */

/* ── Base ── */
html:not(.dark) body { background-color: #f5f7fa; color: #111827; }
html:not(.dark) .bg-bg,
html:not(.dark) body.bg-bg { background-color: #f5f7fa; }

/* ── Background stage (grid + blobs + particles) ── */
html:not(.dark) .bg-stage { background: #f5f7fa; }
/* Light mode'da renkli ambient blob'lar "leke" gibi görünüyor → gizle */
html:not(.dark) .bg-stage::before,
html:not(.dark) .bg-stage::after { display: none; }
html:not(.dark) .bg-stage-grid {
  background-image:
    linear-gradient(rgba(11, 17, 32, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 17, 32, 0.08) 1px, transparent 1px);
  opacity: 0.6;
}
html:not(.dark) .bg-stage-particle {
  background: #99d51a;
  box-shadow: 0 0 8px rgba(153, 213, 26, 0.55);
}

/* ── Brand neon ── */
html:not(.dark) .text-neon { color: #99d51a !important; }
html:not(.dark) .border-neon { border-color: #99d51a !important; }
html:not(.dark) .bg-neon { background-color: #99d51a !important; }
html:not(.dark) .sect-lbl { color: #99d51a !important; }

/* ── Nav ── */
html:not(.dark) .glass-nav {
  background: rgba(255,255,255,0.88) !important;
  border-bottom: none !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.10), 0 1px 0 rgba(0,0,0,0.06) !important;
}
html:not(.dark) .nav-a { color: #374151 !important; }
html:not(.dark) .nav-a:hover { color: #111827 !important; }

/* ── Integration icon backgrounds ── */
html:not(.dark) .icon-wrap.icon-blue    { background: rgba(59,130,246,0.1)  !important; }
html:not(.dark) .icon-wrap.icon-orange  { background: rgba(251,146,60,0.1)  !important; }
html:not(.dark) .icon-wrap.icon-red     { background: rgba(239,68,68,0.1)   !important; }
html:not(.dark) .icon-wrap.icon-green   { background: rgba(34,197,94,0.1)   !important; }
html:not(.dark) .icon-wrap.icon-pink    { background: rgba(236,72,153,0.1)  !important; }
html:not(.dark) .icon-wrap.icon-amber   { background: rgba(245,158,11,0.1)  !important; }
html:not(.dark) .icon-wrap.icon-emerald { background: rgba(16,185,129,0.1)  !important; }
html:not(.dark) .int-card .icon-wrap { filter: none !important; }

/* ── Text ── */
html:not(.dark) .text-white    { color: #111827 !important; }
html:not(.dark) .text-gray-300 { color: #374151 !important; }
html:not(.dark) .text-gray-400 { color: #6b7280 !important; }
html:not(.dark) .text-gray-500 { color: #6b7280 !important; }
html:not(.dark) .text-gray-600 { color: #4b5563 !important; }

/* ── Section backgrounds ── */
html:not(.dark) .bg-s1 { background-color: #ffffff !important; }
html:not(.dark) footer.bg-s1 { background-color: #f0f2f5 !important; }
html:not(.dark) footer .bg-\[#070b14\] { background-color: #d8dce3 !important; }
html:not(.dark) .bg-s2 { background-color: #f0f2f5 !important; }
html:not(.dark) .bg-s3 { background-color: #e8eaed !important; }

/* ── Cards ── */
html:not(.dark) .card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05) !important;
}
html:not(.dark) .card:hover {
  border-color: rgba(153,213,26,0.5) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(153,213,26,0.15) !important;
}
html:not(.dark) .card [style*="rgba(7,11,20"] { background: #f9fafb !important; }

/* ── Integration cards ── */
html:not(.dark) .int-card { background: #ffffff !important; border-color: #e5e7eb !important; }
html:not(.dark) .int-card.active {
  border-color: rgba(153,213,26,0.45) !important;
  box-shadow: 0 0 0 1px rgba(153,213,26,0.12), 0 0 22px rgba(153,213,26,0.18) !important;
}

/* ── Mega menu + dropdown ── */
html:not(.dark) .mega-panel { background: #ffffff !important; border-color: #e5e7eb !important; }
html:not(.dark) .dd-menu { background: #ffffff !important; border-color: #e5e7eb !important; }
html:not(.dark) #mob-panel { background: #ffffff !important; }

/* ── Accordion ── */
html:not(.dark) .acc-item { background: #ffffff !important; border-color: #e5e7eb !important; }

/* ── Hero mockup ── */
html:not(.dark) .hero-mockup-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}
html:not(.dark) .hero-mockup-card .mockup-stat { background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; }
html:not(.dark) .hero-mockup-card .mockup-row  { background: #f9fafb !important; border: 1px solid #e5e7eb !important; }

/* ── Language selector & theme toggle ── */
html:not(.dark) .lang-active  { color: #99d51a !important; }
html:not(.dark) .lang-inactive { color: #9ca3af !important; }
html:not(.dark) .lang-inactive:hover { color: #374151 !important; }
html:not(.dark) .lang-sep { color: #d1d5db !important; }
html:not(.dark) #theme-toggle {
  background: #f0f2f5 !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
}

/* ── Wave layers ── */
html:not(.dark) .tkn-parallax > use:nth-child(1) { fill: #99d51a !important; }
html:not(.dark) .tkn-parallax > use:nth-child(2) { fill: #99d51a !important; }
html:not(.dark) .tkn-parallax > use:nth-child(3) { fill: #99d51a !important; }
html:not(.dark) .tkn-parallax > use:nth-child(4) { fill: #f0f2f5 !important; }

/* ── Eco tabs ── */
html:not(.dark) .eco-tab {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #6b7280 !important;
}
html:not(.dark) .eco-tab:hover { color: #111827 !important; background: rgba(0,0,0,0.06) !important; }
html:not(.dark) .eco-tab.active { color: #ffffff !important; background: #0b1120 !important; border-color: #0b1120 !important; }

/* ── Feature tag pills ── */
html:not(.dark) .bg-white\/4           { background-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) .border-white\/8       { border-color: rgba(0,0,0,0.1) !important; }
html:not(.dark) .bg-white\/\[0\.03\]   { background-color: rgba(0,0,0,0.03) !important; }
html:not(.dark) .bg-white\/\[0\.055\]  { background-color: rgba(0,0,0,0.05) !important; }
html:not(.dark) .border-white\/\[0\.05\] { border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .border-white\/\[0\.07\] { border-color: rgba(0,0,0,0.1) !important; }

/* ── Dark border colours → light equivalents ── */
html:not(.dark) .border-\[\#0e1528\],
html:not(.dark) .border-\[\#142035\],
html:not(.dark) .border-\[\#1a2844\],
html:not(.dark) .border-\[\#111f33\],
html:not(.dark) .border-\[\#162035\],
html:not(.dark) .border-\[\#1c1c1c\],
html:not(.dark) .border-\[\#0f1a2a\],
html:not(.dark) .border-\[\#1e3050\],
html:not(.dark) .border-\[\#1f3055\] { border-color: #e5e7eb !important; }

html:not(.dark) .divide-\[\#142035\] > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb !important; }

/* ── Dark bg hex classes ── */
html:not(.dark) .bg-\[\#0b1120\] { background-color: #f8f9fb !important; }
html:not(.dark) .bg-\[\#070b14\] { background-color: #f5f7fa !important; }
html:not(.dark) .bg-\[\#0e1528\] { background-color: #f0f2f5 !important; }

/* ── btn-g ── */
html:not(.dark) .btn-g { border-color: rgba(0,0,0,0.15) !important; color: #374151 !important; }
html:not(.dark) .btn-g:hover {
  border-color: rgba(153,213,26,0.6) !important;
  color: #99d51a !important;
  background: rgba(153,213,26,0.08) !important;
}

/* ── Social icon ── */
html:not(.dark) .soc { color: #9ca3af !important; }

/* ── feat-blk dot ── */
html:not(.dark) .feat-dot { background: #d1d5db !important; }
html:not(.dark) .feat-blk.on .feat-dot { background: #99d51a !important; }

/* ── Soft green icon wraps → dark navy ── */
html:not(.dark) [style*="rgba(153,213,26,0.1)"] { background: #0b1120 !important; border-color: #0b1120 !important; }
html:not(.dark) [style*="rgba(153,213,26,0.03)"],
html:not(.dark) [style*="rgba(153,213,26,0.04)"] {
  background: rgba(11,17,32,0.05) !important;
  border-color: rgba(11,17,32,0.12) !important;
}

/* ── Badges ── */
html:not(.dark) .badge-ec  { background: rgba(153,213,26,0.12) !important; border-color: rgba(153,213,26,0.4) !important; color: #99d51a !important; }
html:not(.dark) .badge-crm { background: rgba(59,130,246,0.1)  !important; border-color: rgba(59,130,246,0.35)  !important; color: #1d4ed8 !important; }
html:not(.dark) .badge-qr  { background: rgba(168,85,247,0.1)  !important; border-color: rgba(168,85,247,0.35)  !important; color: #7c3aed !important; }

/* ── Icon containers ── */
html:not(.dark) .bg-neon\/10   { background-color: #0b1120 !important; }
html:not(.dark) .bg-neon\/8    { background-color: #0b1120 !important; }
html:not(.dark) .border-neon\/25 { border-color: rgba(11,17,32,0.25) !important; }
html:not(.dark) .border-neon\/20 { border-color: rgba(11,17,32,0.2)  !important; }

/* ── Feature tag pills (bg-neon/6) ── */
html:not(.dark) .bg-neon\/6       { background-color: rgba(153,213,26,0.14) !important; }
html:not(.dark) .border-neon\/12  { border-color: rgba(153,213,26,0.45) !important; }
html:not(.dark) span.bg-neon\/6   { color: #99d51a !important; }

/* ── Dual-panel section cards ── */
html:not(.dark) .dp-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
html:not(.dark) .dp-card .h-px { background-color: #e5e7eb !important; }

/* ── Why-us impact layout cards ── */
html:not(.dark) .why-impact-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* ── CTA section — intentionally dark in light mode for visual contrast ── */
html:not(.dark) .cta-inner {
  background: #0b1120 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
html:not(.dark) .cta-inner .text-white    { color: #ffffff !important; }
html:not(.dark) .cta-inner .text-gray-300 { color: #d1d5db !important; }
html:not(.dark) .cta-inner .text-gray-400 { color: #9ca3af !important; }
html:not(.dark) .cta-inner .text-gray-500 { color: #9ca3af !important; }

/* ── Hero-video fallback background ── */
html:not(.dark) .hero-video-fallback-bg {
  background: linear-gradient(135deg,#e8eaed 0%,#f0f2f5 100%) !important;
}

/* ── Tech-standards status panel ── */
html:not(.dark) .tech-std-panel {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.08) !important;
}
html:not(.dark) .bg-\[\#142035\] { background-color: #e5e7eb !important; }

/* ── Power-demo inner panels with white rgba ── */
html:not(.dark) [style*="rgba(255,255,255,0.025)"] {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html:not(.dark) [style*="rgba(255,255,255,0.05)"] {
  border-color: rgba(0,0,0,0.1) !important;
}

/* ── Ecosystem inline text colors ── */
html:not(.dark) [style*="color:#e2e2e2"] { color: #111827 !important; }

/* ── Dark #1e3050 borders (testimonials avatar, card hover states) ── */
html:not(.dark) .border-\[\#1e3050\] { border-color: #e5e7eb !important; }
html:not(.dark) .hover\:border-\[\#1e3050\]:hover { border-color: rgba(153,213,26,0.5) !important; }

/* ── Contact info cards ── */
html:not(.dark) .contact-info-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05) !important;
}
html:not(.dark) .contact-icon-wrap {
  background-color: rgba(153,213,26,0.14) !important;
  border-color: rgba(153,213,26,0.4) !important;
}
html:not(.dark) .contact-icon-wrap svg { color: #99d51a !important; }
html:not(.dark) .contact-info-map {
  border-color: #e5e7eb !important;
  filter: none !important;
}
html:not(.dark) .contact-info-map iframe {
  filter: none !important;
}

/* ── Steps connector gradient via-[#1a2844] ── */
html:not(.dark) .via-\[\#1a2844\] {
  --tw-gradient-stops: var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position, 50%), var(--tw-gradient-to) !important;
}

/* ── Dynamic form card ── */
html:not(.dark) .form-card {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset !important;
}
html:not(.dark) .form-card input,
html:not(.dark) .form-card textarea,
html:not(.dark) .form-card select {
  background-color: rgba(255,255,255,0.7) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #111827 !important;
}
html:not(.dark) .form-card input::placeholder,
html:not(.dark) .form-card textarea::placeholder { color: #9ca3af !important; }
html:not(.dark) .form-card input:focus,
html:not(.dark) .form-card textarea:focus,
html:not(.dark) .form-card select:focus {
  background-color: rgba(255,255,255,0.95) !important;
  border-color: rgba(153,213,26,0.55) !important;
  box-shadow: 0 0 0 3px rgba(153,213,26,0.1) !important;
}
html:not(.dark) .form-card label { color: #6b7280 !important; }
html:not(.dark) .form-card .border-t { border-color: rgba(0,0,0,0.08) !important; }

/* ── Error pages (404 / 500) ── */
html:not(.dark) .error-page-num { color: rgba(153,213,26,0.15) !important; }

/* ── Legal pages ── */
html:not(.dark) .legal-heading { color: #111827 !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .legal-subheading { color: #1f2937 !important; }
html:not(.dark) .legal-body p { color: #4b5563 !important; }
html:not(.dark) .legal-body ul { color: #4b5563 !important; }
html:not(.dark) .legal-body strong { color: #111827 !important; }
html:not(.dark) .bg-s1.min-h-screen { background-color: #f5f7fa !important; }
html:not(.dark) .legal-body .border-t { border-color: rgba(0,0,0,0.08) !important; }

html:not(.dark) .slogan-accent{color:#070b14 !important}
html:not(.dark) .slogan-rest{color:rgba(7,11,20,0.45) !important}

html:not(.dark) .slogan-accent-hdr{color:#070b14 !important}
html:not(.dark) .slogan-rest-hdr{color:rgba(7,11,20,0.5) !important}


/* ══════════════════════════════════════════════════════════════
   New Sections — Light Mode
   ══════════════════════════════════════════════════════════════ */

/* Neon text daha koyu (contrast için) */
html:not(.dark) .text-neon { color: #99d51a !important; }

/* Gri gradient kartlarda white bg */
html:not(.dark) .bg-s1 { background-color: #ffffff !important; }
html:not(.dark) .bg-s2 { background-color: #f5f7fa !important; }
html:not(.dark) .bg-\[\#0b1120\] { background-color: #ffffff !important; }
html:not(.dark) .bg-\[\#070b14\] { background-color: #f5f7fa !important; }

/* Metin renkleri */
html:not(.dark) .text-white { color: #111827 !important; }
html:not(.dark) .text-gray-300 { color: #374151 !important; }
html:not(.dark) .text-gray-400 { color: #4b5563 !important; }
html:not(.dark) .text-gray-500 { color: #6b7280 !important; }
html:not(.dark) .text-gray-600 { color: #9ca3af !important; }
html:not(.dark) .text-gray-700 { color: #d1d5db !important; }

/* Border'lar */
html:not(.dark) .border-white\/\[0\.06\],
html:not(.dark) .border-white\/\[0\.07\],
html:not(.dark) .border-white\/\[0\.08\],
html:not(.dark) .border-white\/\[0\.1\],
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/15,
html:not(.dark) .border-white\/20 { border-color: rgba(0,0,0,0.08) !important; }

/* Section background (card/panel) */
html:not(.dark) .bg-white\/\[0\.02\],
html:not(.dark) .bg-white\/\[0\.03\],
html:not(.dark) .bg-white\/\[0\.04\],
html:not(.dark) .bg-white\/\[0\.05\] { background-color: rgba(0,0,0,0.03) !important; }

/* ── media-hero — overlay daha az agresif ── */
html:not(.dark) section:has(> img.absolute) .bg-\[\#070b14\] { background-color: rgba(11,17,32,0.3) !important; }

/* ── feature-spotlight — glow daha yumuşak ── */
html:not(.dark) .bg-neon\/20 { background-color: rgba(153,213,26,0.12) !important; }
html:not(.dark) .bg-neon\/10 { background-color: rgba(153,213,26,0.08) !important; }
html:not(.dark) .bg-neon\/5  { background-color: rgba(153,213,26,0.04) !important; }
html:not(.dark) .from-neon\/20 { --tw-gradient-from: rgba(153,213,26,0.15) !important; }
html:not(.dark) .from-neon\/10 { --tw-gradient-from: rgba(153,213,26,0.08) !important; }

/* Browser frame (product-showcase, feature-spotlight) */
html:not(.dark) .bg-gradient-to-br.from-\[\#0b1120\] { background: linear-gradient(135deg, #ffffff, #f5f7fa) !important; }

/* ── stats-dashboard — cards ── */
html:not(.dark) .stat-card {
  background: linear-gradient(135deg, #ffffff, rgba(245,247,250,0.6)) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html:not(.dark) .stat-card:hover { border-color: rgba(153,213,26,0.4) !important; }

/* ── pricing-compare — popular column ── */
html:not(.dark) .bg-neon\/\[0\.04\] { background-color: rgba(153,213,26,0.06) !important; }

/* ── trust-bar — scanline ── */
html:not(.dark) .via-neon\/10 { --tw-gradient-via: rgba(153,213,26,0.15) !important; }

/* ── Download badges — keep black ── */
html:not(.dark) .bg-black { background-color: #070b14 !important; }
html:not(.dark) .bg-black .text-white { color: #ffffff !important; }
html:not(.dark) .bg-black .text-gray-400 { color: #9ca3af !important; }

/* ── Hero with background image — keep overlay dark for text readability ── */
html:not(.dark) section.relative.overflow-hidden > .absolute.inset-0.bg-\[\#070b14\]:not([style*="opacity:0."]) { background-color: rgba(11,17,32,0.6) !important; }

/* Neon accent: R, O, X için koyu renk */
html:not(.dark) .slogan-accent { color: #99d51a !important; }
html:not(.dark) .slogan-rest { color: rgba(17,24,39,0.5) !important; }

/* ── Tabs button active — underline ── */
html:not(.dark) .tabs-btn.text-neon { color: #99d51a !important; }
html:not(.dark) .tabs-btn.border-neon { border-color: #99d51a !important; }

/* ── Shadow ── */
html:not(.dark) [style*="box-shadow:0 0 0 1px rgba(153,213,26"] { box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(153,213,26,0.15) !important; }
html:not(.dark) [style*="box-shadow:0 24px 64px rgba(0,0,0"] { box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important; }
html:not(.dark) [style*="box-shadow:0 40px 80px rgba(0,0,0"] { box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important; }
html:not(.dark) [style*="box-shadow:0 40px 100px"] { box-shadow: 0 30px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(153,213,26,0.2) !important; }
html:not(.dark) [style*="box-shadow:0 20px 60px"] { box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important; }
html:not(.dark) [style*="box-shadow:0 40px 100px -10px"] { box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important; }

/* ── Browser frame dots daha görünür ── */
html:not(.dark) .bg-red-500\/60 { background-color: rgba(239,68,68,0.85) !important; }
html:not(.dark) .bg-yellow-400\/60 { background-color: rgba(250,204,21,0.95) !important; }
html:not(.dark) .bg-neon\/70 { background-color: #99d51a !important; }

/* ── Partner card bg ── */
html:not(.dark) .pg-card {
  background: linear-gradient(135deg, #ffffff, rgba(245,247,250,0.7)) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Phone frame (download-cta) */
html:not(.dark) .border-\[\#0b1120\] { border-color: #1f2937 !important; }

/* Before-after labels */
html:not(.dark) .bg-black\/70 { background-color: rgba(17,24,39,0.85) !important; color: #fff !important; }
html:not(.dark) .bg-black\/60 { background-color: rgba(17,24,39,0.75) !important; color: #fff !important; }
html:not(.dark) .bg-black\/30 { background-color: rgba(17,24,39,0.5) !important; color: #fff !important; }

/* ── Text on image overlays — ALWAYS white in both modes ── */
html:not(.dark) .on-image-title { color: #ffffff !important; }
html:not(.dark) .on-image-text { color: rgba(255,255,255,0.92) !important; }
html:not(.dark) .on-image-muted { color: rgba(255,255,255,0.75) !important; }

/* ════════════════════════════════════════════════════════════════
   NEW SECTIONS — COMPREHENSIVE LIGHT MODE
   ════════════════════════════════════════════════════════════════ */

/* ── Gradient backgrounds (koyu → açık) ── */
html:not(.dark) .bg-gradient-to-br.from-\[\#0b1120\].to-\[\#0b1120\]\/50,
html:not(.dark) .bg-gradient-to-b.from-\[\#0b1120\].to-\[\#070b14\],
html:not(.dark) .from-\[\#0b1120\].to-\[\#142035\] {
  background: linear-gradient(135deg, #ffffff, #f5f7fa) !important;
}
html:not(.dark) .from-\[\#0b1120\] { --tw-gradient-from: #ffffff !important; }
html:not(.dark) .to-\[\#0b1120\],
html:not(.dark) .to-\[\#070b14\] { --tw-gradient-to: #f5f7fa !important; }
html:not(.dark) .via-\[\#070b14\]\/60,
html:not(.dark) .via-\[\#070b14\]\/90,
html:not(.dark) .via-\[\#070b14\]\/92 { --tw-gradient-via: rgba(255,255,255,0.6) !important; }

/* ── Feature-grid-visual overlay (bottom gradient üstü görsel) ── */
html:not(.dark) .from-\[\#070b14\] { --tw-gradient-from: rgba(11,17,32,0.95) !important; }

/* ── Tabs ── */
html:not(.dark) .tabs-btn { color: #6b7280 !important; }
html:not(.dark) .tabs-btn:hover { color: #0b1120 !important; }
html:not(.dark) .tabs-btn.text-neon { color: #99d51a !important; }
html:not(.dark) .tabs-btn.border-neon { border-color: #99d51a !important; }

/* ── Before-after container ── */
html:not(.dark) .ba-wrap { border-color: rgba(0,0,0,0.1) !important; }
html:not(.dark) .ba-wrap .bg-black\/70,
html:not(.dark) .ba-wrap .bg-black\/60,
html:not(.dark) .ba-wrap .bg-black\/30 {
  background-color: rgba(17,24,39,0.8) !important; color: #ffffff !important;
}
html:not(.dark) .ba-handle { background: #0b1120 !important; }

/* ── Feature-spotlight ── */
html:not(.dark) .feature-spotlight { background: #ffffff !important; }

/* ── Partners-grid filter ── */
html:not(.dark) .pg-filter { background-color: rgba(0,0,0,0.04) !important; color: #6b7280 !important; border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .pg-filter.active,
html:not(.dark) .pg-filter:hover { color: #0b1120 !important; }
html:not(.dark) .pg-filter.bg-neon { background-color: #99d51a !important; color: #070b14 !important; border-color: #99d51a !important; }

/* ── Pricing-compare ── */
html:not(.dark) table thead th { background-color: #ffffff !important; }
html:not(.dark) table tbody tr:hover { background-color: rgba(0,0,0,0.02) !important; }
html:not(.dark) .bg-neon\/\[0\.04\] { background-color: rgba(153,213,26,0.08) !important; }

/* ── Download-cta phone frame ── */
html:not(.dark) .rounded-\[2\.5rem\].border-\[6px\] { border-color: #1f2937 !important; }
html:not(.dark) .rounded-\[2\.5rem\] .bg-\[\#0b1120\] { background-color: #1f2937 !important; }

/* ── Trust-bar ── */
html:not(.dark) .trust-scan { opacity: 0.5; }

/* ── Video-embed container ── */
html:not(.dark) section .bg-black:not(.bg-black\/70):not(.bg-black\/60):not(.bg-black\/30):has(video),
html:not(.dark) section .bg-black:not(.bg-black\/70):not(.bg-black\/60):not(.bg-black\/30):has(iframe) {
  background-color: #f5f7fa !important;
}

/* ── Screenshot-carousel ── */
html:not(.dark) .sc-wrap .bg-s1 { background-color: #ffffff !important; color: #0b1120 !important; }
html:not(.dark) .sc-dot { background-color: rgba(0,0,0,0.15) !important; }
html:not(.dark) .sc-dot.bg-neon { background-color: #99d51a !important; }
html:not(.dark) .sc-wrap button.bg-s1:hover { border-color: #99d51a !important; color: #99d51a !important; }

/* ── Hero variants with background image — overlay koyu ── */
html:not(.dark) section.relative.overflow-hidden .absolute.inset-0.bg-\[\#070b14\] { background-color: rgba(11,17,32,0.55) !important; }

/* ── Generic panel fixes (if any) ── */
html:not(.dark) .rounded-2xl.bg-s1 { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.08) !important; }

/* ── Legal content sections in light mode ── */
html:not(.dark) .legal-heading { color: #0b1120 !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .legal-subheading { color: #1f2937 !important; }

/* ── Rox-meaning section ── */
html:not(.dark) [class*="slogan-accent"] { color: #99d51a !important; }
html:not(.dark) [class*="slogan-rest"] { color: rgba(17,24,39,0.5) !important; }

/* ── Stat card for feature-spotlight stats (text inside) ── */
html:not(.dark) section .text-neon.text-3xl,
html:not(.dark) section .text-neon.text-4xl { color: #99d51a !important; }

/* ── Backdrop blur'lu bg ── */
html:not(.dark) [class*="backdrop-blur"].bg-black\/30,
html:not(.dark) [class*="backdrop-blur"].bg-black\/40 { background-color: rgba(17,24,39,0.8) !important; color: #fff !important; }

/* ── All cards with glass-morphism treatment ── */
html:not(.dark) [style*="backdrop-filter:blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ── Form cards ── */
html:not(.dark) .form-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* ════════════════════════════════════════════════════════════════
   AGGRESSIVE GLOBAL LIGHT MODE (catch-all)
   ════════════════════════════════════════════════════════════════ */

/* Section container bg */
html:not(.dark) section.bg-transparent { background-color: transparent; }
html:not(.dark) section { color: #0b1120; }

/* All text-white variants */
html:not(.dark) .text-white:not(.on-image-title):not(.on-dark) { color: #0b1120 !important; }
html:not(.dark) .text-white\/90:not(.on-image-text) { color: rgba(11,17,32,0.9) !important; }
html:not(.dark) .text-white\/70,
html:not(.dark) .text-white\/60 { color: rgba(11,17,32,0.6) !important; }

/* Dark hex colors everywhere */
html:not(.dark) [class*="bg-[#0b1120]"],
html:not(.dark) .bg-\[\#0b1120\]\/50,
html:not(.dark) .bg-\[\#0b1120\]\/80,
html:not(.dark) .bg-\[\#0b1120\]\/90 { background-color: #ffffff !important; }
html:not(.dark) .bg-\[\#070b14\] { background-color: #f5f7fa !important; }
html:not(.dark) .bg-\[\#142035\] { background-color: #eff2f7 !important; }

/* Border hex colors */
html:not(.dark) .border-\[\#142035\],
html:not(.dark) .border-\[\#1a2844\],
html:not(.dark) .border-\[\#1e3050\],
html:not(.dark) .border-\[\#0f1a2a\] { border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .divide-\[\#142035\] > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0,0,0,0.08) !important; }

/* Rgba white with low alpha (glass effect) — convert to black alpha */
html:not(.dark) [style*="rgba(255,255,255,0.02)"] { background: rgba(0,0,0,0.025) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.03)"] { background: rgba(0,0,0,0.03) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.04)"] { background: rgba(0,0,0,0.04) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.05)"] { background: rgba(0,0,0,0.05) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.07)"] { background: rgba(0,0,0,0.06) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.08)"] { background: rgba(0,0,0,0.08) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.1)"] { background: rgba(0,0,0,0.1) !important; }

/* Inline style dark bg */
html:not(.dark) [style*="background:#070b14"],
html:not(.dark) [style*="background: #070b14"] { background: #f5f7fa !important; }
html:not(.dark) [style*="background:#0b1120"],
html:not(.dark) [style*="background: #0b1120"] { background: #ffffff !important; }

/* Linear gradients içindeki koyu renkler */
html:not(.dark) [style*="rgba(11,17,32,0.6)"],
html:not(.dark) [style*="rgba(11,17,32,0.8)"],
html:not(.dark) [style*="rgba(11,17,32,0.9)"],
html:not(.dark) [style*="rgba(11,17,32,0.95)"] {
  background: linear-gradient(135deg, #ffffff, #f9fafb) !important;
}

/* text-gray-200 (too light for light mode) */
html:not(.dark) .text-gray-200 { color: #374151 !important; }

/* Light mode: card hover effects */
html:not(.dark) [class*="hover:border-neon"]:hover { border-color: rgba(153,213,26,0.5) !important; }

/* glass-morphism on solid white */
html:not(.dark) .glass,
html:not(.dark) [class*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Video tab panel */
html:not(.dark) section .bg-black { background-color: #0b1120 !important; }
html:not(.dark) section .bg-black > video,
html:not(.dark) section .bg-black > iframe { background-color: #0b1120; }

/* Overlay'in de üzerindeki metinler beyaz kalsın */
html:not(.dark) .on-image-title { color: #ffffff !important; }
html:not(.dark) .on-image-text { color: rgba(255,255,255,0.92) !important; }

/* Section backgrounds dark inline should turn to light gradient */
html:not(.dark) section[style*="background:linear-gradient"] { background: linear-gradient(180deg, #ffffff, #f5f7fa) !important; }

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE OPTIMIZATION — badge inversion + font-weight cap
   ════════════════════════════════════════════════════════════════ */

/* 1) Font-weight cap — reserve 800/900 for real headings only */
html:not(.dark) .font-black:not(h1):not(h2):not(h3):not(h4):not(.on-image-title),
html:not(.dark) .font-extrabold:not(h1):not(h2):not(h3):not(h4):not(.on-image-title) {
  font-weight: 700 !important;
}

/* 2) Small pill badges (inline-flex + rounded-full + neon tint)
      → invert to dark navy bg with neon accent border */
html:not(.dark) .inline-flex.rounded-full.bg-neon\/5,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/6,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/8,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/10 {
  background-color: #0b1120 !important;
  border-color: rgba(153,213,26,0.35) !important;
}
/* Text inside inverted badges stays neon/white for contrast */
html:not(.dark) .inline-flex.rounded-full.bg-neon\/5 .text-neon,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/6 .text-neon,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/8 .text-neon,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/10 .text-neon,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/5.text-neon,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/6.text-neon,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/8.text-neon,
html:not(.dark) .inline-flex.rounded-full.bg-neon\/10.text-neon { color: #99d51a !important; }

/* 3) Small inline pills using bg-s1 + neon dot (hero-split, hero-video)
      → invert to dark bg with light text */
html:not(.dark) .inline-flex.rounded-full.bg-s1,
html:not(.dark) .inline-flex.rounded-full.bg-s1\/80 {
  background-color: #0b1120 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.85) !important;
}
html:not(.dark) .inline-flex.rounded-full.bg-s1 .text-gray-400,
html:not(.dark) .inline-flex.rounded-full.bg-s1\/80 .text-gray-400 { color: rgba(255,255,255,0.75) !important; }

/* 4) Section label (sect-lbl) — neon yeşili her durumda (line 31'de tanımlı).
      Koyu container'larda neon vurgu zaten kontrastlı kalır. */
html:not(.dark) .cta-inner .sect-lbl,
html:not(.dark) section[style*="#0b1120"] .sect-lbl,
html:not(.dark) section[style*="#070b14"] .sect-lbl { color: #99d51a !important; }

/* 5) Small uppercase badges with card-style bg + text-neon
      (e.g. floating "CANLI ÖNİZLEME" on bg-[#070b14]) — already dark, leave as-is.
      But pill variants inside cards/partials that use bg-neon with opacity
      tints get caught by rule 2. */

/* ── Banner-image overlay — HIGHEST precedence (wins over all generic bg-[#070b14] overrides).
      Inline style="opacity:N" admin panel ayarından geliyor, onu koruyoruz. ── */
html:not(.dark) .banner-overlay { background-color: #070b14 !important; }

/* ── Ghost butonlar (btn-g) koyu overlay üzerinde (media-hero / banner-image full)
      light mode'da dark-mode görünümünü korur — koyu zeminde okunabilir kalsın. ── */
html:not(.dark) section:has(> .banner-overlay) .btn-g,
html:not(.dark) section:has(> a > .banner-overlay) .btn-g,
html:not(.dark) section:has(> div > .banner-overlay) .btn-g {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html:not(.dark) section:has(> .banner-overlay) .btn-g:hover,
html:not(.dark) section:has(> a > .banner-overlay) .btn-g:hover,
html:not(.dark) section:has(> div > .banner-overlay) .btn-g:hover {
  border-color: rgba(153, 213, 26, 0.6) !important;
  color: #99d51a !important;
  background: rgba(153, 213, 26, 0.12) !important;
}

/* ── Cookie consent banner/modal — light mode'da da koyu kalır (intentional CTA),
      içerik açık tonlarda olur ki okunabilsin. ── */
html:not(.dark) #cookie-banner { background: rgba(11,17,32,0.97) !important; }
html:not(.dark) #cookie-banner .text-gray-300 { color: rgba(255,255,255,0.9) !important; }
html:not(.dark) #cookie-banner .text-neon,
html:not(.dark) #cookie-banner a.text-neon { color: #99d51a !important; }
html:not(.dark) #cookie-banner .btn-g {
  border-color: rgba(255,255,255,0.15) !important;
  color: #e5e7eb !important;
  background: transparent !important;
}
html:not(.dark) #cookie-banner .btn-g:hover {
  border-color: rgba(153,213,26,0.55) !important;
  color: #99d51a !important;
  background: rgba(153,213,26,0.08) !important;
}
html:not(.dark) #cookie-modal > div { background: #0b1120 !important; border-color: rgba(255,255,255,0.08) !important; }
html:not(.dark) #cookie-modal h3 { color: #ffffff !important; }
html:not(.dark) #cookie-modal p.text-white,
html:not(.dark) #cookie-modal .font-semibold.text-white { color: #ffffff !important; }
html:not(.dark) #cookie-modal .text-gray-500 { color: rgba(255,255,255,0.6) !important; }
html:not(.dark) #cookie-modal .border-t,
html:not(.dark) #cookie-modal .border-b { border-color: rgba(255,255,255,0.06) !important; }
html:not(.dark) #cookie-modal .btn-g {
  border-color: rgba(255,255,255,0.15) !important;
  color: #e5e7eb !important;
  background: transparent !important;
}
html:not(.dark) #cookie-modal .btn-g:hover {
  border-color: rgba(153,213,26,0.55) !important;
  color: #99d51a !important;
  background: rgba(153,213,26,0.08) !important;
}

/* ── CTA Split Layout — light mode ────────────────────────────────
   Image side: aynen kalır (clean photo).
   Content side: beyaz/açık gradient + koyu text + ince border/shadow.
   Bu sayede image ve content NET ayrılır, "wash" hissi yok. */
html:not(.dark) .cta-split {
  border-color: rgba(11, 17, 32, 0.10);
  background: #ffffff;
  box-shadow: 0 30px 60px -30px rgba(11, 17, 32, 0.20);
}
html:not(.dark) .cta-split-image {
  background: #f1f5f9;
}
html:not(.dark) .cta-split-fade {
  background: linear-gradient(to right, transparent 65%, rgba(255, 255, 255, 0.85) 100%);
}
@media (max-width: 1023px) {
  html:not(.dark) .cta-split-fade {
    background: linear-gradient(to bottom, transparent 65%, rgba(255, 255, 255, 0.9) 100%);
  }
}
html:not(.dark) .cta-split-content {
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%);
}
html:not(.dark) .cta-split-deco-line {
  background: linear-gradient(90deg, transparent, rgba(122, 181, 15, 0.55), transparent);
}
html:not(.dark) .cta-split-deco-glow {
  background: radial-gradient(circle, rgba(153, 213, 26, 0.14) 0%, transparent 70%);
}
html:not(.dark) .cta-split-label {
  color: #5a8809;
}
html:not(.dark) .cta-split-title {
  color: #0f172a;
}
html:not(.dark) .cta-split-desc {
  color: #475569;
}

/* Eski centered .cta-inner light mode override (image olmayan ctalar için) */
html:not(.dark) .cta-inner {
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%) !important;
  border-color: rgba(11, 17, 32, 0.08) !important;
  box-shadow: 0 24px 60px -28px rgba(11, 17, 32, 0.16);
}
html:not(.dark) .cta-inner h2 { color: #0f172a !important; }
html:not(.dark) .cta-inner p  { color: #475569 !important; }
html:not(.dark) .cta-inner .sect-lbl { color: #5a8809 !important; }
html:not(.dark) .cta-deco-dots {
  background-image: radial-gradient(rgba(11, 17, 32, 0.08) 1px, transparent 1px) !important;
  opacity: 0.4 !important;
}
html:not(.dark) .cta-deco-glow {
  background: radial-gradient(circle, rgba(153, 213, 26, 0.10) 0%, transparent 70%) !important;
}
html:not(.dark) .cta-deco-accent {
  background: linear-gradient(90deg, transparent, rgba(122, 181, 15, 0.55), transparent) !important;
}

/* ── ROX wordmark section — light mode adaptation ─────────────── */
/* Section her iki modda da dark feature panel — bg image ve dark overlay korunuyor.
   Light mode'da sadece sayfaya yumuşak entegrasyon için ince border + soft shadow. */
html:not(.dark) .rox-section {
  border-top: 1px solid rgba(11, 17, 32, 0.08);
  border-bottom: 1px solid rgba(11, 17, 32, 0.08);
  box-shadow: 0 24px 60px -28px rgba(11, 17, 32, 0.18);
}