/* =========================================================================
   TASARIM SİSTEMİ — TOKEN'LAR
   Şartname §19.1: "Zara standardı" bir kabul kriteri DEĞİLDİR.
   Estetik yön referanstır; kabul kriteri ölçülebilir olmalıdır.

   İKİ YOĞUNLUK, TEK DİL
     .yogunluk-editoryal  -> vitrin  (geniş boşluk, büyük görsel, sakin)
     .yogunluk-sik        -> admin   (aynı dil, sıkı satır, çalışılabilir)
   Aynı tipografi, aynı renk, aynı bileşen mantığı; yalnız ölçek değişir.
   ========================================================================= */

:root {
  /* --- RENK: monokrom -------------------------------------------------- */
  --ink:        #000000;   /* metin, buton, çizgi vurgusu */
  --ink-soft:   #333333;
  --muted:      #666666;   /* ikincil metin, mikro etiket */
  --faint:      #a8a8a8;   /* devre dışı, yer tutucu */
  --hairline:   #e6e6e6;   /* ayraç çizgileri */
  --bg:         #ffffff;
  --surface:    #f4f4f4;   /* bölüm zemini, görsel arkası */

  /* --- İŞLEVSEL RENK ---------------------------------------------------
     Marka kırmızısı DEKORASYON DEĞİL, yalnız SİNYAL: hata, kritik stok,
     süre dolumu, KDV riski. Editoryal dil bozulmadan marka korunur.      */
  --signal:        #e10600;
  --signal-soft:   #fdf0ef;
  --caution:       #8a6d00;
  --caution-soft:  #fdf8e8;
  --ok:            #1f6b3a;
  --ok-soft:       #eef6f0;

  /* --- TİPOGRAFİ -------------------------------------------------------
     ZARA YIĞINI: Helvetica Neue → Helvetica → Segoe UI → Arial.
     Webfont YOK: sistem yığını hem hızlı (0 istek) hem Lehçe/Türkçe
     karakterleri tam. toptan/index.php ile aynı karar — kanıtlanmış. */
  --font: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;

  --fs-mikro:   10px;   /* |01| TÜMÜNÜ GÖR · NEW · etiketler */
  --fs-kucuk:   11px;   /* ürün adı, menü */
  --fs-taban:   13px;   /* gövde */
  --fs-orta:    15px;
  --fs-buyuk:   19px;   /* ürün detay başlığı */
  --fs-dev:     34px;   /* editoryal başlık */

  --ls-mikro:   0.22em; /* mikro etiketlerin karakteri buradan gelir */
  --ls-etiket:  0.18em;
  --ls-ad:      0.02em;
  --ls-govde:   0.01em;

  --fw-hafif:   300;
  --fw-normal:  400;
  --fw-orta:    500;
  --fw-kalin:   600;

  --lh-sik:     1.25;
  --lh-normal:  1.5;
  --lh-genis:   1.7;

  /* --- BOŞLUK: 4px tabanlı ------------------------------------------- */
  --a1: 4px;   --a2: 8px;   --a3: 12px;  --a4: 16px;
  --a5: 24px;  --a6: 32px;  --a7: 48px;  --a8: 64px;  --a9: 96px;

  /* --- YOĞUNLUK (varsayılan: editoryal) ------------------------------- */
  --yogunluk-satir:    44px;  /* tablo/liste satır yüksekliği */
  --yogunluk-hucre-y:  var(--a3);
  --yogunluk-hucre-x:  var(--a4);
  --yogunluk-govde:    var(--fs-taban);
  --yogunluk-bolum:    var(--a9);
  --yogunluk-grid:     22px;

  /* --- DİĞER ---------------------------------------------------------- */
  --kart-oran:  3 / 4;      /* ürün kartı görseli */
  --gecis:      .25s ease;
  --gecis-yavas: .55s ease;
  --maks-genislik: 1680px;
  --z-ust: 40;  --z-katman: 100;
}

/* Admin: aynı dil, sıkı yoğunluk. Depo görevlisi ekranda 6 değil 20 satır görür. */
.yogunluk-sik {
  --yogunluk-satir:    32px;
  --yogunluk-hucre-y:  var(--a2);
  --yogunluk-hucre-x:  var(--a3);
  --yogunluk-govde:    12px;
  --yogunluk-bolum:    var(--a6);
  --yogunluk-grid:     12px;
  --lh-normal:         1.35;
}

/* Erişilebilirlik: §25.5 — kapsam dışı VARSAYILMAZ, temel her hâlükârda uygulanır */
*:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================================
   TEMEL BİLEŞEN SINIFLARI
   ========================================================================= */

.mikro {
  font-size: var(--fs-mikro);
  letter-spacing: var(--ls-mikro);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.etiket {
  font-size: var(--fs-mikro);
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--ink);
}

/* Tam genişlik, çerçeveli, büyük harf — referanstaki EKLE butonu */
.btn {
  display: block;
  width: 100%;
  padding: var(--a4);
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-kucuk);
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--birincil { background: var(--ink); color: var(--bg); }
.btn--birincil:hover { background: var(--bg); color: var(--ink); }
.btn--sessiz { border-color: var(--hairline); color: var(--muted); }
.btn--sessiz:hover { border-color: var(--ink); background: var(--bg); color: var(--ink); }
.btn:disabled { border-color: var(--hairline); color: var(--faint); cursor: not-allowed; background: var(--bg); }

.ayrac { height: 1px; background: var(--hairline); border: 0; margin: var(--a5) 0; }

/* Durum rozeti — renk YALNIZ burada işlevsel */
.rozet {
  display: inline-flex; align-items: center; gap: var(--a1);
  padding: 3px var(--a2);
  font-size: 9px; letter-spacing: var(--ls-etiket); text-transform: uppercase;
  border: 1px solid currentColor;
}
.rozet--sinyal  { color: var(--signal);  background: var(--signal-soft); }
.rozet--uyari   { color: var(--caution); background: var(--caution-soft); }
.rozet--olumlu  { color: var(--ok);      background: var(--ok-soft); }
.rozet--sessiz  { color: var(--muted);   background: transparent; border-color: var(--hairline); }