/* ==========================================================================
   Ç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ı */

  /* ---- 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 -------------------------------------------------------- */
  --kap: 1200px;
  --kap-dar: 780px;
  --olcu: 68ch;             /* kılavuz: 60-75 karakter */
  --kenar: clamp(1.25rem, 4vw, 2.5rem);
  --bolum-y: clamp(4rem, 8vw, 7.5rem);
  --ustbilgi-y: 68px;

  /* 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);
  }
}