/* ============================================================================
 * arovela.com — Kontrast Düzeltme Override (v9 — LIGHT-BG + MARQUEE FIX)
 *
 * v5 SORUNU: color-scheme: light only Tailwind v4'ün bg-white / bg-brand-cream
 * sınıflarının dark-variant render olmasını engellemiyor. Patron'un mobilinde
 * (sistem dark mode aktif) ÜRÜNLER sayfasında kategori kartları koyu kahverengi
 * (rgb(36,34,32)) zemin alıp text-brand-dark (#1a1a1a) yazıyla birleşince
 * contrast 1.10 → tamamen okunmaz.
 *
 * v6 ÇÖZÜMÜ: Tüm "açık zemin" sınıflarını sabit hex'e zorla — dark mode'da bile.
 * Tasarım light için optimize edilmiş, dark mode hiç test edilmemiş.
 * ========================================================================== */

/* 1) Tarayıcı UI'sını light'a zorla */
:root, html {
  color-scheme: light only !important;
}

/* 1.1) AÇIK ZEMİN SINIFLARI HARD LOCK — Tailwind/LightningCSS dark variant'ı
   ne yaparsa yapsın, bu renkler değişmesin. Kart, panel, modal her yerde.
   ÖNEMLİ: sadece pure `bg-white` class'ı için. `bg-white/[0.04]` gibi opacity
   variant'larını YAKALAMAMALI (onlar koyu zemin üstüne overlay tasarımı). */
.bg-white {
  background-color: #ffffff !important;
}
.bg-brand-base { background-color: #fafaf8 !important; }
.bg-brand-base-alt { background-color: #f0f0ee !important; }
.bg-brand-cream { background-color: #ede8dd !important; }
.bg-brand-warm { background-color: #f5f0e8 !important; }
.bg-gray-50 { background-color: #f9fafb !important; }
.bg-brand-line { background-color: #d4d4d4 !important; }

/* 1.2) Açık zemin üstündeki text-brand-dark / text-brand-muted sabit kal */
.bg-white .text-brand-dark,
.bg-brand-base .text-brand-dark,
.bg-brand-base-alt .text-brand-dark,
.bg-brand-cream .text-brand-dark,
.bg-brand-warm .text-brand-dark,
.bg-white.text-brand-dark,
.bg-brand-base.text-brand-dark,
.bg-brand-cream.text-brand-dark,
.text-brand-dark { color: #1a1a1a !important; }

/* 1.3) Açık zemin üstünde h1-h6 — tag-spesifik (body değil):
   BODY class'ında bg-brand-base olabildiği için descendant selector tüm
   sayfayı yakalıyordu, koyu zeminli section'daki h2/h3'leri de siyahlaştırıyordu.
   Sadece div/section/article/aside konteyner için. */
div.bg-white :is(h1,h2,h3,h4,h5,h6),
section.bg-white :is(h1,h2,h3,h4,h5,h6),
article.bg-white :is(h1,h2,h3,h4,h5,h6),
div.bg-brand-base :is(h1,h2,h3,h4,h5,h6),
section.bg-brand-base :is(h1,h2,h3,h4,h5,h6),
article.bg-brand-base :is(h1,h2,h3,h4,h5,h6),
div.bg-brand-cream :is(h1,h2,h3,h4,h5,h6),
section.bg-brand-cream :is(h1,h2,h3,h4,h5,h6),
div.bg-brand-warm :is(h1,h2,h3,h4,h5,h6),
section.bg-brand-warm :is(h1,h2,h3,h4,h5,h6),
div.bg-brand-base-alt :is(h1,h2,h3,h4,h5,h6),
section.bg-brand-base-alt :is(h1,h2,h3,h4,h5,h6) {
  color: #1a1a1a !important;
}

/* Koyu zeminli section'larda (bg-brand-dark/accent) h1-h6 default beyaz */
section.bg-brand-dark :is(h1,h2,h3,h4,h5,h6),
section.bg-brand-accent :is(h1,h2,h3,h4,h5,h6),
div.bg-brand-dark :is(h1,h2,h3,h4,h5,h6),
div.bg-brand-accent :is(h1,h2,h3,h4,h5,h6) {
  color: #ffffff !important;
}

/* 1.4) Body fallback: dark mode'da bile light kalsın */
html, body {
  background-color: #fafaf8 !important;
  color: #1a1a1a !important;
}

/* 1.4b) text-brand-base HARD LOCK (v10) — bg-brand-dark + text-brand-base
   kombinasyonu (örn. /tr/iletisim/ Talep Gönder butonu) Tailwind dark variant'la
   text-brand-base → #1a1a1a (siyah) render ediliyor → siyah-üstüne-siyah.
   Specificity (0,2,0) Tailwind'in `.dark .text-brand-base` rule'unu yener.
   AYRICA bg-brand-base bile dark mode'da rgb(36,34,32) oluyor, force et. */
html .text-brand-base,
.dark .text-brand-base,
:root .text-brand-base {
  color: #fafaf8 !important;
}
html .bg-brand-dark, .dark .bg-brand-dark { background-color: #1a1a1a !important; }
html .bg-brand-accent, .dark .bg-brand-accent { background-color: #4a6741 !important; }

/* 1.5) BEYAZ YAZI SINIFLARI HARD LOCK — Tailwind v4 dark: variant
   `.dark .text-white { color: #1a1a1a }` ile siyaha çeviriyor. Specificity
   (0,2,0) bizim (0,1,0)'ı yener — bu yüzden çift savunma:
   a) Yüksek specificity selectors (html.dark, .dark vs.)
   b) @media (prefers-color-scheme: dark) içinde de aynı rule
   c) html'e enjekte ettiğimiz JS html.dark class'ını kaldırıyor (3. savunma) */
html .text-white,
html body .text-white,
.dark .text-white,
html.dark .text-white,
:root .text-white { color: #ffffff !important; }

html .text-white\/40, .dark .text-white\/40 { color: rgba(255,255,255,0.4) !important; }
html .text-white\/50, .dark .text-white\/50 { color: rgba(255,255,255,0.5) !important; }
html .text-white\/60, .dark .text-white\/60 { color: rgba(255,255,255,0.6) !important; }
html .text-white\/70, .dark .text-white\/70 { color: rgba(255,255,255,0.7) !important; }
html .text-white\/80, .dark .text-white\/80 { color: rgba(255,255,255,0.8) !important; }
html .text-white\/90, .dark .text-white\/90 { color: rgba(255,255,255,0.9) !important; }

/* 1.6) prefers-color-scheme: dark içinde de aynı kurallar — bazı Tailwind
   v4 dark variants media query ile çalışıyor olabilir (class değil). */
@media (prefers-color-scheme: dark) {
  .text-white, html .text-white, .dark .text-white { color: #ffffff !important; }
  .text-white\/40 { color: rgba(255,255,255,0.4) !important; }
  .text-white\/50 { color: rgba(255,255,255,0.5) !important; }
  .text-white\/60 { color: rgba(255,255,255,0.6) !important; }
  .text-white\/70 { color: rgba(255,255,255,0.7) !important; }
  .text-white\/80 { color: rgba(255,255,255,0.8) !important; }
  .text-white\/90 { color: rgba(255,255,255,0.9) !important; }
  .bg-white { background-color: #ffffff !important; }
  .bg-brand-base { background-color: #fafaf8 !important; }
  .bg-brand-base-alt { background-color: #f0f0ee !important; }
  .bg-brand-cream { background-color: #ede8dd !important; }
  .bg-brand-warm { background-color: #f5f0e8 !important; }
  .text-brand-dark, .dark .text-brand-dark { color: #1a1a1a !important; }
}

/* 2) LightningCSS theme switch değişkenlerini light'a kilitle */
:root,
:root[data-theme],
:host {
  --lightningcss-light: initial !important;
  --lightningcss-dark:  !important;
}

/* 3) prefers-color-scheme: dark içinde de light theme zorla.
   Tarayıcı kullanıcısı dark mode'da olsa bile site light render edecek. */
@media (prefers-color-scheme: dark) {
  :root, :host {
    --lightningcss-light: initial !important;
    --lightningcss-dark:  !important;
    color-scheme: light only !important;
  }
  /* Body'yi explicit light renge zorla (cascade için) */
  html, body {
    background-color: #fafaf8 !important;
    color: #1a1a1a !important;
  }
  /* Tüm CSS değişkenlerini light değerlerine override */
  :root {
    --color-brand-base: #fafaf8 !important;
    --color-brand-base-alt: #f0f0ee !important;
    --color-brand-dark: #1a1a1a !important;
    --color-brand-warm: #f5f0e8 !important;
    --color-brand-cream: #ede8dd !important;
    --color-brand-muted: #737373 !important;
    --color-brand-line: #d4d4d4 !important;
  }
}

/* ===== ANA SORUN: muted yazı her yerde çok soluk ===== */
/* Açık zemin (default) üzerinde okunabilir koyulukta */
.text-brand-muted {
  color: #525252 !important;  /* WCAG AA: ~7:1 kontrast #fafaf8 üzerinde */
}

/* Koyu zemin üzerinde tersine yeterince açık */
.bg-brand-dark .text-brand-muted,
.bg-brand-accent .text-brand-muted,
.bg-brand-cream-dark .text-brand-muted,
[class*="bg-brand-dark"] .text-brand-muted {
  color: #d4d4d4 !important;  /* açık zemin override'ı geri al */
}

/* Koyu zeminli kapsayıcıların varsayılan yazı rengini AÇIK yap.
   Cascade ile body color'ı override eder; child'lar açıkça text-* dememişse
   bu rengi miras alır. */
.bg-brand-dark,
.bg-brand-accent,
.bg-brand-base-alt,
.bg-brand-warm-dark,
.bg-brand-cream-dark {
  color: #fafaf8;
}

/* Aynı element üzerinde bg-brand-dark + text-brand-dark çakışması
   (yazı zeminle birebir aynı renk) — yazıyı açığa zorla. */
.bg-brand-dark.text-brand-dark,
.bg-brand-accent.text-brand-dark,
.bg-brand-base-alt.text-brand-dark {
  color: #fafaf8 !important;
}

/* Koyu kapsayıcı içindeki text-brand-dark / text-brand-muted çocukları
   açık renge zorla (varsayılan koyu zemin / koyu metin bug'ı). */
.bg-brand-dark .text-brand-dark,
.bg-brand-dark .text-brand-muted,
.bg-brand-accent .text-brand-dark,
.bg-brand-accent .text-brand-muted,
.bg-brand-base-alt .text-brand-dark,
.bg-brand-base-alt .text-brand-muted {
  color: #fafaf8 !important;
}

/* WCAG AA için muted yazılar koyu zeminde biraz daha açık olsun */
.bg-brand-dark .text-brand-muted,
.bg-brand-accent .text-brand-muted {
  color: #d4d4d4 !important;
}

/* Linkler de koyu zeminde okunabilsin (Tailwind hover'larını koru) */
.bg-brand-dark a:not([class*="text-"]),
.bg-brand-accent a:not([class*="text-"]) {
  color: #fafaf8;
}
.bg-brand-dark a:not([class*="text-"]):hover,
.bg-brand-accent a:not([class*="text-"]):hover {
  color: #6a9a5a;
}

/* Açık zeminli kapsayıcıların text-brand-base (#fafaf8) sorunu —
   beyaz üstüne beyaz olmasın */
.bg-brand-base .text-brand-base,
.bg-brand-warm .text-brand-base,
.bg-brand-cream .text-brand-base,
.bg-white .text-brand-base {
  color: #1a1a1a !important;
}

/* SVG ikonlar (stroke/fill currentColor) de cascade'e uyum sağlasın */
.bg-brand-dark svg[stroke="currentColor"],
.bg-brand-accent svg[stroke="currentColor"] {
  stroke: #fafaf8;
}
.bg-brand-dark svg[fill="currentColor"],
.bg-brand-accent svg[fill="currentColor"] {
  fill: #fafaf8;
}

/* Border'lar koyu zeminde görünmez olmasın */
.bg-brand-dark .border-brand-dark,
.bg-brand-accent .border-brand-dark {
  border-color: #fafaf8 !important;
}

/* RTL diller için ek bir şey gerekmiyor, currentColor zaten lokalize.
   Last-resort defensiv kural: koyu zemin içindeki h1-h6/p/li/td/dt/dd
   eğer hiç text-* sınıfı yoksa açık renge düşsün */
.bg-brand-dark :is(h1,h2,h3,h4,h5,h6,p,li,td,th,dt,dd,blockquote,figcaption):not([class*="text-"]),
.bg-brand-accent :is(h1,h2,h3,h4,h5,h6,p,li,td,th,dt,dd,blockquote,figcaption):not([class*="text-"]) {
  color: inherit;
}

/* ============================================================================
 * HEADER NAVIGATION — wrap düzeltmesi
 * Sorun: 7 top-level nav item (Kurumsal, Ürünler, Sektörler, Toptan Satış,
 *        İhracat Pazarları, Blog, İletişim) + gap-10 + uzun TR çevirileri
 *        lg-xl viewport arasında taşıp ALT SATIRA kayıyor.
 * ========================================================================== */

/* Nav item'ları her zaman tek satırda tut */
header nav.lg\:flex,
header nav {
  flex-wrap: nowrap !important;
}
header nav > *,
header nav button span,
header nav a span {
  white-space: nowrap !important;
}

/* lg-xl arası daha sıkı yerleşim: gap ve font-size küçült */
@media (min-width: 1024px) and (max-width: 1279px) {
  header nav.lg\:flex {
    gap: 1.25rem !important;       /* 40px → 20px */
  }
  header nav button span,
  header nav > a span,
  header nav > div > button span {
    font-size: 10.5px !important;  /* 12px → 10.5px, biraz daha sığar */
    letter-spacing: 0.06em !important;
  }
  /* Sağ taraftaki dil seçici + CTA aralığı da daralsın */
  header .lg\:inline-flex,
  header [class*="gap-5"] {
    gap: 0.75rem !important;
  }
  /* CTA buton padding'i biraz daralt */
  header a[class*="bg-brand-accent"][class*="px-5"] {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
}

/* xl breakpoint (1280-1535px) — orta dağılım */
@media (min-width: 1280px) and (max-width: 1535px) {
  header nav.lg\:flex {
    gap: 1.75rem !important;       /* 40px → 28px */
  }
}

/* Header container'ı esnek tut — overflow olmasın */
header > div {
  overflow: visible !important;
}
header .flex.items-center.justify-between {
  min-width: 0;
}

/* Logo metni de sıkışmasın */
header a[href$="/"] span,
header a[href*="/tr/"] span,
header a[href*="/en/"] span {
  white-space: nowrap;
}

/* ============================================================================
 * v10 — SON BLOK: SERTİFİKA MARQUEE
 * Cascade'de en son geliyor → önceki text-white/N kurallarını sahiplenir.
 * Daha yüksek specificity (html .animate-marquee = 0,2,0 + element selector)
 * ile dark variant rule'larını da kesinleştirir.
 * ========================================================================== */
html .animate-marquee,
html .animate-marquee :is(span, p, div, a, h1, h2, h3, h4),
html .animate-marquee [class*="text-white"],
.dark .animate-marquee,
.dark .animate-marquee :is(span, p, div, a, h1, h2, h3, h4),
.dark .animate-marquee [class*="text-white"] {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
}

/* Quote / contact form gönder butonu — bg-brand-dark text-brand-base
   kombinasyonu siyah-üstüne-siyah render ediliyor. Force white text. */
button[class*="bg-brand-dark"],
a[class*="bg-brand-dark"],
.bg-brand-dark[class*="text-brand-base"] {
  color: #fafaf8 !important;
}

/* ============================================================================
 * v14 — beyaz zemin üstüne beyaz yazı (sadece DIV/section/article kart için)
 * BODY'de bg-brand-base class olduğu için descendant selector tüm sayfayı
 * etkiliyordu — tag-spesifik daraltma ile sadece kart konteynerleri eşleşir.
 * ========================================================================== */
div.bg-white .text-white, div.bg-white [class*="text-white"],
section.bg-white .text-white, section.bg-white [class*="text-white"],
article.bg-white .text-white, article.bg-white [class*="text-white"],
div.bg-brand-cream .text-white, div.bg-brand-cream [class*="text-white"],
div.bg-brand-warm .text-white, div.bg-brand-warm [class*="text-white"],
div.bg-brand-base-alt .text-white, div.bg-brand-base-alt [class*="text-white"],
div.bg-gray-50 .text-white, div.bg-gray-50 [class*="text-white"] {
  color: #1a1a1a !important;
}

/* Aynı element üzerinde bg-white + text-white çakışması */
.bg-white.text-white,
.bg-brand-base.text-white,
.bg-brand-cream.text-white {
  color: #1a1a1a !important;
}