/* =============================================================
   kasa.css — SADECE "KASA" OYUNUNA AİT GÖRÜNÜM
   Ortak oyun görünümü (ekranlar, hud, mod kartları, bitiş) css/oyun.css'te.
   Renkler css/tema.css'te: --kasa (çelik mavisi), --kasa-deep, --kasa-para (kasa sayıları), --kasa-para-koyu,
   --kasa-banknot / --kasa-banknot-koyu / --kasa-bant (para balyaları). Kategori çizimleri js/bilgi-cizim.js'te.
   Ağır efekt yok (bulanıklık, gölge yayma): yalnızca transform ve opaklık oynar, telefon yorulmaz.
   ============================================================= */

/* ---------- menü: günlük kart ---------- */
.ks-gunluk{margin-top:14px;border-color:var(--kasa-deep);background:linear-gradient(160deg,var(--bg-2),var(--bg) 140%)}
.ks-mod-ust{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ks-yenilenme{font-size:12.5px !important}
.ks-yenilenme b{color:var(--text);font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums}
.ks-gunluk-alt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.ks-gunluk-alt .best{border:none;padding:0;margin:0;flex:1;min-width:160px}
.ks-gunluk-alt .best .kare{letter-spacing:1px;white-space:nowrap}
.ks-seri-rozet{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12px;
  color:var(--kivilcim);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 7px;
}
.ks-seri-rozet[hidden]{display:none}
.ks-seri-rozet b{font-weight:600;font-variant-numeric:tabular-nums}
.ks-seri-rozet .alev-svg{width:14px;height:14px;fill:currentColor}
.ks-vurgu{color:var(--kasa-para)}

/* ---------- menü: kurallar (numaralı kısa liste) ---------- */
.ks-kurallar{margin:26px 0 0;padding:0 0 0 12px;border-left:2px solid var(--kasa-deep);max-width:66ch;font-size:13px;color:var(--muted)}
.ks-kurallar b{color:var(--text)}
.ks-kurallar ol{margin:6px 0 0;padding-left:20px}
.ks-kurallar li{margin:4px 0}


/* =============================================================
   OYUN EKRANI — yukarıdan aşağı: üst çubuk · süre · soru · şıklar · alt bilgi · sarı düğme
   Sütunun boyu ekrana göre ayarlanır; artan yer şıklara kalır. Soru kutusunun ve alt bilginin
   boyu SABİT: yazı değişince düğmeler yerinden oynamaz.
   --bw / --bh: bir balyanın eni ve boyu, --badim: yığında alttaki balyanın görünen kenarı.
   ============================================================= */
.ks-sahne{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px;--bw:22px;--bh:8px;--badim:4px}
@supports (height:100svh){
  body.sahnede .ks-sahne{height:calc(100svh - 24px);min-height:500px;max-height:760px}
}

/* üst çubuk: kasa sayısı para renginde; para düşünce bir an kızarır */
.ks-sahne .hud{flex:none;flex-wrap:nowrap}
.ks-sahne .hud .stat.hi b{color:var(--kasa-para)}
#o-kasa.eksildi{animation:ks-kizar .7s ease-out}
@keyframes ks-kizar{ 0%,45%{color:var(--bad)} 100%{color:var(--kasa-para)} }

/* ---------- süre çubuğu ---------- */
.ks-sure{flex:none;display:flex;align-items:center;gap:8px;height:14px}
.ks-sure-yol{flex:1;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.ks-sure-yol i{
  display:block;height:100%;border-radius:3px;background:var(--kasa);
  transform-origin:left center;transition:transform .2s linear;
}
.ks-sure b{
  flex:none;width:22px;text-align:right;font-family:var(--f-mono);font-size:13px;font-weight:600;
  color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;
}
.ks-sure.acil .ks-sure-yol i{background:var(--bad)}
.ks-sure.acil b{color:var(--bad)}

/* ---------- soru kutusu (boyu sabit) ---------- */
.ks-soru-kutu{
  flex:none;height:96px;padding:6px 14px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);text-align:center;overflow:hidden;
}
.ks-etiket{font-size:12px;font-weight:600;color:var(--kasa);letter-spacing:.02em;line-height:1.25}
.ks-soru{margin:0;font-weight:600;font-size:16px;line-height:1.28;text-wrap:balance}
.ks-soru.uzun{font-size:14.5px;line-height:1.24}

/* =============================================================
   BALYALAR — her <i> 50.000'lik bir para balyası (ortasında kâğıt bandı olan banknot destesi).
   Beşerli yığınlar hâlinde üst üste durur (.ks-yigin); yığın çoğalınca yan yana sıkışır.
   Şık kutularında ve alttaki "elinde" satırında aynı çizim kullanılır.
   ============================================================= */
.ks-balyalar{display:flex;align-items:flex-end;gap:3px;min-width:0;height:calc(var(--bh) + 4 * var(--badim))}
.ks-yigin{flex:0 1 var(--bw);min-width:calc(var(--bw) * .5);display:flex;flex-direction:column-reverse}
.ks-yigin i{
  flex:none;display:block;width:var(--bw);height:var(--bh);margin-top:calc(var(--badim) - var(--bh));
  border:1px solid var(--kasa-banknot-koyu);border-radius:2px;
  background:linear-gradient(90deg,var(--kasa-banknot) 0 34%,var(--kasa-bant) 34% 66%,var(--kasa-banknot) 66%);
}
.ks-yigin i:last-child{margin-top:0}
/* yeni konan balya yukarıdan yerine oturur; "Hepsi" denince yığınlar birlikte iner */
.ks-yigin.yeni i:last-child,.ks-yigin.yeni-yigin{animation:ks-kon .17s ease-out}
@keyframes ks-kon{ from{transform:translateY(-10px);opacity:.3} }

/* =============================================================
   ŞIKLAR — 2x2 kare kutular. 3 şıkta üçüncü kutu alt satırın ortasında, 2 şıkta kutular iki satır boyunca uzar.
   Kutu yukarıdan aşağı: şık yazısı · balyalar + tutar · KAPAK (iki kanat) · − Hepsi + düğmeleri.
   Kutunun herhangi bir yerine dokunmak 50.000 koyar.
   ============================================================= */
.ks-siklar{
  flex:1 1 auto;min-height:196px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:8px;
  padding-bottom:3px;   /* kutuların alt gölgesi için yer */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;   /* basılı tutunca yazı seçilmesin */
}
.ks-sik{
  grid-column:span 2;min-height:0;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 3px 0 var(--line);
  transition:border-color .15s,background-color .2s,opacity .3s,transform .08s,box-shadow .08s;
}
.ks-siklar.sik-3 .ks-sik:nth-child(3){grid-column:2 / span 2}
.ks-siklar.sik-2 .ks-sik{grid-row:1 / span 2}
.ks-sik:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.ks-sik.dolu{border-color:var(--kasa-para-koyu)}

.ks-govde{
  flex:1 1 auto;min-height:0;display:flex;align-items:flex-start;gap:7px;padding:7px 8px 0;
  background:none;border:0;color:var(--text);font:600 14px/1.2 var(--f-body);text-align:left;cursor:pointer;
}
.ks-harf{
  flex:none;width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;
  font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--muted);
}
.ks-yazi{min-width:0;overflow-wrap:anywhere;padding-top:1px}
.ks-yazi.uzun{font-size:13px}
/* iki satır boyunca uzanan kutuda (son soru) yazı büyür */
.ks-siklar.sik-2 .ks-govde{flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:17px;gap:10px}
.ks-siklar.sik-2 .ks-yazi.uzun{font-size:15.5px}

/* balyalar solda, tutar sağda; ikisi de kapağın üstünde durur */
.ks-para{flex:none;position:relative;z-index:2;display:flex;align-items:flex-end;gap:6px;padding:2px 8px 0}
.ks-para .ks-balyalar{flex:1 1 auto}
.ks-tutar{
  flex:none;font-family:var(--f-mono);font-weight:600;font-size:15px;line-height:1;padding-bottom:1px;
  color:var(--line);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ks-sik.dolu .ks-tutar{color:var(--kasa-para)}
.ks-tutar.buyuk{font-size:13px}

/* KAPAK: ortadan ikiye ayrılan iki kanat. Yanlış şıkta kanatlar aşağı açılır (menteşeler iki uçta). */
.ks-kapak{flex:none;position:relative;z-index:1;display:flex;gap:2px;height:4px;margin:2px 6px 3px}
.ks-kapak i{flex:1;border-radius:2px;background:var(--line);transition:transform .3s cubic-bezier(.5,0,.75,.4),background-color .2s}
.ks-kapak i:first-child{transform-origin:2px 50%}
.ks-kapak i:last-child{transform-origin:calc(100% - 2px) 50%}
.ks-sik.dolu .ks-kapak i{background:var(--muted)}

.ks-ayar{flex:none;display:flex;align-items:center;gap:4px;padding:0 5px 5px}
.ks-eksi,.ks-arti,.ks-hepsi{
  height:28px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);
}
.ks-eksi,.ks-arti{flex:none;width:38px;font:600 19px/1 var(--f-mono)}
.ks-hepsi{flex:1;min-width:0;font:600 12.5px/1 var(--f-body);color:var(--kasa-para);border-color:var(--kasa-para-koyu)}
.ks-eksi:disabled,.ks-hepsi:disabled{opacity:.3;cursor:default}
.ks-eksi:active:not(:disabled),.ks-arti:active,.ks-hepsi:active:not(:disabled){background:var(--line)}
@media (hover:hover){
  .ks-siklar:not(.kilitli) .ks-sik:hover{border-color:var(--muted)}
  .ks-eksi:hover:not(:disabled),.ks-arti:hover{border-color:var(--muted)}
  .ks-hepsi:hover:not(:disabled){border-color:var(--kasa-para)}
}

/* izin verilmeyen hamle: kutu iki yana sallanır */
.ks-sik.salla{animation:ks-salla .3s}
@keyframes ks-salla{ 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

/* =============================================================
   KAPAKLAR AÇILINCA
   .acildi  yanlış şık: kanatlar aşağı açılır, altı (düğmelerin yeri) karanlık boşluk olur
   .dustu   üstünde para olan yanlış şık: yığınlar boşluğa düşer, kutu kızarır
   .kapandi boş kalmış yanlış şık: kapak açılır, kutu solar
   .dogru   doğru şık: kapak yerinde kalır, yeşil yanar, balyalar sevinçle zıplar
   Yalnızca transform oynar (bulanıklık, gölge yok).
   ============================================================= */
.ks-siklar.kilitli{pointer-events:none}
.ks-siklar.kilitli .ks-ayar > *{visibility:hidden}
.ks-sik.acildi .ks-kapak i:first-child{transform:rotate(84deg)}
.ks-sik.acildi .ks-kapak i:last-child{transform:rotate(-84deg)}
.ks-sik.acildi .ks-ayar{background:var(--bg)}
.ks-sik.kapandi{opacity:.32}

.ks-sik.dustu{border-color:var(--bad);background:var(--kt-yanlis-zemin);box-shadow:0 3px 0 var(--line-soft)}
.ks-sik.dustu .ks-kapak i{background:var(--bad)}
.ks-sik.dustu .ks-tutar{color:var(--bad);text-decoration:line-through}
.ks-sik.dustu .ks-harf{background:var(--bad);border-color:var(--bad);color:var(--bg)}
/* yığınlar kapak açıldıktan hemen sonra, azıcık arayla ve sağa sola dönerek düşer */
.ks-sik.dustu .ks-yigin{animation:ks-dus .6s cubic-bezier(.6,0,.9,.5) .16s forwards}
.ks-sik.dustu .ks-yigin:nth-child(even){animation-name:ks-dus-ters}
.ks-sik.dustu .ks-yigin:nth-child(2){animation-delay:.22s}
.ks-sik.dustu .ks-yigin:nth-child(3){animation-delay:.27s}
.ks-sik.dustu .ks-yigin:nth-child(4){animation-delay:.19s}
.ks-sik.dustu .ks-yigin:nth-child(5){animation-delay:.31s}
.ks-sik.dustu .ks-yigin:nth-child(6){animation-delay:.24s}
@keyframes ks-dus{ to{transform:translateY(150px) rotate(16deg)} }
@keyframes ks-dus-ters{ to{transform:translateY(150px) rotate(-13deg)} }

.ks-sik.dogru{border-color:var(--green);background:var(--kt-dogru-zemin)}
.ks-sik.dogru .ks-harf{background:var(--green);border-color:var(--green);color:var(--bg)}
.ks-sik.dogru .ks-tutar{color:var(--green)}
.ks-sik.dogru .ks-kapak i{background:var(--green)}
.ks-sik.dogru .ks-yigin{animation:ks-zipla .45s ease-out}
.ks-sik.dogru .ks-yigin:nth-child(even){animation-delay:.07s}
@keyframes ks-zipla{ 35%{transform:translateY(-6px)} 70%{transform:translateY(0)} 85%{transform:translateY(-2px)} }

/* =============================================================
   KATEGORİ SEÇİMİ — alt alta iki geniş kart: solda kategorinin adı, sağda çizimi.
   Her kategori kendi renginde (ana sayfadaki oyun kartlarının renk çiftleri kullanılır).
   Bu aşamada süre çubuğu ve sarı düğme yoktur; yerleri kartlara kalır.
   ============================================================= */
.ks-sahne.kategoride .ks-sure{visibility:hidden}
.ks-sahne.kategoride .ks-dugme{display:none}
.ks-sahne.kategoride .ks-alt{height:auto;padding:4px 0 8px}
.ks-sahne.kategoride .ks-siklar{gap:12px;padding-bottom:5px}

.ks-kategori{
  --kart-a:var(--kart-kasa-a);--kart-b:var(--kart-kasa-b);
  grid-column:1 / -1;min-height:0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px 0 22px;
  cursor:pointer;color:var(--beyaz);text-align:left;border:0;border-radius:var(--r-buyuk);
  background:var(--kart-b);background:linear-gradient(160deg,var(--kart-a),var(--kart-b));
  box-shadow:0 5px 0 var(--kenar-golge);transition:transform .08s,box-shadow .08s;
}
.ks-kategori:active{transform:translateY(3px);box-shadow:0 2px 0 var(--kenar-golge)}
@media (hover:hover){ .ks-kategori:hover{filter:brightness(1.08)} }
.ks-kategori-ad{
  flex:1;min-width:0;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,8.6vw,40px);
  line-height:.98;letter-spacing:.01em;text-wrap:balance;
}
/* çizim: kartın sağında, arkasında açık renk bir daire (kartın kenarından taşar, kesilir) */
.ks-kategori-cizim{flex:none;position:relative;height:84%;aspect-ratio:1;display:grid;place-items:center}
.ks-kategori-cizim::before{content:"";position:absolute;inset:-16%;border-radius:50%;background:var(--cam)}
.ks-kategori-cizim svg{position:relative;width:80%;height:80%;transform:rotate(-6deg)}
.ks-kategori:nth-child(2) .ks-kategori-cizim svg{transform:rotate(5deg)}

.ks-kategori[data-kat="tarih"]{--kart-a:var(--kart-vaka-a);--kart-b:var(--kart-vaka-b)}
.ks-kategori[data-kat="cografya"]{--kart-a:var(--kart-harita-a);--kart-b:var(--kart-harita-b)}
.ks-kategori[data-kat="bilim"]{--kart-a:var(--kart-boy-a);--kart-b:var(--kart-boy-b)}
.ks-kategori[data-kat="edebiyat"]{--kart-a:var(--kart-pp-a);--kart-b:var(--kart-pp-b)}
.ks-kategori[data-kat="sanat"]{--kart-a:var(--kart-kaypak-a);--kart-b:var(--kart-kaypak-b)}
.ks-kategori[data-kat="spor"]{--kart-a:var(--kart-tnt-a);--kart-b:var(--kart-tnt-b)}
.ks-kategori[data-kat="sinema"]{--kart-a:var(--kart-dinleyici-a);--kart-b:var(--kart-dinleyici-b)}
.ks-kategori[data-kat="genel"]{--kart-a:var(--kart-kactir-a);--kart-b:var(--kart-kactir-b)}
.ks-kategori[data-kat="yemek"]{--kart-a:var(--kart-yas-a);--kart-b:var(--kart-yas-b)}

/* kategori çizimleri (js/bilgi-cizim.js): şekillerin renkleri */
.bilgi-cizim{display:block;overflow:visible}
.bilgi-cizim .cz-a{fill:var(--beyaz)}
.bilgi-cizim .cz-b{fill:var(--kart-b)}
.bilgi-cizim .cz-c{fill:var(--cam-cizgi)}
.bilgi-cizim .cz-v{fill:var(--vurgu)}
.bilgi-cizim .cz-k{fill:var(--bad)}
.bilgi-cizim .cz-y{fill:var(--green)}
.bilgi-cizim .cz-m{fill:var(--pp)}
.bilgi-cizim .cz-s{fill:none;stroke:var(--beyaz);stroke-width:5;stroke-linecap:round}
.bilgi-cizim .cz-sb{fill:none;stroke:var(--kart-b);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- alt bilgi (boyu sabit): elde kalan para ve balyaları / uyarı / sonuç ve sorunun notu ---------- */
.ks-alt{flex:none;height:62px;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center;overflow:hidden}
.ks-alt-ust{margin:0;font-size:14.5px;line-height:1.25;color:var(--muted)}
.ks-alt-ust b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ks-alt-yazi{margin:0;font-size:12px;line-height:1.3;color:var(--muted)}
.ks-alt-yazi:empty,.ks-elde:empty{display:none}
.ks-elde{flex:none;justify-content:center;gap:4px;margin:2px 0 1px}
.ks-alt.uyari .ks-alt-yazi{color:var(--bad)}
.ks-alt.iyi .ks-alt-ust b{color:var(--green)}
.ks-alt.kotu .ks-alt-ust b{color:var(--bad)}
.ks-alt-ust b.ks-eksi-yazi{color:var(--bad)}

/* asıl düğme: hep aynı yerde */
.ks-dugme{flex:none;width:100%;margin-bottom:4px}
.ks-klavye{flex:none;text-align:center;margin:0}

/* ---------- bitiş ---------- */
#b-kasa{color:var(--kasa-para)}
#b-kasa.kotu{color:var(--bad)}
/* sonuç kareleri paylaşım metnindeki 🟩🟨🟧🟥 ile aynı renklerde: kayıpsız · çoğu kaldı · azı kaldı · kasa boşaldı */
#b-track i.s2,.ks-ozet-kare.s2{background:var(--vurgu)}
#b-track i.s1,.ks-ozet-kare.s1{background:var(--kasa-az)}
.ks-ozet{list-style:none;margin:18px auto 0;padding:0;max-width:480px;text-align:left;display:flex;flex-direction:column;gap:6px}
.ks-ozet li{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.ks-ozet-kare{width:12px;height:12px;border-radius:3px;flex:none;background:var(--line-soft)}
.ks-ozet-kare.s3{background:var(--green)} .ks-ozet-kare.s0{background:var(--bad)}
.ks-ozet-soru{flex:1;min-width:0;font-size:13px;line-height:1.3;color:var(--muted)}
.ks-ozet-soru small{display:block;margin-top:2px;font-size:13.5px;font-weight:600;color:var(--text)}
.ks-ozet-sayi{font-family:var(--f-mono);font-size:13.5px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ks-ozet-sayi small{display:block;color:var(--muted);font-size:11.5px}
.ks-ozet-sayi small.iyi{color:var(--green)}
.ks-ozet-sayi small.kotu{color:var(--bad)}

/* ---------- oynarken site başlığı ve alt bilgi gizlenir (oyun-kasa.js "sahnede" sınıfını ekler) ---------- */
body.sahnede .sitehead,
body.sahnede .gamehead,
body.sahnede .sitefoot{display:none}
body.sahnede .wrap{padding-block:12px}
body.sahnede .screen{margin-top:0}

/* dokunmatik ekranda klavye ipucu gereksiz */
@media (hover:none){ .klavye-ipucu{display:none} }

/* ---------- telefon ---------- */
@media (max-width:720px){
  .ks-sahne .hud .stat{margin-right:10px;font-size:11px;letter-spacing:.03em}
  .ks-sahne .hud .stat b{font-size:15px;margin-left:4px}
  .ks-sahne .hud .linkbtn{font-size:12px;padding:2px}
}
/* uzun ekranda (çoğu telefon) kutular büyür: yazılar, düğmeler ve balyalar da biraz büyüsün */
@media (min-height:640px){
  .ks-sahne{--bw:26px;--bh:9px;--badim:5px}
  .ks-soru-kutu{height:112px;padding-block:8px}
  .ks-soru{font-size:17px}
  .ks-soru.uzun{font-size:15px}
  .ks-govde{font-size:15px;padding-top:10px}
  .ks-yazi.uzun{font-size:14px}
  .ks-eksi,.ks-arti,.ks-hepsi{height:34px}
  .ks-eksi,.ks-arti{width:42px}
  .ks-hepsi{font-size:13.5px}
  .ks-tutar{font-size:16px}
  .ks-ayar{padding:0 6px 6px}
  .ks-alt{height:70px}
}
/* daha da uzun ekranda kutular epey büyür: şık yazısı kutunun ortasına gelir, balyalar irileşir */
@media (min-height:700px){
  .ks-sahne{--bw:32px;--bh:11px;--badim:6px}
  .ks-soru-kutu{height:124px}
  .ks-soru{font-size:18px}
  .ks-soru.uzun{font-size:16px}
  .ks-govde{align-items:center;font-size:17px}
  .ks-yazi.uzun{font-size:15.5px}
  .ks-tutar{font-size:17px}
  .ks-alt{height:78px}
}
@media (max-width:420px){
  #s-bitis .over{padding:20px 14px 18px;margin-top:0}
  #s-bitis .over h2{font-size:26px}
  #s-bitis .over .big{font-size:48px}
  #s-bitis .overbtns{margin-top:16px;gap:8px}
  #s-bitis .overbtns .btn{padding:13px 14px}
  .ks-ozet{margin-top:14px}
  .ks-ozet li{padding:7px 10px;gap:8px}
}