/* =============================================================
   02-tokens.css
   NE YAPAR : Sitenin butun renk, yazi tipi ve olcu degerleri.
              TEK KAYNAK burasi.
   BAGLI    : Hicbir seye.
   NASIL    : Rengi degistirmek istiyorsan SADECE bu dosyaya bak.
              Baska hicbir CSS dosyasinda duz renk kodu (#abc123)
              yazmiyoruz; hepsi buradaki degiskenleri kullaniyor.
   ============================================================= */

:root {
  /* Header (partials/header.html, JS ile gelir) yuksekligi TAHMINI.
     03-nav.js gercek olcuyu yazinca bu ezilir. Tahmin gercege esit
     olsun ki header gelince sayfa kaymasin (CLS). Mobil: 07-responsive. */
  --ust-yukseklik: 91px;
  /* -----------------------------------------------------------
     MARKA — elektrik camgobegi + sicak karsit
     Web tasarim studyosunun kendi sitesi: palet de portfolyonun
     parcasi. Tek bir canli vurgu, yaninda sicak bir karsit renk.
     Gradyan klisesinden kacinildi; renk KOYU zeminde patliyor.
     ----------------------------------------------------------- */
  --marka:          #0e8f96;   /* acik zeminde okunur camgobegi */
  --marka-koyu:     #075055;
  --marka-acik:     #d6f2f3;
  --marka-vurgu:    #22e0d0;   /* KOYU zeminde parlayan elektrik ton */
  --marka-logo:     #56bfcc;   /* logo ikonu icin: yumusak turkuaz, Demet Sen'in ismindeki
                                   "S" -> "Ş" fikrinden ilham; ayri tutuldu, sitenin genel
                                   vurgu rengini (marka-vurgu) degistirmez */

  --sicak:          #ff7a45;   /* karsit vurgu — az ve yerinde kullan */
  --sicak-koyu:     #c4501f;
  --sicak-acik:     #ffe8de;

  /* -----------------------------------------------------------
     NOTR — iki dunya
     Site acik ve koyu bolumler arasinda ritim kuruyor. Her iki
     dunyanin kendi metin/zemin/cizgi seti var; karistirilmaz.
     ----------------------------------------------------------- */

  /* Acik bolumler */
  --murekkep:       #0b1014;   /* ana metin */
  --murekkep-2:     #3b4a56;   /* ikincil metin */
  --soluk:          #6b7c88;   /* aciklama, etiket */
  --kagit:          #ffffff;   /* sayfa zemini */
  --yuzey:          #f2f6f8;   /* kart, bolum zemini */
  --yuzey-2:        #e6eef2;
  --cizgi:          #d9e3e9;   /* kenarlik */

  /* Koyu bolumler — hero, portfolyo, footer */
  --gece:           #0b1014;   /* koyu bolum zemini */
  --gece-2:         #131c22;   /* koyu bolumde kart zemini */
  --gece-3:         #1c272f;
  --gece-cizgi:     #26333c;
  --gece-metin:     #e8f0f3;   /* koyu zeminde ana metin */
  --gece-metin-2:   #9fb2bd;   /* koyu zeminde ikincil metin */
  --gece-soluk:     #63757f;

  /* --- Durum renkleri --- */
  --basari:         #1f7a4d;
  --basari-zemin:   #e2f4ea;
  --hata:           #c0392b;
  --hata-zemin:     #fbe6e3;
  --uyari:          #a55a09;
  --uyari-zemin:    #fbeed9;

  /* --- Yazi tipleri --- */
  --yazi-baslik: "Newsreader", Georgia, "Times New Roman", serif;
  --yazi-govde:  "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --yazi-kod:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* -----------------------------------------------------------
     TIPOGRAFI OLCEGI — az sayida, belirgin kademe
     Yakin boyutlar (16 ve 17 gibi) hiyerarsi kurmaz, kararsiz
     gorunur. Sicramalari buyuk tutuyoruz ki hiyerarsi net olsun.
     ----------------------------------------------------------- */
  --bs-xs:   0.75rem;   /* 12 — etiket, mono */
  --bs-s:    0.875rem;  /* 14 — ikincil metin */
  --bs-m:    1rem;      /* 16 — govde */
  --bs-l:    1.25rem;   /* 20 — kart basligi */
  --bs-xl:   1.75rem;   /* 28 — h3 */
  --bs-2xl:  2.25rem;   /* 36 — h2 */
  --bs-3xl:  3rem;      /* 48 — h1 */
  --bs-4xl:  4rem;      /* 64 — hero */

  /* -----------------------------------------------------------
     BOSLUK — 8 PIKSEL IZGARASI
     Butun bosluklar 8'in kati. Gozun "hizali" dedigi sey budur.
     Ara deger (13px, 22px gibi) YAZILMAZ; ritmi bozar.
     ----------------------------------------------------------- */
  --bo-1: 8px;
  --bo-2: 16px;
  --bo-3: 24px;
  --bo-4: 32px;
  --bo-5: 48px;
  --bo-6: 72px;
  --bo-7: 104px;

  /* -----------------------------------------------------------
     DERINLIK — 3 kademe, hepsi ayni isik yonunden
     Her kutuya golge basmiyoruz. Golge "bu one cikti" demektir;
     her yerde kullanilirsa hicbir sey one cikmaz.
       1 = hafifce ayrik (kart durur halde)
       2 = yukseldi (hover)
       3 = ustte yuzuyor (menu, modal)
     ----------------------------------------------------------- */
  --derinlik-1: 0 1px 2px rgba(11, 16, 20, .06);
  --derinlik-2: 0 12px 32px -16px rgba(11, 16, 20, .35);
  --derinlik-3: 0 24px 60px -24px rgba(11, 16, 20, .5);
  --derinlik-vurgu: 0 18px 44px -20px rgba(34, 224, 208, .45);

  /* --- Diger --- */
  --kose:        10px;    /* kose yuvarlakligi */
  --kose-kucuk:  6px;
  --golge:       var(--derinlik-1);
  --genislik:    1120px;  /* icerik maksimum genisligi */
  --gecis:       .18s ease;
  --gecis-yumusak: .45s cubic-bezier(.22, 1, .36, 1);   /* kartlar, belirme */
  --gecis-yavas:   .8s  cubic-bezier(.22, 1, .36, 1);   /* scroll ile belirme */
}