/* ==========================================================================
   1. TASARIM TOKENLARI
   Tema dile bağlı: EN = hardal sarısı, TR = koyu bordo.
   Tüm renk/ölçü kararları burada; başka hiçbir yerde çıplak renk yok.
   Intro da bu tokenları kullanıyor: intro katmanının zemini ile sitenin
   zemini aynı değişkenden geldiği için eşleşme tanım gereği birebir.
   ========================================================================== */
:root {
    --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Tek bir yarıçap ölçeği */
    --radius-sm: 2px;
    --radius-md: 4px;

    /* İnce çizgi kalınlığı. */
    --hair: 1px;

    /* TEK EASING ÖLÇEĞİ
       Önceden sekiz ayrı eğri dolaşıyordu (0.16/1/0.3, 0.25/1/0.5,
       0.4/0/0.2, düz `ease`...). Her biri tek başına iyiydi ama yan yana
       geldiklerinde site eşit hızda hareket etmiyordu; asıl pürüz oydu.
       Artık iki eğri var:

       --ease-out   : küçük her şey. Hemen başlayıp yavaşça duruyor —
                      hover, sönümleme, kayma bunda daha yumuşak.
       --ease-panel : yalnızca panelin açılıp kapanması. Dramatik duruş
                      korundu, sadece uçlardaki sertlik alındı. Eskisini
                      geri istersen: cubic-bezier(0.85, 0, 0.15, 1) */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-panel: cubic-bezier(0.66, 0.02, 0.16, 1);
    --anim-duration: 0.7s;

    /* Metin opaklıklarının alt sınırı: 0.65'in altına inmiyoruz.
       0.4 ve 0.5 WCAG AA kontrast eşiğinin (4.5:1) altında kalıyordu. */
    --muted: 0.65;
    --muted-strong: 0.8;

    /* Ham palet. Her iki tema da her zaman :root üzerinde tanımlı kalır ki
       JS, temayı henüz uygulamadan hedef rengi okuyabilsin (ripple + perde). */
    --mustard: #dfae2c;
    --maroon:  #57121f;

    /* Panel yüzeyleri de `--mustard`/`--maroon` gibi ADLI birer değer.
       Sebebi: `--surface` gövdede temaya göre değişiyor, oysa tarayıcı
       çubuklarının ardındaki şeritleri KÖK boyuyor (bkz. base.css) ve kök
       gövdeden miras alamıyor — kalıtım yalnızca aşağı doğru işler. İkisi
       burada, kökte durunca her iki yerden de okunabiliyor. */
    --surface-light: #fffcf2;
    --surface-dark:  #130308;

    /* --- HARDAL SARISI (İngilizce) --- */
    --bg: var(--mustard);
    --text: #1c1405;
    --line: rgba(28, 20, 5, 0.24);
    --surface: var(--surface-light);
    --hover-bg: #1c1405;
    --hover-text: #f7e6ae;

    /* Gölge bulanıklığı 200px'ten düşürüldü. Sebebi görünüm değil hız: tam
       ekran bir kutuya 200px'lik bulanık gölge, ekrandan taşan devasa bir
       yüzeyin boyanması demekti. 70px'te fark gözle görünmüyor, maliyet
       birkaç kat düşüyor. */
    --card-shadow: 0 34px 70px rgba(72, 51, 8, 0.26);
    --card-ring: rgba(28, 20, 5, 0.26);

    /* ŞERİDİN PARLAMASI — tek ayar noktası.
       İki ayrı şey yapıyor:
       `--reel-vivid` : rengin kendisi. Doygunluk ve kontrast, yani baskıdaki
                        kırmızı daha kırmızı, siyah daha oturaklı çıkıyor.
       `--reel-glow`  : kartın çevresindeki hale.
       Açık hardal zeminde ışığı ışıkla göstermek mümkün değil; orada hale
       sıcak ve koyu bir gölge olarak çalışıyor — kart zeminden ayrılıyor,
       renk öne çıkıyor. Koyu bordo temada gerçek bir ışıma mümkün, o yüzden
       orada açık renkli bir hale var (aşağıda .theme-maroon).
       Fazla geldiyse çarpanları 1.0'a çek; tamamen kapatmak için `none` yaz. */
    --reel-vivid: saturate(1.2) contrast(1.06);
    --reel-vivid-hover: saturate(1.34) contrast(1.09) brightness(1.03);
    --reel-glow: 0 8px 26px rgba(94, 64, 4, 0.30);
    --reel-glow-hover: 0 14px 38px rgba(94, 64, 4, 0.42);
}

/* --- KOYU BORDO (Türkçe) --- */
body.theme-maroon {
    --bg: var(--maroon);
    --text: #f6e7e4;
    --line: rgba(246, 231, 228, 0.24);
    --surface: var(--surface-dark);
    --hover-bg: #f6e7e4;
    --hover-text: #130308;
    --card-shadow: 0 34px 80px rgba(0, 0, 0, 0.62);
    --card-ring: rgba(246, 231, 228, 0.22);
    /* Koyu zeminde hale gerçekten ışıyor: sıcak ve açık bir yayılma, altında
       kartı zeminden ayıran koyu bir gölge. `--reel-vivid` :root'tan miras
       alınıyor, iki temada da aynı. */
    --reel-glow: 0 0 30px rgba(255, 206, 190, 0.20), 0 10px 26px rgba(0, 0, 0, 0.45);
    --reel-glow-hover: 0 0 46px rgba(255, 206, 190, 0.36), 0 16px 34px rgba(0, 0, 0, 0.5);
}