/* ════════════════════════════════════════════════════════════════
   GLOBUNI · TASARIM TOKEN'LARI · TEK KAYNAK
   ────────────────────────────────────────────────────────────────
   Dört panel bu dosyayı `build/bundle.py` ile İÇİNE ALIR; sınav
   ekranı ve yönetim paneli `/kit/tokens.css` olarak BAĞLAR. İki
   dağıtım yolu, tek kaynak.

   ⚠ 02.11.2026 · ÖLÇÜLEN ÜÇ KUSUR BURADA KAPANDI
   ────────────────────────────────────────────────────────────────
   Üç yüzey üç ayrı tasarım sistemi kullanıyordu (ölçüldü, tahmin
   değil):

   1. YAZI TİPİ · Yönetim paneli `Inter` istiyordu ama o yazı tipi
      HİÇ SUNULMUYOR — yalnızca Plus Jakarta Sans ve JetBrains Mono
      barındırılıyor. Panel sistem yazı tipine düşüyordu, sınav
      ekranı markanın yazı tipini kullanıyordu: iki ekran iki ayrı
      ürün gibi görünüyordu. Tek aile: Plus Jakarta Sans.

   2. ZEMİN · Sınav ekranı SICAK krem (#FBFAF7 · #E3DED4), yönetim
      paneli SOĞUK gri (#F5F7F8 · #DEE4E7). Aynı üründe iki farklı
      nötr. Tek nötr: markanın teal'ine doğru hafif eğik, soğuk
      griden sıcak, kremden serin.

   3. ÖLÇEK · Sınav ekranında 9, panelde 5 farklı köşe yarıçapı;
      panelde 4, sınav ekranında 1 gölge. Tek ölçek.

   ⚠ KONTRAST YÜKSELTİLDİ. Kullanıcı "renkler soluk, bölümler
   arasında ayrım yok" dedi ve haklıydı: `--line` iki yüzeyde de
   zemine çok yakındı, `--ink-3` beyaz üzerinde 4.5:1'in altındaydı.
   Çizgiler koyulaştı, üçüncül metin WCAG AA'ya çekildi.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* ── Marka ────────────────────────────────────────────────────
     Teal ailesi korundu: ürünün kimliği bu ve üç yüzeyde de AYNI
     değerlerle zaten tanımlıydı — sorun renk seçimi değil,
     uygulanışıydı. */
  --brand:#15485E; --brand-600:#1D6180; --brand-500:#2C7E9E;
  --brand-100:#CFE3EB; --brand-50:#EAF3F6;

  /* ── Nötrler · SEÇİLDİ, DEVRALINMADI ──────────────────────────
     Saf gri "düşünülmemiş" okunur; bu nötrler markanın teal'ine
     doğru hafifçe eğik. Zemin–yüzey farkı gözle seçilebilir olmak
     zorunda: kartın nerede bittiği belli olmalı. */
  --bg:#F4F7F8;          /* sayfa zemini */
  --bg-alt:#E9EFF2;      /* ikincil zemin · tablo başlığı, şerit */
  --surface:#FFFFFF;     /* kart yüzeyi */
  --surface-2:#FBFCFD;   /* iç içe kart */

  /* Çizgiler · ESKİSİNDEN KOYU. Önceki değerler (#E3DED4/#DEE4E7)
     zeminle neredeyse aynıydı ve kartlar birbirine karışıyordu. */
  --line:#D2DDE3;
  --line-soft:#E4EBEF;
  --line-strong:#B8C8D1;

  /* Metin · beyaz üzerinde kontrast oranları yorumda */
  --ink:#0E2430;         /* 15.1:1 · başlık ve gövde */
  --ink-2:#405C69;       /* 7.6:1  · ikincil */
  --ink-3:#5F7682;       /* 4.8:1  · üçüncül · AA sınırının üstünde */

  /* ── Durum ────────────────────────────────────────────────────
     Semantik renk markanın vurgusundan AYRIDIR: "iyi/uyarı/hata"
     teal'in tonu olamaz, yoksa durum bilgisi kaybolur. */
  --ok:#1F6B4A;   --ok-bg:#E3F3EB;   --ok-line:#A8D8C0;
  --warn:#8A5A06; --warn-bg:#FCF2E0; --warn-line:#EBCF95;
  --err:#A33022;  --err-bg:#FBE9E6;  --err-line:#EDB4AB;
  --info:#1D6180; --info-bg:#E6F1F6; --info-line:#A9CDDC;
  --mint:#3FA37A; --amber:#D18F23; --coral:#D45F48;
  --slate:#6E8391; --gold:#B57D1F; --violet:#6B5CA5;

  /* ── Yumuşak zeminler ── */
  --tint:#EAF3F6; --tint-warm:#FCF2E0;
  --tint-mint:#E3F3EB; --tint-rose:#FBE9E6;

  /* ── Tipografi ────────────────────────────────────────────────
     ⚠ TEK AİLE. İkinci bir arayüz yazı tipi (Inter) tanımlıydı ama
     hiç sunulmuyordu; "iki yazı tipi" aslında "bir yazı tipi + bir
     sistem yedeği" demekti. Plus Jakarta Sans değişken ağırlıklı
     ve kendi sunucumuzdan geliyor.

     ⚠ MONO YALNIZCA KOD/ANAHTAR İÇİN. Raporda süreler ve yüzdeler
     JetBrains Mono ile basılıyordu ve rapor terminal gibi
     görünüyordu. Sayılar için `--num` (tabular-nums) var: aynı
     ailede, hizalı rakam. */
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
         'Helvetica Neue',Arial,sans-serif;
  --sans-dense:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* ── Hareket ── */
  --e:cubic-bezier(.22,1,.36,1);
  --t-fast:.16s; --t-base:.24s; --t-slow:.7s;

  /* ── Yükselti · TEK ÖLÇEK ─────────────────────────────────────
     Yönetim panelinde dört, sınav ekranında bir gölge vardı ve
     hiçbiri diğerine uymuyordu. Üç basamak yeter: kart, yüzen
     kart, örtü. */
  --shadow-sm:0 1px 2px rgba(14,36,48,.06);
  --shadow:0 1px 2px rgba(14,36,48,.05),0 8px 24px -12px rgba(14,36,48,.18);
  --shadow-lg:0 2px 4px rgba(14,36,48,.05),0 24px 48px -20px rgba(14,36,48,.24);
  /* Eski adlar · yönetim paneli bunları kullanıyordu. Silinmedi:
     tek tek ezmek yerine ölçeğe bağlandılar. */
  --sh-1:var(--shadow-sm); --sh-2:var(--shadow); --sh-3:var(--shadow-lg);

  /* ── Tipografi ölçeği ─────────────────────────────────────────
     1.125 oranı. ⚠ `--fs-xs` 12px'in ALTINA İNMEZ: ölçümde ekranda
     10–10,5 px metin bulundu (etiketler, yardım satırları). O
     boyut tablette okunmuyor. */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px;
  --fs-xl:18px; --fs-2xl:21px; --fs-3xl:25px; --fs-4xl:30px;
  --lh-tight:1.25; --lh-snug:1.4; --lh-normal:1.55; --lh-loose:1.7;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* Sayı sütunları hizalansın · mono'ya başvurmadan */
  --num:tabular-nums lining-nums;

  /* ── Boşluk ritmi · 4px tabanlı ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ── Köşe yarıçapı · TEK ÖLÇEK ────────────────────────────────
     Ölçümde sınav ekranında 9, panelde 5 farklı yarıçap sayıldı
     (7px, 9px, 10px, 12px, 14px, 16px… aynı işi gören kutular
     farklı köşelerle). Dört basamak + hap. */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:999px;
  /* Eski ad · yönetim paneli `--r` kullanıyordu. */
  --r:var(--r-md);

  /* ── Dokunma hedefi ───────────────────────────────────────────
     ⚠ 44px ALTINA DÜŞMEMELİ. Sınav tablette parmakla ve kalemle
     kullanılıyor; küçük düğme yanlış şık seçtirir ve bedelini
     öğrenci öder. */
  --tap:44px; --tap-sm:40px;

  /* ── Odak halkası ── */
  --focus:0 0 0 3px var(--brand-100),0 0 0 1px var(--brand-600);
}

/* Odak halkası · yalnızca KLAVYE ile gelindiğinde.
   `:focus` kullanılsaydı fareyle tıklayan herkeste de çıkar,
   gürültü sayılır ve kaldırılması istenirdi — erişilebilirliğin
   kaybedilme biçimi tam budur. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus);
  border-radius:var(--r-sm);
}

/* Erişilebilirlik temeli — dört panelde de aynıydı */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}

/* ── Sayı hizalama · tek yerden ────────────────────────────────
   Gösterge sayıları, tablo hücreleri ve süreler alt alta
   geldiğinde rakamlar kaymamalı. `font-variant-numeric` bunu
   monospace'e başvurmadan yapar. */
:where(.num,.mono,[data-sayi],td,th){font-variant-numeric:var(--num)}