/* v2026.10-zzzu · Bilgi Turu soru ve çark ekranı: yerleşim ve yazı (tasarımcı önerisi; index.html'de css/zzv-cark.css'ten sonra bağlanır) */

/* 1 · dikey düzen (telefon): tabela + soru + seçenekler üstte tek yığın. Boş alan önce seçenek satırlarını büyütür (üst sınıra dek),
   kalan seçeneklerin altında, dokun üstünde kalır; cevapta büyüyen satır ve bildirim kartı bu alandan yer alır */
@media (max-width:699px){
html.game-on .kk-run.tv-q{--g1:clamp(4px,1.6dvh,16px);--op1:clamp(60px,9.6dvh,84px)}
html.game-on .kk-run.tv-q:has(.tv-nums){--op1:clamp(76px,15dvh,136px)}
html.game-on .kk-run.tv-q .tv-qx,html.game-on .kk-run.tv-q > .kk-qh{margin-top:var(--g1)}
html.game-on .kk-run.tv-q .kk-ops{flex:1 0 auto;min-height:0;margin-bottom:0;align-content:start;grid-auto-rows:minmax(min-content,var(--op1))}
html.game-on .kk-run.tv-q .kk-bot{margin-top:0;z-index:3}
/* seçenekler büyür ama küçülmez (flex-shrink 0): içerik ekranı aşarsa sahne kayar, dok seçeneğin üstüne binmez (360×640 iki bölümlü sonuç) */
/* satır tabanı düşük (dokunma ≥ 44 px); yükseklik boş alandan gelir (üst sınır --op1), cevapta büyüyen satır yeri buradan alır */
html.game-on .kk-run.tv-q .kk-ops > .kk-op{min-height:52px}
html.game-on .kk-run.tv-q .kk-ops > .kk-op.tv-num{min-height:72px}
/* Şampiyonu bul sorusu tek satır (DE/FR 360 px'te de) */
html.game-on .kk-run.tv-q > .kk-qh{font-size:clamp(19px,5.4vw,24px);line-height:1.15;text-wrap:balance}
/* "Dokun, geç" dokun kendi şeridinde (yalnız ipucu varken 16 px); satırlar esnek olduğundan şerit yerini seçeneklerden alır, üstlerine binmez */
html.game-on .kk-run.tv-q .kk-bot:has(> .gm-sec:not(:empty)){padding-top:16px}
.kk-run.tv-q .kk-bot > .gm-sec{top:0;left:6px}
/* kısa ekranda şerit yok: ipucu kartın üst kenarında sağda künye gibi (puan rozetinin üstü; başlığa değmez); künye varsa ipucu çekilir */
@media (max-height:700px){
  html.game-on .kk-run.tv-q .kk-bot:has(> .gm-sec:not(:empty)){padding-top:0}
  .kk-run.tv-q .kk-bot > .gm-sec{top:-7px;left:auto;right:14px;z-index:5;padding:3px 7px 2px;border-radius:7px;font:700 10px/1 var(--f-body);color:var(--ink-2,#DCE1EE);background:#141C44;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
  .kk-run.tv-q .kk-bot:has(.gm-ntf-k) > .gm-sec{display:none}
}
}

/* 2 · sayısal 2×2: üst bant rozetler (harf solda, ✓/✕ sağda), rakam altta ortada; rozetle çakışmaz */
.ar .kk-op.tv-num{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;grid-template-rows:24px minmax(0,1fr);gap:0 6px;align-items:center;justify-items:center;text-align:center}
html.game-on .kk-run .kk-op.tv-num{padding:8px 8px 10px}
.ar .kk-op.tv-num .kk-l,.ar .kk-op.tv-num:not(.win):not(.bad) .kk-l{grid-area:1/1;position:static;width:24px;height:24px;font-size:11.5px}
.ar .kk-op.tv-num .kk-rk{grid-area:1/3;position:static;width:24px;min-width:24px;height:24px}
.ar .kk-op.tv-num .kk-on{grid-area:2/1/3/4;flex:none;align-self:center;width:100%;align-items:center;justify-content:center}
.ar .kk-op.tv-num .kk-on > b,.ar .kk-op.tv-num .kk-on > b[data-l]{display:block;font:800 clamp(26px,8vw,36px)/1.1 var(--f-display);white-space:nowrap;overflow:visible;-webkit-line-clamp:none;letter-spacing:-.01em}
.ar .kk-op.tv-num .tv-ck,.ar .kk-op.tv-num .tv-cx{width:24px;height:24px;font-size:13px}

/* 3 · tabela: filigran sayaç satırına girmez (kısa tabelada kenardan kırpılır); arka yüz ön yüzden uzun olmaz
   ("Doğru cevap" sayaçla aynı satırda, konu çipi arka yüzde yok: renk şeridi ve filigran konuyu taşır) */
.tv-wm{top:max(34px,calc(100% - 92px));bottom:auto;right:-10px}
.tv-qc .tv-qb{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:4px 8px}
.tv-qb > .tv-q1{display:contents}
.tv-qb > .tv-q1 > .tv-chip{display:none}
.tv-qb .kk-no{grid-area:1/2;align-self:center}
.tv-qb > .tv-dc{grid-area:1/1;align-self:center;min-height:24px;display:flex;align-items:center}
.tv-qb > .tv-an{grid-column:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance}

/* 4 · Şampiyonu bul: kurdele satırı büyütmez; künye satırında önce sınıf adı kısalır (en az 4,5 harf), start sayısı hiç */
.ar .kk-run .kk-op .kk-rk > .ar-ros{margin:-14px 0 -12px}
.ar .kk-board .kk-tags > .kk-tg{flex:0 1 auto}
.ar .kk-board .kk-tags > .kk-tg:first-child{flex:0 100 auto;min-width:4.5em}
.ar .kk-board .kk-tags > .kk-tg:has(> b){flex:none}
@media (max-height:700px){
  /* binici ve sonuç sığarsa tek satır; sığmazsa sonuç alt satıra (iki bölümlü, baraj, FR/DE uzun birimler kesiliyordu) */
  .tv-q .kk-m2{flex-wrap:wrap;white-space:nowrap;row-gap:0}
  .tv-q .kk-m2 > .kk-mate{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
  .tv-q .kk-m2 > .kk-orr{flex:0 1 auto}
  .tv-q .kk-board.tv-sbb .kk-tags{display:none}
}

/* 5 · çark (telefon; masaüstünün ortalı kümesi zzr-arena2 252–255 kalır): çark ekran genişliğine yakın; kalan boşluk ikiye (çarkın üstü / düğmenin üstü); nal payı tur satırının altında sabit */
@media (max-width:899px){
.tv-wsc{--wz:clamp(244px,min(calc(100vw - 48px),50dvh),380px)}
.tv-wsc .tv-wh,.tv-wsc:has(.tv-wdone) .tv-wh{--wz:inherit}
html.game-on .tv-wsc .tv-wh{margin-top:auto}
.tv-wsc .tv-wtop{margin-bottom:calc(var(--wz) * .06)}
.tv-wsc .tv-wbot{margin-top:auto}
@media (max-height:680px){.tv-wsc{--wz:clamp(220px,min(calc(100vw - 64px),44dvh),320px)}.tv-wsc:has(.tv-wdone){--wz:clamp(212px,min(calc(100vw - 72px),40dvh),300px)}}
}

/* 6 · metin seçenekleri: grupta tek punto (en uzun seçeneğe göre), 15 px altına inmez, "…" yok (gerekirse 3. satır);
   ✓/✕ ve derece sütunu baştan ayrılır (cevapta metin yeniden kırılmaz) */
.ar .tv-q .kk-ops:not(.tv-nums):has(.kk-on > b[data-l="m"]) .kk-on > b{font-size:16px;line-height:1.18}
.ar .tv-q .kk-ops:not(.tv-nums):has(.kk-on > b[data-l="l"],.kk-on > b[data-l="xl"]) .kk-on > b,.ar .tv-q .kk-ops.tv-long .kk-on > b{font-size:15px;line-height:1.2;-webkit-line-clamp:3;line-clamp:3}
.kk-run.tv-q:not(.rv) .kk-op:not(.tv-num) .kk-rk{display:grid;visibility:hidden}
.ar .tv-q .kk-op:not(.tv-num) .kk-rk{flex:0 0 30px;min-width:30px}
.ar .tv-q .kk-ops:has(.kk-mate) .kk-op .kk-rk{flex-basis:44px;min-width:44px}

/* 7 · üst HUD (≤ 380 px): puan biriminin yazısı düşer (ekran okuyucu etiketi kalır), saat genişliği sabit (noktalar zıplamaz) */
.kk-top .gm-clk b{min-width:5ch}
@media (max-width:380px){.kk-top .kk-sc > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.kk-top .kk-sc{position:relative;padding:5px 11px}}

/* 8 · oyun/UX (v2026.10-zzzu) */
/* okuma payı: seçenekler dokunulabildikleri an gelir (önce görünüp dokunuşu yutuyordu); tvQ --rd verir */
.ar .kk-run.tv-q .kk-op{animation-delay:calc(var(--rd,240ms) + var(--k) * 50ms)}
.kk-run.tv-q:not(.go) .kk-ops{pointer-events:none}
/* ekran değişiminde üst HUD yerinde kalır (yeni ekran animasyonsuz, eski ekranın HUD'u gizli); çark ekranının öğeleri kendi girişiyle */
.ar > .ar-scr.kk-run:not(.out){animation:none}
.ar > .ar-scr.kk-run.out > .kk-top{visibility:hidden}
.ar > .ar-scr.tv-wsc:not(.out) > :not(.kk-top){animation:arIn .45s var(--spring,cubic-bezier(.34,1.56,.64,1)) both}
/* çarkta kronometre yok (süre yalnız soruda akar; toplam sonuçta) */
.tv-wsc .kk-top .kk-clk{visibility:hidden}
/* bildirim kartı: +puan rozeti silme geçişi bittikten sonra gelir */
.gm-ntf-c{animation-delay:.44s}
/* cevapta harf rozeti küçülmez (yazı yana kaymaz) */
.ar .kk-op:not(.tv-num).win .kk-l,.ar .kk-op:not(.tv-num).bad .kk-l{width:34px;height:34px}
/* çark inişinde konu açıklaması altın değil (konu rengi tanımsızdı) */
.tv-wres .tv-wd{color:rgba(214,224,255,.8)}
@media (prefers-reduced-motion:reduce){.ar > .ar-scr.tv-wsc:not(.out) > :not(.kk-top){animation:none}}

/* 9 · ön yüz QA (v2026.10-zzzu) */
/* çıkan ekran düzenini korur: .out mutlak konumda ve alt kenarsızdı, esnek sütunu kaybedip çöküyordu (kullanıcının 3. görüntüsü:
   sahne sönük, "Dokun, geç" D seçeneğinin üstünde) */
@media (max-width:680px){html.game-on .ar > .ar-scr.kk-run.out{left:12px;right:12px;top:12px;bottom:12px;display:flex;flex-direction:column;gap:var(--gm-gap);overflow:hidden}}
@media (min-width:681px){html.game-on .ar > .ar-scr.kk-run.out{bottom:20px;display:flex;flex-direction:column;gap:var(--gm-gap);overflow:hidden}}
/* konfeti seçeneğin içinde, yazının altında; ✓ ya da kokartın arkasından çıkar, kenarda kırpılır */
.kk-op > .gm-cf{left:0;top:0;width:100%;height:100%;overflow:hidden;border-radius:inherit;z-index:0}
.kk-op > .gm-cf i{left:calc(100% - 46px);top:calc(50% - 6px);animation-name:gmCfIn}
.kk-op.tv-num > .gm-cf i{left:calc(100% - 22px);top:14px}
.kk-op > :not(.gm-cf){position:relative;z-index:1}
.ar .kk-op.tv-num .kk-l,.ar .kk-op.tv-num .kk-rk{position:relative;z-index:1}
@keyframes gmCfIn{0%{opacity:1;transform:scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) * .55),calc(var(--y) * .3 + 16px)) rotate(var(--r,0deg))}}
/* sayısal seçenekte uzun değer (dk, Minuten) yana taşmaz: gmFit adımları */
.ar .kk-op.tv-num .kk-on > b[data-l="m"]{font-size:clamp(22px,6.6vw,30px)}
.ar .kk-op.tv-num .kk-on > b[data-l="l"]{font-size:clamp(19px,5.6vw,25px)}
.ar .kk-op.tv-num .kk-on > b[data-l="xl"]{font-size:clamp(16px,4.6vw,21px);white-space:normal}
/* Tesisler (Y3) uzun yarışma adları: kırpılmadan bir basamak küçülür */
.ar .tv-q .kk-ops.tv-long .kk-on > b[data-l="l"]{font-size:14px}
.ar .tv-q .kk-ops.tv-long .kk-on > b[data-l="xl"]{font-size:13px;-webkit-line-clamp:3;line-clamp:3}

/* 10 · sonuç kokartı: altın yalnız 10/10 (temiz tur); öteki sonuçlarda gümüş-mavi kokart (altın yalnız birincide kuralı) */
.tv-emb.lt .ar-ros .pt circle{fill:#9AA6D6}.tv-emb.lt .ar-ros .c1{fill:#E3E8FA}.tv-emb.lt .ar-ros .c2{fill:#1B2A66}.tv-emb.lt .ar-ros .rb{fill:#6F7DB4}.tv-emb.lt .ar-ros text{fill:#E3E8FA}
.gm-res-eb{text-wrap:balance}.gm-res-eb > span{white-space:nowrap}

/* 11 · son soru gerilimi: sayaçta "Son soru" konu renginde; HUD'da 10. nokta nefes alır. Şimdiki nokta konu renginde (altın yalnız birincide) */
.tv-q .kk-no.tv-lastq,.tv-qb .kk-no.tv-lastq{display:inline-flex;align-items:baseline;gap:6px}
.kk-no.tv-lastq > em{font:800 10.5px/1 var(--f-body);font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:var(--tph,#9FB4FF);white-space:nowrap}
.tv-dots li.cur{box-shadow:inset 0 0 0 2px var(--tph,#F0C25E)}
.tv-dots li.cur:last-child{animation:tvLastDot 1.1s ease-in-out infinite}
@keyframes tvLastDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3);box-shadow:inset 0 0 0 2px var(--tph,#F0C25E),0 0 10px var(--tph,#F0C25E)}}
@media (prefers-reduced-motion:reduce){.tv-dots li.cur:last-child{animation:none}}

/* 12 · puan uçuşu (tvFly): kartın "+puan" çipiyle aynı görünüm */
.tv-fly{position:fixed;z-index:2147483600;pointer-events:none;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;font:800 14px/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap;color:#1A1405;background:linear-gradient(180deg,#FFE19A,#F0C25E);box-shadow:0 6px 18px -6px rgba(240,194,94,.8);will-change:transform,opacity}

/* 13 · künye iki satır (uzun sınıf adı + yer): ilk satır yalnız sınıf; ikinci satıra yakın. Kısa ekranda sınıf satırı yok */
.ar .kk-board .kk-tags.kk-tgl{margin-bottom:-2px}
.ar .kk-board .kk-tags.kk-tgl > .kk-tg{flex:0 1 auto;min-width:0}
@media (max-height:700px){.ar .kk-board .kk-tags.kk-tgl{display:none}}

/* 14 · Şampiyonu bul sonucu: parçalar bölünmez, satır yalnız ayraçlarda kırılır (iki bölümlü / iki turlu sonuç dar ekranda kesilmez) */
.kk-rs{white-space:nowrap}
.tv-q .kk-m2 > .kk-orr,.tv-q .kk-orr > .kk-rr{white-space:normal;min-width:0}

/* 15 · HUD sabit: soru ekranı kayarsa (kısa ekran, uzun açıklama, iki satırlı kart) nokta, saat ve puan yerinde kalır; içerik arkasından geçer */
html.game-on .ar > .ar-scr.tv-q > .kk-top{position:sticky;top:0;z-index:6}
html.game-on .ar > .ar-scr.tv-q > .kk-top::before{content:"";position:absolute;left:-2px;right:-2px;top:0;bottom:-10px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .18s ease;background:linear-gradient(180deg,rgba(21,33,86,.97),rgba(18,28,74,.95) 72%,rgba(18,28,74,0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.game-on .ar > .ar-scr.tv-q.scd > .kk-top::before{opacity:1}
@media (prefers-reduced-motion:reduce){html.game-on .ar > .ar-scr.tv-q > .kk-top::before{transition:none}}