:root {
  --bg: #0f1115;
  --bg-yuksek: #171a21;
  --tus-bg: #262b35;
  --cizgi: #2a2f3a;
  --metin: #e8eaf0;
  --soluk: #9aa3b2;
  --vurgu: #f5a524;
  --yesil: #3fa66a;
  --sari: #cfae3f;
  --kirmizi: #d1495b;
  --gri: #4a5160;
  --yuvarlak: 9px;
  --gecis: 120ms ease;
  --tema-sure: 320ms;    /* acik<->koyu gecis suresi - src/*.js TEMA_SURE ile ayni */
  --kart-sure: 460ms;   /* kart cevirme suresi - src/app.js KART_SURE ile ayni */

  --bosluk: clamp(4px, 0.8vh, 7px);
  /* Yardim penceresindeki ornek rozetler icin varsayilan olcu.
     Tahtadaki gercek kutu boyu #tahta icinde satir genisliginden cozuluyor. */
  --kutu: clamp(30px, min(11vw, 5.6vh), 52px);

  /* Daha once denenmis harf: koyu temada karartilir, acik temada grilestirilir. */
  --tus-kullanilmis: color-mix(in srgb, var(--tus-bg) 55%, #000 45%);
}

:root[data-tema="acik"] {
  --bg: #f6f7f9;
  --bg-yuksek: #ffffff;
  --tus-bg: #e9edf3;
  --cizgi: #d9dee7;
  --metin: #171a21;
  --soluk: #5d6675;
  --gri: #b3bac6;
  /* Acik temada karartma tusu orta griye cevirip bozuk gosteriyordu;
     bunun yerine hafifce grilestiriliyor. */
  --tus-kullanilmis: color-mix(in srgb, var(--tus-bg) 70%, var(--soluk) 30%);
}

* { box-sizing: border-box; }

/* hidden ozniteligi her zaman gizlesin. Tarayicinin "[hidden]{display:none}"
   kurali cok zayif; ogeye sinif uzerinden display verildiginde (ornegin
   ".acilir button { display: flex }") eziliyor ve oge gizlenmiyordu. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--metin);
  font: 16px/1.4 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Hizli arka arkaya dokunuslar (ozellikle silme tusu) cift dokunus sayilip
     sayfayi yakinlastirmasin. Parmakla acip kapatarak yakinlastirma calismaya devam eder. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit; color: inherit; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;   /* dokununca gri parlama olmasin */
  -webkit-touch-callout: none;                /* basili tutunca buyutec/menu cikmasin */
  user-select: none;                          /* hizli dokunusta harf secilmesin */
}

/* Tiklayinca/dokununca cerceve cikmasin; yalnizca Tab ile gezinen gorsun. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* --- tema gecisi ---
   Sayfanin tamami tek parca capraz-gecis yapar (View Transitions).
   Onceki yontem her ogeye ayri renk gecisi veriyordu; rengini kalitimla alan
   yazilar (kart basliklari gibi) hem govdenin gecisini takip edip hem kendi
   gecislerini uyguladigi icin geride kaliyordu. Tek snapshot gecisinde
   butun pikseller ayni hizda doner. Destegi olmayan tarayicida ani gecis. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--tema-sure);
  animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --- üst bar --- */
header, .kontroller, main { width: 100%; max-width: 480px; padding-inline: 14px; }

/* Oyun sayfasi: main artan dikey alani yutar. Tahta yukarida, kontrollerin
   hemen altinda kalir; klavye asagi itilir (telefonda basparmaga daha yakin).
   Boylece altta olu bosluk kalmaz. (Giris sayfasinin kendi izgarasi var.) */
body:not(.giris) main {
  /* Buyumez: artan dikey alan reklam yuvasinin ALTINDA kalsin. Buyuseydi
     bosluk klavye ile reklam arasina gider, reklam da ekranin dibine
     dusup gorunmez olurdu. */
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  container-type: inline-size;   /* kutu boyu bu genislikten hesaplanir */
}

header {
  padding-top: 12px;
  display: flex; align-items: center; gap: 8px;
}

/* --- marka --- */

/* --- kutucuklu logo (giris sayfasi) ---
   KELIME: cengel bulmaca izgarasi - koseli, bitisik, kenarlari paylasan
   kutucuklar; bir bolumu dolu.
   500: oyundaki puan rozetleri - yuvarlak koseli, arali, yesil/sari/kirmizi.
   Iki farkli bicim bilerek: biri tek parca bir yapi, digeri uc ayri okuma. */
.logo {
  display: flex; align-items: center; gap: calc(var(--logo-kutu) * 0.34);
  --logo-kutu: 30px;                                   /* KELIME kutucugu */
  --logo-sayi: calc(var(--logo-kutu) * 1.15);          /* 500 %15 daha buyuk */
  text-decoration: none; color: inherit;
  margin-right: auto;
}
.logo b {
  display: grid; place-items: center;
  width: var(--logo-kutu); height: var(--logo-kutu);
  font-size: calc(var(--logo-kutu) * 0.62);
  font-weight: 800; line-height: 1;
  letter-spacing: 0;
}

/* cengel bulmaca izgarasi: kutucuklar kenar paylassin diye 1px bindiriliyor */
.logo-kelime { display: flex; }
.logo-kelime b {
  border: 1.5px solid var(--metin);
  margin-left: -1.5px;
  color: var(--metin);
  background: transparent;
}
.logo-kelime b:first-child { margin-left: 0; }
/* donusumlu dolu kutular: izgaraya ritim verir */
.logo-kelime b:nth-child(even) {
  background: var(--metin);
  color: var(--bg-yuksek);
}

/* puan rozetleri */
.logo-sayi { display: flex; gap: calc(var(--logo-kutu) * 0.15); }
.logo-sayi b {
  width: var(--logo-sayi); height: var(--logo-sayi);
  font-size: calc(var(--logo-sayi) * 0.62);
  border-radius: calc(var(--logo-sayi) * 0.26);
  color: #fff;                       /* uc rakam da beyaz */
}
.logo-sayi b:nth-child(1) { background: var(--yesil); }
.logo-sayi b:nth-child(2) { background: var(--sari); }
.logo-sayi b:nth-child(3) { background: var(--kirmizi); }

.simge {
  width: 34px; height: 34px;
  color: inherit; text-decoration: none;   /* <a> olan geri tusu mavi cikmasin */
  display: grid; place-items: center;
  background: var(--bg-yuksek);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  font-size: 15px;
  transition: border-color var(--gecis);
}
@media (hover: hover) { .simge:hover { border-color: var(--vurgu); } }

.kontroller { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
/* Istatistik penceresi kapatilinca dogru cevap burada ortada durur. */
.kontroller.cevap-modu { justify-content: center; }
.kontroller.cevap-modu .mod-etiket {
  flex: 0 0 auto; text-align: center;
  font-size: 15px;   /* govde tipografisi - ayri bir harf araligi verilmiyor */
}
.kontroller.cevap-modu .mod-etiket b { color: var(--yesil); }

.sekmeler {
  display: flex; gap: 3px; padding: 3px;
  background: var(--bg-yuksek);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
}
.sekme {
  border: 0; background: transparent;
  padding: 5px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--soluk);
}
.sekme[aria-selected="true"] { background: var(--vurgu); color: #17181c; }

select, input[type="date"] {
  font: inherit; font-size: 13px;
  background: var(--bg-yuksek); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 6px 8px; min-width: 0; flex: 1 1 auto;
}
/* iOS, 16px'ten kucuk yazili bir alana dokunuldugunda sayfayi kendiliginden
   yakinlastiriyor; dokunmatikte yazi buyutulerek bu engellenir. */
@media (pointer: coarse) {
  select, input[type="date"] { font-size: 16px; }
}

/* --- tahta --- */
.durum {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--soluk); margin: 8px 2px 6px;
}
.durum b { color: var(--metin); }

/* Bir satirin genisligi: 0.42 (↺) + 5 (harf kutusu) + 3 x 0.66 (rozet) = 7.4 kutu,
   aralarinda 8 bosluk, rozetlerden once 4px. Kutu boyu bu denklemden cozuluyor;
   boylece satir hicbir ekran genisliginde tasmaz. Ayrica 5.6vh ile sinirli ki
   tahta + klavye dikeyde de sigsin. */
#tahta {
  display: grid; gap: var(--bosluk); justify-content: center;
  /* Reklam alani icin tahta %20 kucultuldu (--olcek). Genislik hesabi ayni
     kaliyor, yalnizca sonuc olcekleniyor - satir hala tasmiyor. */
  --olcek: 0.8;
  --kutu: calc(clamp(28px, min(calc((100cqw - 8 * var(--bosluk) - 5px) / 7.4), 5.6vh), 52px)
               * var(--olcek));
}

.satir { display: flex; gap: var(--bosluk); align-items: center; }

.satir-sifirla {
  width: calc(var(--kutu) * 0.42); height: calc(var(--kutu) * 0.5);
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  background: var(--bg-yuksek); color: var(--soluk);
  font-size: calc(var(--kutu) * 0.28);
  /* Dugmenin varsayilan ic boslugu ve govdeden gelen 1.4 satir yuksekligi
     ↺ simgesini kutunun ortasindan kaydiriyordu. */
  padding: 0; line-height: 1;
}
@media (hover: hover) { .satir-sifirla:hover { border-color: var(--vurgu); color: var(--metin); } }
.satir-sifirla.bos { visibility: hidden; }

.kutu {
  width: var(--kutu); height: var(--kutu);
  display: grid; place-items: center;
  border: 2px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: var(--bg-yuksek);
  font-size: calc(var(--kutu) * 0.46);
  font-weight: 700;
  user-select: none;
  transition: border-color var(--gecis), background var(--gecis), color var(--gecis);
}
.kutu.dolu { border-color: var(--soluk); }
.kutu.atla { color: var(--soluk); }
.kutu.imlec { border-color: var(--vurgu); }
.satir.gonderildi .kutu { cursor: pointer; }
/* Oyun bitince not almak anlamsiz: imlec ve sifirlama dugmesi pasif. */
#tahta.oyun-bitti .kutu { cursor: default; }
#tahta.oyun-bitti .satir-sifirla { visibility: hidden; }
.kutu.not-yesil   { background: var(--yesil);   border-color: var(--yesil);   color: #fff; }
.kutu.not-sari    { background: var(--sari);    border-color: var(--sari);    color: #17181c; }
.kutu.not-kirmizi { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }

/* geçersiz kelime: satır kırmızı ve üstü çizili */
.satir.hatali .kutu { color: var(--kirmizi); border-color: var(--kirmizi); text-decoration: line-through; }

/* Enter'a basmadan, kelime tamamlanir tamamlanmaz: sozlukte olmayan kelime */
.satir.gecersiz .kutu.dolu { color: var(--kirmizi); border-color: var(--kirmizi); text-decoration: line-through; }

.rozetler { display: flex; gap: var(--bosluk); margin-left: 4px; }

/* --- cevrilebilir kartlar (rozetler + perde acilisinda harfler) --- */
/* Kart dikey ekseninin ortasindan, yukaridan asagiya donerek arka yuzunu gosterir. */
.rozet {
  width: calc(var(--kutu) * 0.66); height: var(--kutu);
  perspective: 700px;
  background: none;
}
.rozet-ic {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--kart-sure, 460ms) cubic-bezier(.45, .05, .35, 1);
}
.rozet.cevrik .rozet-ic { transform: rotateX(-180deg); }
.rozet-yuz {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: var(--yuvarlak);
  font-size: calc(var(--kutu) * 0.4);
  font-weight: 800; color: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rozet-yuz.arka { transform: rotateX(180deg); }

.rozet.yer  .rozet-yuz { background: var(--yesil); }
.rozet.harf .rozet-yuz { background: var(--sari); color: #17181c; }
.rozet.yok  .rozet-yuz { background: var(--kirmizi); }
/* Henuz oynanmamis satirin rozetleri bilgi tasimadigi icin renkli durmaz;
   bos harf kutulariyla ayni bos gorunumu alir. */
.rozetler.bos .rozet .rozet-yuz {
  background: var(--bg-yuksek);
  box-shadow: inset 0 0 0 2px var(--cizgi);
  opacity: 1;
}

/* perde acilisinda harf kutulari da ayni sekilde doner */
.kutu.cevrilir { perspective: 700px; background: none; border: 0; padding: 0; }
.kutu-ic {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--kart-sure, 460ms) cubic-bezier(.45, .05, .35, 1);
}
.kutu.cevrik .kutu-ic { transform: rotateX(-180deg); }
.kutu-yuz {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 2px solid var(--soluk);
  border-radius: var(--yuvarlak);
  background: var(--bg-yuksek);
  font-size: calc(var(--kutu) * 0.46);
  font-weight: 700;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.kutu-yuz.arka { transform: rotateX(180deg); }
.kutu-yuz.not-yesil   { background: var(--yesil);   border-color: var(--yesil);   color: #fff; }
.kutu-yuz.not-sari    { background: var(--sari);    border-color: var(--sari);    color: #17181c; }
.kutu-yuz.not-kirmizi { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }

/* hareket azaltma tercihi: donus yerine dogrudan gecis */
@media (prefers-reduced-motion: reduce) {
  .rozet-ic, .kutu-ic { transition: none; }
}

/* yardim penceresindeki ornek rozetler: donmez, duz gosterilir */
.rozet.duz {
  display: grid; place-items: center;
  perspective: none;
  border-radius: var(--yuvarlak);
  font-weight: 800; color: #fff;
}
.rozet.duz.yer  { background: var(--yesil); }
.rozet.duz.harf { background: var(--sari); color: #17181c; }
.rozet.duz.yok  { background: var(--kirmizi); }

.satir.sallan { animation: sallan 300ms; }
@keyframes sallan {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* --- klavye --- */
#klavye { display: grid; gap: calc(var(--bosluk) * 0.8); margin: 10px 0 14px; }

/* Tahta ve klavye yukariya hizalanir; kucultmeden artan alan altta toplanir
   (reklam yerlesimi icin).
   Ust boslugu .kontroller'in margin-top'u ile ayni: logo -> mod etiketi ve
   mod etiketi -> tahta araliklari esit gorunsun. */
body:not(.giris) #tahta { margin-block: 8px 0; }
body:not(.giris) #klavye { margin-top: 12px; }
.klavye-satir { display: flex; gap: 4px; justify-content: center; }

.tus {
  flex: 1 1 0; min-width: 0;
  height: calc(clamp(34px, 5.4vh, 48px) * 0.8);   /* yalnizca dikeyde kucultuldu */
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--tus-bg);
  font-size: 14px; font-weight: 700;
  transition: background var(--gecis), opacity var(--gecis);
}
/* Dokunmatikte :hover son dokunulan tusta takili kalip cerceve birakiyor,
   o yuzden yalnizca gercek fare varken uygulanir. */
@media (hover: hover) { .tus:hover { border-color: var(--soluk); } }
.tus.genis { flex: 1.5 1 0; font-size: 13px; }
/* sağ tıkla / basılı tut: kendi eleme notun */
.tus.not-yok  { opacity: .35; text-decoration: line-through; }
.tus.not-var  { background: var(--yesil); color: #fff; }
.tus.not-belki{ background: var(--sari); color: #17181c; }
/* otomatik: bu harf simdiye kadar bir tahminde kullanildi */
.tus.kullanilmis { background: var(--tus-kullanilmis); }

footer { color: var(--soluk); font-size: 11px; padding: 0 14px 18px; text-align: center; max-width: 480px; }

/* --- bildirim + pencereler --- */
#bildirim {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--metin); color: var(--bg);
  padding: 9px 15px; border-radius: var(--yuvarlak);
  font-size: 14px; font-weight: 600; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 150ms ease; z-index: 20;
}
#bildirim.gorunur { opacity: 1; }

dialog {
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: var(--bg-yuksek); color: var(--metin);
  max-width: 440px; width: calc(100% - 28px); padding: 20px;
}
/* Nasil oynanir penceresi giris sayfasi kartlariyla ayni genislikte:
   main 576px, ic genislik 576 - 28 = 548.
   Baslik ve kapatma tusu sabit kalir, yalnizca metin kayar - yoksa okumak
   icin asagi inince kapatma tusuna donmek gerekiyordu. */
/* DIKKAT: display yalnizca [open] durumunda verilir. Kimlik secicisi
   tarayicinin "dialog:not([open]) { display: none }" kuralini ezdigi icin,
   kosulsuz bir "display: flex" pencereyi kapandiktan sonra da ekranda
   birakiyordu (zemin karartmasi kalkiyor ama pencere duruyordu). */
#yardim-pencere {
  max-width: 548px; max-height: 85vh;
  padding: 0; overflow: hidden;
}
#yardim-pencere[open] { display: flex; flex-direction: column; }
.pencere-baslik {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--cizgi);
}
.pencere-baslik h2 { margin: 0; flex: 1 1 auto; }
#yardim-pencere .kapat { position: static; flex: 0 0 auto; }
.pencere-govde { flex: 1 1 auto; overflow-y: auto; padding: 14px 20px 20px; }
.pencere-govde > p:first-child { margin-top: 0; }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 8px; font-size: 18px; }
dialog p, dialog li { color: var(--soluk); font-size: 13.5px; }
dialog b, dialog strong { color: var(--metin); }
dialog ul { padding-left: 18px; }
.kapat { position: absolute; top: 12px; right: 12px; }
.ornek { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.ornek .rozet { width: 30px; height: 30px; font-size: 14px; }
.ornek p { margin: 0; }

.istatistikler { display: flex; gap: 6px; text-align: center; margin: 12px 0; }
.ist { flex: 1; }
.ist b { display: block; font-size: 22px; }
.ist span { font-size: 11px; color: var(--soluk); }
.dagilim { display: grid; gap: 3px; margin-top: 8px; }
.cubuk { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cubuk i { font-style: normal; width: 10px; color: var(--soluk); }
.cubuk u {
  text-decoration: none; background: var(--gri); color: #fff;
  border-radius: 4px; padding: 1px 6px; min-width: 24px; text-align: right;
}
.cubuk u.aktif { background: var(--yesil); }
#geri-sayim { display: block; text-align: center; margin-top: 12px; font-size: 12px; color: var(--soluk); }

/* Giris sayfasinin altindaki gunluk kelime sayaci. */
#sayac {
  width: 100%; max-width: 576px;
  margin: 14px 0 4px; padding-inline: 14px;
  text-align: center; font-size: 12.5px; color: var(--soluk);
}

/* Oyun sayfasi basligi: solda kutucuklu logo, sagda dugmeler (geri dahil).
   Logo kutucugu, dugmelerden artan genislikten hesaplanir - bir satirda
   5 dugme (30px) + aralarindaki 5 bosluk (6px) = 180px yer tutar.
   10.09 katsayisi logonun kutu boyu cinsinden genisligi:
   KELIME 6 kutu (1.5px bindirmeli) + ara + 500'un 3 buyuk kutusu. */
body:not(.giris) header { container-type: inline-size; }
/* Baslikta 3 dugme (34px) + aralarindaki 3 bosluk (8px) = 126px yer tutuyor.
   Logo kutucugu kalan genislikten cozulur; 10.09 katsayisi logonun kutu boyu
   cinsinden genisligi (KELIME 6 kutu + ara + 500'un 3 buyuk kutusu). */
body:not(.giris) .logo {
  --logo-kutu: clamp(12px, calc((100cqw - 130px) / 10.09), 26px);
}

/* --- baslik acilir menuleri --- */
.acilir-sarmal { position: relative; display: flex; }
.acilir {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 168px;
  display: grid; gap: 2px;
  padding: 6px;
  background: var(--bg-yuksek);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}
.acilir[hidden] { display: none; }
.acilir button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 9px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--metin);
}
.acilir hr { border: 0; border-top: 1px solid var(--cizgi); margin: 4px 2px; }
@media (hover: hover) { .acilir button:hover { background: var(--tus-bg); } }
.acilir button[aria-current="true"] { background: color-mix(in srgb, var(--vurgu) 18%, transparent); }
.acilir .nokta { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.nokta.standart  { background: var(--yesil); }
.nokta.ileri     { background: var(--kirmizi); }

/* Zorluk dugmesi: kapaliyken seviyenin rengini ve harfini tasir. */
.zorluk-dugme { border-color: transparent; font-weight: 800; font-size: 15px; }
/* Tek dokunusta seviye degistirir; acilir menusu yok. */
.zorluk-dugme[data-zorluk="standart"]  { background: var(--yesil);   color: #fff; }
.zorluk-dugme[data-zorluk="ileri"]     { background: var(--kirmizi); color: #fff; }

/* --- oyun sayfasi: mod etiketi ve tarih gezinmesi --- */
.mod-etiket {
  flex: 1 1 auto;
  font-size: 13px; font-weight: 600; color: var(--soluk);
}

/* Arsiv tarih secici dikeyde %20 kucuk: mobilde ust kisim cok sikisiktı.
   Yazi boyu kucultulmuyor - iOS 16px altindaki alanlara dokununca sayfayi
   kendiliginden yakinlastiriyor. */
.tarih-nav {
  width: 100%; max-width: 480px;
  padding-inline: 14px; margin-top: 6px;
  display: flex; gap: 6px; align-items: center; justify-content: center;
}
.tarih-nav .simge { width: 27px; height: 27px; font-size: 14px; }
.tarih-nav input[type="date"] { padding-block: 2px; }
.tarih-nav[hidden] { display: none; }
.tarih-nav input[type="date"] { flex: 0 1 190px; text-align: center; }
.simge[disabled] { opacity: .35; cursor: not-allowed; }

/* --- giris sayfasi --- */
body.giris { padding-bottom: 8px; }

/* Giris sayfasi kartlari oyun sayfasindan %20 genis (480 -> 576).
   Oyun sayfasi 480'de kaliyor: orada genislik tahtanin kutu boyunu
   belirliyor, buyutmek kutulari da buyutup dikeyde tasmaya yol acar. */
body.giris header,
body.giris main { max-width: 576px; }

/* Giris sayfasinda baslik da bir kart: logo solda, tema dugmesi sagda.
   Genislik asagidaki kartlarla birebir ayni olsun diye kart gorunumu
   header'in kendisine degil, icindeki sarmalayiciya veriliyor. */
.marka-kart {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-yuksek);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 20px 16px;
}
.giris-icerik {
  display: grid; gap: 12px;
  margin-top: 6px;
}

.kart {
  background: var(--bg-yuksek);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 16px;
}
.kart-ust { margin: 0; font-size: 12.5px; color: var(--soluk); }
.kart h2 { margin: 2px 0 6px; font-size: 21px; letter-spacing: -0.3px; }
.kart-aciklama { margin: 0 0 14px; font-size: 13.5px; color: var(--soluk); }

.kart-dugme {
  display: block; width: 100%; border: 0;
  text-align: center; text-decoration: none;
  padding: 12px 14px; border-radius: var(--yuvarlak);
  font-size: 15px; font-weight: 700;
  transition: filter var(--gecis);
}
@media (hover: hover) { .kart-dugme:hover { filter: brightness(1.08); } }
.kart-dugme.yesil { background: var(--yesil); color: #fff; }
/* Henuz oynanabilir gun yokken arsiv karti pasif gorunur. */
.kart-dugme[aria-disabled="true"] { background: var(--gri); cursor: default; pointer-events: none; }
.kart-dugme.sari  { background: var(--sari); color: #17181c; }   /* oyun ici sari */

.durum-satiri { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.durum-etiket {
  font-size: 11.5px; color: var(--soluk);
  border: 1px solid var(--cizgi); border-radius: 20px;
  padding: 3px 10px;
}
.durum-etiket b { color: var(--metin); font-weight: 700; }
.durum-etiket.kazandi  { border-color: var(--yesil); }
.durum-etiket.kazandi b { color: var(--yesil); }
.durum-etiket.kaybetti { border-color: var(--kirmizi); }
.durum-etiket.kaybetti b { color: var(--kirmizi); }
.durum-etiket.devam    { border-color: var(--vurgu); }
.durum-etiket.devam b  { color: var(--vurgu); }

#hata {
  width: 100%; max-width: 480px;
  margin: 10px auto 0; padding: 10px 14px;
  background: var(--kirmizi); color: #fff;
  border-radius: var(--yuvarlak);
  font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#hata[hidden] { display: none; }


/* ==========================================================================
   REKLAM YUVALARI
   Hepsi sabit olculu: reklam gec yuklense de sayfa kaymaz (CLS = 0).
   Bos haldeyken soluk bir cerceve gorunur - reklam kodu eklenince
   .reklam { background: none; border: 0; } yapip bu izi kaldirabilirsin.
   ========================================================================== */
.reklam {
  /* bos yuvanin gorunumu - yalnizca gelistirme sirasinda ise yarar */
  border: 1px dashed color-mix(in srgb, var(--soluk) 35%, transparent);
  border-radius: var(--yuvarlak);
  display: grid; place-items: center;
  overflow: hidden;
}
.reklam::after {
  content: "reklam";
  font-size: 11px; letter-spacing: .5px;
  color: color-mix(in srgb, var(--soluk) 55%, transparent);
}
.reklam:not(:empty)::after { content: none; }   /* reklam gelince etiket kalkar */

/* --- icerik ici yuva (mobil): 320x100 --- */
.reklam-icerik {
  width: 100%; max-width: 336px; height: 100px;
  margin-inline: auto;
}
/* Oyun sayfasinda klavyeyle arasinda 40px dokunulamaz bosluk: gonder tusuna
   basarken kazayla tiklanmasin (kaza tiklamalari gecersiz trafik sayilir). */
#reklam-oyun { margin-top: 40px; margin-bottom: 14px; }

/* --- masaustu yan bantlar: 300x600 --- */
.reklam-yan {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 300px; height: 600px;
  z-index: 5;
}
.reklam-yan.sol { left: 24px; }
.reklam-yan.sag { right: 24px; }

/* --- masaustu alt bant: 728x90 --- */
.reklam-alt {
  width: 728px; height: 90px;
  margin: 18px auto 24px;
}

/* --- istatistik penceresi ici: 320x100 --- */
.reklam-pencere {
  width: 100%; max-width: 336px; height: 100px;
  margin: 14px auto 2px;
}

/* --- gorunurluk kesme noktalari ---
   Mobilde yalnizca icerik ici yuva, masaustunde bant + yan bantlar. */
.reklam-yan, .reklam-alt { display: none; }

@media (min-width: 760px) {
  .reklam-icerik { display: none; }
  .reklam-alt { display: grid; }
}
/* Yan bantlar ancak icerik + 2x300 + bosluk sigdiginda acilir. */
@media (min-width: 1200px) {
  .reklam-yan { display: grid; }
}
/* Kisa ekranda 600px'lik bant tasar. */
@media (max-height: 680px) {
  .reklam-yan { display: none; }
}


/* --- cerez bildirimi --- */
#cerez-bildirimi {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 40;
  width: calc(100% - 28px); max-width: 560px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-yuksek);
  border: 1px solid var(--cizgi); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}
#cerez-bildirimi p { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--soluk); }
#cerez-bildirimi a { color: var(--vurgu); }
.cerez-dugmeler { display: flex; gap: 8px; flex: 0 0 auto; }
.cerez-dugmeler .tus {
  flex: 0 0 auto; height: 36px; padding: 0 14px;
  border-radius: var(--yuvarlak); font-size: 13.5px;
}
.cerez-dugmeler .tus.vurgulu { background: var(--yesil); color: #fff; }

/* --- gizlilik sayfasi --- */
.kart.yazi h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.3px; }
.kart.yazi h2 { margin: 22px 0 6px; font-size: 16px; }
.kart.yazi p, .kart.yazi li { font-size: 14px; color: var(--soluk); line-height: 1.6; }
.kart.yazi b { color: var(--metin); }
.kart.yazi a { color: var(--vurgu); }
.kart.yazi ul { padding-left: 18px; margin: 6px 0; }
.kart.yazi code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.kart.yazi .guncelleme { font-size: 12.5px; margin: 0 0 4px; }
.kart.yazi .kart-dugme { margin-top: 24px; }

/* alt bilgi bagalantisi */
.alt-baglanti {
  width: 100%; max-width: 576px; padding: 0 14px 18px;
  text-align: center; font-size: 12px;
}
.alt-baglanti a { color: var(--soluk); }