/* ============================================================
   PALET-SATIS — TOKEN KATMANI
   Tek doğruluk kaynağı. Renk/boşluk/tipografi burada tanımlanır.

   KURAL (CLAUDE.md §7.1):
   - Bu dosya DIŞINDA hiçbir yerde hardcode HEX YASAK.
   - JS'ten <style> enjeksiyonu YASAK.
   - CDN'den font/ikon çekmek YASAK.

   Tasarım dili: Açık zemin + kömür + turuncu (K66, K74 ile güncellendi).
   Zemin açık gri, kartlar beyaz, metin kömür, eylem turuncu. Koyu tema YOKTUR.
   ============================================================ */

:root{

  /* ============ 1. MARKA ============ */
  /* K74 (2026-08-24): dolgu turuncusu koyulaştırıldı, üstündeki metin BEYAZ oldu.
     Ölçülen kontrast: #C25400 üstünde beyaz = 4.6:1 → WCAG AA (4.5) geçer.
     Eski kurgu (canlı #FF7A00 + kömür metin) daha yüksek kontrastlıydı ama
     proje sahibi beyaz metni istedi; okunabilirlik turuncuyu koyulaştırarak korundu.
     Canlı turuncu tamamen atılmadı: vurgu/işaret rengi olarak --color-accent'te yaşıyor.
     Turuncu METİN hâlâ dolgu rengiyle yazılmaz — beyaz zeminde --color-primary kullanılır. */
  --color-primary:        #C25400;   /* koyu turuncu — buton dolgusu, aktif durum, turuncu metin */
  --color-primary-dark:   #9A4200;   /* hover/basılı — dolgudan bir tık koyu */
  --color-primary-light:  #FFF1E3;   /* soluk turuncu zemin, ikon kutusu */
  --color-primary-border: #FFC08A;
  --color-primary-rgb:    194,84,0;
  --color-on-primary:     #FFFFFF;   /* turuncu dolgu ÜSTÜNDEKİ metin — beyaz (K74) */
  --color-accent:         #FF7A00;   /* canlı turuncu — yalnız vurgu/işaret, ÜSTÜNE METİN YAZILMAZ */
  --color-accent-rgb:     255,122,0;

  /* ============ 2. NÖTR ============ */
  --color-bg:         #F4F5F7;   /* sayfa zemini — açık gri */
  --color-surface:    #FFFFFF;   /* kart, panel — beyaz, zeminden ayrışır */
  --color-surface-2:  #F7F8FA;   /* iç içe kart, hover, tablo başlığı */
  --color-surface-3:  #EDEFF2;   /* pasif alan, ayıraç dolgusu */
  --color-border:     #DDE1E6;
  --color-border-soft:#ECEEF1;
  --color-text:       #15191F;   /* başlık, ana metin — kömür */
  --color-text-rgb:   21,25,31;  /* kömürün rgb'si — fotoğraf üstü okunabilirlik perdesi için */
  --color-text-soft:  #3C444E;   /* gövde metni */
  --color-muted:      #6B7480;   /* etiket, placeholder, ikincil */
  --color-inverse:    #FFFFFF;   /* KOYU zemin üstü metin (.bg-dark) */

  /* ============ 3. ANLAMSAL ============
     -light  → soluk zemin
     -border → kenarlık
     base    → dolgu, ikon, kalın çizgi
     -text   → AÇIK zeminde okunur koyu metin rengi.
     Tonlar beyaz zeminde kontrast eşiğini geçecek şekilde seçildi. */
  --color-success:        #16A34A;
  --color-success-text:   #15803D;
  --color-success-light:  #E7F6EC;
  --color-success-border: #A7E0B8;
  --color-success-rgb:    22,163,74;

  --color-warning:        #D97706;
  --color-warning-text:   #B45309;
  --color-warning-light:  #FEF3E2;
  --color-warning-border: #F5C97F;
  --color-warning-rgb:    217,119,6;

  --color-danger:         #DC2626;
  --color-danger-text:    #B91C1C;
  --color-danger-light:   #FDECEC;
  --color-danger-border:  #F5AEAE;
  --color-danger-rgb:     220,38,38;

  --color-info:           #0891B2;
  --color-info-text:      #0E7490;
  --color-info-light:     #E2F5F9;
  --color-info-border:    #9BDCE8;
  --color-info-rgb:       8,145,178;

  --color-neutral:        #64748B;
  --color-neutral-text:   #475569;
  --color-neutral-light:  #F1F3F5;
  --color-neutral-border: #CBD5E1;

  /* ============ 4. ALAN ANLAMLARI (PALET-SATIS'e özel) ============
     Ekranlarda --color-success YAZMA. Bunları kullan.
     "Kâr hangi renk" kararı 20 ekrana dağılmasın diye tek yerde. */
  --color-money-in:    var(--color-success-text);  /* tahsilat, kasa artışı */
  --color-money-out:   var(--color-danger-text);   /* ödeme, kasa azalışı */
  --color-profit:      var(--color-success-text);  /* kâr */
  --color-loss:        var(--color-danger-text);   /* zarar */
  --color-receivable:  var(--color-info-text);     /* müşteriden alacak */
  --color-payable:     var(--color-danger-text);   /* tedarikçiye borç */
  --color-free-issue:  var(--color-warning-text);  /* ücretsiz çıkış */
  --color-disposal:    var(--color-neutral-text);  /* zayi */
  --color-stock:       var(--color-text);          /* stok adedi */
  --color-reversed:    var(--color-muted);         /* ters kayıtlanmış */

  /* ============ 5. ÖRTÜ / CAM ============ */
  --color-overlay: rgba(15,18,22,.45);
  --glass-bg:      rgba(255,255,255,.86);
  --glass-border:  rgba(15,18,22,.08);
  --glass-blur:    12px;

  /* ============ 6. BOŞLUK — 4px ölçek ============ */
  --sp-0:0;      --sp-1:4px;   --sp-2:8px;   --sp-3:12px;
  --sp-4:16px;   --sp-5:20px;  --sp-6:24px;  --sp-8:32px;
  --sp-10:40px;  --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* ============ 7. KÖŞE ============ */
  --r-sm:   6px;    /* rozet, küçük etiket */
  --r-md:   8px;    /* buton, input */
  --r-lg:   12px;   /* kart, tablo kabı */
  --r-xl:   16px;   /* panel, modal */
  --r-2xl:  24px;   /* öne çıkan kart */
  --r-full: 9999px; /* pill, avatar */

  /* ============ 8. TİPOGRAFİ ============
     Inter kuruluysa kullanılır; değilse sistem fontuna düşer.
     CDN'den font ÇEKİLMEZ. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text',
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, Monaco, monospace;

  --fs-xs:   12px;   /* etiket, tablo başlığı, yardım metni */
  --fs-sm:   13px;   /* ikincil metin, rozet */
  --fs-md:   14px;   /* GÖVDE — varsayılan */
  --fs-lg:   16px;   /* vurgulu gövde, kart başlığı */
  --fs-xl:   20px;   /* bölüm başlığı, KPI değeri */
  --fs-2xl:  24px;   /* sayfa başlığı */
  --fs-3xl:  30px;   /* büyük KPI */
  --fs-4xl:  36px;   /* durum ekranı ana rakamı */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.75;

  --ls-tight:  -.02em;
  --ls-normal: 0;
  --ls-wide:   .05em;    /* uppercase etiket */

  /* ============ 9. GÖLGE ============ */
  --shadow-xs: 0 1px 2px 0 rgb(16 24 40 / .05);
  --shadow-sm: 0 1px 3px 0 rgb(16 24 40 / .08);
  --shadow-md: 0 4px 6px -1px rgb(16 24 40 / .08), 0 2px 4px -2px rgb(16 24 40 / .05);
  --shadow-lg: 0 10px 15px -3px rgb(16 24 40 / .10), 0 4px 6px -4px rgb(16 24 40 / .06);
  --shadow-xl: 0 20px 25px -5px rgb(16 24 40 / .12), 0 10px 10px -5px rgb(16 24 40 / .06);
  /* Odak halkası. K74 sonrası inceltildi: turuncu koyulaşınca 3px/.30 halka
     kutunun dışına taşan kalın bir çerçeve gibi göründü. Kaldırılmadı —
     klavyeyle gezen kişi hangi alanda olduğunu görmek zorundadır; odak
     göstergesini silmek erişilebilirliği bozar. Kenarlığın da odakta
     --color-primary'ye dönmesi ikinci işarettir, halka tek başına taşımaz. */
  --shadow-focus: 0 0 0 2px rgba(var(--color-primary-rgb), .18);

  /* ============ 10. GEÇİŞ ============ */
  --tr-fast:   150ms ease;
  --tr-normal: 250ms ease;
  --tr-spring: 300ms cubic-bezier(.4,0,.2,1);

  /* ============ 11. KATMAN ============ */
  --z-base:1;  --z-sticky:100;  --z-dropdown:500;
  --z-overlay:900;  --z-modal:1000;  --z-toast:2000;

  /* ============ 12. ÖLÇÜ ============ */
  --h-control-sm: 32px;
  --h-control:    38px;   /* buton, input */
  --h-control-lg: 46px;
  --h-topbar:     64px;
  --w-sidebar:    260px;
  /* İçerik genişliği. 1400px, sol menüyle birlikte 1660px+ ekranlarda içeriği
     ortalayıp iki yana boşluk bırakıyordu; menüye yaslanmıyordu. Sınır tamamen
     kaldırılmadı — çok geniş ekranda tablo satırı göz için okunmaz uzunluğa çıkar. */
  --container-max:1680px;
}

/* ============ 13. TEMEL SIFIRLAMA ============ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1,"cv11" 1;
}

h1,h2,h3,h4,h5,h6{ margin:0; line-height:var(--lh-tight); letter-spacing:var(--ls-tight) }
h1{ font-size:var(--fs-2xl); font-weight:var(--fw-bold) }
h2{ font-size:var(--fs-xl);  font-weight:var(--fw-bold) }
h3{ font-size:var(--fs-lg);  font-weight:var(--fw-semibold) }
h4{ font-size:var(--fs-md);  font-weight:var(--fw-semibold) }

p{ margin:0 0 var(--sp-3) }
a{ color:var(--color-primary-dark); text-decoration:none }
a:hover{ text-decoration:underline }

/* Para ve adet HER YERDE hizalı olmalı */
.num,td.num,th.num,input[type="number"],.tabular{ font-variant-numeric:tabular-nums }

:focus-visible{ outline:none; box-shadow:var(--shadow-focus) }
::selection{ background:var(--color-primary-light); color:var(--color-primary-dark) }

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