/* ============================================================
   KLAVYE SEVİYE EKRANI (2026-09-04)

   Kullanıcı: *"ağaç yerine katipliğe özgü bir tasarım yapabilir miyiz…
   klavyeye özgü bişeler"* → her seviye bir tuş, boşluk çubuğu Başla düğmesi.

   🔴 SVG DEĞİL, native `<button>` ızgarası. Ağaç SVG'yken üç şey elle
   yazılmak zorundaydı ve üçü de kusurlu çıkmıştı: `disabled` semantiği yoktu
   (çift gönderim koruması ölüyordu), odak halkası elle çiziliyordu, ve dış
   `<svg role="img">` içindeki düğmeleri ekran okuyucudan gizliyordu.
   Native düğmede üçü de bedavaya geliyor.

   ⚠️ Bu bloktaki renkleri değiştirirken `test/…` içindeki KONTRAST BEKÇİSİ
   koşar: 24 metin/zemin çiftini opaklık ve odak halkasının GERÇEK komşusu
   (`--ok-ic`) dahil hesaplar. Elle tablo tutmak iki turda iki kez yetmedi.
   ============================================================ */
.klavye-oyunlari-sayfa{
  /* KASA acik, IC KUYU koyu. Kullanimi TAKAS ETME: `.ok-govde` her zaman
     `--ok-govde`, `.ok-ic` her zaman `--ok-ic` boyar. Onceki denemede zeminleri
     takas etmistim ve kontrast bekcisinin "odak halkasinin komsusu --ok-ic"
     varsayimi YANLIS yuzeyi olcer hale gelmisti. */
  --ok-govde:#3a4c58; --ok-ic:#2b3a44; --ok-golge:rgba(12,25,33,.24);
  --ok-cap:#eef3f6; --ok-cap-kenar:#c6d3db; --ok-cap-yazi:#22333d; --ok-cap-alt:#5c707d;
  --ok-bitti:#248451; --ok-bitti-alt:#18603a; --ok-bitti-yazi:#ffffff;
  --ok-aktif:#f0961a; --ok-aktif-alt:#b76f0b; --ok-aktif-yazi:#3a2500;
  --ok-basla:#a85714; --ok-basla-alt:#7a3f0f; --ok-basla-yazi:#ffffff;
  --ok-yardimci:#51636f; --ok-yardimci-yazi:#dbe6ec;
  --ok-odak:#7fd4e8;
  /* Satir kaydirmasinin EN BUYUK degeri (cqw/%). TEK KAYNAK: hem tus
     genisligi hesabinda hem `nth-child` margin'inde bu okunuyor. Iki
     bagimsiz `11` birakmak, biri degisince tasmayi sessizce geri getirirdi.
     ⚠️ YEDEKSIZ `var(--ok-kaydirma)` — olu degisken bekcisi `var(--x)` tam
     dizesini ariyor, `var(--x,11)` yanlis kirmizi verir. */
  --ok-kaydirma:11;
}
body.dark .klavye-oyunlari-sayfa{
  --ok-govde:#20343f; --ok-ic:#16242c; --ok-golge:rgba(0,0,0,.45);
  --ok-cap:#33505e; --ok-cap-kenar:#456575; --ok-cap-yazi:#dceaf1; --ok-cap-alt:#a8c0cc;
  --ok-bitti:#258655; --ok-bitti-alt:#15532f; --ok-bitti-yazi:#ffffff;
  --ok-aktif:#d9861a; --ok-aktif-alt:#93590a; --ok-aktif-yazi:#3a2500;
  --ok-basla:#a95409; --ok-basla-alt:#6f3607; --ok-basla-yazi:#ffffff;
  --ok-yardimci:#3d5666; --ok-yardimci-yazi:#c6d9e3;
  --ok-odak:#7fd4e8;
  --ok-kaydirma:11;
}
.klavye-oyunlari-sayfa .ok-govde{
  background:var(--ok-govde); border-radius:16px; padding:13px 13px 15px;
  box-shadow:0 12px 28px var(--ok-golge), inset 0 1px 0 rgba(255,255,255,.10);
  max-width:660px; margin-inline:auto;
}
.klavye-oyunlari-sayfa .ok-ic{
  background:var(--ok-ic); border-radius:11px; padding:11px 11px 13px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.28);
  display:flex; flex-direction:column; gap:8px;
  container-type:inline-size;
}

/* ═══ TABAN — `@container` DESTEKLENMEYEN tarayici VE dar kap ═══
   Bugun canlida kanitli olan duzen: satir sinirlarini YOK SAYAN auto-fill izgara.
   `.ok-sira` `display:contents` ile seffaflasiyor, boylece 7'lik satirlarin son
   tusu yalniz kalip TAM GENISLIGE GERILMIYOR — ilk denememde telefonda 7, 14 ve
   21 numarali tuslar dev cubuga donmustu (olctum, yukseklik 420 -> 706 px).
   Kurumsal makinelerde eski tarayici ihtimali belgeli, bu yuzden taban guvenli
   olan olmali; klavye gorunumu bir IYILESTIRME katmani. */
.klavye-oyunlari-sayfa .ok-tuslar{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:7px;
}
.klavye-oyunlari-sayfa .ok-sira{ display:contents; }
.klavye-oyunlari-sayfa .ok-yardimci{ display:none; }

/* ═══ KLAVYE GORUNUMU — yalnizca kap yeterince genisse ═══ */
/* 🔴 `.ok-satirli` KAPISI — gecis emniyeti. Bu projede CSS yazmak ANINDA dagitim,
   sablon ise sonra geliyor; aradaki pencerede canli sayfada ESKI markup (tuslar
   dogrudan `.ok-tuslar` icinde) + YENI CSS bulusuyor. Kapi olmasa `.ok-tuslar`
   dikey akisa donup 21 tusu ALT ALTA dizerdi. Sinifi yalniz yeni sablon basiyor. */
@container (min-width:430px){
  .klavye-oyunlari-sayfa .ok-tuslar.ok-satirli{ display:flex; flex-direction:column; gap:7px; }
  .klavye-oyunlari-sayfa .ok-satirli .ok-sira{ display:flex; gap:7px; }
  /* `flex-grow:0` SART: N satir genisliginin kati degilse (N=25 -> son satir 4 tus)
     buyumeye izin verirsek o tuslar genisler ve klavye bozulur. Taban genislik
     satir basina tus sayisindan hesaplaniyor; sayi TEK KAYNAKTAN, sablonun
     bastigi `--ok-sutun` degiskeninden geliyor. */
  .klavye-oyunlari-sayfa .ok-satirli .ok-sira > *{
    /* `%` DEGIL `cqw`: yuzde, tusun icinde bulundugu SATIRIN genisligine gore
       cozulur; kaydirilan satirlar daraldigi icin tuslar satirdan satira
       degisiyordu (olctum: 81 / 78 / 75 px). `cqw` kap (`.ok-ic`) genisligine
       gore cozulur -> her satirda AYNI genislik, gercek klavyedeki gibi.
       Kurali `@container` icinde oldugu icin destegi olmayan tarayici bunu
       hic gormuyor; taban izgara devrede kaliyor. */
    /* Kaydirma payi DUSULUYOR. Esit genislikte 7 tus zaten 100cqw kapliyor;
       ustune margin-left binince son satir kasadan TASIYORDU (olctum: 2 oge).
       Satirlari en buyuk kaydirma kadar daraltinca hepsi iceri sigiyor ve
       gercek klavyedeki gibi iki kenar da tirtikli oluyor:
         satir 1 -> 0..89cqw   satir 4 -> 11..100cqw */
    flex:0 0 calc((100cqw - (var(--ok-kaydirma) * 1cqw)
                   - (var(--ok-sutun,7) - 1) * 7px) / var(--ok-sutun,7));
    min-width:0;
  }
  /* Gercek klavyede kademe ARTAR, sifirlanmaz. `nth-child(3n+2)` deseni 4. satiri
     en sola aliyordu — yanlisti. `n+2/n+3/n+4` kademeli: sonraki kural oncekini
     ezer, 4. ve sonraki satirlar %11'de kalir.
     Secici `.ok-tuslar >` ile kapsanmis: `.ok-ic`in tum cocuklari arasinda saymak,
     ileride araya bir baslik eklenirse butun kaydirmalari sessizce kaydirirdi. */
  .klavye-oyunlari-sayfa .ok-satirli > .ok-sira:nth-child(n+2){ margin-left:3.4%; }
  .klavye-oyunlari-sayfa .ok-satirli > .ok-sira:nth-child(n+3){ margin-left:7.6%; }
  .klavye-oyunlari-sayfa .ok-satirli > .ok-sira:nth-child(n+4){ margin-left:calc(var(--ok-kaydirma) * 1%); }
  .klavye-oyunlari-sayfa .ok-yardimci{ display:flex; }
}

/* ═══ Tus kapagi ═══ */
.klavye-oyunlari-sayfa .ok-tus{
  position:relative; appearance:none; border:0; cursor:pointer;
  background:var(--ok-cap); color:var(--ok-cap-yazi);
  border-radius:7px 7px 9px 9px; padding:13px 4px 9px; min-height:60px;
  font-family:inherit; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  box-shadow:0 4px 0 var(--ok-cap-kenar), 0 5px 7px rgba(0,0,0,.22),
             inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .07s, box-shadow .07s;
}
.klavye-oyunlari-sayfa .ok-tus:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 var(--ok-cap-kenar), 0 2px 3px rgba(0,0,0,.22),
             inset 0 1px 0 rgba(255,255,255,.35);
}
.klavye-oyunlari-sayfa .ok-no{position:absolute;top:3px;left:6px;font-size:11px;font-weight:800}
.klavye-oyunlari-sayfa .ok-durum{position:absolute;top:3px;right:6px;font-size:10px;line-height:1}
.klavye-oyunlari-sayfa .ok-esik{font-size:20px;font-weight:900;line-height:1.02}
.klavye-oyunlari-sayfa .ok-birim{font-size:10px;font-weight:700;color:var(--ok-cap-alt)}
.klavye-oyunlari-sayfa .ok-tus.ok-bitti{background:var(--ok-bitti);color:var(--ok-bitti-yazi);
  box-shadow:0 4px 0 var(--ok-bitti-alt),0 5px 7px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28)}
.klavye-oyunlari-sayfa .ok-tus.ok-bitti .ok-birim{color:var(--ok-bitti-yazi)}
.klavye-oyunlari-sayfa .ok-tus.ok-aktif{background:var(--ok-aktif);color:var(--ok-aktif-yazi);
  box-shadow:0 4px 0 var(--ok-aktif-alt),0 5px 9px rgba(240,150,26,.42),inset 0 1px 0 rgba(255,255,255,.45)}
.klavye-oyunlari-sayfa .ok-tus.ok-aktif .ok-birim{color:var(--ok-aktif-yazi)}

/* ═══ Alt sira: sus tuslari + bosluk cubugu ═══
   `.ok-alt` kabina aria-hidden KOYMA: icinde `#oyun-basla-btn` var. */
.klavye-oyunlari-sayfa .ok-alt{display:flex;gap:7px;align-items:stretch}
.klavye-oyunlari-sayfa .ok-yardimci{
  flex:0 0 auto; min-width:52px; padding:0 10px;
  background:var(--ok-yardimci); color:var(--ok-yardimci-yazi);
  border-radius:7px 7px 9px 9px; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  align-items:center; justify-content:center;
  box-shadow:0 4px 0 rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.klavye-oyunlari-sayfa .ok-bosluk{
  appearance:none;border:0;flex:1 1 auto;cursor:pointer;
  background:var(--ok-basla);color:var(--ok-basla-yazi);
  border-radius:7px 7px 9px 9px; min-height:50px; padding:11px 12px;
  font-family:inherit;font-size:15px;font-weight:900;letter-spacing:.045em;
  box-shadow:0 4px 0 var(--ok-basla-alt),0 5px 8px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .07s, box-shadow .07s;
}
.klavye-oyunlari-sayfa .ok-bosluk:active{transform:translateY(3px);
  box-shadow:0 1px 0 var(--ok-basla-alt),0 2px 3px rgba(0,0,0,.24)}
.klavye-oyunlari-sayfa .ok-bosluk[disabled]{opacity:.7;cursor:default}

/* ═══ Odak ═══ */
.klavye-oyunlari-sayfa .ok-tus:focus,
.klavye-oyunlari-sayfa .ok-bosluk:focus{outline:3px solid var(--ok-odak);outline-offset:2px}
.klavye-oyunlari-sayfa .ok-tus:focus:not(:focus-visible),
.klavye-oyunlari-sayfa .ok-bosluk:focus:not(:focus-visible){outline:none}
.klavye-oyunlari-sayfa .ok-tus:focus-visible,
.klavye-oyunlari-sayfa .ok-bosluk:focus-visible{outline:3px solid var(--ok-odak);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .klavye-oyunlari-sayfa .ok-tus,.klavye-oyunlari-sayfa .ok-bosluk{transition:none}
}