/* 🎮 Yetişkin oyunları (oyun-ortak.js + oyun-*.js). Oyun ekranları kendi "sahne" görünümündedir (koyu, sinematik) — uygulama temasından
   bağımsız okunur kontrast; vurgu rengi oyuna göre. Önek: oy- (ortak), sg- (Sorgu Odası). */
.oy-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:14px; padding:12px 16px; font:inherit; font-weight:800; font-size:15px;
  cursor:pointer; color:#f3f4f6; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.oy-btn .ik svg, .oy-btn svg { width:18px; height:18px; }
.oy-btn.ana { background:var(--oy-vurgu, #f5b945); color:#16120a; border-color:transparent; }
.oy-btn.genis { width:100%; padding:15px; font-size:16px; }
.oy-btn.dinliyor { background:#e5484d; color:#fff; animation:oyNabiz 1.2s ease-in-out infinite; }
@keyframes oyNabiz { 50% { box-shadow:0 0 0 8px rgba(229,72,77,.18); } }
.oy-olcek { position:absolute; left:0; bottom:0; height:3px; width:100%; } .oy-olcek b { display:block; height:100%; width:0; background:rgba(255,255,255,.8); transition:width .08s; }
.oy-link { border:0; background:none; color:rgba(243,244,246,.6); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; padding:6px; }
.oy-soyle { display:flex; flex-direction:column; gap:8px; align-items:stretch; text-align:center; }
.oy-soyle > small { font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--oy-vurgu, #f5b945); }
.oy-soyle-en { font-size:22px; line-height:1.3; font-weight:800; margin:0; color:#fff; }
.oy-soyle-tr { margin:0; color:rgba(243,244,246,.65); font-size:14px; }
.oy-soyle-kelime { font-size:17px; font-weight:700; } .oy-soyle-kelime .ok { color:#46c486; } .oy-soyle-kelime .zayif { color:#f5b945; } .oy-soyle-kelime .eksik { color:#e5484d; text-decoration:line-through; }
.oy-soyle-durum { min-height:18px; margin:0; font-size:13.5px; color:rgba(243,244,246,.8); }
.oy-soyle-dug { display:flex; gap:8px; } .oy-soyle-dug .oy-btn { flex:1; } .oy-soyle-dug .oy-btn.ana { flex:2; }
/* 🎯 Riven 14 Eki («% üzerinden 70-80-90»): ortak telaffuz rozeti (style.css .tel-sonuc) oyun panelinde ve Görev telsizinde biraz daha sıkı */
.oy-soyle .tel-sonuc, .gv-alt .tel-sonuc { margin:2px 0 0; padding:8px 12px; } .oy-soyle .tel-sonuc .tel-yuzde, .gv-alt .tel-sonuc .tel-yuzde { font-size:24px; }
.oy-yildiz { display:inline-flex; gap:2px; } .oy-yildiz i { color:rgba(255,255,255,.25); display:inline-flex; } .oy-yildiz i.on { color:#f5b945; } .oy-yildiz svg { width:16px; height:16px; fill:currentColor; }

/* Oyna sekmesindeki vitrin */
.oy-vitrin { display:grid; grid-template-columns:1fr; gap:10px; }
.oy-vitrin-k { position:relative; display:flex; align-items:flex-end; gap:12px; min-height:118px; border:0; border-radius:20px; padding:14px; text-align:left; overflow:hidden; color:#fff;
  background:linear-gradient(135deg, #232834, #10131a); box-shadow:var(--kp-golge); }
/* Plan düzeninde duzen-plan.css'teki .kp-kok button { color:inherit } (özgüllük daha yüksek) beyaz yazıyı ezip koyu kartta koyu yazı bırakıyordu (kontrast ~1.0). */
.oy-vitrin .oy-vitrin-k { color:#fff; }
.oy-vitrin-k > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; }
.oy-vitrin-k::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.78)); }
.oy-vitrin-k > * { position:relative; z-index:1; }
.oy-vitrin-k > img { z-index:0; }
.oy-vitrin-ik { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); flex:none; }
.oy-vitrin-ik svg { width:21px; height:21px; }
.oy-vitrin-k .tx { flex:1; } .oy-vitrin-k b { display:block; font-size:18px; } .oy-vitrin-k small { display:block; font-size:13px; opacity:.85; }
.oy-vitrin-k em { position:absolute; top:12px; right:12px; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:#f5b945; color:#16120a; border-radius:99px; padding:3px 9px; }
@media (min-width:640px) { .oy-vitrin { grid-template-columns:1fr 1fr; } }

/* ── Sorgu Odası (noir) ── */
.sg { --oy-vurgu:#f5b945; --sg-kart:#171a21; --sg-cizgi:rgba(255,255,255,.09); color:#e9eaee; background:#0d0f14;
  /* koyu oyun adası: açık renk temasının --muted/--card/--ink'i içeri sızıyordu (koyu gri yazı koyu zeminde 2.5; kod kutusu beyaz zemin + açık yazı 1.08) */
  --ink:#e9eaee; --muted:rgba(233,234,238,.6); --card:var(--sg-kart); margin:-12px -16px -20px; padding:12px 16px 28px; min-height:calc(100% + 32px);
  display:flex; flex-direction:column; gap:14px; }
.sg h1, .sg h2, .sg h3 { color:#fff; margin:0; } .sg p { margin:0; line-height:1.45; }
.sg .sg-en { color:rgba(233,234,238,.6); font-size:13.5px; margin-top:4px; }
.sg-hero { position:relative; border-radius:22px; overflow:hidden; min-height:190px; display:flex; align-items:flex-end; background:radial-gradient(120% 90% at 70% 10%, #3a2f1a, #0d0f14 60%); }
.sg-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; }
.sg-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 25%, rgba(13,15,20,.95)); }
.sg-hero-tx { position:relative; z-index:1; padding:16px; flex:1; min-width:0; overflow-wrap:anywhere; } .sg-hero-tx small { color:var(--oy-vurgu); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:11px; }
.sg-hero-tx h1 { font-size:30px; letter-spacing:-.01em; } .sg-hero-tx p { color:rgba(233,234,238,.8); font-size:14px; margin-top:4px; }
.sg-sayac { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .sg-sayac span { display:inline-flex; align-items:center; gap:5px; font-size:13px; background:rgba(255,255,255,.08); border-radius:99px; padding:5px 10px; }
.sg-sayac svg { width:14px; height:14px; color:var(--oy-vurgu); }
/* takip notu 20 Eki (madde 14, Codex canlıda doğruladı): .sg sabit yükseklikli #screen sütununda sıkışınca yana kayan çip satırı (overflow → en küçük boy 0)
   0 px'e iniyordu; Quiz ve Sorgu Odası'nda seviye düğmeleri görünmüyordu. Oyun adası ve çocukları küçülmez, sayfa #screen içinde kayar. */
.sg { flex-shrink:0; } .sg > * { flex-shrink:0; }
.sg-cipler { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; scroll-padding-inline:16px; } .sg-cipler button { flex:none; border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#e9eaee; border-radius:99px; padding:7px 13px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.sg-cipler button.on { background:var(--oy-vurgu); color:#16120a; border-color:transparent; } .sg-cipler button.on::before { content:"✓ "; } .sg-cipler button:focus-visible { outline:2px solid var(--oy-vurgu); outline-offset:2px; }
.sg-izgara { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.sg-vaka { position:relative; aspect-ratio:3/4; border:0; border-radius:18px; overflow:hidden; text-align:left; cursor:pointer; color:#fff; padding:0;
  background:linear-gradient(160deg, #262b36, #111419); font:inherit; }
.sg-vaka > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.05); }
.sg-vaka::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, rgba(0,0,0,.88) 75%); }
.sg-vaka > span { position:absolute; z-index:1; left:10px; right:10px; }
.sg-vaka-ust { top:10px; display:flex; justify-content:space-between; align-items:center; } .sg-vaka-ust em { font-style:normal; font-size:11.5px; font-weight:800; background:rgba(0,0,0,.55); border-radius:8px; padding:3px 7px; }
.sg-vaka-alt { bottom:10px; } .sg-vaka-alt small { display:block; font-size:11px; opacity:.7; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-vaka-alt b { display:block; font-size:15.5px; line-height:1.2; margin-top:2px; } .sg-vaka-alt i { display:block; font-style:normal; font-size:11.5px; color:var(--oy-vurgu); margin-top:3px; }
.sg-vaka.cozuldu { opacity:.72; }
.sg-bos { grid-column:1/-1; text-align:center; opacity:.7; padding:30px 0; }
@media (min-width:640px) { .sg-izgara { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.sg-sahne { position:relative; border-radius:22px; overflow:hidden; min-height:210px; display:flex; align-items:flex-end; background:radial-gradient(120% 90% at 30% 0%, #2c3342, #0d0f14 65%); }
.sg-sahne > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sg-sahne::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(13,15,20,.96)); }
.sg-sahne-tx { position:relative; z-index:1; padding:16px; } .sg-sahne-tx small { color:var(--oy-vurgu); font-size:12px; font-weight:700; } .sg-sahne-tx h1 { font-size:26px; } .sg-sahne-tx p { color:rgba(233,234,238,.7); font-style:italic; }
.sg-kart { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.sg-kart h2 { display:flex; align-items:center; gap:8px; font-size:15px; letter-spacing:.02em; } .sg-kart h2 svg { width:18px; height:18px; color:var(--oy-vurgu); }
.sg-suphe { flex-direction:row; align-items:center; gap:12px; } .sg-suphe small { color:var(--oy-vurgu); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .sg-suphe b { display:block; font-size:18px; color:#fff; }
.sg-suphe p { color:rgba(233,234,238,.7); font-size:14px; }
.sg-portre { position:relative; width:64px; height:64px; border-radius:16px; overflow:hidden; background:#262b36; display:grid; place-items:center; flex:none; color:rgba(255,255,255,.35); }
.sg-portre > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; } .sg-portre svg { width:28px; height:28px; }
.sg-portre.kucuk { width:42px; height:42px; border-radius:12px; } .sg-portre.kucuk svg { width:20px; height:20px; }
.sg-kanit { display:flex; gap:10px; padding:8px 0; border-top:1px solid var(--sg-cizgi); } .sg-kanit:first-of-type { border-top:0; }
.sg-kanit > span { width:26px; height:26px; flex:none; border-radius:8px; background:rgba(245,185,69,.15); color:var(--oy-vurgu); display:grid; place-items:center; font-weight:800; font-size:13px; }
.sg-not { font-size:13px; color:rgba(233,234,238,.6); }
.sg-kelimeler { display:flex; flex-wrap:wrap; gap:6px; } .sg-kelimeler button { border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.04); color:#e9eaee; border-radius:12px; padding:6px 10px; font:inherit; text-align:left; cursor:pointer; }
.sg-kelimeler b { display:block; font-size:14px; } .sg-kelimeler small { font-size:12px; opacity:.65; }
.sg-oda { min-height:calc(100dvh - 120px); }
.sg-ust { display:flex; align-items:center; gap:10px; } .sg-ust > div { flex:1; min-width:0; } .sg-ust b { display:block; color:#fff; } .sg-ust small { font-size:12px; opacity:.6; }
.sg-defter-dug { display:flex; align-items:center; gap:5px; border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:12px; padding:8px 11px; font:inherit; font-weight:800; cursor:pointer; }
.sg-defter-dug svg { width:18px; height:18px; color:var(--oy-vurgu); }
.sg-adim { display:flex; gap:4px; } .sg-adim i { flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.1); } .sg-adim i.gecti { background:var(--oy-vurgu); } .sg-adim i.simdi { background:rgba(245,185,69,.5); }
.sg-log { flex:1; display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:120px; padding:4px 0; }
.sg-balon { max-width:86%; border-radius:16px; padding:10px 12px; font-size:15.5px; line-height:1.4; }
.sg-balon.ben { align-self:flex-end; background:var(--oy-vurgu); color:#16120a; border-bottom-right-radius:4px; font-weight:700; }
.sg-balon.o { align-self:flex-start; background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-bottom-left-radius:4px; position:relative; padding-right:40px; }
.sg-balon details { margin-top:4px; font-size:13px; color:rgba(233,234,238,.65); } .sg-balon summary { cursor:pointer; font-size:12px; }
.sg-tekrar { position:absolute; top:8px; right:8px; border:0; background:none; color:rgba(255,255,255,.5); cursor:pointer; padding:2px; } .sg-tekrar svg { width:18px; height:18px; }
.sg-alt { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:20px; padding:12px; display:flex; flex-direction:column; gap:8px; position:sticky; bottom:8px; }
.sg-alt-bas { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(233,234,238,.6); } .sg-alt-bas svg { width:15px; height:15px; }
.sg-soru { border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.04); color:#fff; border-radius:14px; padding:11px 12px; text-align:left; font:inherit; cursor:pointer; }
.sg-soru b { display:block; font-size:16px; } .sg-soru small { display:block; font-size:13px; opacity:.6; margin-top:2px; }
.sg-soru:active { background:rgba(245,185,69,.15); border-color:var(--oy-vurgu); }
.sg-not-dustu { display:flex; gap:10px; align-items:flex-start; background:rgba(245,185,69,.1); border-radius:14px; padding:10px 12px; animation:sgDus .45s ease-out; }
.sg-not-dustu svg { width:20px; height:20px; color:var(--oy-vurgu); flex:none; margin-top:2px; } .sg-not-dustu small { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--oy-vurgu); }
@keyframes sgDus { from { transform:translateY(-8px) rotate(-1deg); opacity:0; } }
.sg-sucla p { color:rgba(233,234,238,.85); }
.sg-secim, .sg-secili { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.04); color:#e9eaee; border-radius:14px; padding:11px; text-align:left; font:inherit; cursor:pointer; }
.sg-secim > span, .sg-secili > span { min-width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; }
.sg-secim small { display:block; font-size:12.5px; opacity:.55; margin-top:2px; }
.sg-secili { border-color:var(--oy-vurgu); background:rgba(245,185,69,.1); cursor:default; } .sg-secili > span { background:var(--oy-vurgu); color:#16120a; }
.sg-uyari { display:flex; align-items:center; gap:6px; color:#ffb4a8 !important; font-size:13.5px; } .sg-uyari svg { width:16px; height:16px; }
.sg-son-bas { text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 0 6px; }
.sg-son-bas > .kp-ik { width:64px; height:64px; border-radius:20px; } .sg-son-bas > .kp-ik svg { width:32px; height:32px; }
.sg-son-bas h1 { font-size:28px; } .sg-son-bas .oy-yildiz svg { width:28px; height:28px; } .sg-son-bas p { color:rgba(233,234,238,.75); }
.sg-itiraf small { color:var(--oy-vurgu); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .sg-itiraf p[lang] { font-size:18px; font-style:italic; color:#fff; }
.sg-itiraf .sg-tr { color:rgba(233,234,238,.65); font-size:14px; } .sg-itiraf .oy-btn { align-self:flex-start; }
.sg-son-dug { display:flex; gap:8px; } .sg-son-dug .oy-btn { flex:1; }
.sg-perde { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; animation:sgPerde .2s; }
@keyframes sgPerde { from { opacity:0; } }
.sg-defter { width:100%; max-width:560px; max-height:80dvh; overflow-y:auto; background:#f4ecd8; color:#2a2418; border-radius:22px 22px 0 0; padding:18px 18px 28px; position:relative;
  background-image:repeating-linear-gradient(transparent, transparent 27px, rgba(80,60,20,.12) 28px); font-size:15px; line-height:28px; }
.sg-defter h3 { display:flex; align-items:center; gap:8px; color:#2a2418; font-size:16px; margin:6px 0; } .sg-defter h3 svg { width:18px; height:18px; }
.sg-defter p { margin:0; } .sg-defter .sg-not { color:#6b5f48; }
.sg-kapat { position:absolute; top:12px; right:12px; border:0; background:rgba(0,0,0,.06); border-radius:10px; padding:6px; cursor:pointer; color:#2a2418; transform:rotate(-90deg); } .sg-kapat svg { width:18px; height:18px; }

/* ── Yurt Dışında Bir Gün (gece mavisi + gökyüzü vurgu; kabuk sg-) ── */
.sg.yd { --oy-vurgu:#4cc9f0; background:#0b1526; --sg-kart:#12213a; }
.yd .sg-balon.ben { color:#06202b; }
.yd .sg-balon.ben.kaba { background:#ff8a7a; } .yd .sg-balon.ben.yanlis { background:#ffd166; }
.yd-liste { display:flex; flex-direction:column; gap:10px; }
.yd-gun { display:flex; align-items:center; gap:12px; border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#e9eaee; border-radius:18px; padding:10px; text-align:left; font:inherit; cursor:pointer; }
.yd-gun-img { width:72px; height:72px; border-radius:14px; overflow:hidden; flex:none; background:linear-gradient(135deg, #1d3a63, #0b1526); }
.yd-gun-img img { width:100%; height:100%; object-fit:cover; }
.yd-gun .tx { flex:1; min-width:0; } .yd-gun small { font-size:12px; color:var(--oy-vurgu); font-weight:700; } .yd-gun b { display:block; font-size:16px; color:#fff; } .yd-gun em { font-style:normal; font-size:13px; opacity:.6; }
.yd-gun.bitti { opacity:.75; }
.yd-bilet { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(76,201,240,.15); color:var(--oy-vurgu); } .yd-bilet svg { width:18px; height:18px; }
.yd-rota { gap:0; } .yd-durak { display:flex; gap:12px; align-items:center; padding:8px 0; position:relative; }
.yd-durak > span { width:28px; height:28px; border-radius:50%; border:2px solid var(--oy-vurgu); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; background:#0b1526; z-index:1; }
.yd-durak:not(:last-child)::after { content:""; position:absolute; left:13px; top:36px; bottom:-8px; border-left:2px dashed rgba(76,201,240,.35); }
.yd-durak b { display:block; color:#fff; font-size:15px; } .yd-durak small { font-size:12.5px; opacity:.55; }
.yd-ust { position:relative; border-radius:20px; overflow:hidden; min-height:150px; display:flex; align-items:flex-end; background:linear-gradient(135deg, #1d3a63, #0b1526); }
.yd-ust > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.yd-ust::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(11,21,38,.95)); }
.yd-ust-tx { position:relative; z-index:1; padding:12px 14px 16px; } .yd-ust-tx small { color:var(--oy-vurgu); font-size:12px; font-weight:700; } .yd-ust-tx b { display:block; font-size:20px; color:#fff; }
.yd-sure { position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(255,255,255,.12); z-index:2; }
.yd-sure i { display:block; height:100%; background:var(--oy-vurgu); transition:width 1s linear; } .yd-sure i.az { background:#ff8a7a; }
.yd-sure.bitti::after { content:"Süre doldu — acele yok, devam"; position:absolute; right:10px; bottom:9px; font-size:11px; font-weight:800; color:#ffb4a8; }
.yd-kim { display:block; font-size:11px; color:var(--oy-vurgu); font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.yd-sonuc { display:flex; gap:10px; align-items:flex-start; border-radius:14px; padding:10px 12px; animation:sgDus .4s ease-out; }
.yd-sonuc svg { width:20px; height:20px; flex:none; margin-top:2px; } .yd-sonuc b { display:block; color:#fff; } .yd-sonuc small { font-size:13.5px; opacity:.85; }
.yd-sonuc.iyi { background:rgba(70,196,134,.15); } .yd-sonuc.iyi svg { color:#46c486; }
.yd-sonuc.kaba { background:rgba(255,138,122,.14); } .yd-sonuc.kaba svg { color:#ff8a7a; }
.yd-sonuc.yanlis { background:rgba(255,209,102,.13); } .yd-sonuc.yanlis svg { color:#ffd166; }
.yd-dsoru { font-size:17px; font-weight:800; color:#fff; } .yd-ddug { display:flex; align-items:center; gap:8px; }
.yd-dyazi { font-style:italic; opacity:.8; }
.sg-soru.dogru { border-color:#46c486; background:rgba(70,196,134,.15); } .sg-soru.yanlis { border-color:#ff8a7a; background:rgba(255,138,122,.14); }
.yd-ogren { display:flex; flex-wrap:wrap; gap:6px; } .yd-ogren > small { width:100%; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--oy-vurgu); }
.yd-ogren > small svg { width:15px; height:15px; }
.yd-ogren button { border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.05); color:#e9eaee; border-radius:12px; padding:7px 10px; text-align:left; font:inherit; cursor:pointer; }
.yd-ogren b { display:block; font-size:14.5px; } .yd-ogren span { font-size:12px; opacity:.65; }

/* ── Hızlı Tanışma (erik moru + mercan vurgu; kabuk sg-, liste yd-) ── */
.sg.tn { --oy-vurgu:#ff8fab; background:#1a1020; --sg-kart:#261a2e; }
.tn .sg-balon.ben { color:#2a0d18; } .tn .sg-balon.ben.u-1 { background:#ffd166; }
.tn .yd-gun-img { background:linear-gradient(135deg, #4a2240, #1a1020); } .tn .yd-bilet { background:rgba(255,143,171,.15); }
.tn-yuzler { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; text-align:center; }
.tn-yuzler .sg-portre { width:100%; height:auto; aspect-ratio:1; border-radius:50%; } .tn-yuzler b { display:block; font-size:13px; color:#fff; margin-top:4px; } .tn-yuzler small { display:block; font-size:11px; opacity:.6; line-height:1.2; }
.tn-kisi { display:flex; gap:14px; align-items:center; }
.sg-portre.buyuk { width:84px; height:84px; border-radius:50%; } .sg-portre.buyuk svg { width:34px; height:34px; }
.tn-kisi small { color:var(--oy-vurgu); font-size:12px; font-weight:800; } .tn-kisi b { display:block; font-size:21px; color:#fff; } .tn-kisi p { font-size:14px; opacity:.75; } .tn-kisi em { font-size:13px; opacity:.6; }
.tn-bag { display:flex; align-items:center; gap:8px; } .tn-bag > span svg { width:18px; height:18px; color:var(--oy-vurgu); }
.tn-bag > div { flex:1; height:8px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden; } .tn-bag i { display:block; height:100%; width:0; background:linear-gradient(90deg, #ff8fab, #ffd166); transition:width .5s; }
.tn-bekleyen { display:flex; gap:10px; overflow-x:auto; } .tn-bek { border:0; background:none; color:#fff; display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit; cursor:pointer; }
.tn-bek .sg-portre { width:64px; height:64px; border-radius:50%; outline:3px solid var(--oy-vurgu); outline-offset:2px; } .tn-bek small { font-size:12px; color:var(--oy-vurgu); font-weight:800; }
.tn-sec { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.tn-sec button { border:2px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:18px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit; cursor:pointer; }
.tn-sec button.on { border-color:var(--oy-vurgu); background:rgba(255,143,171,.12); } .tn-sec small { font-size:12px; opacity:.6; }
.tn-sonuc { display:flex; gap:10px; align-items:center; padding:6px 0; opacity:.7; } .tn-sonuc.ok { opacity:1; } .tn-sonuc b { display:block; color:#fff; } .tn-sonuc small { font-size:13px; }
.tn-sonuc .sg-portre { width:48px; height:48px; border-radius:50%; }

/* ── Stand-up Sahnesi (kadife kırmızı + sahne ışığı; kabuk sg-) ── */
.sg.su { --oy-vurgu:#ff5d5d; background:#140b0d; --sg-kart:#221316; }
.su .yd-bilet { background:rgba(255,93,93,.15); color:var(--oy-vurgu); }
.su-merdiven { display:flex; flex-direction:column; gap:10px; }
.su-mekan { display:flex; align-items:center; gap:12px; border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#e9eaee; border-radius:18px; padding:10px; text-align:left; font:inherit; cursor:pointer; }
.su-mekan-img { width:72px; height:72px; border-radius:14px; overflow:hidden; flex:none; background:radial-gradient(circle at 50% 30%, #6b2a2a, #140b0d); } .su-mekan-img img { width:100%; height:100%; object-fit:cover; }
.su-mekan .tx { flex:1; min-width:0; } .su-mekan small { font-size:12px; color:var(--oy-vurgu); font-weight:700; } .su-mekan b { display:block; font-size:16px; color:#fff; } .su-mekan em { font-style:normal; font-size:13px; opacity:.6; }
.su-mekan.kilit { opacity:.45; cursor:default; } .su-kilit { display:inline-flex; align-items:center; gap:3px; font-weight:800; font-size:13px; } .su-kilit svg { width:14px; height:14px; }
.su-sahne { position:relative; border-radius:22px; overflow:hidden; min-height:220px; background:radial-gradient(60% 80% at 50% 0%, #5a2020, #140b0d 70%); display:flex; align-items:flex-end; }
.su-sahne > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; }
.su-isik { position:absolute; left:50%; top:-10%; width:70%; height:120%; transform:translateX(-50%); background:radial-gradient(50% 60% at 50% 20%, rgba(255,236,190,.35), transparent 70%); pointer-events:none; }
.su-sahne-tx { position:relative; z-index:2; padding:14px 16px 56px; } .su-sahne-tx small { color:var(--oy-vurgu); font-size:12px; font-weight:700; } .su-sahne-tx b { display:block; font-size:20px; color:#fff; }
.su-seyirci { position:absolute; left:0; right:0; bottom:0; height:52px; display:flex; justify-content:space-around; align-items:flex-end; z-index:2; padding:0 6px; }
.su-seyirci i { width:22px; height:calc(26px + var(--g) * .14px); border-radius:11px 11px 0 0; background:#050304; box-shadow:0 -1px 0 rgba(255,255,255,.08); transition:transform .2s; }
.su-seyirci.kahkaha i { animation:suGul .35s ease-in-out infinite alternate; animation-delay:calc(var(--g) * 6ms); }
.su-seyirci.gulumse i { animation:suGul .7s ease-in-out 3 alternate; animation-delay:calc(var(--g) * 8ms); }
.su-seyirci.laf i:nth-child(5) { transform:translateY(-10px); background:#2a1417; }
.su-seyirci.sessiz i { opacity:.7; }
@keyframes suGul { to { transform:translateY(-8px) rotate(-3deg); } }
.su-kahkaha { display:flex; align-items:center; gap:8px; } .su-kahkaha > span svg { width:18px; height:18px; color:#ffd166; }
.su-kahkaha > div { flex:1; height:8px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden; } .su-kahkaha i { display:block; height:100%; width:0; background:linear-gradient(90deg, #ff5d5d, #ffd166); transition:width .6s; }
.su-espri { font-size:21px; line-height:1.35; font-weight:800; color:#fff; } .su-espri mark { background:none; color:#ffd166; text-decoration:underline; text-underline-offset:3px; }
.su-tr { font-size:13.5px; opacity:.6; }
.su-alt #suPanel .oy-soyle > small { display:none; }
.su-tepki { text-align:center; padding:10px; border-radius:14px; font-size:18px; animation:sgDus .4s ease-out; }
.su-tepki.harika { background:rgba(255,209,102,.16); color:#ffd166; } .su-tepki.iyi { background:rgba(70,196,134,.14); color:#7ee2b0; } .su-tepki.tekrar, .su-tepki.yazi { background:rgba(255,255,255,.06); color:rgba(233,234,238,.7); }
.su-neden { background:rgba(255,255,255,.04); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.su-neden > small { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--oy-vurgu); } .su-neden > small svg { width:15px; height:15px; }
.su-laf { max-width:100%; }
.su-tekrar { display:block; width:100%; text-align:left; border:0; border-top:1px solid var(--sg-cizgi); background:none; color:#e9eaee; padding:9px 0; font:inherit; cursor:pointer; }
.su-tekrar:first-of-type { border-top:0; } .su-tekrar b { display:block; } .su-tekrar small { font-size:12.5px; opacity:.6; }

/* ── İki Doğru Bir Yalan (koyu mor + limon vurgu; kabuk sg-) ── */
.sg.bl { --oy-vurgu:#c4b5fd; background:#120f1f; --sg-kart:#1d1830; }
.bl .sg-balon.ben { color:#1b1236; }
.bl-bas { font-size:24px; }
.bl-modlar { display:flex; flex-direction:column; gap:10px; }
.bl-mod { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:18px; padding:14px; text-align:left; font:inherit; cursor:pointer; }
.bl-mod .kp-ik { grid-row:1/3; width:44px; height:44px; border-radius:14px; } .bl-mod b { font-size:16.5px; } .bl-mod small { font-size:13px; opacity:.6; }
.bl-set small { font-size:12.5px; opacity:.7; } .bl-set p { display:flex; gap:6px; align-items:flex-start; font-size:14.5px; } .bl-set p svg { width:15px; height:15px; flex:none; margin-top:3px; color:#46c486; }
.bl-set p.yalan svg { color:#ff8a7a; } .bl-setler { display:flex; flex-direction:column; gap:8px; }
.bl-izgara { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.bl-kisi { border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:16px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; font:inherit; cursor:pointer; }
.bl-kisi b { font-size:14px; } .bl-kisi small { font-size:11.5px; opacity:.6; line-height:1.2; } .bl-kisi em { font-style:normal; font-size:11px; color:var(--oy-vurgu); font-weight:800; }
.bl-kisi .sg-portre.buyuk { width:64px; height:64px; } .bl-kisi.cozuldu { opacity:.65; }
.bl-ifadeler { display:flex; flex-direction:column; gap:8px; }
.bl-ifade { display:flex; gap:10px; align-items:center; border:2px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:16px; padding:12px; text-align:left; font:inherit; cursor:pointer; }
.bl-ifade > span { width:30px; height:30px; border-radius:10px; background:rgba(196,181,253,.15); color:var(--oy-vurgu); display:grid; place-items:center; font-weight:800; flex:none; }
.bl-ifade > div { flex:1; } .bl-ifade b { display:block; font-size:16px; } .bl-ifade small { font-size:13px; opacity:.6; } .bl-ifade > .ik svg, .bl-ifade > svg { width:18px; height:18px; opacity:.5; }
.bl-ifadeler.sec .bl-ifade { border-color:rgba(196,181,253,.45); animation:blSec 1.2s ease-in-out infinite alternate; }
@keyframes blSec { to { border-color:rgba(196,181,253,.9); } }
.bl-ifade.yalan { border-color:#ff8a7a !important; background:rgba(255,138,122,.12); animation:none !important; } .bl-ifade.dogru { border-color:#46c486 !important; animation:none !important; opacity:.8; }
.bl-ifade.secilen { box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.bl-ipucu { display:flex; align-items:center; gap:8px; font-size:15px; } .bl-ipucu svg { width:18px; height:18px; color:var(--oy-vurgu); }
.bl-slot.yalan { border-color:#ff8a7a; } .bl-slot-bas { display:flex; justify-content:space-between; align-items:center; } .bl-slot-bas b { color:#fff; }
.bl-yalan-dug { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--sg-cizgi); background:none; color:#e9eaee; border-radius:10px; padding:5px 9px; font:inherit; font-size:12.5px; cursor:pointer; }
.bl-yalan-dug svg { width:14px; height:14px; } .bl-yalan-dug.on { background:#ff8a7a; color:#2a0d0d; border-color:transparent; font-weight:800; }
.bl-onizle { font-size:18px; font-weight:800; color:#fff; }
.bl-cipler { display:flex; flex-wrap:wrap; gap:6px; } .bl-cipler button { border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.04); color:#e9eaee; border-radius:99px; padding:6px 11px; font:inherit; font-size:13.5px; cursor:pointer; }
.bl-cipler button.on { background:var(--oy-vurgu); color:#1b1236; border-color:transparent; font-weight:800; }
.bl-kalip { width:100%; padding:11px; border-radius:12px; background:#0f0c1a; color:#fff; border:1px solid var(--sg-cizgi); font:inherit; }
.oy-btn:disabled { opacity:.4; cursor:default; }

/* ── Koçi Görev (gece operasyonu: kömür siyahı, telsiz yeşili, alarm kırmızısı; kabuk sg-) ── */
.sg.gv { --oy-vurgu:#39ff88; background:#07090b; --sg-kart:#10151a; }
.gv .sg-hero { background:radial-gradient(120% 90% at 70% 10%, #0f3a26, #07090b 60%); }
.gv .oy-btn.ana { color:#04140b; }
.gv .sg-balon.ben { color:#04140b; }
.gv-liste { display:flex; flex-direction:column; gap:12px; }
.gv-gorev { position:relative; min-height:150px; border:0; border-radius:20px; overflow:hidden; text-align:left; color:#fff; font:inherit; cursor:pointer; padding:0; display:flex; align-items:flex-end;
  background:linear-gradient(135deg, #1b2530, #07090b); }
.gv-gorev > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gv-gorev::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.85)); }
.gv-gorev > * { position:relative; z-index:1; } .gv-gorev > img { z-index:0; }
.gv-no { position:absolute !important; top:10px; left:12px; font-weight:900; font-size:28px; color:rgba(255,255,255,.22); letter-spacing:-.02em; }
.gv-gorev-tx { padding:14px; flex:1; } .gv-gorev-tx em { font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--oy-vurgu); }
.gv-gorev-tx b { display:block; font-size:19px; } .gv-gorev-tx small { font-size:13px; opacity:.65; }
.gv-gorev .oy-yildiz { position:absolute; top:12px; right:12px; }
.gv-roller > div { display:flex; gap:10px; align-items:flex-start; } .gv-roller b { color:#fff; display:block; } .gv-roller small { font-size:13px; opacity:.65; }
.gv-rol-harf { width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center; font-weight:900; background:rgba(57,255,136,.14); color:var(--oy-vurgu); }
.gv-ust { display:flex; align-items:center; gap:10px; } .gv-ust > div { flex:1; min-width:0; } .gv-ust small { font-size:11.5px; opacity:.6; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gv-ust b { color:#fff; font-size:16px; }
.gv-can { display:flex; gap:2px; } .gv-can i { color:rgba(255,255,255,.18); display:flex; } .gv-can i.on { color:#ff4d5e; } .gv-can svg { width:18px; height:18px; } .gv-can i.on svg { fill:currentColor; }
.gv-saat { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-weight:800; font-size:20px; color:var(--oy-vurgu); min-width:64px; text-align:right; }
.gv-saat.kritik { color:#ff4d5e; animation:gvKritik .5s steps(2) infinite; }
@keyframes gvKritik { 50% { opacity:.35; } }
.gv-roller-mini { display:flex; gap:6px; } .gv-roller-mini span { font-size:12px; border-radius:99px; padding:3px 9px; background:rgba(255,255,255,.06); opacity:.7; }
.gv-roller-mini span.ben { background:rgba(57,255,136,.14); color:var(--oy-vurgu); opacity:1; font-weight:800; }
.gv-adim { display:flex; flex-direction:column; gap:10px; flex:1; }
.gv-acil { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; background:#ff4d5e; color:#fff; font-weight:900; font-size:12px; letter-spacing:.1em; padding:4px 10px; border-radius:8px; animation:gvKritik .6s steps(2) infinite; }
.gv-acil svg { width:14px; height:14px; }
.gv-ekran { position:relative; border:1px solid rgba(57,255,136,.3); background:repeating-linear-gradient(0deg, rgba(57,255,136,.035) 0 2px, transparent 2px 4px), #0b120e; border-radius:16px; padding:14px; }
.gv-ekran > small { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--oy-vurgu); margin-bottom:6px; }
.gv-ekran > small svg { width:14px; height:14px; } .gv-ekran p { font-size:16.5px; color:#e8fff1; } .gv-ekran-en { font-family:ui-monospace, Menlo, monospace; font-size:14px !important; color:var(--oy-vurgu) !important; margin-top:6px !important; }
.gv-npc { max-width:100%; }
.gv-bekler { display:flex; gap:12px; align-items:center; padding:6px 2px; } .gv-bekler > .ik svg, .gv-bekler > span svg { width:26px; height:26px; color:var(--oy-vurgu); animation:gvKritik 1.2s steps(2) infinite; }
.gv-bekler b { display:block; color:#fff; } .gv-bekler small { font-size:13px; opacity:.7; }
.gv-telsiz-gelen { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .gv-telsiz-gelen > small { width:100%; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--oy-vurgu); }
.gv-telsiz-gelen > small svg { width:15px; height:15px; } .gv-duyulan { width:100%; font-size:17px; font-weight:800; color:#fff; }
.gv-ptt-kutu { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .gv-ptt-kutu > small { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--oy-vurgu); }
.gv-ptt-kutu > small svg { width:14px; height:14px; }
.gv-ptt { width:100%; border:2px solid var(--oy-vurgu); background:rgba(57,255,136,.08); color:#fff; border-radius:22px; padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit; cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; transition:transform .1s, background .1s; }
.gv-ptt span svg { width:34px; height:34px; color:var(--oy-vurgu); } .gv-ptt b { font-size:15px; letter-spacing:.08em; } .gv-ptt small { font-size:11px; opacity:.6; letter-spacing:.2em; }
.gv-ptt.acik { background:#ff4d5e; border-color:#ff4d5e; transform:scale(.97); } .gv-ptt.acik span svg { color:#fff; }
.gv-ptt-alt { display:flex; align-items:center; gap:10px; }
.gv-sonuc { display:flex; gap:12px; align-items:flex-start; border-radius:16px; padding:12px; animation:sgDus .35s ease-out; } .gv-sonuc svg { width:24px; height:24px; flex:none; }
.gv-sonuc.ok { background:rgba(57,255,136,.12); } .gv-sonuc.ok svg { color:var(--oy-vurgu); } .gv-sonuc.hata { background:rgba(255,77,94,.13); } .gv-sonuc.hata svg { color:#ff4d5e; }
.gv-sonuc b { display:block; color:#fff; font-size:16px; } .gv-sonuc small { font-size:13.5px; opacity:.8; }
.gv-bolum-giris { position:relative; border-radius:20px; overflow:hidden; min-height:230px; display:flex; align-items:flex-end; background:linear-gradient(135deg, #14202a, #07090b); }
.gv-bolum-giris > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gv-bolum-giris::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 20%, rgba(7,9,11,.96)); }
.gv-bolum-giris > div { position:relative; z-index:1; padding:16px; } .gv-bolum-giris small { color:var(--oy-vurgu); font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.gv-bolum-giris h1 { font-size:26px; } .gv-anlati { font-style:italic; color:#fff; margin:6px 0 4px !important; } .gv-bolum-giris p { font-size:14px; opacity:.85; }
.gv-rolum small { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--oy-vurgu); } .gv-rolum b { color:#fff; font-size:17px; }
.gv-bekle { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 0; }
.gv-bekle small { letter-spacing:.14em; text-transform:uppercase; font-size:12px; opacity:.6; }
.gv-kod { font-family:ui-monospace, Menlo, monospace; font-size:48px; font-weight:900; letter-spacing:.2em; color:var(--oy-vurgu); text-shadow:0 0 18px rgba(57,255,136,.4); }
.gv-nabiz { opacity:.7; animation:gvKritik 1.4s steps(2) infinite; }
.gv-kodkutu { width:100%; max-width:420px; background:#10151a; color:#e9eaee; border-radius:22px 22px 0 0; padding:20px; display:flex; flex-direction:column; gap:10px; }
.gv-kodkutu h3 { color:#fff; margin:0; } .gv-kodkutu input { font-family:ui-monospace, Menlo, monospace; font-size:32px; letter-spacing:.3em; text-align:center; text-transform:uppercase; padding:12px; border-radius:14px;
  border:2px solid #39ff88; background:#07090b; color:#39ff88; }
.gv-rapor { display:flex; flex-direction:column; gap:14px; } .gv-rapor > small { color:var(--oy-vurgu); font-weight:900; letter-spacing:.14em; font-size:12px; } .gv-rapor h1 { font-size:26px; }
.gv-sayilar { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .gv-sayilar > div { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:14px; padding:12px; }
.gv-sayilar b { display:block; font-size:28px; color:#fff; font-family:ui-monospace, Menlo, monospace; } .gv-sayilar small { font-size:12.5px; opacity:.7; }
.gv-beceri { display:flex; flex-direction:column; gap:8px; } .gv-beceri > div { display:grid; grid-template-columns:78px 1fr 30px; align-items:center; gap:8px; font-size:13.5px; }
.gv-beceri i { height:8px; border-radius:8px; background:rgba(255,255,255,.08); overflow:hidden; } .gv-beceri i b { display:block; height:100%; background:linear-gradient(90deg, #1fd174, #39ff88); border-radius:8px; }
.gv-beceri em { font-style:normal; font-weight:800; text-align:right; color:var(--oy-vurgu); }
.gv-sonraki { flex-direction:column; gap:2px; padding:16px !important; } .gv-sonraki small { font-size:11px; letter-spacing:.2em; opacity:.8; } .gv-sonraki b { font-size:18px; }

/* ── Koçi Futbol (stadyum gecesi; kabuk sg-) ── */
.sg.fb { --oy-vurgu:#ffd166; background:#0c1a12; --sg-kart:#13261b; }
.fb .oy-btn.ana { color:#1d1400; }
.fb-hero { display:flex; gap:14px; align-items:center; } .fb-hero canvas { width:110px; height:auto; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.4); flex:none; }
.fb-hero small { color:var(--oy-vurgu); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .fb-hero h1 { font-size:28px; } .fb-hero p { font-size:14px; opacity:.8; }
.fb-takimlar { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.fb-takimlar button { display:flex; align-items:center; gap:8px; border:2px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:14px; padding:10px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; text-align:left; }
.fb-takimlar button.on { border-color:var(--oy-vurgu); } .fb-takimlar i { width:22px; height:22px; border-radius:50%; flex:none; box-shadow:0 0 0 3px #e8e8e8; }
.fb-mac { gap:8px; }
.fb-skor { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.fb-skor strong { font-size:30px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.fb-oyuncu { display:flex; align-items:center; gap:6px; min-width:0; } .fb-oyuncu.b { justify-content:flex-end; } .fb-oyuncu b { color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-oyuncu i { width:18px; height:18px; border-radius:50%; flex:none; box-shadow:0 0 0 2px #e8e8e8; }
.fb-durum { text-align:center; min-height:22px; font-size:14px; color:rgba(255,255,255,.85); } .fb-gol { color:var(--oy-vurgu); font-size:18px; letter-spacing:.1em; animation:gvKritik .4s steps(2) 4; }
.fb-saha { position:relative; } .fb-saha canvas { width:100%; height:auto; display:block; border-radius:18px; touch-action:none; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.fb-kart { position:absolute; left:6%; right:6%; top:26%; background:rgba(10,20,14,.96); border:2px solid var(--oy-vurgu); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:10px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.5); animation:sgDus .3s ease-out; }
.fb-kart-ust { display:flex; justify-content:space-between; align-items:center; } .fb-kart-ust small { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--oy-vurgu); text-align:left; }
.fb-kart-ust small svg { width:14px; height:14px; } .fb-kart-ust b { font-family:ui-monospace, Menlo, monospace; font-size:22px; color:#ff5d5d; }
.fb-kart-soru { font-size:19px; font-weight:800; color:#fff; line-height:1.35; } .fb-kart-soru u { text-decoration:none; border-bottom:3px solid var(--oy-vurgu); }
.fb-kart-sec { display:flex; flex-direction:column; gap:7px; } .fb-kart-sec button { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; border-radius:12px; padding:11px; font:inherit; font-size:15.5px; font-weight:700; cursor:pointer; }
.fb-kart-sec button.dogru { background:#1f9d55; border-color:#1f9d55; } .fb-kart-sec button.yanlis { background:#c0392b; border-color:#c0392b; }
.fb-kart-sonuc { font-weight:800; color:#ffb4a8; } .fb-kart-sonuc.ok { color:#7ee2b0; }
.fb-kart .sg-son-bas { padding:6px 0; } .fb-kart .gv-kod { font-size:40px; }
.fb-balon { position:absolute; left:50%; bottom:10%; transform:translateX(-50%); max-width:80%; background:#fff; color:#111; border-radius:16px; padding:8px 14px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.35); animation:sgDus .25s ease-out; text-align:center; }
.fb-balon.o { top:8%; bottom:auto; } .fb-balon small { display:block; font-size:11px; color:#666; font-weight:800; }
.fb-alt { display:flex; align-items:center; justify-content:space-between; } .fb-hedef { font-size:12.5px; opacity:.6; }
.fb-sohbet { display:flex; flex-wrap:wrap; gap:6px; } .fb-sohbet button { border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:99px; padding:8px 12px; font:inherit; font-size:14px; cursor:pointer; }

/* ── Koçi Blitz (koridor savaşı; kabuk sg-) ── */
.sg.bz { --oy-vurgu:#ffb020; background:#101812; --sg-kart:#18241b; }
.bz .oy-btn.ana { color:#1f1200; }
.bz-hero { min-height:170px; } .bz-hero canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.bz-birimler { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; text-align:center; } .bz-birimler canvas { width:100%; height:auto; }
.bz-birimler b { display:block; font-size:12px; color:#fff; } .bz-birimler small { font-size:10.5px; opacity:.75; line-height:1.25; display:block; }
.bz-w, .bz-d { font-style:normal; font-weight:900; } .bz-w { color:#6ea8ff; } .bz-d { color:#ffb020; }
.bz-mac { gap:6px; }
.bz-can { display:flex; align-items:center; gap:8px; } .bz-can span { font-size:12.5px; font-weight:800; width:40px; color:#fff; }
.bz-can i { flex:1; height:12px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden; } .bz-can i b { display:block; height:100%; transition:width .3s; }
.bz-can.o i b { background:linear-gradient(90deg, #ff5d5d, #ff9b6b); } .bz-can.b i b { background:linear-gradient(90deg, #3a86ff, #6ec3ff); }
.bz-can em { font-style:normal; font-weight:900; font-size:18px; width:40px; text-align:right; color:#fff; font-variant-numeric:tabular-nums; }
.bz-orta { display:grid; grid-template-columns:62px 1fr; gap:6px; align-items:stretch; }
.bz-kuyruk { display:flex; flex-direction:column; gap:6px; background:rgba(0,0,0,.35); border-radius:14px; padding:6px 4px; }
.bz-kuyruk canvas { width:100%; height:auto; display:block; }
.bz-rakip { background:rgba(255,93,93,.15); border-radius:10px; padding:2px; text-align:center; } .bz-rakip small { font-size:10px; font-weight:800; color:#ff9b9b; }
.bz-sira { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; background:#2b2f36; border-radius:10px; padding:4px 2px; opacity:.85; }
.bz-simdi { position:relative; background:rgba(58,134,255,.18); border:2px solid rgba(58,134,255,.4); border-radius:12px; padding:2px; }
.bz-simdi.hazir { border-color:#ffd166; box-shadow:0 0 14px rgba(255,209,102,.55); }
.bz-dolum { display:block; height:6px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; margin:2px 2px 0; } .bz-dolum b { display:block; height:100%; background:#ffd166; }
.bz-x2 { position:absolute; top:-6px; right:-6px; font-style:normal; font-weight:900; font-size:12px; background:#46c486; color:#062; border-radius:99px; padding:1px 6px; } .bz-x2:empty { display:none; }
.bz-kuyruk.titre { animation:bzTitre .3s; } @keyframes bzTitre { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.bz-saha { position:relative; } .bz-saha canvas { width:100%; height:auto; display:block; border-radius:16px; touch-action:none; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.bz-ipucu { position:absolute; left:50%; top:62%; transform:translateX(-50%); background:rgba(0,0,0,.75); color:#fff; font-weight:800; border-radius:12px; padding:10px 16px; pointer-events:none; white-space:nowrap; }
.bz-kart { background:var(--sg-kart); border:1px solid rgba(255,176,32,.35); border-radius:16px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-height:96px; }
.bz-kart > small { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--oy-vurgu); } .bz-kart > small svg { width:14px; height:14px; }
.bz-kart > p { font-size:16px; font-weight:800; color:#fff; line-height:1.3; margin:0; } .bz-kart > p u { text-decoration:none; border-bottom:3px solid var(--oy-vurgu); }
.bz-kart > div { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .bz-kart button { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; border-radius:12px; padding:11px 8px; font:inherit; font-weight:800; font-size:14.5px; cursor:pointer; }
.bz-kart button.dogru { background:#1f9d55; border-color:#1f9d55; } .bz-kart button.yanlis { background:#c0392b; border-color:#c0392b; }
.bz-kart .sg-son-bas { padding:4px 0; }

/* 🛠️ Panel · Hikâyeli oyunlar */
.pno-kart.kapali { opacity:.6; } .pno-bas { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .pno-bas h2 { margin:0; }
.pno-anahtar { display:flex; align-items:center; gap:6px; font-weight:800; white-space:nowrap; cursor:pointer; } .pno-anahtar input { width:22px; height:22px; }
.pno-sayilar { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin:10px 0; } .pno-sayilar > div { background:var(--bg, rgba(0,0,0,.04)); border-radius:10px; padding:8px; text-align:center; }
.pno-sayilar b { display:block; font-size:20px; } .pno-sayilar small { font-size:11px; color:var(--muted); }
.pno-gizli { opacity:.55; } .pa-ayar small + small { display:block; }

/* ── Köstebek (gizli roller; kabuk sg-) ── */
.sg.ks { --oy-vurgu:#c084fc; background:#110d18; --sg-kart:#1b1526; }
.ks .oy-btn.ana { color:#1e0b33; } .ks .sg-balon.ben { color:#1e0b33; }
.ks-sozluk { flex-direction:row; flex-wrap:wrap; gap:6px; } .ks-sozluk h2 { width:100%; }
.ks-sozluk button { border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.04); color:#e9eaee; border-radius:12px; padding:6px 10px; font:inherit; text-align:left; cursor:pointer; }
.ks-sozluk b { display:block; font-size:14px; } .ks-sozluk small { font-size:12px; opacity:.65; }
.ks-rol { text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 12px; border-radius:22px; }
.ks-rol.kostebek { background:radial-gradient(circle at 50% 20%, rgba(255,77,94,.25), transparent 70%); } .ks-rol.ekip { background:radial-gradient(circle at 50% 20%, rgba(58,134,255,.25), transparent 70%); }
.ks-rol > .kp-ik { width:72px; height:72px; border-radius:22px; } .ks-rol > .kp-ik svg { width:36px; height:36px; }
.ks-rol small { letter-spacing:.14em; text-transform:uppercase; font-size:12px; opacity:.7; } .ks-rol h1 { font-size:34px; } .ks-rol p { max-width:320px; opacity:.85; }
.ks-gorevler { display:flex; align-items:center; gap:8px; justify-content:center; }
.ks-gorevler span { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:2px solid rgba(255,255,255,.2); font-weight:900; }
.ks-gorevler span.simdi { border-color:var(--oy-vurgu); box-shadow:0 0 10px rgba(192,132,252,.5); } .ks-gorevler span.ok { background:#1f9d55; border-color:#1f9d55; } .ks-gorevler span.fail { background:#c0392b; border-color:#c0392b; }
.ks-gorevler em { font-style:normal; font-size:12px; opacity:.7; margin-left:6px; }
.ks-masa { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.ks-kisi { position:relative; border:2px solid var(--sg-cizgi); background:var(--sg-kart); color:#fff; border-radius:16px; padding:8px 4px; display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit; cursor:pointer; }
.ks-kisi:disabled { cursor:default; } .ks-kisi .sg-portre { width:52px; height:52px; border-radius:50%; } .ks-kisi .sg-portre i { font-style:normal; font-size:22px; font-weight:900; color:rgba(255,255,255,.6); }
.ks-kisi b { font-size:13.5px; } .ks-kisi small { font-size:10.5px; font-weight:800; color:var(--oy-vurgu); text-transform:uppercase; letter-spacing:.08em; }
.ks-kisi.takim { border-color:var(--oy-vurgu); background:rgba(192,132,252,.12); } .ks-kisi.lider .sg-portre { outline:3px solid #ffd166; outline-offset:2px; }
.ks-kisi em { font-style:normal; font-size:11px; font-weight:900; border-radius:99px; padding:1px 7px; } .ks-kisi em.evet { background:#1f9d55; } .ks-kisi em.hayir { background:#c0392b; }
.ks-oy { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .ks-sabotaj { background:#c0392b !important; border-color:#c0392b !important; }
.ks-sonuc { text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 0; } .ks-sonuc > .kp-ik { width:64px; height:64px; border-radius:20px; } .ks-sonuc h1 { font-size:28px; }
.ks-k { color:#ff7b7b; } .ks-e { color:#6ea8ff; }

/* ── Koçi Komutan (retro strateji; kabuk sg-) ── */
.sg.km { --oy-vurgu:#9ae66e; background:#0f140c; --sg-kart:#18200f; }
.km .oy-btn.ana { color:#102006; }
.km-hero { min-height:190px; } .km-hero canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; }
.km-sozluk { display:flex; flex-wrap:wrap; gap:6px; } .km-sozluk button { border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.04); color:#e9eaee; border-radius:10px; padding:5px 9px; font:inherit; text-align:left; cursor:pointer; }
.km-sozluk b { display:block; font-size:13.5px; } .km-sozluk small { font-size:11.5px; opacity:.65; }
.km-mac { gap:6px; }
.km-ust { display:flex; gap:6px; } .km-ust span { flex:1; display:flex; align-items:center; gap:5px; justify-content:center; font-size:12.5px; background:var(--sg-kart); border-radius:10px; padding:6px; }
.km-ust svg { width:14px; height:14px; } .km-ust b { font-variant-numeric:tabular-nums; } .km-us.b b { color:#6ea8ff; } .km-us.o b { color:#ff7b7b; } .km-kredi b { color:#ffd166; }
.km-saha { position:relative; } .km-saha canvas { width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.4); image-rendering:pixelated; }
.km-telsiz { position:absolute; left:8px; right:8px; top:8px; background:rgba(10,14,8,.9); border:1px solid rgba(154,230,110,.5); border-radius:12px; padding:8px 10px; animation:sgDus .25s ease-out; }
.km-telsiz small { display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--oy-vurgu); } .km-telsiz small svg { width:13px; height:13px; }
.km-telsiz b { display:block; color:#fff; font-size:15px; } .km-telsiz span { font-size:12.5px; opacity:.7; }
.km-emir { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:7px; }
.km-cipler { display:flex; flex-wrap:wrap; gap:5px; } .km-cipler button { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#e9eaee; border-radius:99px; padding:6px 11px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.km-cipler button.on { background:var(--oy-vurgu); color:#102006; border-color:transparent; }
.km-cumle p { margin:0; font-size:17px; font-weight:800; color:#fff; } .km-cumle small { font-size:12.5px; opacity:.65; }
.km-dug { display:grid; grid-template-columns:1fr 1.3fr; gap:6px; }
.km-moral { display:flex; align-items:center; gap:5px; margin:0; font-size:12.5px; font-weight:800; color:#ffd166; } .km-moral svg { width:14px; height:14px; }
.km-soyle-perde { position:fixed; left:0; right:0; bottom:0; z-index:60; background:#18200f; border-top:2px solid var(--oy-vurgu); padding:16px 16px max(16px, env(safe-area-inset-bottom)); }
.km-saha canvas { max-height:55dvh; width:auto; max-width:100%; margin:0 auto; } .km-saha { display:flex; justify-content:center; }

/* 📝 Koçi Quiz (oyun-quiz.js) — sg kabuğu; vurgu mor */
.qz-lobi, .qz { --oy-vurgu:#a78bfa; display:flex; flex-direction:column; gap:12px; }
.qz-hero { background:radial-gradient(120% 90% at 70% 10%, #2c2250, #0d0f14 62%); }
.qz-basla { display:flex; align-items:center; gap:14px; width:100%; border:0; border-radius:22px; padding:16px 18px; text-align:left; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, #7c3aed, #a855f7 55%, #ec4899); box-shadow:0 7px 0 #5b21b6, 0 14px 30px rgba(124,58,237,.35); font:inherit; }
.qz-basla:active { transform:translateY(4px); box-shadow:0 3px 0 #5b21b6; }
.qz-basla-ik { width:48px; height:48px; flex:none; border-radius:16px; background:rgba(255,255,255,.18); display:grid; place-items:center; } .qz-basla-ik svg { width:28px; height:28px; }
.qz-basla b { display:block; font-size:22px; line-height:1.1; } .qz-basla small { font-size:13.5px; opacity:.9; }
.qz-noform { display:flex; align-items:center; gap:8px; background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:16px; padding:8px 10px 8px 14px; }
.qz-noform label { flex:1; min-width:0; overflow-wrap:anywhere; font-weight:700; font-size:14px; opacity:.85; }   /* madde 13: dar genişlikte «Aç» dışarı taşıyordu */ .qz-noform span { font-weight:800; opacity:.6; }
.qz-noform input { width:64px; border:1px solid var(--sg-cizgi); background:#0d0f14; color:#fff; border-radius:10px; padding:8px; font:inherit; font-weight:800; font-size:16px; text-align:center; }
.qz-noform button { border:0; border-radius:10px; padding:9px 14px; background:var(--oy-vurgu); color:#16102a; font:inherit; font-weight:800; cursor:pointer; }
.qz-davet-not { margin:0; display:flex; align-items:center; gap:8px; font-size:13.5px; opacity:.85; } .qz-davet-not svg { width:18px; height:18px; color:var(--oy-vurgu); flex:none; }
.qz-izgara { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.qz-test { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:92px; border:1px solid var(--sg-cizgi); border-radius:16px; padding:10px; background:var(--sg-kart); color:#e9eaee; font:inherit; text-align:left; cursor:pointer; }
.qz-test b { font-size:20px; line-height:1; } .qz-test small { font-size:12px; line-height:1.25; opacity:.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qz-test em { position:absolute; top:9px; right:9px; font-style:normal; font-size:10.5px; font-weight:800; border-radius:99px; padding:1px 7px; background:rgba(255,255,255,.08); }
.qz-test.s-A0 em { color:#7dd3fc; } .qz-test.s-A1 em { color:#86efac; } .qz-test.s-A2 em { color:#fde047; } .qz-test.s-B1 em { color:#fdba74; } .qz-test.s-B2 em { color:#f9a8d4; } .qz-test.s-C1 em { color:#c4b5fd; }
/* 22 Eki: yüzlerce test — seviye + durum çipleri, konu araması, kademeli liste (telefonda akıcı: liste 60'ar çizilir) */
.qz-suzgec { display:flex; flex-direction:column; gap:8px; min-width:0; }
.qz-ara { display:flex; align-items:center; gap:8px; background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:14px; padding:0 12px; min-width:0; }
.qz-ara svg { width:18px; height:18px; flex:none; opacity:.7; }
.qz-ara input { flex:1; min-width:0; border:0; background:transparent; color:#e9eaee; font:inherit; font-size:16px; padding:11px 0; outline:none; }
.qz-ara:focus-within { border-color:var(--oy-vurgu); }
.qz-sonuc-say { margin:0; font-size:13px; opacity:.75; min-height:0; } .qz-sonuc-say:empty { display:none; }
.qz-daha { align-self:stretch; }
.qz-test i { margin-top:auto; font-style:normal; font-weight:800; font-size:12px; color:#16102a; background:var(--oy-vurgu); border-radius:8px; padding:1px 7px; }
.qz-test.cozuldu { border-color:rgba(167,139,250,.45); }
.qz-ust { display:flex; align-items:center; gap:8px; } .qz-no { font-size:22px; font-weight:900; color:var(--oy-vurgu); } .qz-ad { flex:1; min-width:0; font-size:13px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qz-arkadas { display:flex; align-items:center; gap:6px; border:1px solid rgba(167,139,250,.5); background:rgba(167,139,250,.12); color:#e9e3ff; border-radius:99px; padding:7px 11px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap; }
.qz-arkadas svg { width:16px; height:16px; }
.qz-ilerleme { display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; } .qz-ilerleme i { height:6px; border-radius:4px; background:rgba(255,255,255,.1); }
.qz-ilerleme i.su { background:var(--oy-vurgu); } .qz-ilerleme i.d { background:#22c55e; } .qz-ilerleme i.y { background:#ef4444; }
.qz-kart { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:22px; padding:18px 16px; display:flex; flex-direction:column; gap:14px; }
.qz-tur { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--oy-vurgu); }
.qz-soru { margin:0; font-size:21px; font-weight:700; line-height:1.45; }
.qz-bosluk { display:inline-block; width:78px; height:1.05em; margin:0 3px; vertical-align:-3px; border-bottom:3px solid var(--oy-vurgu); }
.qz-secenek { display:flex; flex-direction:column; gap:9px; }
.qz-secenek button { display:flex; align-items:center; gap:12px; width:100%; border:1px solid var(--sg-cizgi); background:rgba(255,255,255,.04); color:#e9eaee; border-radius:16px; padding:12px 14px; font:inherit; font-size:16.5px; font-weight:600; text-align:left; cursor:pointer; }
.qz-secenek em { width:28px; height:28px; flex:none; border-radius:9px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-style:normal; font-weight:900; font-size:13px; }
.qz-secenek button:active { transform:scale(.98); }
.qz-secenek .dogru { border-color:#22c55e; background:rgba(34,197,94,.16); } .qz-secenek .dogru em { background:#22c55e; color:#fff; }
.qz-secenek .yanlis { border-color:#ef4444; background:rgba(239,68,68,.16); } .qz-secenek .yanlis em { background:#ef4444; color:#fff; }
.qz-secenek .sonuk { opacity:.45; }
.qz-aciklama { border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; } .qz-aciklama.ok { background:rgba(34,197,94,.12); } .qz-aciklama.hata { background:rgba(239,68,68,.12); }
.qz-aciklama b { font-size:15px; } .qz-aciklama p { margin:0; font-size:14.5px; line-height:1.45; opacity:.92; } .qz-aciklama small { font-size:13px; opacity:.7; }
.qz-skor { text-align:center; background:radial-gradient(120% 90% at 50% 0, #2c2250, var(--sg-kart) 70%); border:1px solid var(--sg-cizgi); border-radius:24px; padding:20px 16px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.qz-skor small { opacity:.75; } .qz-skor > b { font-size:64px; line-height:1; font-weight:900; } .qz-skor > b span { font-size:26px; opacity:.6; } .qz-skor p { margin:0; opacity:.9; }
.qz-skor em { font-style:normal; font-weight:900; color:#16102a; background:var(--oy-vurgu); border-radius:99px; padding:3px 12px; }
.qz-arkadaslar { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:18px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.qz-arkadaslar > b { display:flex; align-items:center; gap:6px; } .qz-arkadaslar svg { width:18px; height:18px; color:var(--oy-vurgu); }
.qz-arkadaslar span { display:flex; justify-content:space-between; font-size:14.5px; } .qz-arkadaslar span b { color:var(--oy-vurgu); }
.qz-davet { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(236,72,153,.18)); border:1px solid rgba(167,139,250,.4); border-radius:18px; padding:14px; }
.qz-davet div { flex:1; } .qz-davet b { display:block; } .qz-davet small { font-size:13px; opacity:.85; }
.qz-yanlislar { display:flex; flex-direction:column; gap:8px; } .qz-yanlislar > b { font-size:16px; }
.qz-y { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-left:4px solid #ef4444; border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.qz-y small { opacity:.65; font-size:12px; } .qz-y p { margin:0; font-weight:700; } .qz-y b { color:#86efac; font-size:14px; } .qz-y span { font-size:13.5px; opacity:.85; }
.qz-alt { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
/* 📝 Quiz meydan okuması */
.qz-meydan { display:flex; align-items:center; gap:6px; border-radius:99px; padding:7px 11px; font-size:12.5px; font-weight:800; background:rgba(245,185,69,.15); color:#f5d27a; white-space:nowrap; } .qz-meydan svg { width:16px; height:16px; }
.qz-kafa { background:var(--sg-kart); border:1px solid var(--sg-cizgi); border-radius:18px; padding:14px; text-align:center; display:flex; flex-direction:column; gap:8px; }
.qz-kafa > b { font-size:20px; } .qz-kafa.sen > b { color:#86efac; } .qz-kafa.arkadas > b { color:#fca5a5; }
.qz-kafa div { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .qz-kafa span { background:rgba(255,255,255,.05); border-radius:12px; padding:8px; font-size:13px; display:flex; flex-direction:column; } .qz-kafa span b { font-size:24px; color:var(--oy-vurgu); }
.qz-arkadas-liste { display:flex; flex-direction:column; gap:6px; max-height:40vh; overflow-y:auto; margin-bottom:6px; }
.qz-ark { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--soft, rgba(0,0,0,.04)); }
.qz-ark span { flex:1; display:flex; flex-direction:column; min-width:0; } .qz-ark small { font-size:12px; opacity:.7; }
/* 🎯 Blitz soru modu (Riven 30 Eyl: "oyuncu oyuna değil sorulara konsantre olsun") */
.bz-modlar { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bz-modlar button { display:flex; flex-direction:column; gap:3px; text-align:left; border:1px solid var(--sg-cizgi); background:var(--sg-kart); color:#e9eaee; border-radius:16px; padding:12px; font:inherit; cursor:pointer; }
.bz-modlar button b { font-size:16px; } .bz-modlar button small { font-size:12.5px; opacity:.8; line-height:1.35; }
.bz-modlar button.on { border-color:var(--oy-vurgu); background:rgba(245,185,69,.12); box-shadow:0 0 0 2px rgba(245,185,69,.35) inset; }
.bz-soru .bz-kart { border:2px solid var(--oy-vurgu); box-shadow:0 8px 28px rgba(245,185,69,.18); }
.bz-soru .bz-kart p { font-size:20px; }
.bz-soru .bz-kart button { padding:14px 10px; font-size:16px; }
.bz-sure { display:block; height:6px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:8px; } .bz-sure b { display:block; height:100%; width:100%; background:linear-gradient(90deg, #ef4444, #f5b945); }
.bz-soru .bz-saha canvas { cursor:default; }
/* ⚙️ Panel: oyun ayarları */
.pno-ayarlar { margin-top:10px; border-top:1px solid var(--line, #e5e7eb); padding-top:8px; } .pno-ayarlar summary { cursor:pointer; font-weight:800; }
.pno-ayar-liste { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.pno-ayar { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line, #e5e7eb); cursor:pointer; }
.pno-ayar span { flex:1; display:flex; flex-direction:column; } .pno-ayar small { font-size:12px; opacity:.7; }
.pno-ayar input[type=number] { width:84px; padding:6px 8px; border-radius:10px; border:1px solid var(--line, #d1d5db); font:inherit; text-align:center; }
.pno-ayar input[type=checkbox] { width:22px; height:22px; }
.bz-soru .bz-saha canvas { max-height:44vh; width:auto; max-width:100%; margin:0 auto; display:block; }

/* 🧭 Yardım · İpucu, can, çıkış sorusu (Riven 30 Eyl: "giren tam anlamıyor ne yapacağını"; "3 candan sonra her can 5 XP"; "neden çıkmış") */
.oy-alt-bas { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; }
.oy-alt-bas h2 { margin:0; }
.oy-yardim-cip { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; border:1px solid rgba(245,185,69,.45); background:rgba(245,185,69,.12); color:#f5d58a;
  border-radius:999px; padding:6px 11px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.oy-yardim-cip svg { width:15px; height:15px; }
.oy-yardim-cip:active { background:rgba(245,185,69,.25); }
.oy-yardim-perde { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; animation:sgPerde .2s; }
.oy-yardim { position:relative; width:min(560px, 100%); max-height:80vh; overflow:auto; background:#171a22; color:#eef0f4; border-radius:22px 22px 0 0;
  padding:20px 18px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px; box-shadow:0 -10px 40px rgba(0,0,0,.4); }
.oy-yardim > small { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#f5b945; margin-top:4px; }
.oy-yardim > small svg { width:15px; height:15px; }
.oy-yardim > p { margin:0; font-size:15.5px; line-height:1.5; }
.oy-yardim .oy-yardim-not { font-size:13.5px; color:rgba(238,240,244,.7); }
.oy-yardim-x { position:absolute; top:10px; right:12px; border:0; background:rgba(255,255,255,.08); color:#fff; width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; }
.oy-yardim .oy-btn { margin-top:6px; }
.sg-soru.oy-soluk, .sg-secim.oy-soluk, .bl-ifade.oy-soluk, .gv-soz.oy-soluk, .gv-eylem.oy-soluk { opacity:.28; filter:grayscale(1); text-decoration:line-through; pointer-events:none; }
.oy-canlar { display:inline-flex; gap:3px; } .oy-canlar i { display:inline-flex; color:rgba(255,255,255,.2); } .oy-canlar i.on { color:#ff5d6c; } .oy-canlar svg { width:18px; height:18px; fill:currentColor; }
.oy-canbitti { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:6px 0; }
.oy-canbitti > svg, .oy-canbitti > .ik { width:42px; height:42px; color:#ff5d6c; }
.oy-canbitti h2 { margin:0; font-size:22px; } .oy-canbitti p { margin:0; color:rgba(238,240,244,.75); }
.oy-neden { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); z-index:75; width:min(520px, calc(100% - 24px));
  background:#1b1f29; color:#eef0f4; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px 14px 12px; box-shadow:0 12px 40px rgba(0,0,0,.35); animation:oyNeden .25s ease-out; }
@keyframes oyNeden { from { transform:translate(-50%, 16px); opacity:0; } }
.oy-neden b { display:block; font-size:15px; } .oy-neden small { display:block; margin:2px 30px 8px 0; color:rgba(238,240,244,.7); font-size:13px; }
.oy-neden > div { display:flex; flex-wrap:wrap; gap:6px; }
.oy-neden > div button { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; border-radius:999px; padding:7px 11px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.oy-neden-x { position:absolute; top:8px; right:10px; border:0; background:none; color:rgba(255,255,255,.6); font-size:20px; cursor:pointer; }

/* 🎮 Panel → Oyun Merkezi (Riven 30 Eyl: "bütün oyunları bir çatı altına toplayalım") */
.pnm-sekmeler { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.pnm-sekmeler button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:8px 14px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; }
.pnm-sekmeler button.on { background:var(--primary); border-color:var(--primary); color:var(--koci-on-primary, #fff); }
.pnm-izgara { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; align-items:start; }
.pnm-grup { margin:0; } .pnm-grup-bas { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.pnm-grup-bas h2 { margin:0; font-size:17px; } .pnm-grup-bas small { display:block; margin-top:2px; }
.pnm-oyun { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.pnm-oyun:last-child { border-bottom:0; } .pnm-oyun span { min-width:0; } .pnm-oyun b { display:block; font-size:14.5px; }
.pnm-oyun small { display:block; color:var(--muted); font-size:12px; margin-top:1px; }
.pnm-oyun.kapali b { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.pnm-hepsi { background:rgba(217,99,58,.06); border-radius:10px; padding:8px 10px; margin-bottom:4px; border-bottom:0; }
.pnm-hepsi.kapali { background:rgba(229,72,77,.12); } .pnm-hepsi.kapali b { text-decoration:none; color:#c73a3f; }
.pnm-anahtar { position:relative; flex-shrink:0; width:46px; height:28px; cursor:pointer; }
.pnm-anahtar input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.pnm-anahtar i { position:absolute; inset:0; border-radius:999px; background:#c9bfb5; transition:background .15s; pointer-events:none; }
.pnm-anahtar i::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.pnm-anahtar input:checked + i { background:#2e9e6b; } .pnm-anahtar input:checked + i::after { transform:translateX(18px); }
.pnm-anahtar input:focus-visible + i { outline:2px solid var(--primary); outline-offset:2px; } .pnm-anahtar input:disabled + i { opacity:.5; }
.pnm-uzun summary { cursor:pointer; font-weight:700; padding:8px 0; color:var(--primary); }
.pnm-suzgec { gap:8px; margin-bottom:10px; } .pnm-suzgec select { flex:1; min-width:150px; }
.pnm-cubuk { display:grid; grid-template-columns:minmax(120px, 34%) 1fr 36px; align-items:center; gap:8px; padding:4px 0; font-size:13.5px; }
.pnm-cubuk b { text-align:right; } [data-oyun-sec] { cursor:pointer; }
/* 🖼️ resimli oyun satırları + arama (Riven 30 Eyl: "resimleri ile göster, yazıp bulayım") */
.pnm-ara { display:flex; align-items:center; gap:8px; background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:4px 12px; margin:0 0 10px; }
.pnm-ara:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(217,99,58,.15); }
.pnm-ara > span { font-size:20px; color:var(--muted); } .pnm-ara input { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:16px; padding:10px 0; color:var(--ink); outline:0; }
.pnm-ara small { color:var(--muted); font-size:12.5px; white-space:nowrap; }
.pnm-git { display:flex; gap:6px; overflow-x:auto; padding:0 0 10px; scrollbar-width:none; } .pnm-git::-webkit-scrollbar { display:none; }
.pnm-git button { flex-shrink:0; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.pnm-git button small { color:var(--muted); font-weight:600; margin-left:2px; }
.pnm-oyun-kap { border-bottom:1px solid var(--line); } .pnm-oyun-kap:last-child { border-bottom:0; } .pnm-oyun-kap .pnm-oyun { border-bottom:0; }
.pnm-resim { position:relative; flex-shrink:0; width:52px; height:52px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg, #f3e7dc, #e9dcef); display:grid; place-items:center; }
.pnm-resim img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pnm-resim .kp-ik { width:100%; height:100%; border-radius:0; } .pnm-emoji { font-size:26px; line-height:1; }
.pnm-oyun.kapali .pnm-resim { filter:grayscale(1); opacity:.55; }
.pnm-oyun .pnm-ad { flex:1; min-width:0; }
.pnm-ayar-dug { flex-shrink:0; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:6px 9px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.pnm-ayar-dug[aria-expanded="true"] { background:var(--primary); border-color:var(--primary); color:var(--koci-on-primary, #fff); }
.pnm-ayar-alan { padding:0 0 10px; } .pnm-ayar-alan .pno-ayarlar > summary { display:none; }
.pnm-grup.pn-find-target, .pnm-oyun-kap.pn-find-target { outline:3px solid var(--primary); outline-offset:3px; border-radius:12px; }
@media (max-width:420px) { .pnm-izgara { grid-template-columns:1fr; } .pnm-ayar-dug span { display:none; } .pnm-resim { width:44px; height:44px; } }

/* 📖 Nasıl oynanır? — ortak aç/kapa açıklama (app.js nasilOynanir; Riven 30 Eyl: "üzerine basılınca kapansın açılsın").
   Başlık en az 44 px (telefonda rahat dokunulur), sağda dönen ok. Uygulama kartında tema renkleri (karanlık tema dâhil), oyun sahnesinde (.sg) sahnenin. */
details.nasil { border:1px solid var(--line); border-radius:14px; padding:0 12px; margin:8px 0; }
details.nasil[open] { padding-bottom:12px; }
details.nasil > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; cursor:pointer;
  font-weight:800; font-size:15px; color:var(--ink); -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
details.nasil > summary::-webkit-details-marker { display:none; }
details.nasil > summary::marker { content:""; }
details.nasil > summary::after, details.nasil.nasil[open] > summary::after { content:none; }   /* style.css details.card ▾ okunu bastır: ok .nasil-ok'ta */
details.nasil > summary:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:10px; }
.nasil-bas { display:flex; align-items:center; gap:8px; min-width:0; } .nasil-bas .ik { color:var(--primary); } .nasil-bas .ik svg { width:18px; height:18px; }
.nasil-ok { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--muted); background:rgba(127,127,127,.14); }
.nasil-ok::before { content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
details.nasil[open] .nasil-ok::before { transform:translateY(2px) rotate(-135deg); }
.nasil-ic { display:flex; flex-direction:column; gap:8px; padding-top:2px; } .nasil-ic > p { margin:0; }
details.nasil[open] > .nasil-ic { animation:nasilAc .18s ease-out; }
@keyframes nasilAc { from { opacity:0; transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce) { details.nasil[open] > .nasil-ic { animation:none; } .nasil-ok::before { transition:none; } }
/* Uygulama kartı olarak (sinif "card"): kartın kendi çerçevesi; başlık eski h3 boyunda. */
details.card.nasil { padding:4px 18px; margin:0; border-radius:var(--radius); } details.card.nasil[open] { padding-bottom:18px; } details.card.nasil > summary { font-size:17px; }
/* Oyun sahnesinde (.sg koyu sinema görünümü): sg-kart gibi. */
.sg details.nasil { background:var(--sg-kart); border-color:var(--sg-cizgi); border-radius:18px; padding:2px 14px; margin:0; } .sg details.nasil[open] { padding-bottom:14px; }
.sg details.nasil > summary { color:#fff; } .sg .nasil-bas .ik { color:var(--oy-vurgu); } .sg .nasil-ok { color:rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
.sg details.nasil > summary:focus-visible { outline-color:var(--oy-vurgu); }
/* Word Punch oda lobisi (word-punch.js; kendi koyu ringi) */
.wp details.nasil { border-color:#323b55; margin:0 0 16px; } .wp details.nasil > summary { color:#e8edf8; font-size:13px; letter-spacing:.02em; }
.wp .nasil-bas .ik { color:#ffd38d; } .wp .nasil-ok { color:#afbad1; background:rgba(255,255,255,.07); } .wp .nasil-ic .wp-lead { margin:0; } .wp .nasil-ic .wp-rules { margin-bottom:0; }
/* Arena kapaklı kartı (.ao-yeni, ikon.css: kartın iç boşluğu 0): kutu düğmelerle aynı 14 px girintide; içindeki .ao-ne'nin
   eski 14 px'i sıfırlanır ki iki paragraf aynı hizadan başlasın (Riven 30 Eyl denetim: kutu kartın kenarına yapışıyordu). */
.ao-yeni > details.nasil { margin-left:14px; margin-right:14px; } .ao-yeni details.nasil .ao-ne { margin-left:0; margin-right:0; }
/* 🕵️ Sorgu Odası sadelik (Codex/Riven 20 Eki) */
.sg-gorev { display:flex; gap:8px; align-items:flex-start; margin:10px 0; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--primary, #4f7cff) 10%, transparent); font-size:15px; line-height:1.4; }
.sg-gorev svg, .sg-gorev .ik { flex:none; }
.sg-devam { display:flex; flex-direction:column; gap:8px; } .sg-devam > p { margin:0; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.sg-vaka-ust .sg-yarim { background:var(--warn, #f2b84b); color:#2a1f1a; font-style:normal; }
.sg-secili { flex-wrap:wrap; } .sg-secili .oy-link { margin-left:auto; }
.sg-dilbilgisi, .sg-gecmis { margin-top:8px; } .sg-dilbilgisi summary, .sg-gecmis summary { cursor:pointer; font-weight:700; display:flex; gap:6px; align-items:center; }
.sg-uyari span { font-weight:600; }
/* ✈️ Yurt Dışında Bir Gün sadelik (Codex/Riven 20 Eki): kaldığın yer kartı, seviye/ülke çipleri, önerilen başlığı, katlanan eski konuşma, hata düzeltme düğmeleri */
.yd-suzgec { display:flex; flex-direction:column; gap:8px; }
.yd-suzgec .sg-cipler button.on { color:#06202b; }
.yd-suzgec .sg-cipler button small { font-size:11.5px; font-weight:700; opacity:.6; margin-left:2px; }
.yd-bas { display:flex; align-items:center; gap:6px; margin:4px 2px 0; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--oy-vurgu); }
.yd-bas svg { width:15px; height:15px; } .yd-bas.soluk { color:rgba(233,234,238,.55); }
.yd-bos { display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 0; font-size:14px; color:rgba(233,234,238,.7); text-align:center; }
.yd-gun.yd-devam { border-color:var(--oy-vurgu); background:linear-gradient(135deg, rgba(76,201,240,.18), var(--sg-kart) 70%); }
.yd-devam small { display:inline-flex; align-items:center; gap:4px; } .yd-devam small svg { width:13px; height:13px; }
.yd-onceki { align-self:stretch; } .yd-onceki > summary { cursor:pointer; font-size:12.5px; font-weight:700; color:rgba(233,234,238,.6); padding:4px 2px; }
.yd-onceki-ic { display:flex; flex-direction:column; gap:8px; padding-top:6px; opacity:.85; }
.yd-duz-dug { display:flex; gap:8px; } .yd-duz-dug .oy-btn { flex:1; min-width:0; }
.yd-kaba-not { animation:none; }
/* style.css'teki «yeni düzen» haftalık grafiği de .yd-gun adını kullanıyor (sütun, 10.5 px soluk yazı, çubuk <i>): oyun kataloğu kartları
   bu yüzden dikey ve iri çıkıyordu (64 gün çok uzun liste). Oyun kabuğunda (.sg) satır düzeni, yazı rengi, bilet rengi ve yıldızlar geri gelir. */
.sg .yd-gun { flex:none; flex-direction:row; height:auto; gap:12px; }
.sg .yd-gun > .tx { font-size:inherit; color:inherit; } .sg .yd-gun > .yd-bilet { color:var(--oy-vurgu); }
.sg .yd-gun i { width:auto; background:none; border-radius:0; margin-top:0; }