/* ═══ ortak/tasarim.css — CSS DEĞİŞKENLERİ TEK DOSYADA (Faz 6 · D3, 2026-10-12) ═══
   Kök (`:root`) bağlamındaki bütün `--ad:` tanımları burada yaşar: açık tema,
   `[data-theme="dark"]`, sistem koyusu (`prefers-color-scheme` + `:not([data-theme="light"])`),
   dar ekran (`max-width: 720px`) ve `[data-tema="trabzonspor"]` varyantları.
   Önceki yerleri: ui/styles.css ve ui/program-theme.css (orada yalnız değişken-DIŞI kurallar kaldı).

   ⛔ Aynı (ad, bağlam) iki dosyada da tanımlıysa TEK kopya kalır ve DEĞERİ
      program-theme.css'inkidir (11 sayfada kazanan zaten oydu: `--hero-1`, `--hero-2`, `--brand`).
   ⛔ Her sayfa bu dosyayı styles.css'in (yoksa program-theme.css'in) HEMEN ÖNCESİNDE yükler;
      aynı bağlamdaki kuralların SIRASI korunur (koyu: `[data-theme="dark"]` önce,
      sistem koyusu medya bloğu sonra).
   ⚠️ Öğe-kapsamlı tanımlar (`.game-page`, `.hero .btn-halka`, `.rh-*`), game.css ve sayfa
      `<style>` blokları KÖK DEĞİLDİR — yerinde kalır.
   ⚠️ `--warn`, `--ikincil`, `--fg` bugün hiçbir yerde TANIMLI DEĞİL (kullanımları yedekli);
      burada da tanımlanmaz — tanımlamak görünümü değiştirir. */

/* ━━ styles.css kökünden taşınanlar ━━ */

:root {
  /* ═══ AGIRLIK SOZLUGU (2026-08-11, Fable'in 1. adimi) ═══════════════════
     ⛔ HAM `font-weight` SAYISI YAZMA. Yalniz bu iki token kullanilir.

     NEDEN: bu depoda ON ayri agirlik yaziliydi (400·500·600·620·640·650·
     700·750·800·850) ama YALNIZ IKI YUZ barindiriliyor (ui/fonts/ altinda
     her aile icin 400 ve 600). OLCULDU: 162 kullanimin 114'u (%70) istedigi
     yuze ULASMIYORDU — 500 -> 400, 620..850 -> 600 diye sessizce dusuyordu.
     Yani yazili merdivende on basamak vardi, ekranda IKI.
     Fable: "on basamaklik talep hayaldi; iki basamak sahada kendini
     kanitladi — %70'i aylardir yanlisti ve DIS INCELEME DAHIL kimse fark
     etmedi." (Inceleme 18 puntoyu, 19 golgeyi, 14 yaricapi yakalamisti.)

     ⛔ 700/800 DOSYASI EKLENMEDI: 400↔600 advance farki %5,4; 600↔700 bunun
        kabaca yarisi olurdu ve deponun kendi kayitli esigiyle ("1,15x kademe
        olarak okunmaz") gun isiginda telefonda AYIRT EDILMEZ.
     ⛔ DEGISKEN FONT DE HAYIR: Plex Mono'nun resmi degisken surumu yok, ve
        asil tehlike 620/640/650 turu buyu sayilarina SONSUZ COZUNURLUK
        vermesi — "arada bant yok" kuralinin tipografi ikizi bu iki basamakli
        ucurumdur.
     → Ucuncu kademe gerektiginde AGIRLIKTA degil MUREKKEPTE kurulur:
       `--murekkep-orta` (yem adi orada). */
  --agirlik-metin: 400;
  --agirlik-vurgu: 600;

  /* Surfaces */
  --bg: #efe7e2;
  --card: #fdfbf9;
  --card-head: #f7f1ec;
  --input-bg: #fdfbf9;
  --surface-soft: #ede4de;

  /* Text */
  --ink: #26211c;
  /* ⚠️ Ölçüldü (2026-07-29, Fable): #64776c beyazda 4,78:1 ile geçiyor ama
     RENKLİ zeminlerde düşüyor — yeşil kutuda 4,26:1, sekme şeridinde
     4,22:1, kadran mikro-yazılarında 3,99:1. Eşik 4,5:1.
     #56685e her üçünde de ≥5,2:1; "soluk etiket" hissi korunuyor
     (mürekkep #1c2621 ile arasında hâlâ 6 kat parlaklık farkı var). */
  /* ⚠️ Ölçüldü (2026-07-29, Fable): #64776c beyazda 4,78:1 ile geçiyor ama
     RENKLİ zeminlerde düşüyor — yeşil kutuda 4,26:1, sekme şeridinde
     4,22:1, kadran mikro-yazılarında 3,99:1. Eşik 4,5:1.
     ⚠️ Bu değişkenin İKİ TANIMI var: styles.css'te de duruyor ama bu
     dosya SONRA yükleniyor, kazanan burası. İlk denemede yanlış
     dosyayı düzelttim ve ekranda hiçbir şey değişmedi. */
  --muted: #685e56;
  --accent: #5e3c1f;

  /* Lines */
  --line: #e3d7cf;

  /* Brand (gradients) */
  --brand: #2e7d5b;
  --brand-d: #1f5e42;
  --focus: rgba(46, 125, 91, 0.2);

  /* Status */
  --green: #2e9e5b;
  --green-bg: #e6f6eb;
  --green-ink: #216b41;
  --yellow: #c08300;
  --yellow-bg: #fbefd6;
  --yellow-ink: #855b00;
  --red: #d24444;
  --red-bg: #fbe6e6;
  --red-ink: #8f2b2b;
  --blue: #3170b3;
  --blue-bg: #e6eff9;
  --blue-ink: #1e4d80;

  /* Hero panel */
  --hero-1: #153f32;
  --hero-2: #245e48;

  /* Effects */
  --shadow: 0 1px 2px rgba(24, 44, 34, 0.06),
    0 8px 24px rgba(24, 44, 34, 0.06);
  --shadow-pop: 0 18px 38px rgba(24, 44, 34, 0.16);
  --ease: 0.18s ease;

  --ico-moon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/></svg>');
  --ico-sun: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>');
}

:root[data-theme="dark"] {
  --bg: #100c0a;
  --card: #1e1915;
  --card-head: #221c17;
  --input-bg: #261e19;
  --surface-soft: #291f18;

  --ink: #efebe7;
  --muted: #a79c93;
  --accent: #d6a274;

  --line: #332a23;

  /* ⚠️ Koyu temada marka yeşili BİR TON KOYU. Ölçüldü (2026-07-29, Fable):
     #2f8a63 üzerinde beyaz metin 4,25:1 — 12,5px yazı için eşik 4,5:1.
     "Değerlendir" ve "Güvenliği düzelt" bu düğmeler. Açık temada
     (#2e7d5b) 4,95:1 ile geçtiği için fark edilmemişti. #287856 → 5,4:1. */
  --brand: #287856; /* beyaz metin 4,25:1 -> 5,4:1 (2026-07-29) */
  --brand-d: #216f4c;
  --focus: rgba(96, 210, 150, 0.26);

  --green: #4fc07e;
  --green-bg: rgba(79, 192, 126, 0.15);
  --green-ink: #7fdca3;
  --yellow: #e0a83e;
  --yellow-bg: rgba(224, 168, 62, 0.15);
  --yellow-ink: #f0c274;
  --red: #e56a6a;
  --red-bg: rgba(229, 106, 106, 0.16);
  --red-ink: #f0a0a0;
  --blue: #5a9bd8;
  --blue-bg: rgba(90, 155, 216, 0.16);
  --blue-ink: #9cc4ec;

  --hero-1: #0e241c;
  --hero-2: #1f3a2c;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.32);
  --shadow-pop: 0 20px 44px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100c0a;
    --card: #1e1915;
    --card-head: #221c17;
    --input-bg: #261e19;
    --surface-soft: #291f18;

    --ink: #efebe7;
    --muted: #a79c93;
    --accent: #d6a274;

    --line: #332a23;

    --brand: #287856; /* beyaz metin 4,25:1 -> 5,4:1 (2026-07-29) */
    --brand-d: #216f4c;
    --focus: rgba(96, 210, 150, 0.26);

    --green: #4fc07e;
    --green-bg: rgba(79, 192, 126, 0.15);
    --green-ink: #7fdca3;
    --yellow: #e0a83e;
    --yellow-bg: rgba(224, 168, 62, 0.15);
    --yellow-ink: #f0c274;
    --red: #e56a6a;
    --red-bg: rgba(229, 106, 106, 0.16);
    --red-ink: #f0a0a0;
    --blue: #5a9bd8;
    --blue-bg: rgba(90, 155, 216, 0.16);
    --blue-ink: #9cc4ec;

    --hero-1: #0e241c;
    --hero-2: #1f3a2c;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
      0 10px 28px rgba(0, 0, 0, 0.32);
    --shadow-pop: 0 20px 44px rgba(0, 0, 0, 0.55);
  }
}

/* ━━ program-theme.css kökünden taşınanlar ━━ */

:root {
  /* ⭐ ORTA MUREKKEP (2026-08-11, Fable'in onerisi, Gokhan "C"yi secti).
     Bugune kadar IKI kademe vardi ve ARASI BOSTU:
       --ink   #26211c   kartta 15,45:1   sayi · baslik · kg
       (bosluk)
       --muted #685e56   kartta  6,12:1   etiket · birim · dipnot
     Ucuncu kademe AGIRLIKTA kurulamiyordu: depoda yalniz 400 ve 600 yuzu var,
     600 ile 700 ayni yuzu ciziyor (olculdu, canvas measureText). Fable:
     "ucuncu kademe agirlikta degil MUREKKEP PARLAKLIGINDA kurulur."
     ⛔ Hukum butcesine DOKUNMUYOR: bu bir NOTR GRI, doygunlugu sifir.
        "Doygunluk hukmun tekelidir" kurali ayakta.
     ⛔ --metin-2 / #64776c KULLANILMADI (Fable'in acik uyarisi): o yesilimsi
        bir gri, renkli zeminlerde dustugu olculmus ve hukum yesilinin
        ailesine komsu. Orta murekkep kagidin KENDI sicak ailesinden.
     Kapi: en acik zeminde >= 7:1. Olculdu: kartta 10,80 · zeminde 9,13 ✅ */
  --murekkep-orta: #423a32;
  /* ── BOSLUK OLCEGI (2026-08-11) ────────────────────────────────────
     OLCULDU: ekranda 13 ayri padding vardi, kutlesi 5-9px'te; 12px ustu
     TOPLAM 9 oge. Yani nefes yoktu ve olcek de yoktu.
     ⭐ Bu tokenler tek baslarina HICBIR SEYI DEGISTIRMEZ — once sozluk
     kurulur, tasima ayri commit'lerde yapilir. */
  --bosluk-1: 4px;
  --bosluk-2: 8px;
  --bosluk-3: 12px;
  --bosluk-4: 18px;
  --bosluk-5: 28px;

  --oyuk-dolgu: transparent;   /* ⭐ DUZ RENK DEGIL: paneller arasi bosluk
                                  zaten --bg; saydam olunca sekiz panel ve
                                  aralari TEK SUREKLI ALAN olur. Duz renkle
                                  yazilsa orada 1,06'lik bir DIKIS olusurdu. */
  --oyuk-kenar: transparent;
  --oyuk-cizgi: #d6c8b9;       /* oyukta h2 ayraci: bg'ye 1,359 = kartta
                                  olan 1,348'in birebir karsiligi (olculdu) */
  --eylem: #302821;      /* birincil EYLEM: parlaklik ucu, ton DEGIL */
  --eylem-metin: #ffffff;

  /* SürüNabzı'nın Türkçe değişkenleri aynı palete bağlanır. */
  --zemin: var(--bg);
  --kart: var(--surface-soft);
  --yuzey: var(--card);
  --metin: var(--ink);
  --metin-2: #64776c;
  --metin-3: #819087;
  --cizgi: var(--line);
  --vurgu: #2e7d5b;
  --vurgu-zemin: #e6f6eb;

  /* ⚠️ RENKLER `var()` İLE BAĞLI, ELLE KOPYALANMAZ — sebebi ölçüldü
     (2026-07-31). Eskiden buraya değerler elle yazılıydı ve KOYU TEMADA
     karşılıkları hiç tanımlanmamıştı: sekiz değişken (kırmızı/sarı/yeşil/
     mavi + zeminleri) koyu temada AÇIK TEMA DEĞERİNDE kalıyordu.

     Görünen sonuç: koyu kartın (#161d19) üstünde açık pembe (#fbe6e6) bir
     düğme — kontrast oranı 14,35. Metin okunuyordu, o yüzden kimse
     "bozuk" demedi; ama koyu sayfada göz alan bir lekeydi.
     Etkilenenler: `.btn-kadran-bag` (BÜTÜNLÜK'ün kadran bağı, aynı gün
     canlıya gitmişti) ve SürüNabzı'nın `.kpi-yesil` / `.kpi-kirmizi`
     kutuları.

     `var()` ile bağlanınca ikisi bir daha AYRIŞAMAZ. Değerler zaten
     birebir aynıydı; bu satırlar görünümü değiştirmez. */
  --kirmizi-zemin: var(--red-bg);
  --kirmizi: var(--red-ink);
  --sari-zemin: var(--yellow-bg);
  --sari: var(--yellow-ink);
  --yesil-zemin: var(--green-bg);
  --yesil: var(--green-ink);
  --mavi-zemin: var(--blue-bg);
  --mavi: var(--blue-ink);
}

:root[data-theme="dark"] {
  /* Orta murekkep — koyu karsiligi. Gerekce acik temadaki notta.
     ⚠️ Deger UYDURULMADI: acik temada ORTA, ink ile muted arasinda kontrast
        olarak %49,8 noktada duruyor. Ayni oran koyuda aranip bulundu
        (temanin kendi ink+muted karisimi, %44) — boylece sicak aile korunuyor
        ve iki temada AYNI ALGISAL KADEME cikiyor.
     Olculdu: kartta 10,63 (hedef 10,61) · zeminde 11,88 ✅ */
  --murekkep-orta: #d0c9c2;
  --oyuk-dolgu: transparent;
  --oyuk-kenar: transparent;
  --oyuk-cizgi: var(--line);   /* koyuda ayrac zaten GUCLENIYOR (1,257→1,375) */
  --eylem: #eae6e2;      /* koyu temada parlaklik ucu TERS YONE gider */
  --eylem-metin: #121a16;

  --zemin: var(--bg);
  --kart: var(--surface-soft);
  --yuzey: var(--card);
  --metin: var(--ink);
  --metin-2: #93a79b;
  --metin-3: #718078;
  --cizgi: var(--line);
  --vurgu: #74d6a5;
  --vurgu-zemin: rgba(79, 192, 126, 0.15);
  /* ⚠️ BU SEKİZİ EKSİKTİ — koyu temada açık tema rengi kalıyordu.
     Ayrıntı ve ölçüm: `:root` bloğundaki not. */
  --kirmizi-zemin: var(--red-bg);
  --kirmizi: var(--red-ink);
  --sari-zemin: var(--yellow-bg);
  --sari: var(--yellow-ink);
  --yesil-zemin: var(--green-bg);
  --yesil: var(--green-ink);
  --mavi-zemin: var(--blue-bg);
  --mavi: var(--blue-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Orta murekkep — koyu karsiligi. Gerekce acik temadaki notta.
     ⚠️ Deger UYDURULMADI: acik temada ORTA, ink ile muted arasinda kontrast
        olarak %49,8 noktada duruyor. Ayni oran koyuda aranip bulundu
        (temanin kendi ink+muted karisimi, %44) — boylece sicak aile korunuyor
        ve iki temada AYNI ALGISAL KADEME cikiyor.
     Olculdu: kartta 10,63 (hedef 10,61) · zeminde 11,88 ✅ */
  --murekkep-orta: #d0c9c2;
    --oyuk-dolgu: transparent;
    --oyuk-kenar: transparent;
    --oyuk-cizgi: var(--line);
    --eylem: #eae6e2;
    --eylem-metin: #121a16;

    --zemin: var(--bg);
    --kart: var(--surface-soft);
    --yuzey: var(--card);
    --metin: var(--ink);
    --metin-2: #93a79b;
    --metin-3: #718078;
    --cizgi: var(--line);
    --vurgu: #74d6a5;
    --vurgu-zemin: rgba(79, 192, 126, 0.15);
    /* ⚠️ Sistem koyu temasında da aynı sekiz değişken eksikti — bu blok
       `:root[data-theme="dark"]`in aynası olmak zorunda. Ayrıntı: `:root`. */
    --kirmizi-zemin: var(--red-bg);
    --kirmizi: var(--red-ink);
    --sari-zemin: var(--yellow-bg);
    --sari: var(--yellow-ink);
    --yesil-zemin: var(--green-bg);
    --yesil: var(--green-ink);
    --mavi-zemin: var(--blue-bg);
    --mavi: var(--blue-ink);
  }
}

@media (max-width: 720px) {
  /* ⚠️ Telefonda dikey uzama MALIYETTIR (olculdu: sayfa 3935px = 4,8 ekran
     kaydirma). Ust iki basamak daraltilir. */

  :root { --bosluk-4: 16px; --bosluk-5: 20px; }
}

/* --- BÜTÜNLÜK: bileşik gösterge halkası (2026-07-31) --------------------
   Tasarım: Fable · `bekleme_odasi/bilesik_kadran_tasarim.md`

   ⚠️ RENK DİLİ ÜRÜNÜN KENDİ DİLİ. Önizlemede kendi tonlarımı uydurmuştum
   (#2e7d46 gibi) ve Gökhan yakaladı: "normalde biz yeşili olumlu olarak
   kullanmıyor muyduk?" Haklıydı — burada `--yesil/--sari/--kirmizi`
   kullanılıyor. Dört basamak için tek yeni renk eklendi (turuncu) ve o da
   var olan üçüyle aynı doygunlukta seçildi.

   ⚠️ BU BİR KADRAN DEĞİL, TAM HALKA. Ötekilerle aynı biçimde (yarım daire
   yay) çizilseydi kullanıcı onu "20. kadran" diye okur ve aralarında
   kaybolurdu. Aynı alfabe, farklı punto. */
:root {
  --turuncu: #9c4a12;
  --turuncu-zemin: #fbeade;
}

:root[data-theme="dark"] {
  --turuncu: #e08a4c;
  --turuncu-zemin: #3a2314;
}

/* ═══════════════════════════════════════════════════════════════════════
   KİŞİYE ÖZEL TEMA — "trabzonspor" (2026-09-03, Gökhan sözü, Ertan Alioğlu)
   ⛔ YALNIZ sunucunun `tema` gönderdiği hesapta: common.js `data-tema`
   yazar. Herkes için bu blok ölüdür.
   ⚠️ DURUM RENKLERİNE DOKUNULMAZ: yeşil/sarı/kırmızı/mavi durum token'ları
   (kadran, geçit, uyarı) anlam taşır; yalnız MARKA yüzeyleri (hero
   gradyanı, vurgu, bağlantı) bordo-maviye döner. Açık ve koyu tema ayrı
   tanımlı — dark eksiği vakası (2026-07-31) tekrarlanmasın.
   Renkler: bordo #7d1230 / #5a0c22 · mavi #1f4d9c / #123468. */
:root[data-tema="trabzonspor"] {
  --hero-1: #7d1230;
  --hero-2: #1f4d9c;
  --vurgu: #7d1230;
  --vurgu-zemin: #f6e4ea;
  --shadow-pop: 0 18px 38px rgba(125, 18, 48, 0.18);
  /* ORTA KADEME (2026-09-04, Gökhan): birincil eylem düğmeleri bordo.
     `--eylem` MARKA token'ıdır (durum değil); parlaklık-ucu kuralı korunur. */
  --eylem: #7d1230;
  --eylem-metin: #ffffff;
  --tema-lacivert: #1f4d9c;
  /* TEMA v2 (2026-09-04). Odak halkası lacivert: birincil eylem bordo
     olduğu için halka da bordo olsaydı "basılı" ile "odaklı" ayırt
     edilemezdi — iki durum iki renk. Ayraç bordonun %40 saydamı; metin
     değil ÇİZGİ olduğu için 4,5:1 eşiği geçerli değil (ölçüldü: 2,19:1
     kart zemininde — bugünkü `--line`ın 1,2:1'inden görünür, "kutu içinde
     kutu" hissi yaratmayacak kadar sessiz). */
  --focus: rgba(31, 77, 156, 0.28);
  --tema-ayrac: rgba(125, 18, 48, 0.40);
}

:root[data-theme="dark"][data-tema="trabzonspor"] {
  --hero-1: #6b0f29;          /* koyu modda bordo SOLUKTU (prova 09-04) → bir ton açıldı */
  --hero-2: #173f82;
  --vurgu: #e88aa6;
  --vurgu-zemin: rgba(232, 138, 166, 0.16);
  --shadow-pop: 0 20px 44px rgba(0, 0, 0, 0.55);
  --eylem: #b5304f;           /* beyaz metinle ≥ 6:1 */
  --eylem-metin: #ffffff;
  --tema-lacivert: #6f9be0;
  /* TEMA v2 koyu karşılıkları. ⚠️ Koyu zeminde METİN bordosu #7d1230 DEĞİL
     (kart zemininde 2,90:1 — düşer); metin rolünde `--vurgu` (#e88aa6,
     7,15:1) kullanılır. #b5304f yalnız ZEMİN rolünde (üstünde beyaz, 6,00:1). */
  --focus: rgba(111, 155, 224, 0.32);
  --tema-ayrac: rgba(232, 138, 166, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-tema="trabzonspor"] {
    --hero-1: #6b0f29;
    --hero-2: #173f82;
    --vurgu: #e88aa6;
    --vurgu-zemin: rgba(232, 138, 166, 0.16);
    --eylem: #b5304f;
    --eylem-metin: #ffffff;
    --tema-lacivert: #6f9be0;
    --focus: rgba(111, 155, 224, 0.32);
    --tema-ayrac: rgba(232, 138, 166, 0.32);
  }
}