/* SNN tasarım değişkenleri: KOYU HAKİ header/footer + AÇIK (kırık beyaz) gövde.
   Kaynak: reports/2026-09-17-renk-kartelasi-ve-tasarim-dili.md (Aday C palet),
   2026-09-19 "açık gövde" kararı (referans ritim: izmiravmarket.com — "onun koyu kısmı bizde haki").

   Ana kural: üst bant / header / kahraman / koyu bant / footer KOYU HAKİ;
   gövdenin geri kalanı AÇIK (#F3F2EC), kartlar BEYAZ.
   Haki asla ürün kartı zemininde kullanılmaz (FDE kılıf fotoğrafı kaybolmasın).

   İki bağlam var:
     - varsayılan (html:root)  → açık gövde token'ları
     - .snn-koyu ve eşdeğeri seçiciler → aynı token adları koyu değerleri alır
   Böylece bileşen CSS'i (tema.css, urun.css) tek isim kullanır: --snn-metin, --snn-kenar, --snn-bolum.

   html:root kullanılıyor: Blocksy dinamik CSS'ini (<style id="ct-main-styles-inline-css">)
   bu dosyadan SONRA basıyor ve :root ile tanımlıyor. html:root özgüllüğü (0,1,1) > :root (0,1,0),
   bu yüzden sıra farketmeksizin bizim değerlerimiz kazanır.

   ---------------------------------------------------------------------------
   SNN AYARLARI → "RENKLER" SEKMESİ (P5, 2026-09-19)
   Üç değer panelden yönetilir ve buradaki karşılıkları VARSAYILAN olarak durur:
       renk_vurgu → --snn-vurgu        (#F8A72B)
       renk_koyu  → --snn-koyu-zemin   (#2F3222)
       renk_acik  → --snn-acik-zemin   (#F3F2EC)
   **Bu üç değeri snn-child/inc/renkler.php içindeki `snn_renk_varsayilan_girdiler()`
   ile EŞİT TUT.** Aşağıdaki türev tonlar (vurgu-hover, vurgu-koyu, marka, bant,
   koyu-bolum, koyu-kenar, koyu-dip, footer, acik-bolum) o dosyadaki sabit HSL
   kaydırmalarıyla üretilir; burada yazılı değerler aynı hesabın varsayılan çıktısıdır.
   Panelde varsayılandan farklı bir renk seçilirse `snn_renk_css()` yalnız değişen
   değişkenleri `html:root{…}` satır içi bloğuyla bu dosyadan SONRA basar.
   --------------------------------------------------------------------------- */

html:root {
  /* ---------- Sabit ---------- */
  --snn-beyaz: #FFFFFF;          /* saf beyaz: kart, kutu, koyu zeminde başlık */
  --snn-orti-rgb: 26, 26, 24;    /* fotoğraf üstü karartma (kategori kartı degradesi) — alfa'yla
                                    kullanılır: rgba(var(--snn-orti-rgb), .25). Panel renklerinden
                                    türetilmez (nötr siyaha yakın ton), P5 haritasına girmez. */

  /* ---------- Marka ve vurgu (PANEL: renk_vurgu) ---------- */
  --snn-vurgu: #F8A72B;          /* turuncu: birincil buton, rozet — PANELDEN */
  --snn-vurgu-hover: #E5901A;    /* türev: L −7.1 */
  --snn-vurgu-metin: #1A1A18;    /* turuncu üstünde koyu metin */
  --snn-vurgu-koyu: #8F5308;     /* türev: L −27.5 — açık zeminde okunur kehribar */
  --snn-marka: #4A4E37;          /* türev (koyu, L +9.6): ikincil buton çerçevesi, rozet */
  --snn-bant: #40442C;           /* türev (koyu, L +5.5): üst duyuru bandı */

  /* ---------- AÇIK gövde (varsayılan bağlam; PANEL: renk_acik) ---------- */
  --snn-acik-zemin: #F3F2EC;     /* sayfa zemini: sıcak kırık beyaz — PANELDEN */
  --snn-acik-bolum: #E9E8E0;     /* türev: L −4.3 — bölüm / vurgulu şerit zemini */
  --snn-zemin: var(--snn-acik-zemin);
  --snn-bolum: var(--snn-acik-bolum);
  --snn-metin: #1A1A18;
  --snn-baslik: #1A1A18;
  --snn-ikincil: #5C5C52;
  --snn-kenar: #DDDBD0;          /* ayırıcı ve kart kenarı */
  --snn-form-kenar-acik: #8F8C7E; /* form alanı kenarı: AA non-text 3:1 için daha koyu */
  --snn-form-kenar: var(--snn-form-kenar-acik);
  --snn-kenar-yumusak: rgba(26, 26, 24, .10);
  --snn-baglanti: #1A1A18;       /* açık zeminde bağlantı: koyu + altı çizili (turuncu okunmuyor) */
  --snn-baglanti-hover: var(--snn-vurgu-koyu);

  /* ---------- KOYU yüzeyler (header, kahraman, koyu bant, footer; PANEL: renk_koyu) ---------- */
  --snn-koyu-zemin: #2F3222;     /* PANELDEN */
  --snn-koyu-bolum: #3A3E2B;     /* türev: L +4.1 */
  --snn-koyu-metin: #ECEBE3;
  --snn-koyu-baslik: #F7F6EE;
  --snn-koyu-ikincil: #B9B8AC;
  --snn-koyu-kenar: #4E5340;     /* türev: L +12.4 */
  --snn-koyu-dip: #272A1C;       /* türev: L −2.7 — "Yakında" sayfası degrade dibi */
  --snn-footer: #1E2018;         /* türev: L −5.5 — footer, en koyu */

  /* ---------- Kart (açık gövde üstünde beyaz) ---------- */
  --snn-kart: var(--snn-beyaz);
  --snn-kart-gorsel: var(--snn-beyaz);   /* ürün görseli alanı: beyaz */
  --snn-kart-metin: #1A1A18;
  --snn-kart-ikincil: #5C5C52;
  --snn-kart-kenar: #E1DFD5;     /* açık zeminde ince kart kenarı */
  --snn-kart-kenar-hover: #CFCCBE;
  --snn-kutu: var(--snn-beyaz);  /* içerik kutusu / form alanı zemini (koyu bantta hakiye döner) */

  /* ---------- Durum ---------- */
  --snn-indirim: #B3261E;        /* açık zeminde 5.8:1 */
  --snn-basari: #3E7A2A;         /* açık zeminde 5.2:1 (beyaz üstünde) */
  --snn-uyari-zemin: #FBF1D8;
  --snn-uyari-metin: #6A4E06;

  /* ---------- Ölçü sistemi (Shopco → SNN; ayrıntı raporda) ---------- */
  /* TAM GENİŞLİK (karar 2026-09-21, Bülent): 1240px tavanı kalktı; içerik kenardan kenara,
     yalnız yan boşluk kalır (masaüstü 32px, tablet 24px, telefon 16px — aşağıdaki medya
     kuralları). `--snn-icerik` yalnız max-width olarak kullanıldığı için 100% güvenlidir
     (kahraman, ürün sekmeleri, model şeridi, bulucu). Uzun metin blokları okunabilirlik için
     ayrı sınırlanır (tema.css 1b, urun.css 3a). Eski değer: 1240px (Shopco max-w-frame). */
  --snn-kenar-bosluk: 32px;
  --snn-icerik: 100%;
  --snn-radius: 4px;             /* Shopco 20–62px hap; SNN kimliği köşeli */
  --snn-radius-kart: 6px;
  --snn-golge: 0 1px 2px rgba(0, 0, 0, .06);       /* açık zeminde hafif */
  --snn-golge-kart: 0 8px 20px rgba(0, 0, 0, .10);
  --snn-bosluk: 16px;
  --snn-izgara-bosluk: 20px;     /* Shopco sm:space-x-5 = 20px */
  --snn-bolum-bosluk: 56px;      /* Shopco mb-8 md:mb-14 türevi */
  --snn-bolum-bosluk-mobil: 32px;

  /* ---------- Yapışkan header (site geneli, yalnız ≥1000 px; 2026-09-20) ----------
     Kullanım ve gerekçe: tema.css bölüm 3b, assets/js/header-yapiskan.js.
     Bu üç değer ürün sayfasındaki yapışkan öğelerin `top` hesabına da girer
     (urun.css bölüm 2b), bu yüzden token olarak tek yerde durur. */
  --snn-ust-bant-yuk: 40px;          /* üst duyuru bandının yüksekliği — YEDEK değer;
                                        gerçeğini header-yapiskan.js ölçüp :root'a yazar
                                        (bant metni iki satıra düşebilir) */
  --snn-header-yapisik-yuk: 64px;    /* yapışınca orta satırın SABİT yüksekliği
                                        (normal 96px; küçülmüş logo 30 + site adı 31 = 61 sığar) */
  --snn-logo-yuk-kucuk: 30px;        /* yapışınca logo yüksekliği (normal 50px'in %60'ı) */

  /* ---------- Yazı tipi ---------- */
  --snn-font: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;

  /* ================= Blocksy eşlemesi =================
     Blocksy palet rolleri: 1 birincil, 2 birincil hover, 3 metin, 4 başlık,
     5 kenarlık, 6 açık zemin(+footer varsayılanı), 7 site zemini, 8 içerik/kart zemini.
     Açık gövdede 3/4 koyu metin, 5/6/7/8 açık yüzeyler; koyu header/footer
     theme_mods'ta sabit renklerle ayarlanır (scripts/tema-ayarlari.php). */
  --theme-palette-color-1: #F8A72B;
  --theme-palette-color-2: #E5901A;
  --theme-palette-color-3: #1A1A18;
  --theme-palette-color-4: #1A1A18;
  --theme-palette-color-5: #DDDBD0;
  --theme-palette-color-6: #E9E8E0;
  --theme-palette-color-7: #F3F2EC;
  --theme-palette-color-8: #FFFFFF;

  --theme-text-color: var(--snn-metin);
  --theme-headings-color: var(--snn-baslik);
  --theme-link-initial-color: var(--snn-baglanti);
  --theme-link-hover-color: var(--snn-baglanti-hover);
  --theme-border-color: var(--snn-kenar);
  --theme-selection-background-color: var(--snn-vurgu);
  --theme-selection-text-color: var(--snn-vurgu-metin);

  --theme-button-background-initial-color: var(--snn-vurgu);
  --theme-button-background-hover-color: var(--snn-vurgu-hover);
  --theme-button-text-initial-color: var(--snn-vurgu-metin);
  --theme-button-text-hover-color: var(--snn-vurgu-metin);
  --theme-button-border-radius: var(--snn-radius);
  --theme-button-min-height: 44px;
  --theme-button-padding: 10px 22px;

  --theme-form-field-border-initial-color: var(--snn-form-kenar);
  --theme-form-field-border-focus-color: var(--snn-vurgu-koyu);
  --theme-form-border-radius: var(--snn-radius);

  /* Kapsayıcı genişlikleri — tam genişlik (2026-09-21). Blocksy `.ct-container`
     `width: min(100%, edge-spacing)` + `max-width: normal`; ikisi de gevşetildi.
     `100vw` kaydırma çubuğunu da sayar; `min(100%, …)` taşmayı önler (Blocksy'nin kendi kalıbı).
     maxSiteWidth theme_mod'u 1900 (functions.php filtresi) yalnız görsel `sizes` ve editör için. */
  --theme-normal-container-max-width: 100%;
  --theme-narrow-container-max-width: 900px;
  --theme-container-edge-spacing: calc(100vw - 2 * var(--snn-kenar-bosluk));
  --theme-content-vertical-spacing: 32px;  /* 56 → 32 (2026-09-21, Bülent: "aralarda çok boşluk"); ürün sayfası 20 (urun.css 2b) */

  /* Yazı tipi: tek aile, yerelden yükleniyor (fonts.css) */
  --theme-font-stack-default: var(--snn-font);
  --theme-font-family: var(--snn-font);
  --theme-heading-1-font-family: var(--snn-font);
  --theme-heading-2-font-family: var(--snn-font);
  --theme-heading-3-font-family: var(--snn-font);
  --theme-heading-4-font-family: var(--snn-font);
  --theme-heading-5-font-family: var(--snn-font);
  --theme-heading-6-font-family: var(--snn-font);
  --theme-font-weight: 400;
  --theme-font-size: 17px;
  --theme-line-height: 1.55;
  --theme-button-font-weight: 600;
  --theme-button-font-size: 15px;
}

/* ====================================================================
   KOYU YÜZEY BAĞLAMI
   İçine giren her şey açık metne döner. Blocksy'nin header/footer
   işaretlemesine sınıf ekleyemediğimiz için seçiciler burada sayılır.
   ==================================================================== */

.snn-koyu,
.ct-header [data-row="top"],
.ct-header [data-row="middle"],
#offcanvas .ct-panel-inner,
#search-modal,
.snn-hero,
.snn-bolum--koyu,
.snn-bulten,
.snn-kategori-kart,
.snn-mobil-cubuk,
footer.ct-footer {
  --snn-zemin: var(--snn-koyu-zemin);
  --snn-bolum: var(--snn-koyu-bolum);
  --snn-metin: var(--snn-koyu-metin);
  --snn-baslik: var(--snn-koyu-baslik);
  --snn-ikincil: var(--snn-koyu-ikincil);
  --snn-kenar: var(--snn-koyu-kenar);
  --snn-form-kenar: var(--snn-koyu-kenar);
  --snn-kutu: var(--snn-koyu-bolum);
  --snn-kenar-yumusak: rgba(236, 235, 227, .12);
  --snn-baglanti: var(--snn-koyu-metin);
  --snn-baglanti-hover: var(--snn-vurgu);
  --snn-golge: 0 1px 2px rgba(0, 0, 0, .25);
  --snn-golge-kart: 0 8px 20px rgba(0, 0, 0, .28);

  --theme-text-color: var(--snn-koyu-metin);
  --theme-headings-color: var(--snn-koyu-baslik);
  --theme-link-initial-color: var(--snn-koyu-metin);
  --theme-link-hover-color: var(--snn-vurgu);
  --theme-border-color: var(--snn-koyu-kenar);
  --theme-palette-color-3: var(--snn-koyu-metin);
  --theme-palette-color-4: var(--snn-koyu-baslik);
  --theme-palette-color-5: var(--snn-koyu-kenar);
  color: var(--snn-koyu-metin);
}

/* Açık yüzey bağlamı: koyu bir bandın içinde beyaz kart gerekirse.
   Gövde zaten açık olduğu için bu sınıf yalnız kapsam sıfırlaması yapar. */
.snn-acik {
  --snn-zemin: var(--snn-acik-zemin);
  --snn-bolum: var(--snn-acik-bolum);
  --snn-metin: var(--snn-kart-metin);
  --snn-baslik: var(--snn-kart-metin);
  --snn-ikincil: var(--snn-kart-ikincil);
  --snn-kenar: var(--snn-kart-kenar);
  --snn-form-kenar: var(--snn-form-kenar-acik);
  --snn-kutu: var(--snn-beyaz);
  --snn-baglanti: var(--snn-kart-metin);
  --snn-baglanti-hover: var(--snn-vurgu-koyu);
  --theme-text-color: var(--snn-kart-metin);
  --theme-headings-color: var(--snn-kart-metin);
  --theme-link-initial-color: var(--snn-kart-metin);
  --theme-border-color: var(--snn-kart-kenar);
  background: var(--snn-kart);
  color: var(--snn-kart-metin);
}

html,
body {
  background: var(--snn-acik-zemin);
}

body {
  font-family: var(--snn-font);
  color: var(--snn-metin);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--snn-font);
  color: var(--theme-headings-color);
  letter-spacing: .005em;
}

/* Tam genişlik yan boşluğu, cihaz kırılımları (2026-09-21): 32 / 24 / 16 px.
   Telefonda 16 px = eski 92vw'nin 390 px'te bıraktığı ~16 px ile aynı. */
@media (max-width: 999.98px) { html:root { --snn-kenar-bosluk: 24px; } }
@media (max-width: 689.98px) { html:root { --snn-kenar-bosluk: 16px; } }