/*
  EKON tasarım token'ları — CLAUDE.md §3'ün tek doğruluk kaynağı.
  Buradaki değerler sabittir; ara ton gerekirse mevcut hue'dan türetilir, yeni hue uydurulmaz.
*/

:root {
  /* ---- Renk: logodan türetildi (§3.1) ---- */
  --ink: #34383d;
  --ink-deep: #1e2125;
  --ink-soft: #5b6169;
  /*
    Turuncu ailesi marka kilidinden ölçüldü: --flame "YAZILIM" yazısının düz
    dolgusu, --flame-fold işaretteki K'nin gölge yüzü. OKLCH'te aynı hue
    ailesindeler (45.3° / 35.0°) — ara ton gerekirse bu iki uç arasından türetilir.
  */
  --flame: #fd6b01;
  --flame-fold: #c43100;
  --paper: #ffffff;
  --surface: #f5f5f4;
  --hairline: #e2e2e0;

  /*
    Açık zeminde display boyu aksan. --flame ile --flame-fold arasında,
    açıklık 0.60. Gerekçe: --flame açık zeminde (--surface üzerinde 2.64:1)
    grafik/başlık için gereken 3:1'i tutmuyor, --flame-fold ise gövde metni
    tonu; ikisinin arası hem marka ailesinde kalıyor hem eşiği geçiyor.
    --surface üzerinde 3.86:1, --paper üzerinde 4.21:1.
  */
  --flame-ember: #cf5600;

  /*
    Aynı hue'nun (45.3°) en açık basamağı — koyu zeminde vurgu için.
    Açıklık 0.87; --ink-deep üzerinde 10.6:1. Hero'daki dönen vurgunun
    en açık tonu bu; yeni hue değil, --flame ailesinin devamı.
  */
  --flame-tint: #fec5ab;

  /*
    Temadan bağımsız koyu yüzeyler: yörünge küresi kendi malzemesini iki temada
    da korur (bkz. .orbit__plate), üstünde duran marka işareti de öyle. Koyu
    temanın bant rolleri de bu iki değere dayanır — tek kaynak, iki kullanım.
  */
  --on-deep-back: #d3d3d3;
  --on-deep-front: #b6bac0;

  /* ---- Tipografi (§3.2) ---- */
  --font-display: "Urbanist", "Arial", sans-serif;
  --font-body: "Urbanist", "Arial", sans-serif;
  --font-mono: "Urbanist", "Arial", sans-serif;

  /* Tip ölçeği — ara değer üretilmez */
  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-22: 1.375rem;
  --text-28: 1.75rem;
  --text-36: 2.25rem;
  --text-48: 3rem;
  --text-64: 4rem;
  --text-88: 5.5rem;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-mono: 0.08em;

  /* Gövde metni bloğu en fazla 68 karakter (§3.2) */
  --measure: 68ch;

  /* ---- Aralık ---- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;

  --section-space: clamp(4rem, 9vw, 8rem);
  /*
    Kabuk sınırlı genişlikte ortalanır: geniş ekranda satır uzunluğu ve grid
    hücresi kontrolde kalır, yanlarda gerçek boşluk oluşur. Dar ekranda
    max-width devreye girmez; boşluğu --gutter verir (360px'te 24px).
    Şerit/marka bandı gibi bilinçli tam-genişlik bölümler .container dışında
    kalır, bu yüzden bu değerden etkilenmez.
  */
  --container-max: 86rem;
  --gutter: clamp(1.5rem, 5vw, 3rem);

  /* ---- Katlama geometrisi (§3.3) ---- */
  --fold-angle: 45deg;
  --fold-depth: clamp(1.75rem, 5vw, 4rem);
  --chamfer: clamp(0.875rem, 1.6vw, 1.5rem);
  --hairline-width: 1px;

  /*
    Sayfa perdesinin katlama kesimi: perdenin ön kenarı düz inmez, logodaki
    şerit gibi eğik gelir. Yükseklikten türetilir ki eğim her ekran oranında
    aynı okunsun. Perdenin ön kenarındaki turuncu aksan şeridinin kalınlığı
    ayrı: aksan kalınlaşırsa §3.1'in yasakladığı geniş turuncu zemine döner.
  */
  --veil-bevel: clamp(4rem, 24vh, 15rem);
  --veil-edge: 8px;

  /* ---- Ortam katmanı (arka plan) ---- */
  /*
    Sayfanın arkasında duran katlama dokusu. Değerler bilinçli olarak
    görünürlüğün eşiğinde: doku okunurluğu değil, yüzeyin ölü olmadığını
    anlatır. Alfa yükseltilmez — metin kontrastı bu katmanın üstünde ölçülür.
  */
  --ambient-line: rgb(52 56 61 / 0.05);
  --ambient-lit: rgb(253 107 1 / 0.05);
  --ambient-fold: rgb(196 49 0 / 0.04);
  /*
    Doku aralığı ve bir tam periyotluk yatay kayma. 45°'lik desende yatayda
    aralık × √2 kadar kayınca desen kendisiyle üst üste oturur; döngü
    başa sardığında sıçrama olmaz.
  */
  --ambient-weave-gap: 104px;
  --ambient-weave-shift: 147px;

  /* ---- Hareket ---- */
  --ease-fold: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Ortam hareketi: iki ucunda da yavaşlar — gidiş dönüş fark edilmez. */
  --ease-drift: cubic-bezier(0.45, 0, 0.55, 1);
  /*
    Perdenin süpürme eğrisi — iki yarısı da bunu kullanır ki şerit iki sayfa
    arasında tek bir hareket gibi okunsun.
    --ease-fold buraya uymuyor: mesafenin %70'ini sürenin ilk %20'sinde alıyor,
    küçük reveal kaymalarında doğru ama tam ekran bir perdede hareket
    görünmeden bitiyordu. Bu eğri yolu süreye yayar: yumuşak başlar,
    ortada hızlanır, örttüğü/çıktığı yerde oturur.
  */
  --ease-blade: cubic-bezier(0.45, 0.05, 0.3, 1);
  --duration-reveal: 620ms;
  --duration-ui: 180ms;
  /* Çizgi/şerit çizilmesi ve görsel oturması — reveal'in içinde, ona bağlı. */
  --duration-draw: 520ms;
  --duration-media: 900ms;
  /* Panel ve bant girişleri: kullanıcı beklemesin, ama yerden bitmesin. */
  --duration-panel: 240ms;
  /* Marka işaretinin tek yüzünün açılma süresi; yüzler 90ms arayla başlar. */
  --duration-mark-fold: 520ms;
  /*
    Sayfa perdesi. Ayrılış kapanıştır, bu yüzden kısa: ziyaretçi zaten gitmeye
    karar vermiş, bekletmenin karşılığı yok. Açılış bir basamak uzun, perde
    çekilirken yeni sayfa okunmaya başlasın diye. İkisinin toplamı eski
    perdenin (420+560) yarısından az; süre kısaldıkça yorulma da azalıyor.
  */
  --duration-page-leave: 240ms;
  --duration-page: 320ms;
  /*
    Ortam katmanı dakikalar mertebesinde ilerler. Hareketin fark edilmesi
    değil, bakınca "duruyor mu" diye tereddüt ettirmesi hedef (§3.3: cesaret
    katlama motifinde harcanır, geri kalan sakin kalır).
  */
  --duration-ambient-weave: 180s;
  --duration-ambient-band: 96s;
  /*
    Bant dokusu (hero, kapanış) ortam katmanından belirgin ölçüde hızlı akar:
    o katman sayfanın arkasında durur, bu ikisi bölümün kendi yüzeyidir ve
    "emir akışı" jestini taşır (§3.4). Yine de göz yormaz: en hızlı katman
    saniyede ~8px yol alır.
  */
  --duration-field-weave: 36s;
  --duration-field-band: 24s;
  /*
    Kayma yolları. 45°'lik desende yatay periyot = dik periyot × √2; yol bunun
    tam katı olduğu için döngü başa sardığında sıçrama görünmez.
  */
  --field-weave-shift: calc(14px * 10 * 1.4142136); /* ince örgü, 14px aralık */
  --field-band-shift: calc(132px * 1.4142136); /* hero turuncu şerit */
  --field-closing-shift: calc(84px * 1.4142136); /* kapanış şeridi */

  /* ---- Katman ---- */
  --z-ambient: -1;
  --z-header: 100;
  --z-menu: 110;
  --z-consent: 120;
  --z-skip: 130;
  --z-veil: 140;
}

/* ==========================================================================
   Tema: bant rolleri
   ==========================================================================

   Sayfa iki yüzeyden kurulu. İçerik bölümleri --paper / --surface üzerinde
   durur ve her iki temada da aynı kalır. "Bant" dediğimiz ikinci yüzey —
   header, hero, footer, kapanış CTA'sı, alıntı, çerez bildirimi ve
   .section.on-dark — temaya göre çevrilen tek katmandır.

   Neden --ink-deep ve --on-dark doğrudan çevrilmedi: --ink-deep bazı yerlerde
   zemin (.hero), bazı yerlerde metin rengi (bant üstündeki dolu butonun yazısı)
   olarak kullanılıyor. Tek token'ı çevirmek ikisini ters yöne götürürdü, biri
   zorunlu olarak okunmaz kalırdı. Bu yüzden rol adları ayrıldı: aşağıdaki her
   token tek bir işi tarif eder ve temaya göre tanımı değişir, kullanım yeri
   değişmez.

   .on-dark sınıf adı korundu: sınıf "ters bant" demektir, rengi temadan gelir.
   Dokuz view'da geçtiği için yeniden adlandırmanın karşılığı yok.
*/

:root,
:root[data-theme="dark"] {
  --band-surface: var(--ink-deep);
  /* Header kendi token'ında: açık temada bantlardan bir basamak yukarı çıkar. */
  --header-surface: var(--ink-deep);

  --band-ink: var(--paper);
  --band-ink-soft: var(--on-deep-front);

  /* Bant üstündeki ayırıcı ve dolgular. Zemin koyu → beyaz alfa. */
  --band-hairline: rgb(255 255 255 / 0.1);
  --band-veil-1: rgb(255 255 255 / 0.05);
  --band-veil-2: rgb(255 255 255 / 0.12);
  --band-veil-3: rgb(255 255 255 / 0.16);
  /* Kenar çizgileri: buton çerçevesi saçaktan güçlü, hücre kenarı arada. */
  --band-edge: rgb(255 255 255 / 0.4);
  --band-edge-soft: rgb(255 255 255 / 0.28);
  /* Yanan düğümün kenarı — süreç hattında --lit ile buraya doğru karışır. */
  --band-edge-lit: rgb(255 255 255 / 0.6);

  /* Hero ve kapanış bandındaki ince şerit dokusu — görünürlüğün eşiğinde. */
  --band-weave: rgb(255 255 255 / 0.045);
  /* Yörünge izleri (kesikli çizgi) ve parçacıklar. Küre kendi malzemesini
     korur; bunlar bandın üstüne çizildiği için temayla döner. */
  --band-trace: rgb(255 255 255 / 0.13);
  --band-spark: rgb(255 255 255 / 0.85);

  /*
    Bant zemininin sıfır alfalı hâli. Gradyan uçlarında `transparent` yerine
    bu kullanılır: bant rengiyle aynı hue'dan söner, ara tonda gri sızmaz.
  */
  --band-surface-fade: rgb(30 33 37 / 0);

  /*
    Aksan ikiye ayrıldı çünkü kontrast eşiği ikiye ayrılıyor (§3.1):
    --band-accent gövde boyu metinde de kullanılabilir (≥4.5:1),
    --band-accent-soft yalnızca display boyu başlık ve grafik dolgusudur (≥3:1).

    Koyu zeminde markanın kendi turuncusu doğrudan kullanılabiliyor: --flame,
    --ink-deep üzerinde 5.60:1. (Önceki turuncu 4.41:1'de kalıyordu ve bu yüzden
    yalnız burada kullanılan bir --flame-lit basamağı türetilmişti; yeni turuncu
    bir basamak açık olduğu için o ara ton gereksiz kaldı.)
  */
  --band-accent: var(--flame);
  --band-accent-soft: var(--flame-tint);

  /* Bant üstündeki dolu buton: zemin ile yazı birlikte çevrilir. */
  --band-btn-bg: var(--paper);
  --band-btn-ink: var(--ink-deep);

  /*
    Bandın bir basamak yukarısı: sayfanın üstünde duran yüzeyler (çerez paneli).
    --band-surface kullanılamıyor, çünkü panel çoğu zaman kendisiyle aynı rengi
    taşıyan bir bandın (hero, kapanış) üstüne düşüyor ve yüzey kayboluyordu.
    Gölge de temayla döner: koyu temada basamağı yüzey farkı, açık temada gölge taşır.
  */
  --band-raised: var(--ink);
  --band-raised-shadow: rgb(0 0 0 / 0.5);

  /* Marka işaretinin arka yüzü; ön yüz --band-ink-soft'tan gelir. */
  --band-mark-back: var(--on-deep-back);
}

/*
  Açık tema. Bant zemini --surface: içerik bölümü beyaz kaldığı için ikisi
  arasındaki basamak katlama kesiminin okunmasına yetiyor, header ise --paper'a
  çıkıp saçak çizgisiyle ayrılıyor.

  Kontrast (§9, bant zemini #f5f5f4 üzerinde):
    --ink 10.82:1 · --ink-soft 5.73:1 · --flame-fold 5.08:1 · --flame-ember 3.86:1
    · --flame 2.64:1
  Bu yüzden metin boyu aksan --flame-fold, display boyu aksan --flame-ember.
  Marka turuncusunun kendisi açık zeminde 3:1'in altında kalıyor; --flame-tint
  ise koyu zemin için türetilmişti. İkisi de açık temada kullanılmaz.
*/
:root[data-theme="light"] {
  --band-surface: var(--surface);
  --header-surface: var(--paper);

  --band-ink: var(--ink);
  --band-ink-soft: var(--ink-soft);

  /* Zemin açık → mürekkep alfası. Alfalar beyaz karşılıklarıyla aynı görünür
     ağırlığa denk gelecek şekilde ayarlandı, birebir kopyalanmadı. */
  --band-hairline: rgb(52 56 61 / 0.14);
  --band-veil-1: rgb(52 56 61 / 0.05);
  --band-veil-2: rgb(52 56 61 / 0.09);
  --band-veil-3: rgb(52 56 61 / 0.12);
  --band-edge: rgb(52 56 61 / 0.34);
  --band-edge-soft: rgb(52 56 61 / 0.2);
  --band-edge-lit: rgb(52 56 61 / 0.5);

  --band-weave: rgb(52 56 61 / 0.055);
  --band-trace: rgb(52 56 61 / 0.18);
  --band-spark: rgb(52 56 61 / 0.62);

  --band-surface-fade: rgb(245 245 244 / 0);

  --band-accent: var(--flame-fold);
  --band-accent-soft: var(--flame-ember);

  --band-btn-bg: var(--ink);
  --band-btn-ink: var(--paper);

  --band-raised: var(--paper);
  --band-raised-shadow: rgb(30 33 37 / 0.18);

  --band-mark-back: var(--ink);
}

/*
  §3.3: prefers-reduced-motion altında reveal ve gradyan animasyonu kapanır,
  katlama geometrisi statik kalır.
*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-reveal: 0ms;
    --duration-ui: 0ms;
    --duration-draw: 0ms;
    --duration-media: 0ms;
    --duration-panel: 0ms;
    --duration-page-leave: 0ms;
    --duration-page: 0ms;
  }
}