/* ==========================================================================
   ÇAKMAK PEN . 01 TOKEN
   Tek kaynak: tüm renk, ölçü, boşluk ve hareket değerleri burada tanımlanır.
   Başka hiçbir CSS dosyasında ham hex, ham px ölçüsü veya ham süre YAZILMAZ.

   Renk paleti EKT Akademi Kurum Kimliği Kılavuzu v1.0'dan devralınmıştır.
   Ölçülen kontrast oranları: /ornek/kontrast-testi.html
   ========================================================================== */

:root {
  /* ---- Kurumsal renkler (değiştirilemez) ------------------------------- */
  --yesil: #0e332e;         /* PANTONE 3435 C . ana kimlik */
  --antrasit: #2c3033;      /* PANTONE 447 C  . taşıyıcı */
  --siyah: #0a0a0a;         /* PANTONE Black 6 C */
  --beyaz: #ffffff;

  /* ---- Yeşil skalası (ana renkten türetilmiş) -------------------------- */
  --yesil-100: #0e332e;
  --yesil-90: #17453d;
  --yesil-80: #26564d;
  --yesil-70: #3d6b61;
  --yesil-60: #5a8379;
  --yesil-50: #7c9e95;
  --yesil-40: #a1b9b2;
  --yesil-30: #c4d3ce;
  --yesil-20: #dee7e4;
  --yesil-10: #eff4f2;

  /* ---- Nötr skalası ---------------------------------------------------- */
  --notr-900: #17191b;
  --notr-800: #2c3033;
  --notr-700: #474b4f;
  --notr-600: #61656a;
  --notr-500: #83878b;
  --notr-400: #a7aaae;
  --notr-300: #cacccf;
  --notr-200: #e2e4e6;
  --notr-100: #f0f1f2;
  --notr-50: #f7f8f8;

  /* ---- Anlamsal renkler ------------------------------------------------ */
  --zemin: var(--beyaz);
  --zemin-yumusak: var(--notr-50);
  --zemin-tint: var(--yesil-10);
  --zemin-koyu: var(--yesil-100);
  --zemin-antrasit: var(--antrasit);

  --metin: var(--siyah);
  --metin-sessiz: var(--notr-700);
  --metin-silik: var(--notr-600);
  --metin-negatif: var(--beyaz);
  --metin-negatif-sessiz: var(--yesil-30);

  /* Dekoratif ayrac ve kart kenari. WCAG 1.4.11 kapsaminda degil:
     icerigin anlasilmasi bunlara bagli degil, esik aranmaz. */
  --cizgi: var(--notr-200);
  --cizgi-guclu: var(--notr-300);
  --cizgi-negatif: rgba(255, 255, 255, 0.18);
  --cizgi-negatif-guclu: rgba(255, 255, 255, 0.34);

  /* Form alani, dugme ve secilebilir ogenin kenari. Bunlar arayuz bileseni,
     WCAG 1.4.11 geregi en az 3:1 OLMAK ZORUNDA. Dekoratif cizgiyle
     ayni token kullanilmaz. */
  --cizgi-form: var(--notr-600);
  --cizgi-form-negatif: rgba(255, 255, 255, 0.62);

  /* Eylem rengi ana kimlik rengidir. Palet dışı vurgu rengi YOK. */
  --eylem: var(--yesil-100);
  --eylem-uzeri: var(--beyaz);
  --eylem-hover: var(--yesil-90);
  --eylem-basili: #0a2621;

  --uyari: #8a5a00;
  --hata: #a02218;
  --basarili: #1a6340;

  /* ---- Tipografi -------------------------------------------------------
     Archivo değişken font. wght 100-300 aralığı bu projede KULLANILMAZ.
     Türkçe karakterler iki alt kümeye bölünmüştür, ikisi de yüklenir.     */
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Genişlik ekseni: doğramanın dar ve geniş profil kesitleri gibi */
  --gen-dar: 87;
  --gen-normal: 100;
  --gen-genis: 112;

  /* Gövde 17px SABİT. Kılavuz şartı, akışkan yapılmaz. */
  --fs-govde: 1.0625rem;

  --fs-display: clamp(2.5rem, 1.3rem + 4.8vw, 4.5rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.15rem + 1.9vw, 2.375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-giris: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-kucuk: 0.9375rem;
  --fs-mini: 0.8125rem;
  --fs-etiket: 0.75rem;

  --satir-siki: 1.05;
  --satir-orta: 1.25;
  --satir-govde: 1.7;       /* kılavuz şartı */

  --aralik-display: -0.03em;
  --aralik-baslik: -0.02em;
  --aralik-govde: 0;
  --aralik-etiket: 0.24em;  /* kılavuz şartı */

  /* Cekmece perdesi */
  --perde: rgba(10, 10, 10, 0.55);

  /* ---- Boşluk (4px tabanlı) -------------------------------------------- */
  --b1: 0.25rem;
  --b2: 0.5rem;
  --b3: 0.75rem;
  --b4: 1rem;
  --b5: 1.5rem;
  --b6: 2rem;
  --b7: 2.5rem;
  --b8: 3rem;
  --b9: 4rem;
  --b10: 5rem;

  /* ---- Yerleşim -------------------------------------------------------- */
  /* 1200 -> 1440. Genis ekranda iki yanda kalan olu alan 2560px'te
     680px'ten 560px'e, 1920px'te 360px'ten 240px'e iner.
     TAVAN 1440'ta: bunun ustunde ustbilgiyi icerikle dolduramiyoruz ve
     hero metin sutunu 68ch okunabilirlik sinirini asiyor.
     DIKKAT: bu deger buyutulmeden ONCE .izgara--4 sutun kurallari
     kontrol edilmeli, yoksa 8 kart 5+3'e duser ve yan yana uc kart olur. */
  --kap: 1440px;
  /* 780 -> 840. Boylece .izgara--2 gercekten iki sutuna cikiyor
     (iki hucre icin gereken 728px, 840-80=760px ile karsilaniyor). */
  --kap-dar: 840px;
  --olcu: 68ch;             /* kılavuz: 60-75 karakter */
  --kenar: clamp(1.25rem, 4vw, 2.5rem);
  --bolum-y: clamp(4rem, 8vw, 7.5rem);
  /* Ustbilgi yuksekligi akiskan: 1200px'te 68px (eski sabit degerle birebir),
     2560px'te 84px. Erisilebilirlik sozlesmesi akiskan olcek istiyor. */
  --ustbilgi-y: clamp(4.25rem, 3.37rem + 1.18vw, 5.25rem);

  /* ---- Bilesen olculeri (ham px bu dosyanin disinda yazilmaz) ---------- */
  --ikon-kucuk: 1.25rem;        /* 20px: ustbilgi, cekmece, ara cubugu ikonu */
  --logo-y-dar: 1.5rem;         /* 24px */
  --logo-y-orta: 1.75rem;       /* 28px */
  --logo-y-genis: 2.125rem;     /* 34px */
  --altbilgi-logo-y: clamp(1.5rem, 1.8vw, 1.75rem);
  --cekmece-satir-y: 3.25rem;   /* 52px */
  --ara-cubugu-y: 3.5rem;       /* 56px */

  /* Dokunma hedefi: kılavuz en az 44x48px. Genişlik 48, yükseklik 44. */
  --dokunma-g: 48px;
  --dokunma-y: 44px;

  /* Görsel oranı: set %83 dikey, galeri sabit 3:4 kurulur */
  --oran-galeri: 3 / 4;
  --oran-hero: 4 / 5;

  /* ---- Köşe yarıçapı ---------------------------------------------------
     Aşırı yuvarlak radius yasak. Tavan 10px, pill (999px) hiç yok.        */
  --radius-yok: 0;
  --radius-kucuk: 3px;
  --radius: 6px;
  --radius-buyuk: 10px;

  /* ---- Hareket ---------------------------------------------------------- */
  --sure-hizli: 160ms;
  --sure: 320ms;
  --sure-yavas: 620ms;
  --yumusama: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Odak ------------------------------------------------------------
     outline + offset kullanılır. Gölge ile halo YAPILMAZ (yasak liste).
     Offset'in açtığı boşluk zaten zemine karşı ayrımı sağlar.             */
  --odak: var(--yesil-100);
  --odak-kalinlik: 3px;
  --odak-bosluk: 3px;

  /* ---- Katman sırası ---------------------------------------------------- */
  --z-ustbilgi: 100;
  --z-cekmece: 200;
  --z-buyutec: 300;
  --z-atla: 400;
}

/* --------------------------------------------------------------------------
   KOYU YÜZEY
   Bir bölüm .koyu sınıfı aldığında anlamsal token'lar yeniden bağlanır.
   Böylece bileşenlerin hiçbiri "koyu zeminde miyim" diye sormak zorunda kalmaz.
   -------------------------------------------------------------------------- */
.koyu {
  --zemin: var(--yesil-100);
  --zemin-yumusak: var(--yesil-90);
  --zemin-tint: var(--yesil-90);
  --metin: var(--beyaz);
  --metin-sessiz: var(--yesil-30);
  --metin-silik: var(--yesil-40);
  --cizgi: var(--cizgi-negatif);
  --cizgi-guclu: var(--cizgi-negatif-guclu);
  --cizgi-form: var(--cizgi-form-negatif);
  --eylem: var(--beyaz);
  --eylem-uzeri: var(--yesil-100);
  --eylem-hover: var(--yesil-20);
  --eylem-basili: var(--yesil-30);
  --odak: var(--beyaz);
}

.antrasit {
  --zemin: var(--antrasit);
  --zemin-yumusak: var(--notr-900);
  --zemin-tint: var(--notr-900);
  --metin: var(--beyaz);
  --metin-sessiz: var(--notr-300);
  --metin-silik: var(--notr-400);
  --cizgi: var(--cizgi-negatif);
  --cizgi-guclu: var(--cizgi-negatif-guclu);
  --cizgi-form: var(--cizgi-form-negatif);
  --eylem: var(--beyaz);
  --eylem-uzeri: var(--antrasit);
  --eylem-hover: var(--notr-200);
  --eylem-basili: var(--notr-300);
  --odak: var(--beyaz);
}

/* --------------------------------------------------------------------------
   KULLANICI TERCİHLERİ
   -------------------------------------------------------------------------- */

/* Hareket azaltma: tüm geçiş ve animasyonlar kapanır. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sure-hizli: 0ms;
    --sure: 0ms;
    --sure-yavas: 0ms;
  }
}

/* Yüksek kontrast: sessiz metinler koyulaşır, çizgiler belirginleşir,
   odak halkası kalınlaşır. */
@media (prefers-contrast: more) {
  :root {
    --metin-sessiz: var(--siyah);
    --metin-silik: var(--notr-800);
    --cizgi: var(--notr-500);
    --cizgi-guclu: var(--notr-700);
    --cizgi-form: var(--siyah);
    --odak-kalinlik: 4px;
  }

  .koyu {
    --metin-sessiz: var(--beyaz);
    --metin-silik: var(--yesil-20);
    --cizgi: rgba(255, 255, 255, 0.45);
    --cizgi-guclu: rgba(255, 255, 255, 0.7);
  }

  .antrasit {
    --metin-sessiz: var(--beyaz);
    --metin-silik: var(--notr-200);
    --cizgi: rgba(255, 255, 255, 0.45);
    --cizgi-guclu: rgba(255, 255, 255, 0.7);
  }
}