/* karanlık mod: [data-theme=dark] ya da sistem tercihi (kullanıcı seçmediyse) */
:root[data-theme="dark"] { --bg:#171210; --card:#241c18; --ink:#f6efe7; --muted:#b5a79a; --line:#3a2e28; --primary:#e0713f; --primary-dk:#b4552a; --ok:#5fb37a; --ok-bg:#1f3325; --bad:#e2634f; --bad-bg:#3d221c; --warn:#e5b04d; --warn-bg:#3b2f14; --navy:#f6efe7; }
:root[data-theme="dark"] body { background:#0d0a09; }
:root[data-theme="dark"] .phone { border-color:#222; }
:root[data-theme="dark"] .opt, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .tile-btn, :root[data-theme="dark"] .item, :root[data-theme="dark"] .mic, :root[data-theme="dark"] .streak, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .btn.secondary, :root[data-theme="dark"] .flip .face, :root[data-theme="dark"] .nav { background:var(--card); color:var(--ink); }
:root[data-theme="dark"] .flip .face.back { background:#2e2420; }
:root[data-theme="dark"] .tag.blue { background:#3a2e28; }
:root[data-theme="dark"] .side.on { background:#3d2a20; }
:root[data-theme="dark"] .devbar { color:#999; }
.theme { background:none; border:0; font-size:20px; padding:0 4px; }
:root { --bg:#fbf6ef; --card:#ffffff; --ink:#1f2a44; --muted:#7a6f66; --line:#eadfd3; --primary:#d9633a; --primary-dk:#b04b27; --ok:#2e9e6a; --ok-bg:#e8f6ee; --bad:#d64a3c; --bad-bg:#fdecea; --warn:#b8811c; --warn-bg:#fff4dc; --navy:#1f2a44; --radius:18px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { margin:0; background:#efe3d6; font-family:-apple-system, "SF Pro Rounded", "SF Pro Text", "Segoe UI", Roboto, sans-serif; color:var(--ink); }
body { display:flex; flex-direction:column; align-items:center; min-height:100vh; padding:24px 0; gap:12px; }
.phone { width:390px; height:844px; background:var(--bg); border-radius:44px; box-shadow:0 20px 60px rgba(60,30,10,.25); overflow:hidden; display:flex; flex-direction:column; border:8px solid #2a1f1a; position:relative; }
@media (max-width:420px) { body{padding:0} .phone{width:100%; height:100vh; border:0; border-radius:0} .devbar{display:none} }
.top { display:flex; align-items:center; gap:8px; padding:50px 18px 8px; font-weight:800; font-size:17px; color:var(--navy); }
.top #title { flex:1; }
.icon { background:none; border:0; font-size:30px; line-height:1; color:var(--primary); padding:0 8px 0 0; font-weight:700; }
.streak { font-size:14px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-weight:700; }
.bar { height:10px; margin:2px 18px 6px; background:var(--line); border-radius:6px; overflow:hidden; }
.bar i { display:block; height:100%; width:0; background:var(--primary); border-radius:6px; transition:width .3s; }
main { flex:1; overflow:auto; padding:6px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.nav { display:flex; border-top:1px solid var(--line); background:#fff; padding:8px 4px 22px; }
.nav button { flex:1; background:none; border:0; font-size:22px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); }
.nav button span { font-size:11px; font-weight:600; }
.nav button.active { color:var(--primary); }
.card { background:var(--card); border-radius:var(--radius); padding:18px; border:1px solid var(--line); box-shadow:0 2px 0 var(--line); }
.card.hero { text-align:center; padding:26px 18px; }
h1 { font-size:26px; margin:6px 0 4px; color:var(--navy); }
h2 { font-size:18px; margin:0 0 6px; }
p { margin:6px 0; line-height:1.45; }
.muted { color:var(--muted); font-size:14px; }
.big { font-size:clamp(26px, 10vw, 38px); font-weight:900; margin:6px 0 2px; letter-spacing:-.5px; overflow-wrap:break-word; }
.pron { font-size:17px; color:var(--primary); font-weight:700; }
.tr { font-size:20px; font-weight:600; }
.q { font-size:22px; font-weight:700; line-height:1.35; margin:8px 0 12px; }
.btn { display:block; width:100%; border:0; border-radius:16px; padding:17px; font-size:17px; font-weight:800; background:var(--primary); color:#fff; box-shadow:0 4px 0 var(--primary-dk); margin-top:8px; }
.btn:active { transform:translateY(2px); box-shadow:0 2px 0 var(--primary-dk); }
.btn.secondary { background:#fff; color:var(--primary); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); }
.btn.ok { background:var(--ok); box-shadow:0 4px 0 #17724c; }
.btn.bad { background:var(--bad); box-shadow:0 4px 0 #a83a1c; }
.btn.ghost { background:none; color:var(--muted); box-shadow:none; font-weight:600; padding:10px; }
.btn:disabled { opacity:.5; }
.speak { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; border:0; background:var(--primary); color:#fff; font-size:28px; box-shadow:0 4px 0 var(--primary-dk); }
.speak.small { width:44px; height:44px; font-size:20px; }
.speak:active { transform:translateY(2px); box-shadow:0 2px 0 var(--primary-dk); }
input, textarea { width:100%; font-size:18px; padding:14px; border:2px solid var(--line); border-radius:14px; background:#fff; font-family:inherit; }
input:focus, textarea:focus { outline:none; border-color:var(--primary); }
.row { display:flex; gap:10px; } .row > * { flex:1; }
.opts { display:flex; flex-direction:column; gap:10px; }
.opt { background:#fff; border:2px solid var(--line); border-radius:14px; padding:15px; font-size:18px; font-weight:600; text-align:left; box-shadow:0 3px 0 var(--line); }
.opt:active { transform:translateY(2px); box-shadow:0 1px 0 var(--line); }
.opt.picked { border-color:var(--primary); }
.opt.right { border-color:var(--ok); background:var(--ok-bg); }
.opt.wrong { border-color:var(--bad); background:var(--bad-bg); }
.tiles { display:flex; flex-wrap:wrap; gap:8px; min-height:56px; padding:10px; border:2px dashed var(--line); border-radius:14px; background:#fff; }
.tiles.answer { border-style:solid; }
.tile { background:#fff; border:2px solid var(--line); border-radius:12px; padding:10px 14px; font-size:18px; font-weight:600; box-shadow:0 3px 0 var(--line); }
.tile.used { visibility:hidden; }
.result { border-radius:var(--radius); padding:16px; margin-top:10px; }
.result.ok { background:var(--ok-bg); border:1px solid #bfe9d1; }
.result.bad { background:var(--bad-bg); border:1px solid #f6c9b6; }
.result .head { font-weight:900; font-size:19px; }
.result.ok .head { color:var(--ok); } .result.bad .head { color:var(--bad); }
.tag { display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; background:var(--warn-bg); color:var(--warn); font-weight:800; letter-spacing:.2px; }
.tag.blue { background:#e9eef8; color:var(--navy); }
.tiles-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile-btn { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px; text-align:left; box-shadow:0 3px 0 var(--line); font-size:15px; font-weight:700; }
.tile-btn .ic { font-size:26px; display:block; margin-bottom:6px; }
.tile-btn .sub { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-top:2px; }
.stat { display:flex; gap:10px; }
.stat .card { flex:1; text-align:center; padding:12px 6px; }
.stat .n { font-size:24px; font-weight:900; } .stat .l { font-size:12px; color:var(--muted); }
.flip { perspective:1000px; min-height:300px; }
.flip .face { background:#fff; border-radius:22px; border:1px solid var(--line); box-shadow:0 6px 0 var(--line); padding:28px 20px; text-align:center; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.flip .face.back { background:#fdf3ea; }
.list { display:flex; flex-direction:column; gap:10px; }
.item { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.item b { display:block; }
.hero-emoji { font-size:60px; }
.slogan { text-align:center; font-size:15px; color:var(--muted); margin:0 0 10px; }
.devbar { font-size:12px; color:#555; }
.devnote { font-size:13px; color:var(--warn); background:var(--warn-bg); padding:8px 12px; border-radius:10px; }
.err { color:var(--bad); font-size:14px; }
.counter { text-align:center; font-size:13px; color:var(--muted); font-weight:700; }

/* kaydırmalı kart */
/* Mahmut (görüş, 14 Eyl): yan yazılar kalktı, kart tam genişlik ve büyük; seçenekler yalnız alttaki düğmelerde. Kaydırırken kartın üstünde seçilen taraf belirir. */
.swipe-wrap { position:relative; display:flex; align-items:center; min-height:360px; }
.side { flex:0 0 78px; text-align:center; font-weight:800; font-size:15px; color:var(--muted); padding:10px 4px; border-radius:14px; border:2px dashed var(--line); transition:all .15s; }
.side.on { color:var(--primary); border-color:var(--primary); background:#fdeee6; }
.side.left::before { content:"◀ "; } .side.right::after { content:" ▶"; }
.swipe { flex:1; touch-action:pan-y; user-select:none; cursor:grab; }
.swipe .face { position:relative; transition:transform .18s, box-shadow .18s; will-change:transform; min-height:340px; background:var(--card); border-radius:22px; border:1px solid var(--line); box-shadow:0 6px 0 var(--line); padding:28px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.swipe .face .big { font-size:clamp(30px, 11vw, 44px); }
.hint-side { position:absolute; top:14px; font-size:15px; font-weight:800; color:var(--primary); opacity:0; transition:opacity .15s; max-width:45%; overflow-wrap:anywhere; } .hint-side.left { left:14px; text-align:left; } .hint-side.right { right:14px; text-align:right; } .hint-side.on { opacity:1; }
.swipe-wrap { justify-content:center; }
.side { flex:0 0 72px; }
.swipe.drag .face { transition:none; }
.swipe.shake .face { animation:shake .4s; border-color:var(--bad); }
.swipe.fly-left .face { transform:translateX(-140%) rotate(-12deg); opacity:0; transition:transform .25s, opacity .25s; }
.swipe.fly-right .face { transform:translateX(140%) rotate(12deg); opacity:0; transition:transform .25s, opacity .25s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-14px)} 40%{transform:translateX(12px)} 60%{transform:translateX(-8px)} 80%{transform:translateX(6px)} }

/* günlük hedef halkası, görevler, kutlama */
.ring { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:13px; background:conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line) 0); }
.ring span { width:50px; height:50px; border-radius:50%; background:var(--card); display:grid; place-items:center; }
.today { display:flex; align-items:center; gap:14px; }
.quest { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:15px; }
.quest:first-of-type { border-top:0; }
.quest .q-bar { flex:1; height:8px; background:var(--line); border-radius:4px; overflow:hidden; } .quest .q-bar i { display:block; height:100%; background:var(--primary); }
.quest.done { color:var(--ok); }
.pop { animation:pop .35s; } @keyframes pop { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti i { position:absolute; top:-10px; width:8px; height:14px; border-radius:2px; animation:fall 1.2s ease-in forwards; }
@keyframes fall { to { transform:translateY(900px) rotate(540deg); opacity:.2 } }
.mic { background:#fff; border:2px solid var(--line); border-radius:14px; padding:12px; font-size:16px; font-weight:700; width:100%; margin-top:8px; }
.mic.on { border-color:var(--bad); color:var(--bad); }
.xp-pill { font-size:12px; font-weight:800; color:var(--ok); }
.onb .opt { text-align:center; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:#fff; border:2px solid var(--line); border-radius:999px; padding:10px 14px; font-size:17px; font-weight:700; box-shadow:0 3px 0 var(--line); }
.chip.on { border-color:var(--primary); background:#fdeee6; color:var(--primary); }
.chip.right { border-color:var(--ok); background:var(--ok-bg); } .chip.wrong { border-color:var(--bad); background:var(--bad-bg); }

/* telaffuz */
.read { font-size:20px; line-height:1.7; }
.read .w { padding:1px 3px; border-radius:6px; }
.read .w.ok { background:var(--ok-bg); color:var(--ok); } .read .w.miss { background:var(--bad-bg); color:var(--bad); text-decoration:underline wavy; }
.rec { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:0; border-radius:16px; padding:18px; font-size:18px; font-weight:800; background:var(--bad); color:#fff; box-shadow:0 4px 0 #a83a1c; margin-top:8px; }
.rec.on { animation:pulse 1s infinite; } @keyframes pulse { 50% { opacity:.7 } }

/* seviye tablosu */
.lvl { display:grid; grid-template-columns:1fr; gap:8px; }
.lvl button { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-align:left; box-shadow:0 3px 0 var(--line); }
.lvl .b { font-size:20px; font-weight:900; color:var(--primary); }
.lvl .sub { font-size:12px; color:var(--muted); }
.lvl button:disabled { opacity:.55; }
.lvl .pct { font-size:13px; font-weight:800; color:var(--ok); }
.nav button { font-size:20px; }

/* sohbet */
.chat { display:flex; flex-direction:column; gap:8px; }
.msg { max-width:86%; padding:10px 14px; border-radius:16px; font-size:16px; line-height:1.4; }
.msg.bot { background:var(--card); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.user { background:var(--primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg .fix { display:block; margin-top:6px; font-size:13px; background:var(--warn-bg); color:var(--warn); border-radius:10px; padding:6px 8px; }
.chatbar { display:flex; gap:8px; align-items:flex-end; }
.chatbar textarea { flex:1; }
.chatbar .btn { width:auto; margin:0; padding:14px 16px; }
.coach { font-size:17px; line-height:1.55; }

/* maskot: gözlüklü koç */
.mascot { display:inline-block; width:120px; height:120px; }
.mascot.small { width:56px; height:56px; }
.mascot-row { display:flex; align-items:center; gap:12px; }
.bubble { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 14px; font-size:15px; }
.bubble::before { content:""; position:absolute; left:-8px; top:18px; border:8px solid transparent; border-right-color:var(--line); border-left:0; }

/* günün planı (ana ekran C) */
/* Ana sayfa girişi: kaldığın yer / sıradaki / zayıf konu */
.where { padding:12px 14px; } .where .lbl { margin:0; font-size:13px; color:var(--muted); font-weight:600; } .where .val { margin:2px 0 0; font-size:15px; overflow-wrap:anywhere; }
.where .weakline { margin:8px 0 0; padding:8px 10px; border-radius:10px; background:var(--warn-bg, #fff4e0); font-size:14px; } :root[data-theme="dark"] .where .weakline { background:#3a2f1a; }
.where .link { background:none; border:0; padding:0; color:var(--primary); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
/* Riven 16 Eyl: karta dokununca kalınan ders açılır */
.where.tapcard { cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s, box-shadow .12s; }
.where.tapcard:active { transform:scale(.985); }
.where .tapinfo { float:right; font-size:12px; font-weight:600; color:var(--primary); }
/* Bugünün 10 kelimesi */
.t10row { display:block; padding:10px 12px; } .t10row.reading { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.t10head { display:flex; align-items:center; gap:8px; cursor:pointer; } .t10head .n { width:24px; height:24px; border-radius:50%; background:var(--line); display:grid; place-items:center; font-size:12px; font-weight:900; flex:none; }
.t10head b { font-size:18px; } .t10head .st { margin-left:auto; font-size:12px; white-space:nowrap; }
.t10body { margin:8px 0 0 32px; } .t10body .tr { font-size:16px; font-weight:700; } .t10body .pron { font-size:13px; }
.ok-line { color:var(--ok); font-weight:800; text-align:center; margin:10px 0; }
.k-tr { font-size:18px; font-weight:700; color:var(--primary); margin:6px 0 0; }
/* Duyurular: üst çubuktaki zil + tanıtım penceresi */
.bell { position:relative; background:none; border:0; font-size:20px; padding:2px 6px; cursor:pointer; }
.bell .dot { position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 3px; border-radius:9px; background:var(--bad); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; }
.news-back { align-items:center; } .sheet.news { max-height:82vh; overflow:auto; }
.news-head { display:flex; align-items:center; justify-content:space-between; gap:8px; } .news-head b { font-size:17px; }
.news-list { display:flex; flex-direction:column; gap:10px; margin:6px 0 4px; }
.news-item { display:flex; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; } .news-item.yeni { border-color:var(--primary); }
.news-item .ic { font-size:22px; flex:none; } .news-item b { display:block; font-size:15px; } .news-item p { margin:2px 0 4px; font-size:14px; color:var(--ink); }
/* Millî gün kartı */
.milli { padding:12px 14px; text-align:center; } .milli .m-ad { margin:0 0 8px; font-weight:800; font-size:16px; } .milli .m-not { margin:0 0 8px; color:var(--muted); }
.milli.kutla { border:2px solid var(--primary); } .milli.anma { border:2px solid var(--muted); }
/* Atatürk rafı: söz ve kaynak notu */
.at-note { padding:12px 14px; } .at-quote { margin:0; font-size:17px; font-weight:700; font-style:italic; } .at-note .small { font-size:12px; } .at-note a { color:var(--primary); }
/* Kartlar: seviye seçimi */
.lv-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lv-card { display:flex; flex-direction:column; align-items:flex-start; gap:3px; background:var(--card); border:2px solid var(--line); border-radius:var(--radius); padding:12px; text-align:left; font:inherit; color:var(--ink); box-shadow:0 3px 0 var(--line); min-width:0; }
.lv-card.on { border-color:var(--primary); } .lv-card b { font-size:22px; } .lv-card small { color:var(--muted); font-size:12px; } .lv-card .bar { width:100%; margin:4px 0; } .lv-card .lv-st { font-size:12px; color:var(--muted); }
/* Sohbet yeniden tasarım: mod kartları + cümle kurma */
.mode-card { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:0 3px 0 var(--line); font:inherit; color:var(--ink); min-width:0; }
.mode-card .ic { font-size:26px; flex:none; } .mode-card .tx { min-width:0; flex:1; } .mode-card .tx b { display:block; font-size:15px; } .mode-card .tx small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.mode-card.main { border:2px solid var(--primary); margin:10px 0; padding:16px 14px; } .mode-card.main .ic { font-size:34px; } .mode-card.main .tx b { font-size:18px; } .mode-card.main .go { color:var(--primary); font-weight:800; flex:none; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .mode-grid .mode-card { flex-direction:column; align-items:flex-start; gap:6px; }
.pr-head { padding:10px 14px; } .pr-head p { margin:0; } .pr-topic { font-size:15px; margin-top:4px !important; }
.pr-tr { font-size:22px; font-weight:800; line-height:1.35; margin:4px 0 10px; overflow-wrap:anywhere; }
.pr-hints .pr-hint { margin:0 0 6px; padding:8px 10px; border-radius:10px; background:var(--warn-bg); font-size:14px; }
.pr-tools { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .pr-tools .btn { width:auto; padding:6px 10px; }
.pr-wrong { margin:0; font-size:16px; color:var(--bad); text-decoration:line-through; overflow-wrap:anywhere; } .pr-right { margin:4px 0 0; font-size:17px; font-weight:800; color:var(--ok); overflow-wrap:anywhere; }
.pr-why { margin:10px 0 2px; } .pr-reasons { margin:0; padding-left:20px; } .pr-reasons li { margin:2px 0; }
.pr-parts { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; } .pr-parts .pp { border:1px solid var(--line); border-radius:10px; padding:6px 8px; text-align:center; background:var(--card); } .pr-parts .pp b { display:block; font-size:15px; } .pr-parts .pp small { display:block; font-size:11px; color:var(--muted); }
/* Seviye testi kutusu + ders geçme */
.level-tile { border-color:var(--primary); } .level-tile .sub b { color:var(--primary); }
.skip-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; } .skip-row .btn { width:auto; padding:6px 12px; }
.sheet-back { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; z-index:50; padding:16px; }
.sheet { background:var(--card); color:var(--ink); border-radius:18px; padding:16px; width:100%; max-width:440px; display:flex; flex-direction:column; gap:8px; } .sheet h3 { margin:0; }
/* Konu testleri */
.test-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; margin:8px 0 10px; }
.test-btn { background:var(--card); border:2px solid var(--line); border-radius:12px; padding:10px 8px; text-align:center; font:inherit; color:var(--ink); } .test-btn b { display:block; font-size:15px; } .test-btn small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.test-btn.done { border-color:var(--primary); } .test-btn.full { border-color:var(--ok); background:var(--ok-bg); }
.plan { display:flex; flex-direction:column; gap:8px; }
.step { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-weight:700; font-size:16px; }
.step .n { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; background:var(--line); color:var(--ink); flex:0 0 26px; }
.step.done { color:var(--muted); text-decoration:line-through; } .step.done .n { background:var(--ok); color:#fff; }
.step.now { border-color:var(--primary); box-shadow:0 3px 0 var(--line); } .step.now .n { background:var(--primary); color:#fff; }
.step small { margin-left:auto; color:var(--muted); font-weight:600; font-size:13px; }
.msg .fix.note { color:var(--muted); font-style:normal; }
.greet { font-size:22px; font-weight:800; text-align:center; color:var(--navy); text-wrap:balance; margin:4px 0 0; }
/* yol haritası (İlerleme) */
/* Yol: her satır daire + ad; zikzak satır içi girintiyle (ad kartın içinde kalır, uzun ad alt satıra iner) */
.path { display:flex; flex-direction:column; gap:12px; padding:8px 0; }
.prow { display:flex; align-items:center; gap:12px; min-width:0; width:100%; background:none; border:0; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.lv-bars { display:flex; flex-direction:column; gap:6px; margin:8px 0 12px; } .lv-bar { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:8px; background:none; border:1px solid var(--line); border-radius:10px; padding:6px 8px; font:inherit; color:var(--ink); } .lv-bar.on { border-color:var(--primary); } .lv-bar .bar { margin:0; } .lv-bar small { color:var(--muted); font-size:12px; } .prow:nth-child(even) { padding-left:clamp(16px, 12vw, 64px); }
.node { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:20px; background:var(--card); border:3px solid var(--line); box-shadow:0 3px 0 var(--line); position:relative; }
.node.done { background:var(--ok-bg); border-color:var(--ok); } .node.now { background:var(--primary); border-color:var(--primary-dk); color:#fff; transform:scale(1.15); } .node.locked { opacity:.5; }
.node { flex:none; }
.prow .lbl { min-width:0; overflow-wrap:anywhere; font-size:13px; font-weight:800; color:var(--ink); line-height:1.3; } .prow .lbl small { display:block; font-weight:600; color:var(--muted); font-size:11px; }

/* hikâye okuyucu */
.story { font-size:21px; line-height:1.9; }
.story .w { padding:2px 3px; border-radius:6px; cursor:pointer; }
.story .w.on { background:#fdeee6; color:var(--primary); }
.story .w.reading { background:var(--primary); color:#fff; font-weight:800; }   /* ses çalarken okunan kelime */
/* 🎤 Ben okuyayım: okunan kelime yeşil, atlanan gri-kırmızı */
.story .w.read-ok { background:var(--ok-bg); color:var(--ok); font-weight:700; } .story .w.read-skip { background:var(--bad-bg); color:var(--bad); text-decoration:underline wavy; }
:root[data-theme="dark"] .story .w.read-ok { background:#1e3325; } :root[data-theme="dark"] .story .w.read-skip { background:#3a2020; }
#readMe.on { background:var(--bad); color:#fff; }
.read-sum { font-size:16px; margin:2px 0 8px; }
.pron-miss { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; } .pm { border:1px solid var(--line); border-radius:10px; padding:6px 8px; } .pm small { display:block; color:var(--muted); font-size:11px; }
:root[data-theme="dark"] .story .w.on { background:#3d2a20; }
:root[data-theme="dark"] .story .w.reading { background:var(--primary); color:#fff; }
.story .sent { display:block; margin-bottom:6px; }
.story .sent .tr { display:none; font-size:14px; color:var(--muted); }
.story .sent.show .tr { display:block; }
.gloss { position:sticky; bottom:8px; background:var(--navy); color:#fff; border-radius:14px; padding:12px 14px; font-size:17px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.gloss small { display:block; font-weight:600; opacity:.8; font-size:13px; }
:root[data-theme="dark"] .gloss { background:#3a2e28; }

/* Koçi anlatsın */
.tabs { display:flex; gap:6px; }
.tabs button { flex:1; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:10px; font-weight:800; font-size:14px; color:var(--muted); }
.tabs button.on { border-color:var(--primary); color:var(--primary); }
.rule { background:var(--warn-bg); border-left:4px solid var(--warn); border-radius:0 12px 12px 0; padding:10px 12px; font-weight:700; }
.trap { background:var(--bad-bg); border-left:4px solid var(--bad); border-radius:0 12px 12px 0; padding:10px 12px; }
.sec h3 { margin:12px 0 4px; font-size:16px; color:var(--navy); }
.sec p { margin:0; }
.ex { display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.ex .wrong { color:var(--bad); text-decoration:line-through; font-size:14px; }
.ex .en { font-weight:800; font-size:17px; } .ex .tr { color:var(--muted); font-size:14px; } .ex .note { font-size:13px; color:var(--warn); }
.player { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; }
.player .speak { width:56px; height:56px; font-size:24px; }
.weak { color:var(--bad); font-weight:800; font-size:12px; }
@media print { body { background:#fff; padding:0; } .phone { width:100%; height:auto; border:0; border-radius:0; box-shadow:none; } .top, .nav, .bar, .tabs, .btn, .speak, .devbar, #streak, #theme, #back { display:none !important; } main { overflow:visible; } .card { box-shadow:none; break-inside:avoid; } }

/* sayı oyunu */
.numbig { font-size:72px; font-weight:900; text-align:center; color:var(--navy); letter-spacing:-2px; line-height:1.1; font-variant-numeric:tabular-nums; }
.numscore { display:flex; justify-content:center; gap:14px; font-weight:800; color:var(--muted); }

/* ---------- Çocuk Dünyası (Faz 4): büyük dokunma alanları, oyuncu renkler, yazı ikincil */
:root { --k-sky:#6fb7ff; --k-sun:#ffcf4d; --k-grass:#7ed37a; --k-berry:#ff7aa8; --k-grape:#b18cff; --k-bg:#fff8e8; }
:root[data-theme="dark"] { --k-bg:#221a14; }
body.kids .phone { background:var(--k-bg); }
body.kids .card.k-card { border-radius:26px; border-color:var(--k-sun); box-shadow:0 4px 0 var(--k-sun); }
.k-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.k-grid.games { grid-template-columns:repeat(3, 1fr); } .k-grid.themes { grid-template-columns:repeat(2, 1fr); } .k-grid.words { grid-template-columns:repeat(3, 1fr); }
.k-grid.opts { grid-template-columns:repeat(2, 1fr); } .k-grid.opts.three { grid-template-columns:repeat(3, 1fr); } .k-grid.opts.four { grid-template-columns:repeat(2, 1fr); }
.k-grid.mem { grid-template-columns:repeat(4, 1fr); gap:8px; }
.k-tile { position:relative; background:#fff; border:3px solid #ffe3a3; border-radius:22px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:15px; font-weight:800; color:var(--navy); box-shadow:0 5px 0 #f4c95d; min-height:96px; justify-content:center; }
:root[data-theme="dark"] .k-tile { background:#2c231d; border-color:#5a4520; box-shadow:0 5px 0 #4a3a1a; }
.k-tile:active, .k-tile.k-pop { transform:translateY(3px) scale(.98); box-shadow:0 2px 0 #f4c95d; }
.k-tile small { font-size:12px; color:var(--muted); font-weight:600; }
.k-tile.add { border-style:dashed; color:var(--muted); }
.k-tile.right { border-color:var(--ok); background:var(--ok-bg); } .k-tile.wrong { border-color:var(--bad); }
.k-tile.game { background:linear-gradient(180deg,#fff,#fff4d6); } .k-tile.theme { padding-bottom:16px; }
.k-emoji { font-size:46px; line-height:1.1; } .k-emoji.huge { font-size:84px; } .k-emoji.inline { font-size:28px; vertical-align:middle; }
.k-word { font-size:17px; } .k-big { font-size:22px; font-weight:800; margin:6px 0; text-align:center; }
.k-h { font-size:17px; margin:8px 0 0; color:var(--muted); }
.k-hint { text-align:center; }
.k-title { text-align:center; } .k-title h1 { margin:2px 0; } .k-title.small { display:flex; justify-content:space-between; font-weight:800; font-size:15px; }
.k-bar { display:block; width:80%; height:8px; background:#ffe3a3; border-radius:6px; overflow:hidden; margin-top:4px; } .k-bar b { display:block; height:100%; background:var(--k-grass); }
.k-star { position:absolute; top:6px; right:8px; font-size:18px; }
.k-head { display:flex; align-items:center; gap:10px; } .k-head b { font-size:18px; display:block; } .k-head small { color:var(--muted); }
.k-av { font-size:30px; background:#fff; border:3px solid #ffe3a3; border-radius:50%; width:56px; height:56px; } .k-av.on { border-color:var(--primary); background:#fdeee6; } .k-av.big { border:0; background:none; width:auto; height:auto; font-size:44px; }
.k-avatars { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; } .k-ages { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.k-badge { margin-left:auto; font-size:30px; background:#fff; border:3px solid #ffe3a3; border-radius:18px; padding:4px 10px; box-shadow:0 4px 0 #f4c95d; }
.k-koci { display:flex; align-items:center; gap:8px; cursor:pointer; } .k-koci .bubble { flex:1; font-size:18px; font-weight:800; } .k-koci .bubble small { display:block; font-weight:600; color:var(--muted); font-size:13px; }
.k-listen { text-align:center; padding:6px 0; } .k-speak { width:96px; height:96px; font-size:44px; }
.k-match { display:flex; gap:12px; } .k-match .col { flex:1; display:flex; flex-direction:column; gap:10px; }
.k-cell { background:#fff; border:3px solid #ffe3a3; border-radius:18px; padding:10px; font-size:18px; font-weight:800; min-height:70px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 0 #f4c95d; color:var(--navy); }
:root[data-theme="dark"] .k-cell { background:#2c231d; border-color:#5a4520; box-shadow:0 4px 0 #4a3a1a; }
.k-cell.sel { border-color:var(--k-sky); background:#eaf4ff; } .k-cell.done { border-color:var(--ok); background:var(--ok-bg); opacity:.7; }
.k-cell .k-emoji { font-size:40px; }
.k-mem { position:relative; aspect-ratio:1; border:0; background:none; perspective:600px; padding:0; }
.k-mem span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:16px; backface-visibility:hidden; transition:transform .35s; font-size:22px; font-weight:900; }
.k-mem .front { background:var(--k-grape); color:#fff; font-size:34px; } .k-mem .back { background:#fff; border:3px solid #ffe3a3; transform:rotateY(180deg); color:var(--navy); }
.k-mem .back .k-emoji { font-size:36px; } .k-mem .back b { font-size:15px; }
.k-mem.open .front, .k-mem.done .front { transform:rotateY(180deg); } .k-mem.open .back, .k-mem.done .back { transform:rotateY(0); } .k-mem.done .back { border-color:var(--ok); background:var(--ok-bg); }
.k-slots { display:flex; gap:6px; justify-content:center; margin:10px 0; } .k-slot { width:44px; height:52px; border-bottom:4px solid var(--k-sky); font-size:30px; font-weight:900; text-align:center; line-height:52px; color:var(--navy); }
.k-letters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .k-letter { width:56px; height:56px; font-size:28px; font-weight:900; border-radius:14px; border:3px solid #ffe3a3; background:#fff; box-shadow:0 4px 0 #f4c95d; color:var(--navy); }
.k-letter.used { opacity:.25; }
.k-sky { position:relative; height:330px; border-radius:24px; background:linear-gradient(180deg,#bfe0ff,#eaf6ff); overflow:hidden; }
.k-balloon { position:absolute; bottom:-10px; width:72px; height:88px; border:0; border-radius:50% 50% 50% 50% / 45% 45% 55% 55%; box-shadow:inset -8px -8px 0 rgba(0,0,0,.08); animation:k-float 6s ease-in-out infinite; }
.k-balloon::after { content:""; position:absolute; left:50%; bottom:-22px; width:2px; height:22px; background:#8d6e63; }
.k-balloon .k-emoji { font-size:34px; }
@keyframes k-float { 0% { transform:translateY(0) } 50% { transform:translateY(-200px) rotate(3deg) } 100% { transform:translateY(0) } }
.k-balloon.pop { animation:none; transform:scale(1.6); opacity:0; transition:all .3s; }
.k-palette { display:flex; gap:12px; justify-content:center; margin:8px 0; } .k-swatch { width:52px; height:52px; border-radius:50%; border:4px solid #fff; box-shadow:0 0 0 3px #ffe3a3; } .k-swatch.on { box-shadow:0 0 0 4px var(--navy); transform:scale(1.15); }
.k-count { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; font-size:38px; min-height:60px; padding:8px; background:#fff; border-radius:20px; border:3px solid #ffe3a3; } .k-num { font-size:34px; }
.k-figure { width:220px; margin:0 auto; display:block; } .k-part { cursor:pointer; } .k-part.hit * { filter:drop-shadow(0 0 8px #43a047); } .k-part.nope * { filter:drop-shadow(0 0 8px #e53935); }
.k-opt { display:flex; justify-content:space-between; align-items:center; font-size:19px; } .k-opt .k-mini { font-size:18px; opacity:.6; }
.k-emojis { text-align:center; font-size:44px; margin:4px 0 8px; } .k-emojis span { margin:0 4px; }
.k-sent { font-size:24px; font-weight:800; line-height:1.4; color:var(--navy); } .k-sent .w { padding:2px 3px; border-radius:6px; }
.k-sent .w.reading { background:var(--primary); color:#fff; border-radius:6px; }
.k-stars { text-align:center; font-size:30px; min-height:38px; margin:4px 0 0; }
.k-stickers { display:flex; flex-wrap:wrap; gap:8px; } .k-sticker { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:32px; border-radius:16px; background:#fff; border:3px solid #ffe3a3; color:#ccc; }
.k-sticker.on { border-color:var(--k-sun); } .k-sticker.badge.on { border-color:var(--k-grass); background:var(--ok-bg); }
.k-stickers.small .k-sticker { width:auto; height:auto; padding:6px 10px; font-size:16px; color:var(--navy); }
.k-garden { font-size:34px; line-height:1.4; min-height:44px; }
.k-sticker-win { margin:10px 0; } .k-sticker-win b { display:block; font-size:18px; }
.k-pin { font-size:34px; letter-spacing:10px; text-align:center; margin:8px 0; } .k-pad { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .k-key { font-size:24px; font-weight:800; padding:16px; border-radius:16px; border:2px solid var(--line); background:#fff; color:var(--navy); }
.k-bars { display:flex; align-items:flex-end; gap:6px; height:110px; margin-top:10px; } .k-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; } .k-bar-col i { display:block; width:100%; background:var(--k-sky); border-radius:8px 8px 0 0; min-height:3px; } .k-bar-col small { font-size:11px; color:var(--muted); margin-top:4px; }
.k-shake { animation:k-shake .35s; } @keyframes k-shake { 0%,100% { transform:translateX(0) } 25% { transform:translateX(-8px) } 75% { transform:translateX(8px) } }
@media (prefers-reduced-motion: reduce) { .k-balloon { animation:none; bottom:120px; } .k-shake { animation:none; } }
/* mod düğmesi + yeni çocuk oyunları + sözlük */
.mode { font-size:13px; font-weight:800; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--navy); }
:root[data-theme="dark"] .mode { background:#2c231d; border-color:#5a4520; color:#f6efe7; }
.k-tile.mode-c.on, .k-tile.mode-a.on { border-color:var(--primary); background:#fdeee6; }
.k-speak.small2 { width:72px; height:72px; font-size:32px; }
.k-road { position:relative; height:64px; background:#4a4a4a; border-radius:14px; margin:6px 0; overflow:hidden; }
.k-road::before { content:""; position:absolute; left:0; right:0; top:50%; height:4px; border-top:4px dashed #fff; opacity:.8; }
.k-car { position:absolute; top:8px; font-size:40px; transition:left .6s ease; transform:scaleX(1); }
.k-flag { position:absolute; right:8px; top:12px; font-size:32px; }
.k-blocks { display:flex; gap:8px; justify-content:center; } .k-block { flex:1; height:64px; font-size:24px; font-weight:900; border-radius:14px; border:3px solid #ffe3a3; background:#fff; color:var(--navy); box-shadow:0 4px 0 #f4c95d; }
.k-block.space { background:#eaf4ff; border-color:#6fb7ff; box-shadow:0 4px 0 #4a90d9; }
.k-lot { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; background:#e7e3d8; border-radius:20px; }
.k-lot-mid { display:flex; align-items:center; gap:10px; } .k-lotcar { font-size:56px; filter:saturate(1.6); }
.k-spot { border:3px dashed var(--navy); background:#fff; border-radius:14px; padding:10px 14px; font-weight:800; min-width:110px; color:var(--navy); }
.k-dressfig { display:flex; align-items:center; justify-content:center; gap:14px; } .k-worn { display:flex; flex-wrap:wrap; gap:6px; max-width:180px; } .k-worn span { font-size:30px; border:3px solid #ddd; border-radius:12px; padding:2px 4px; background:#fff; }
.k-dot { width:14px; height:14px; border-radius:50%; display:inline-block; }
.k-guests { display:flex; gap:10px; justify-content:center; } .k-guest { background:#fff; border:3px solid #ffe3a3; border-radius:20px; padding:8px 12px; display:flex; flex-direction:column; align-items:center; } .k-guest.on { border-color:var(--k-berry); background:#fff0f5; }
.k-tray { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:10px; background:#fff4d6; border-radius:20px; } .k-item { background:#fff; border:3px solid #ffe3a3; border-radius:16px; padding:6px 8px; display:flex; flex-direction:column; align-items:center; } .k-item.on { border-color:var(--k-sky); }
.k-plate { min-height:70px; border-radius:50%/40%; background:#fff; border:4px solid #ddd; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; font-size:34px; padding:10px 20px; }
.k-rooms { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .k-room { background:#fff; border:3px solid #ffe3a3; border-radius:18px; padding:10px; display:flex; flex-direction:column; align-items:center; box-shadow:0 4px 0 #f4c95d; color:var(--navy); font-weight:700; }
.k-scene { text-align:center; font-size:56px; } .k-scene .stack { display:flex; flex-direction:column; align-items:center; line-height:1; } .k-scene .side { display:flex; justify-content:center; gap:8px; }
.dict .dict-item { align-items:flex-start; }
/* çocuk avatarları (SVG, canlı) */
.av { width:56px; height:56px; display:inline-block; vertical-align:middle; overflow:visible; }
.av.big { width:84px; height:84px; } .av.huge { width:120px; height:120px; } .av.small { width:36px; height:36px; } .av.tiny { width:22px; height:22px; }
.av .av-body { transform-origin:50% 90%; animation:av-bob 3.2s ease-in-out infinite; }
.av .av-blink { transform-origin:50% 52%; animation:av-blink 4.5s infinite; }
.av .av-wave { transform-origin:50% 50%; animation:av-wave 2.4s ease-in-out infinite; }
.av .av-spin { animation:av-spin 1.6s linear infinite; transform-box:fill-box; transform-origin:center; }
.av .av-flash { animation:av-flash 1.8s ease-in-out infinite; }
.av.pop .av-body { animation:av-pop .5s ease-out; }
.av-emoji { font-size:44px; line-height:1; } .av-emoji.big { font-size:60px; } .av-emoji.small { font-size:28px; }
@keyframes av-bob { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-2px) rotate(-1.5deg) } }
@keyframes av-blink { 0%,92%,100% { transform:scaleY(1) } 95% { transform:scaleY(.1) } }
@keyframes av-wave { 0%,100% { transform:rotate(0) } 50% { transform:rotate(6deg) } }
@keyframes av-spin { to { transform:rotate(360deg) } }
@keyframes av-flash { 0%,100% { opacity:1 } 50% { opacity:.5 } }
@keyframes av-pop { 0% { transform:scale(1) } 40% { transform:scale(1.25) rotate(6deg) } 100% { transform:scale(1) } }
@media (prefers-reduced-motion: reduce) { .av * { animation:none !important; } }
.k-av.svg { padding:2px; } .k-av.svg .av { width:44px; height:44px; }
.rv label { display:block; margin-top:6px; font-size:12px; } .rv input, .rv textarea { margin-top:2px; font-size:15px; padding:8px 10px; } .rv .row { margin-top:8px; } .rv .row .btn { margin:0; padding:10px; font-size:14px; }
.rv-n { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:6px 0; padding:6px; border:1px dashed var(--line); border-radius:10px; } .rv-n input { font-size:13px; padding:6px 8px; }
.k-avwrap { display:inline-flex; cursor:pointer; }

.av.img { border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 2px 0 #f4c95d; } .av.img img { width:100%; height:100%; object-fit:cover; display:block; animation:av-bob 3.2s ease-in-out infinite; transform-origin:50% 90%; }
.av.img.pop img { animation:av-pop .5s ease-out; }

/* konuşan arkadaş */
.k-talker { position:relative; width:200px; height:200px; margin:0 auto; } .k-talker .av, .k-talker .av-emoji { width:200px; height:200px; font-size:150px; display:flex; align-items:center; justify-content:center; }
.k-talker .av.img img { animation:none; } .k-talker.talking .av.img img, .k-talker.talking .av .av-body { animation:av-talk .6s ease-in-out infinite; }
.k-mouth { position:absolute; transform:translate(-50%, -50%); pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
@keyframes av-talk { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-3px) rotate(1.5deg) } }
.k-fbubble { font-size:22px; font-weight:800; text-align:center; min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } .k-fbubble small { font-size:14px; font-weight:600; color:var(--muted); } .k-fbubble::before { display:none; }
.k-friendhead { display:flex; justify-content:center; }
.k-frow { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .k-fbtn { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:26px; width:64px; padding:8px 0; border-radius:18px; border:3px solid #ffe3a3; background:#fff; box-shadow:0 4px 0 #f4c95d; color:var(--navy); } .k-fbtn small { font-size:11px; font-weight:700; } .k-fbtn:disabled { opacity:.6; }

/* indirmeler */
.dl-row { display:flex; justify-content:flex-end; margin:-4px 0 -6px; } .dl-mini { border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 10px; font-size:13px; font-weight:700; color:var(--primary); } .dl-mini.done { color:var(--ok); border-color:var(--ok); }
.item.dl { align-items:center; } .dlbar { margin:6px 0 0; height:6px; width:160px; } .dlbtn { margin:0; padding:8px 14px; font-size:14px; width:auto; display:inline-block; }
/* ---------- rozetler: hareketli */
.rz { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:8px 4px; }
.rz b { font-size:12px; line-height:1.15; color:var(--navy); } .rz small { font-size:10.5px; color:var(--muted); line-height:1.2; }
.rz-disc { position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 35% 30%, #fff8e6, var(--rz) 70%); box-shadow:0 4px 0 rgba(0,0,0,.12), inset 0 0 0 4px rgba(255,255,255,.35); }
.rz.sm .rz-disc { width:56px; height:56px; } .rz.xl .rz-disc { width:150px; height:150px; }
.rz-disc img { width:100%; height:100%; object-fit:contain; display:block; } .rz-ph { display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size:38px; } .rz.xl .rz-ph { font-size:70px; }
.rz.locked .rz-disc { filter:grayscale(1) brightness(.75); opacity:.55; } .rz.locked b { color:var(--muted); }
.rz-shine { position:absolute; top:-20%; left:-60%; width:40%; height:140%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform:skewX(-20deg); pointer-events:none; }
.rz.earned .rz-shine { animation:rz-shine 4s ease-in-out infinite; } .rz.earned.bronz .rz-shine { animation-duration:7s; opacity:.6; } .rz.earned.gumus .rz-shine { animation-duration:5s; }
.rz.earned.altin .rz-disc { box-shadow:0 4px 0 rgba(0,0,0,.12), 0 0 18px 2px rgba(212,160,23,.55); animation:rz-breathe 2.6s ease-in-out infinite; } .rz-glow { position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 14px rgba(255,235,150,.9); animation:rz-glow 2.6s ease-in-out infinite; pointer-events:none; }
.rz.earned.elmas .rz-disc { box-shadow:0 4px 0 rgba(0,0,0,.12), 0 0 22px 3px rgba(63,182,216,.6); animation:rz-float 3.2s ease-in-out infinite; }
.rz-spark { position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; box-shadow:0 0 8px 2px #bff0ff; opacity:0; pointer-events:none; }
.rz.earned .rz-spark { animation:rz-spark 2.4s ease-in-out infinite; } .rz-spark.s1 { top:14%; left:70%; } .rz-spark.s2 { top:60%; left:14%; animation-delay:.8s !important; } .rz-spark.s3 { top:75%; left:72%; animation-delay:1.6s !important; }
.rz-new { position:absolute; top:2px; right:8px; background:var(--bad); color:#fff; font-size:9px; font-weight:900; padding:2px 6px; border-radius:999px; letter-spacing:.05em; } .rz-soon { font-size:9px; color:var(--muted); border:1px dashed var(--line); padding:1px 6px; border-radius:999px; }
.rz.rz-pop .rz-disc { animation:rz-pop .5s ease-out; }
.rz-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 2px; }
.rz-tabs { flex-wrap:wrap; gap:4px; } .rz-tabs button { font-size:12px; padding:5px 8px; } .rz-tabs small { opacity:.7; font-size:10px; }
.rz-ceremony { position:absolute; inset:0; background:rgba(31,42,68,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; z-index:20; }
.rz-ceremony.on { opacity:1; } .rz-cbox { background:var(--card); border-radius:28px; padding:22px 20px 16px; width:82%; text-align:center; transform:scale(.7) translateY(30px); transition:transform .45s cubic-bezier(.2,1.4,.4,1); }
.rz-ceremony.on .rz-cbox { transform:none; } .rz-ctitle { font-size:22px; font-weight:900; margin:0 0 6px; color:var(--navy); } .rz-ceremony.kids .rz-cbox { border:4px solid var(--k-sun); }
.rz.fresh .rz-disc { animation:rz-enter 1.1s cubic-bezier(.2,1.2,.4,1) both; } .rz.fresh.altin .rz-disc, .rz.fresh.elmas .rz-disc { animation:rz-enter 1.1s cubic-bezier(.2,1.2,.4,1) both, rz-breathe 2.6s 1.1s ease-in-out infinite; }
@keyframes rz-shine { 0%, 70% { left:-60%; } 100% { left:130%; } }
@keyframes rz-breathe { 0%,100% { transform:scale(1) } 50% { transform:scale(1.04) } }
@keyframes rz-glow { 0%,100% { opacity:.5 } 50% { opacity:1 } }
@keyframes rz-float { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-4px) rotate(-2deg) } }
@keyframes rz-spark { 0%,100% { opacity:0; transform:scale(.4) } 50% { opacity:1; transform:scale(1.2) } }
@keyframes rz-pop { 0% { transform:scale(1) } 40% { transform:scale(1.18) rotate(-6deg) } 100% { transform:scale(1) } }
@keyframes rz-enter { 0% { transform:scale(.2) rotate(-540deg); opacity:0 } 60% { transform:scale(1.15) rotate(10deg); opacity:1 } 100% { transform:scale(1) rotate(0) } }
@media (prefers-reduced-motion: reduce) { .rz * { animation:none !important; } }

/* oynatıcı + uyurken dinle */
.ex.playing { background:#fdeee6; border-radius:12px; outline:2px solid var(--primary); }
:root[data-theme="dark"] .ex.playing { background:#3d2a20; }
.sleep { text-align:center; padding-top:20px; } .sleep h2 { font-size:22px; margin:8px 0 2px; }
body.sleeping .phone { background:#0d0a09; } body.sleeping main, body.sleeping .top { color:#cbbfb4; } body.sleeping .nav { display:none; }

/* ipucu + neden böyle */
.hintbox { margin:6px 0; } .hintbox #hint { background:#fff8e6; border:1px dashed #f4c95d; border-radius:12px; padding:10px 12px; font-size:14px; line-height:1.45; color:var(--ink); } .hint-l { color:var(--primary); font-weight:800; }
:root[data-theme="dark"] .hintbox #hint { background:#2c231d; border-color:#5a4520; }
.why { margin-top:8px; font-size:14px; } .why summary { cursor:pointer; font-weight:800; color:var(--navy); } .why ul { margin:6px 0 0; padding-left:18px; line-height:1.45; } .why li { margin:4px 0; }

.item.fb { align-items:flex-start; } .item.fb.unseen { border-left:4px solid var(--primary); }

/* görüş bildirimi: üst çizgi + sayfa baloncuğu */
.fb-banner { display:flex; align-items:center; gap:8px; margin:0 18px 4px; padding:7px 10px; border-radius:12px; background:#fff4d6; border:1px solid #f4c95d; font-size:12.5px; font-weight:700; color:var(--navy); cursor:pointer; }
.fb-banner span { flex:1; } .fb-banner button { background:none; border:0; font-size:14px; color:var(--muted); padding:0 4px; }
:root[data-theme="dark"] .fb-banner { background:#3a2e1a; border-color:#5a4520; color:#f6efe7; }
.fb-bubble { position:absolute; right:14px; bottom:86px; width:50px; height:50px; border-radius:50%; border:0; background:var(--primary); color:#fff; font-size:24px; box-shadow:0 6px 16px rgba(0,0,0,.25); z-index:15; }
.fb-bubble:active { transform:scale(.95); }
.fb-pop { position:absolute; right:14px; bottom:144px; width:300px; max-width:calc(100% - 28px); background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,.25); z-index:16; display:flex; flex-direction:column; gap:6px; }
.fb-pop-head { display:flex; justify-content:space-between; align-items:center; } .fb-pop-head button { background:none; border:0; font-size:16px; color:var(--muted); }
.fb-pop input, .fb-pop textarea { font-size:14px; padding:8px 10px; } .fb-pop .btn { padding:10px; font-size:14px; }

.mode.rate { padding:5px 8px; margin-right:4px; } .mode.rate.on { border-color:var(--primary); color:var(--primary); }

.story .sent.reading { background:#fdeee6; border-radius:8px; box-shadow:0 0 0 3px #fdeee6; } :root[data-theme="dark"] .story .sent.reading { background:#3d2a20; box-shadow:0 0 0 3px #3d2a20; }

/* ℹ️ açıklama paneli + tekrar eden hata yönlendirmesi */
.info { background:none; border:0; font-size:20px; padding:0 4px; vertical-align:middle; cursor:pointer; }
.why-panel { display:block; margin:8px 0 4px; padding:10px 12px; border-radius:12px; background:#fff8e6; border:1px dashed #f4c95d; font-size:14px; line-height:1.45; }
.why-panel ul { margin:6px 0; padding-left:18px; } .why-panel li { margin:3px 0; } .why-panel .btn { margin:6px 0 0; padding:10px; font-size:14px; }
:root[data-theme="dark"] .why-panel { background:#2c231d; border-color:#5a4520; }
.nudge { margin-top:10px; padding:10px 12px; border-radius:12px; background:#fdeee6; border:1px solid var(--primary); font-weight:700; font-size:14px; } .nudge .btn { margin:8px 0 0; padding:10px; font-size:14px; }
:root[data-theme="dark"] .nudge { background:#3d2a20; }
.why .topic-link { margin:6px 0 0; padding:8px; font-size:13px; color:var(--primary); }

/* ---------- Ayarlar (14 Eyl): düzenli bölümler */
.set { display:flex; flex-direction:column; gap:12px; }
.set-sec h3 { margin:0 0 6px; font-size:17px; }
.set-sec .muted { margin:0 0 10px; } .set-sec .small { font-size:13px; margin:10px 0 0; }
.set-voices { display:flex; flex-direction:column; gap:10px; }
.set-voice { display:grid; grid-template-columns:auto auto 1fr; grid-template-areas:"radio ic tx" "pv pv pv"; align-items:center; gap:6px 10px; border:2px solid var(--line); border-radius:14px; padding:12px; cursor:pointer; }
.set-voice.on { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.set-voice input { grid-area:radio; width:20px; height:20px; margin:0; accent-color:var(--primary); }
.set-voice .ic { grid-area:ic; font-size:28px; line-height:1; }
.set-voice .tx { grid-area:tx; min-width:0; } .set-voice .tx b { display:block; font-size:16px; } .set-voice .tx small { display:block; color:var(--muted); font-size:13px; }
.set-voice .pv { grid-area:pv; display:flex; gap:8px; margin-top:4px; }
.set-sub { margin:14px 0 8px; font-size:15px; } .set-sub small { font-weight:600; font-size:12px; }
.set-voices.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.set-voices.two .set-voice { padding:10px; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"radio tx" "pv pv"; } .set-voices.two .set-voice .ic { display:none; } .set-voices.two .tx b { overflow-wrap:anywhere; }
.btn.sm { width:auto; display:inline-block; padding:8px 12px; font-size:14px; margin:0; }
.set-chips .chip { font-size:15px; padding:9px 14px; }
.set-rows { display:flex; flex-direction:column; }
.set-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.set-row:last-child { border-bottom:0; } .set-row span { color:var(--muted); } .set-row b { text-align:right; word-break:break-all; }

/* ---------- diyalog hikâyeleri */
.dlg { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.dlg-nar { font-style:italic; color:var(--muted); font-size:17px; line-height:1.5; padding:6px 8px; border-left:3px solid var(--line); }
.dlg-nar .en { color:var(--ink); }
.dlg-line { display:flex; flex-direction:column; gap:3px; max-width:88%; }
.dlg-line.m { align-self:flex-end; align-items:flex-end; }
.dlg-line .who { font-size:13px; font-weight:700; color:var(--muted); padding:0 6px; }
.dlg-line .bubble { display:block; background:#fff; border:1px solid var(--line); border-radius:16px 16px 16px 4px; padding:10px 12px; font-size:18px; line-height:1.45; }
.dlg-line.m .bubble { border-radius:16px 16px 4px 16px; background:#eef4fb; }
:root[data-theme="dark"] .dlg-line .bubble { background:var(--card); } :root[data-theme="dark"] .dlg-line.m .bubble { background:#1f2a3a; }
.dlg-line.c .bubble { background:#fff6dc; } :root[data-theme="dark"] .dlg-line.c .bubble { background:#3a3122; }
.dlg .tr { display:none; font-size:14px; color:var(--muted); margin-top:4px; }
.dlg .show .tr { display:block; }
.dlg .reading .bubble, .dlg-nar.reading { outline:2px solid var(--primary); }
.opt.sel { border-color:var(--primary); }
.dq .q { margin:0 0 4px; }

/* ---------- çocuk şarkıları */
.k-song { text-align:center; }
.k-playbtn { width:84px; height:84px; border-radius:50%; border:0; background:var(--primary); color:#fff; font-size:36px; box-shadow:0 5px 0 #b8562a; margin:4px auto 10px; display:block; }
.k-playbtn:active { transform:translateY(3px); box-shadow:0 2px 0 #b8562a; }
.k-lyrics { display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; padding:4px; }
.k-lyric { font-size:19px; font-weight:700; line-height:1.35; padding:8px 10px; border-radius:12px; color:var(--muted); transition:all .15s; }
.k-lyric.on { color:var(--ink); background:#fff3d6; transform:scale(1.04); }
:root[data-theme="dark"] .k-lyric.on { background:#3a2f16; }
.k-lyric .tr { display:none; font-size:14px; font-weight:600; color:var(--muted); }
.k-lyric.show .tr { display:block; }
.q-tools { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.q-tools .speak.small { margin:0; }
.dlg .bubble .why-panel { font-weight:400; }
.k-now { min-height:74px; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:6px 10px; font-size:26px; font-weight:900; line-height:1.25; padding:10px; margin:0 0 10px; border-radius:16px; background:#fff8e6; border:3px solid #ffe3a3; }
:root[data-theme="dark"] .k-now { background:#2b2412; border-color:#5a4a1e; }
.k-now .kw { color:var(--muted); transition:all .12s; }
.k-now .kw.done { color:var(--ink); }
.k-now .kw.on { color:var(--primary); transform:scale(1.22); }
.k-lyrics { max-height:34vh; }
.k-hint { font-size:15px; color:var(--muted); text-align:center; margin:4px 0 0; line-height:1.4; }
.k-hint.tr { font-size:18px; color:var(--ink); }
.k-hintbtn { background:#fff3d6; border:2px solid #ffe3a3; border-radius:999px; padding:4px 10px; font-size:14px; font-weight:700; margin-left:4px; }
:root[data-theme="dark"] .k-hintbtn { background:#3a2f16; border-color:#5a4a1e; color:var(--ink); }
/* fotoğraflı figür: saydam dokunma alanları, doğru/yanlışta renkli çerçeve */
.k-figure.photo { width:min(300px, 88vw); border-radius:18px; }
.k-figure.photo .k-part * { fill:rgba(255,255,255,0); stroke:none; pointer-events:all; }
.k-figure.photo .k-part.hit * { fill:rgba(67,160,71,.28); stroke:#43a047; stroke-width:8; filter:none; }
.k-figure.photo .k-part.nope * { fill:rgba(229,57,53,.25); stroke:#e53935; stroke-width:8; filter:none; }

/* Öğrendiklerim kutusu, XP sayfası ve kısa bilgi kutusu (Riven 16 Eyl) */
.ogr-card { display:block; width:100%; text-align:left; border:0; font:inherit; cursor:pointer; }
.ogr-card .ogr-n { font-size:30px; font-weight:800; color:var(--primary); line-height:1.1; }
.ogr-card .ogr-t { font-weight:700; margin-bottom:2px; }
.ogr-card p { margin:0; }
.xp-list .item { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.xp-list .xp-n { font-weight:800; color:var(--primary); white-space:nowrap; }
.link-xp { background:none; border:0; padding:0; font:inherit; color:var(--primary); font-weight:700; cursor:pointer; text-decoration:underline; }
.toast { position:absolute; left:12px; right:12px; bottom:76px; z-index:40; background:#1d2330; color:#fff; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.35; box-shadow:0 8px 24px rgba(0,0,0,.28); animation:toastIn .22s ease-out; overflow-wrap:anywhere; }
.toast.out { opacity:0; transition:opacity .5s; }
@keyframes toastIn { from { transform:translateY(12px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Arkadaş grupları (Riven 16 Eyl) */
.item.oda { cursor:pointer; align-items:center; }
.item.oda.kapali { opacity:.55; cursor:default; }
.item.oda .small { font-size:12px; }
.kurallar { margin:8px 0 0; padding-left:20px; } .kurallar li { margin-bottom:8px; line-height:1.4; }
.onay { display:flex; gap:10px; align-items:flex-start; margin:10px 2px; font-size:14px; line-height:1.4; }
.onay input { width:20px; height:20px; flex:0 0 auto; margin-top:1px; }
.oda-head { padding:8px 12px; background:var(--card); border-radius:12px; margin-bottom:8px; }
.oda-head b { display:block; } .oda-head .muted { font-size:12px; line-height:1.35; display:block; }
.msgs { display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; padding:2px; }
.msg { background:var(--card); border-radius:12px; padding:8px 10px; max-width:88%; align-self:flex-start; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.msg.mine { align-self:flex-end; background:var(--primary); color:#fff; }
.msg.mine .muted, .msg.mine .who { color:rgba(255,255,255,.85); }
.msg.koci { background:var(--warn-bg, #fff4e0); }
:root[data-theme="dark"] .msg.koci { background:#3a2f1a; }
.msg .who { font-size:12px; font-weight:700; color:var(--muted); display:flex; gap:6px; align-items:center; }
.msg .who .lv { font-size:10px; background:rgba(0,0,0,.08); border-radius:6px; padding:0 4px; }
.msg .who .tm { margin-left:auto; font-weight:500; opacity:.8; }
.msg .bd { font-size:15px; line-height:1.4; overflow-wrap:anywhere; white-space:pre-wrap; margin-top:2px; }
.msg .acts { display:flex; gap:6px; margin-top:4px; }
.msg .acts button, .msg .acts .th { background:none; border:0; font-size:13px; color:var(--muted); cursor:pointer; padding:2px 4px; border-radius:8px; }
.msg .acts .th.on { color:var(--primary); font-weight:700; }
.oda-yaz { display:flex; gap:6px; align-items:flex-end; margin-top:10px; }
.oda-yaz textarea { flex:1; min-height:42px; max-height:110px; resize:none; }
.btn.sm { width:auto; padding:10px 14px; margin:0; flex:0 0 auto; }

.item.ark { align-items:center; }
.row-sm { display:flex; gap:6px; flex:0 0 auto; }
.btn.ghost.sm { width:auto; padding:8px 12px; margin:0; font-size:13px; }

/* ------------------------------------------------------------------
   Basma geri bildirimi (Riven 16 Eyl: "bir şeye basarken belli olmuyor,
   gölgelenme gibi belirgin olsun"). Her dokunulabilir öğe basılınca
   hafifçe içeri çöker, gölgesi kısalır ve bir ton koyulaşır.
   .basili sınıfı app.js tarafından pointerdown'da eklenir: ekran yenilense
   ya da öğe <div> olsa bile geri bildirim garanti görünür.
   ------------------------------------------------------------------ */
.btn, .opt, .speak, .chip, .tile-btn, .mode-card, .lv-card, .k-tile, .k-playbtn,
.item.oda, .item.dl, .ogr-card, .where.tapcard, .icon, .nav button, .prow,
.msg .acts button, .fb-bubble, .link-xp, [data-lv], [data-oda], [data-g] {
  -webkit-tap-highlight-color:transparent; cursor:pointer;
  transition:transform .07s ease-out, box-shadow .07s ease-out, filter .07s ease-out, background-color .07s ease-out;
}
/* gölgeli düğmeler: içeri çök + gölge kısal */
.btn.basili, .opt.basili, .speak.basili, .chip.basili, .tile-btn.basili,
.mode-card.basili, .lv-card.basili, .k-playbtn.basili { transform:translateY(3px); }
.btn.basili { box-shadow:0 1px 0 var(--primary-dk); }
.btn.secondary.basili, .opt.basili, .chip.basili, .tile-btn.basili,
.mode-card.basili, .lv-card.basili { box-shadow:0 1px 0 var(--line); }
.btn.ok.basili { box-shadow:0 1px 0 #17724c; } .btn.bad.basili { box-shadow:0 1px 0 #a83a1c; }
.btn.ghost.basili { transform:none; background:rgba(0,0,0,.06); border-radius:12px; }
.speak.basili { box-shadow:0 1px 0 var(--primary-dk); }
/* gölgesiz öğeler (ve kural dışı kalan her şey): küçül + koyulaş */
.basili { transform:scale(.97); filter:brightness(.90); }
:root[data-theme="dark"] .basili { filter:brightness(1.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .basili { filter:brightness(1.22); } }
/* basılınca üstte kalsın (gölge komşunun altında kaybolmasın) */
.basili { position:relative; z-index:2; }

/* ---- 10 yeni çocuk oyunu (Riven 16 Eyl) ---- */
/* İlk harf */
.k-letters { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.k-letter { width:68px; height:68px; border-radius:18px; border:3px solid #f4c95d; background:#fff8e6; font-size:32px; font-weight:800; color:#8a5a12; text-transform:lowercase; box-shadow:0 4px 0 #f4c95d; }
.k-letter.right { background:#d8f5e3; border-color:#2e9e6a; color:#1c7a4f; }
.k-letter.wrong { background:#ffe2dd; border-color:#d64a3c; }
/* Sepete ayır */
.k-baskets { display:flex; gap:12px; margin-top:12px; }
.k-basket { flex:1; border:3px dashed #f0a94b; border-radius:18px; background:#fff8e6; padding:14px 8px; font-size:15px; font-weight:800; color:#8a5a12; display:flex; flex-direction:column; align-items:center; gap:4px; }
.k-basket .k-emoji { font-size:40px; }
.k-basket.right { background:#d8f5e3; border-color:#2e9e6a; border-style:solid; }
/* Ne kayboldu */
.k-grid.kayip { grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); }
.k-grid.kayip .k-tile.show { padding:10px; }
.k-tile.bos { display:flex; align-items:center; justify-content:center; font-size:34px; background:#fff3cf; border-style:dashed; }
/* Doğru mu */
.k-yesno { display:flex; gap:14px; margin-top:12px; }
.k-yn { flex:1; border:0; border-radius:20px; padding:18px 8px; font-size:40px; display:flex; flex-direction:column; align-items:center; gap:2px; box-shadow:0 5px 0 rgba(0,0,0,.12); }
.k-yn small { font-size:14px; font-weight:800; }
.k-yn.evet { background:#d8f5e3; color:#1c7a4f; } .k-yn.hayir { background:#ffe2dd; color:#a8331f; }
.k-yn.right { outline:4px solid #2e9e6a; }
/* Sırayı tamamla */
.k-pattern { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.k-pat { font-size:36px; background:#fff8e6; border-radius:14px; padding:6px 8px; border:2px solid #f4c95d; }
.k-pat.soru { background:#fff3cf; border-style:dashed; animation:patBlink 1.1s infinite; }
@keyframes patBlink { 50% { transform:scale(1.08); } }
/* Nerede (edatlar): kap ve nesne CSS ile konumlanır */
.k-grid.sahneler { grid-template-columns:repeat(2, 1fr); }
.k-sahne { position:relative; height:88px; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.k-sahne .kap { font-size:46px; position:absolute; left:50%; transform:translateX(-50%); bottom:8px; }
.k-sahne .nesne { font-size:28px; position:absolute; z-index:2; }
.k-sahne.p-in .nesne { bottom:16px; left:50%; transform:translateX(-50%) scale(.62); }
.k-sahne.p-on .nesne { bottom:54px; left:50%; transform:translateX(-50%); }
/* altında: kabı yukarı kaldır, nesneyi tam altına koy — "içinde" ile karışmasın */
.k-sahne.p-under .kap { bottom:30px; }
.k-sahne.p-under .nesne { bottom:0; left:50%; transform:translateX(-50%) scale(.85); z-index:3; }
.k-sahne.p-next-to .nesne { bottom:10px; left:78%; }
.sahne-btn { display:flex; flex-direction:column; align-items:center; gap:2px; }
.sahne-btn b { text-transform:lowercase; }
/* Saat */
.k-emoji.saat { font-size:88px; }
/* Alışveriş */
.k-shelf { display:flex; justify-content:center; margin:10px 0; }
.k-shelf-item { border:3px solid #f4c95d; background:#fff8e6; border-radius:20px; padding:14px 22px; display:flex; flex-direction:column; align-items:center; gap:4px; box-shadow:0 5px 0 #f4c95d; }
.k-shelf-item .k-emoji { font-size:52px; }
.k-shelf-item small { font-size:12px; color:#8a5a12; font-weight:700; }
.k-cart { display:flex; align-items:center; gap:8px; justify-content:center; min-height:64px; background:#fff3cf; border-radius:18px; padding:10px; margin-top:8px; flex-wrap:wrap; }
.k-cart .k-emoji { font-size:40px; }
.k-cart-in { display:flex; gap:4px; flex-wrap:wrap; font-size:28px; }

.k-tile.game { position:relative; }
.k-yenirozet { position:absolute; top:-6px; right:-4px; background:#d64a3c; color:#fff; font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; box-shadow:0 2px 4px rgba(0,0,0,.2); }

/* ---- Hikâyeler / Diyaloglar (Riven 16 Eyl: "ayıralım, daha düzgün dizayn edelim") ---- */
/* Sıradaki kart */
.card.devam { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:0; font:inherit; color:var(--ink); position:relative; padding:14px; }
.card.devam .dv-lbl { position:absolute; top:8px; left:14px; font-size:11px; font-weight:800; color:var(--primary); letter-spacing:.02em; }
.card.devam .dv-ic { font-size:34px; flex:none; margin-top:10px; }
.card.devam .dv-tx { flex:1; min-width:0; margin-top:10px; }
.card.devam .dv-tx b { display:block; font-size:16px; overflow-wrap:anywhere; }
.card.devam .dv-tx small { color:var(--muted); font-size:13px; }
/* Raflar */
.shelves { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.shelf { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--primary); border-radius:var(--radius); padding:14px 12px; font:inherit; color:var(--ink); box-shadow:0 3px 0 var(--line); }
.shelf.s-diyalog { border-left-color:#7a5af5; } .shelf.s-ata { border-left-color:#c62828; }
.shelf .sh-ic { font-size:32px; flex:none; }
.shelf .sh-tx { flex:1; min-width:0; }
.shelf .sh-tx b { display:block; font-size:16px; }
.shelf .sh-tx small { display:block; color:var(--muted); font-size:12.5px; line-height:1.35; margin-top:1px; }
.shelf .sh-go { font-size:22px; color:var(--muted); flex:none; }
.sh-bar { display:block; height:6px; border-radius:99px; background:var(--line); margin:7px 0 3px; overflow:hidden; }
.sh-bar b { display:block; height:100%; background:var(--primary); border-radius:99px; }
.sh-bar.big { height:8px; margin:10px 0 2px; }
.shelf .sh-n { font-size:11.5px; }
/* Liste başlığı */
.lst-head { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.lst-head h2 { margin:0 0 4px; font-size:19px; }
.lst-head p { margin:0; font-size:13px; line-height:1.4; }
.lst-head .counter { margin:0; }
.chips.lv-chips { margin:10px 0 4px; }
.chip.sm { padding:7px 12px; font-size:14px; box-shadow:0 2px 0 var(--line); }
/* Kitap kartları */
.books { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.book { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font:inherit; color:var(--ink); box-shadow:0 2px 0 var(--line); }
.book.done { background:linear-gradient(90deg, var(--ok-bg), var(--card) 55%); }
.book .bk-cover { position:relative; width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; font-size:28px; background:var(--bg); border-radius:12px; }
.book.bk-dialog .bk-cover { background:#efeaff; } :root[data-theme="dark"] .book.bk-dialog .bk-cover { background:#2c2545; }
.book .bk-tick { position:absolute; right:-4px; bottom:-4px; background:var(--ok); color:#fff; font-size:11px; font-weight:800; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.book .bk-tx { flex:1; min-width:0; }
.book .bk-tx b { display:block; font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
.book .bk-tx small { display:block; color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
.bk-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; font-size:11.5px; color:var(--muted); }
.bk-meta .tag { font-size:11px; padding:1px 7px; }

/* Diyalogda kelimeye dokunma (Riven 16 Eyl hatası: ses gelmiyordu) */
.dlg .w { cursor:pointer; border-radius:5px; padding:0 1px; }
.dlg .w.on { background:#fdeee6; color:var(--primary); font-weight:700; }
:root[data-theme="dark"] .dlg .w.on { background:#3d2a20; }

/* Yolda 🎧 konu anlatımı düğümü (Riven 17 Eyl) */
.prow.konu .node { background:#efeaff; border-color:#7a5af5; }
:root[data-theme="dark"] .prow.konu .node { background:#2c2545; }
.prow.konu .lbl b, .prow.konu .lbl { font-weight:700; }

/* th/dh sesi uyarısı (Riven 17 Eyl) */
.th-info { background:none; border:0; color:var(--primary); font-size:14px; padding:0 2px; cursor:pointer; vertical-align:middle; }

/* Hata odağı görünürlüğü (Riven 17 Eyl, dış değerlendirme) */
.hata-serit { background:#fff4e0; border-left:4px solid var(--warn); border-radius:10px; padding:8px 10px; font-size:13px; margin:0 0 8px; line-height:1.4; }
:root[data-theme="dark"] .hata-serit { background:#3a2f1a; }
.hata-kart { display:flex; gap:14px; align-items:center; }
.hata-kart .hk-n { font-size:34px; font-weight:800; color:var(--ok); line-height:1; }
.hata-kart .hk-l { font-size:12px; color:var(--muted); font-weight:700; margin-top:2px; }
.hata-kart .hk-sag { flex:1; min-width:0; } .hata-kart .hk-sag p { margin:4px 0 0; font-size:12.5px; line-height:1.4; }

/* Yolda bölüm (ünite) başlıkları — Riven 17 Eyl */
.unite-bas { display:flex; flex-direction:column; gap:2px; margin:14px 0 6px; padding:8px 10px; background:var(--bg); border-left:4px solid var(--primary); border-radius:10px; }
.unite-bas b { font-size:13px; color:var(--primary); letter-spacing:.02em; }
.unite-bas span { font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.unite-bas .sh-bar { margin:5px 0 2px; } .unite-bas small { font-size:11px; color:var(--muted); }
.unite-kelimeler { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.unite-kelimeler .uk { background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:13px; font-weight:600; }

/* Sohbet yönetimi (Riven 17 Eyl) */
.item.sikayet { align-items:flex-start; } .item.sikayet.islendi { opacity:.6; }
.item.sikayet .sk-metin { margin:4px 0 0; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.item.sikayet .row-sm { flex-wrap:wrap; justify-content:flex-end; }

/* ⚔️ Düello ve Pratik sekmesi (Riven 18 Eyl) */
.duel-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.duel-card { display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:var(--card); border:2px solid #d9d4fb; border-radius:var(--radius); padding:12px; text-align:left; font:inherit; color:var(--ink); box-shadow:0 3px 0 #d9d4fb; min-width:0; }
:root[data-theme="dark"] .duel-card { border-color:#3c3489; box-shadow:0 3px 0 #3c3489; }
.duel-card .ic { font-size:26px; } .duel-card b { font-size:14.5px; overflow-wrap:anywhere; } .duel-card small { color:var(--muted); font-size:12px; font-weight:600; }
.card.davet { border-left:5px solid #7a5af5; } .card.davet p { margin:0 0 8px; }
.duel-skor { display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:8px; font-size:15px; }
.duel-skor small { color:var(--muted); font-size:12px; } .duel-skor span { min-width:0; overflow-wrap:anywhere; }
.duel-geri { font-size:88px; font-weight:800; color:#7a5af5; line-height:1; text-align:center; animation:patBlink 1s infinite; }
.duel-ifade { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.duel-ifade button { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--ink); }
.duel-ifade button:disabled { opacity:.45; }
.duel-msj p { margin:4px 0; padding:7px 10px; border-radius:10px; background:#efeaff; font-size:13.5px; } .duel-msj p.benim { background:var(--bg); }
.duel-msj small { color:var(--muted); } :root[data-theme="dark"] .duel-msj p { background:#2c2545; }
button.item.oda { display:flex; justify-content:space-between; width:100%; text-align:left; font:inherit; color:var(--ink); }

/* 🗓️ Bugünkü oturum adımları */
.oturum-adim.bitti { opacity:.6; } .oturum-adim.bitti b { color:var(--ok); }
.oturum-adim.simdi { border:2px solid var(--primary); }

/* 🧩 Kelime grupları (chunk) */
.chunks { margin-top:16px; text-align:left; border-top:1px dashed var(--line, #e6dccf); padding-top:10px; }
.chunks .lbl { font-size:.85rem; color:var(--muted, #8a7f72); margin:0 0 6px; }
.chunk { display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; padding:7px 2px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; border-radius:10px; }
.chunk b { flex:0 0 auto; } .chunk .muted { flex:1; font-size:.9rem; }

/* 🗺️ Müfredat haritası */
.mf-konu { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; border-top:1px solid var(--line, #eee3d6); padding:10px 2px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.mf-konu .no { flex:0 0 26px; height:26px; border-radius:50%; background:var(--bg2, #f1e7da); display:grid; place-items:center; font-size:.8rem; font-weight:700; }
.mf-konu.bitti .no { background:var(--ok); color:#fff; } .mf-konu .ad { flex:1; }

.where .sonbiten { margin:8px 0 0; font-size:13px; color:var(--muted); overflow-wrap:anywhere; } .where .sonbiten .link { font-size:13px; }

/* Özet → eksik konuya yönlendirme kartı */
.ozet-yon { border:2px solid var(--primary); } .ozet-yon.zayif { background:var(--warn-bg, #fff4e0); } :root[data-theme="dark"] .ozet-yon.zayif { background:#3a2f1a; }
.ozet-yon .btn { margin-top:8px; }

/* Testler kartı (satır satır) + soru noktaları */
.test-list { display:block; margin:8px 0 10px; }
.test-row { display:flex; align-items:center; gap:10px; width:100%; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:10px 12px; margin-top:6px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.test-row .no { flex:0 0 28px; height:28px; border-radius:50%; background:var(--bg2, #f1e7da); display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.test-row .ad { flex:1; } .test-row .ad b { display:block; } .test-row .ad small { color:var(--muted); }
.test-row .yz { color:#e0a100; letter-spacing:1px; font-size:.95rem; } .test-row .dr { flex:0 0 auto; font-size:.85rem; font-weight:700; color:var(--muted); }
.test-row.gecti { border-color:var(--ok); } .test-row.gecti .no { background:var(--ok); color:#fff; } .test-row.gecti .dr { color:var(--ok); }
.test-row.kaldi { border-color:var(--bad); } .test-row.kaldi .dr { color:var(--bad); }
.test-row.sira { box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.test-nokta { display:flex; gap:5px; margin-top:10px; } .test-nokta i { flex:1; height:6px; border-radius:3px; background:var(--line); } .test-nokta i.dolu { background:var(--primary); opacity:.55; } .test-nokta i.simdi { background:var(--primary); }
.yanlis-grup { margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); } .yanlis-grup:first-of-type { border-top:0; padding-top:0; }

/* 📊 Huni */
.huni-satir { display:grid; grid-template-columns:1fr 90px 70px; gap:8px; align-items:center; padding:7px 0; border-top:1px solid var(--line); font-size:.92rem; } .huni-satir .n { text-align:right; }

.adim-kalan { margin:0 0 6px; font-size:.82rem; color:var(--muted); text-align:right; } .adim-kalan b { color:var(--primary); }

.news-git { display:block; margin-top:6px; background:none; border:0; padding:4px 0; color:var(--primary); font:inherit; font-weight:700; cursor:pointer; text-align:left; }

/* 🛠️ Yönetim paneli: bilgisayarda geniş açılır (telefon çerçevesi genişler), telefonda alt alta */
body.panel-acik .phone { width:min(1180px, 96vw); height:min(920px, 94vh); border-radius:20px; border-width:4px; }
.pn { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:start; }
.pn-menu { display:flex; flex-direction:column; gap:2px; position:sticky; top:0; }
.pn-menu button { display:flex; gap:8px; align-items:center; background:none; border:0; padding:9px 10px; border-radius:10px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.pn-menu button.on { background:var(--card); font-weight:700; box-shadow:0 0 0 1px var(--line); } .pn-menu .pn-kilit { margin-top:12px; color:var(--muted); }
.pn-govde h1 { font-size:22px; margin:0 0 12px; overflow-wrap:anywhere; } .pn-govde .card h2 { font-size:15px; margin:0 0 8px; }
.pn-sayilar { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:14px; }
.pn-sayi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; } .pn-sayi small { display:block; color:var(--muted); font-size:12px; } .pn-sayi b { font-size:26px; } .pn-sayi span { margin-left:6px; color:var(--muted); font-size:13px; }
.pn-arac { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; } .pn-arac input { flex:1; min-width:180px; } .pn-arac select { padding:10px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:inherit; }
.pn-tablo-sar { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.pn-tablo { width:100%; border-collapse:collapse; font-size:13.5px; } .pn-tablo th { text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.pn-tablo td { padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; } .pn-tablo tbody tr { cursor:pointer; } .pn-tablo tbody tr:hover { background:var(--bg); } .pn-tablo tr:last-child td { border-bottom:0; }
.pn-nokta { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--line); margin-right:7px; } .pn-nokta.acik { background:var(--ok); }
.pn-rozet { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; background:var(--bg); color:var(--muted); } .pn-rozet.ok { background:var(--ok-bg); color:var(--ok); } .pn-rozet.uyari { background:var(--warn-bg, #fff4e0); color:#a86400; } .pn-rozet.kotu { background:var(--bad-bg); color:var(--bad); }
.pn-izgara { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; margin:12px 0; } .pn-izgara .card { margin:0; }
.pn-ikili { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:13.5px; } .pn-ikili:first-of-type { border-top:0; } .pn-ikili span:last-child { text-align:right; white-space:nowrap; } .pn-ikili span:first-child { overflow-wrap:anywhere; }
.pn-cubuk { display:inline-block; width:70px; height:6px; border-radius:3px; background:var(--line); vertical-align:middle; margin-right:6px; overflow:hidden; } .pn-cubuk i { display:block; height:100%; background:var(--primary); }
.pn-kapi input { width:100%; }
@media (max-width: 760px) { .pn { grid-template-columns:1fr; } .pn-menu { flex-direction:row; overflow-x:auto; position:static; } .pn-menu button { white-space:nowrap; } .pn-menu .pn-kilit { margin-top:0; } }

/* 🎫 Üyelik bilgisi */
.uyelik-kart { border:2px solid var(--ok); } .uyelik-kart.az { border-color:#e0a100; } .uyelik-kart.bitti { border-color:var(--bad); }
.uyelik-kart .uyelik-gun { font-size:18px; margin:4px 0; } .uyelik-kart .uyelik-gun b { font-size:32px; }
.uyelik-uyari { display:block; width:100%; margin:6px 0; padding:9px 12px; border-radius:12px; border:1px solid #e0a100; background:var(--warn-bg, #fff4e0); color:var(--ink); font:inherit; font-size:14px; text-align:left; cursor:pointer; } :root[data-theme="dark"] .uyelik-uyari { background:#3a2f1a; }

/* 📩 Yöneticiden mesaj penceresi */
.msj-back { display:flex; align-items:center; justify-content:center; } .sheet.msj { border-radius:20px; max-width:340px; width:calc(100% - 40px); padding:20px; text-align:left; }
.msj .msj-kimden { margin:0 0 6px; font-size:12.5px; font-weight:700; color:var(--primary); } .msj h2 { margin:0 0 8px; font-size:19px; } .msj .msj-metin { margin:0 0 14px; font-size:15.5px; line-height:1.5; overflow-wrap:anywhere; }
.pn-msj { border-top:1px solid var(--line); padding-top:8px; } .pn-msj:first-of-type { border-top:0; }
.pn .link, .pn-govde .link { background:none; border:0; padding:0; color:var(--primary); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }

/* 🔔 Anlık bildirim kutusu + Pratik sekmesindeki sayı */
.toast.dokun { cursor:pointer; border-left:4px solid var(--primary); } .toast.dokun::after { content:" ›"; font-weight:700; }
.nav button { position:relative; } .nav-sayi { position:absolute; top:4px; left:calc(50% + 8px); min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:11px; font-weight:700; font-style:normal; line-height:17px; text-align:center; }

.sil-liste { margin:6px 0 10px 18px; padding:0; font-size:14.5px; line-height:1.5; }

/* ⚑ Bu soru hatalı + 🎯 Özel ders */
.hatali-soru { display:block; margin:14px auto 0; background:none; border:0; padding:6px 8px; font:inherit; font-size:12.5px; color:var(--muted); text-decoration:underline; cursor:pointer; } .hatali-soru:disabled { text-decoration:none; color:var(--ok); }
.od-seviye { border-top:1px solid var(--line); padding:8px 0; } .od-seviye summary { cursor:pointer; font-weight:700; padding:4px 0; } .od-seviye .list { margin-top:8px; }

.od-satir { display:flex; gap:6px; align-items:stretch; } .od-satir .item { flex:1; margin:0; } .od-hizli { flex:0 0 46px; border:2px solid var(--line); border-radius:14px; background:var(--card); font-size:20px; cursor:pointer; }

/* Özel ders: kelime temaları, kalıp grupları, önizleme */
.od-cipler { display:flex; flex-wrap:wrap; gap:6px; } .od-cipler .chip small { opacity:.6; margin-left:3px; }
.od-onizleme { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px; } .od-kelime { display:flex; flex-direction:column; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:7px 9px; font:inherit; color:var(--ink); cursor:pointer; } .od-kelime span { font-size:12.5px; color:var(--muted); }

/* 🏟️ Koçi Arena (Not 85) */
.arena-hero { background:linear-gradient(135deg,#1f2a44 0%,#3c3489 100%); color:#fff; border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:0 4px 0 #161d31; }
.arena-hero .ah-ust { display:flex; gap:12px; align-items:center; } .arena-hero .ah-ikon { font-size:44px; line-height:1; }
.arena-hero h1 { margin:0 0 2px; font-size:22px; color:#fff; } .arena-hero p { margin:0; font-size:14px; color:#d9d4fb; line-height:1.35; }
.arena-hero .ah-alt { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .arena-hero .ah-alt span { background:rgba(255,255,255,.14); border-radius:999px; padding:5px 11px; font-size:13px; font-weight:600; }
.arena-kod .row { display:flex; gap:8px; } .arena-kod input { flex:1; min-width:0; font-size:18px; letter-spacing:3px; text-align:center; font-weight:700; } .arena-kod input::placeholder { letter-spacing:0; font-weight:500; font-size:14px; } .arena-kod .btn { width:auto; padding-inline:18px; }
.arena-kod p { margin:6px 0 0; min-height:0; }
.arena-oyun { border:2px solid #d9d4fb; box-shadow:0 3px 0 #d9d4fb; } :root[data-theme="dark"] .arena-oyun { border-color:#3c3489; box-shadow:0 3px 0 #3c3489; }
.ao-bas { display:flex; gap:10px; align-items:center; } .ao-ikon { font-size:34px; } .ao-bas h2 { margin:0; } .ao-bas small { color:var(--muted); font-weight:600; font-size:12.5px; }
.arena-oyun p { margin:8px 0 10px; } .ao-dugme { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .ao-dugme .btn { margin:0; padding:11px 8px; font-size:14.5px; } .ao-dugme .btn:first-child:not(.secondary) { grid-column:1 / -1; font-size:16px; padding:13px; }
.arena-ekip { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 6px; margin:8px -4px 0; scrollbar-width:none; } .arena-ekip::-webkit-scrollbar { display:none; }
.ae { flex:0 0 112px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:10px 8px; text-align:center; display:flex; flex-direction:column; gap:3px; }
.ae-yuz { font-size:30px; } .ae b { font-size:14px; } .ae b i { font-style:normal; font-size:12px; } .ae small { color:var(--muted); font-size:11.5px; line-height:1.3; }
.arena-yakinda { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .arena-yakinda span { background:var(--bg); border:1px dashed var(--line); border-radius:999px; padding:5px 10px; font-size:13px; color:var(--muted); }
.kucuk { font-size:12.5px; }
.arena-giris { display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; color:#fff; background:linear-gradient(135deg,#1f2a44 0%,#3c3489 100%); border:0; border-radius:var(--radius); padding:14px; margin-bottom:12px; box-shadow:0 4px 0 #161d31; }
.arena-giris .ic { font-size:34px; } .arena-giris b { display:block; font-size:17px; } .arena-giris small { color:#d9d4fb; font-size:13px; } .arena-giris .go { margin-left:auto; font-weight:700; white-space:nowrap; }

.ar-ust { display:flex; justify-content:space-between; align-items:center; margin:0 2px 8px; font-size:15px; } .ar-bag { font-size:11.5px; color:var(--warn); font-weight:600; } .ar-bag.iyi { color:var(--ok); }
.ar-bekle { text-align:center; } .ar-kod { font-size:44px; font-weight:800; letter-spacing:4px; margin:4px 0 10px; color:var(--primary); font-variant-numeric:tabular-nums; }
.kucuk-btn { width:auto !important; padding:8px 16px !important; font-size:14px !important; display:inline-block; }
.ar-geri { font-size:88px; font-weight:800; color:var(--primary); line-height:1.1; }
.ar-kisiler { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:14px 0; } .ar-kisiler.oyun { margin:0 0 10px; }
.ar-kisi { display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:9px 6px; min-width:0; position:relative; }
.ar-kisiler.oyun .ar-kisi { background:var(--card); padding:7px 6px; }
.ar-kisi .yz { font-size:26px; line-height:1.1; } .ar-kisi b { font-size:13.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ar-kisi b i, .ar-sira b i { font-style:normal; font-size:11px; }
.ar-kisi.ben { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; } .ar-kisi.bos { opacity:.45; border-style:dashed; } .ar-kisi.koptu { opacity:.5; } .ar-kisi.koptu::after { content:"bağlantı koptu"; font-size:10.5px; color:var(--warn); }
.ar-kisi.elendi { opacity:.45; } .ar-kisi .bm { font-size:12px; letter-spacing:1px; } .ar-kisi .bm em { font-style:normal; opacity:.22; filter:grayscale(1); } .ar-kisi .dr { position:absolute; top:5px; right:7px; font-size:12px; color:var(--muted); }
.ar-soru { text-align:center; overflow:hidden; position:relative; padding-top:20px; } .ar-sure { position:absolute; left:0; right:0; top:0; height:7px; background:var(--line); } .ar-sure i { display:block; height:100%; width:100%; background:var(--primary); }
.ar-tur { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); font-weight:600; } .ar-kelime { font-size:34px; margin:10px 0 2px; overflow-wrap:anywhere; } .ar-okunus { margin:0 0 6px; }
.ar-secenek { display:grid; gap:8px; margin-top:12px; } .ar-secenek button { font:inherit; font-size:16.5px; font-weight:600; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:14px; padding:13px 10px; box-shadow:0 3px 0 var(--line); overflow-wrap:anywhere; }
.ar-secenek button.secili { border-color:var(--primary); box-shadow:0 3px 0 var(--primary); } .ar-secenek button.dogru { border-color:var(--ok); background:var(--ok-bg); color:var(--ok); box-shadow:0 3px 0 var(--ok); } .ar-secenek button.yanlis { border-color:var(--bad); background:var(--bad-bg); color:var(--bad); box-shadow:0 3px 0 var(--bad); } .ar-secenek button.sonuk { opacity:.45; }
.ar-sonuc { font-weight:700; margin:10px 0 0; } .ar-sonuc.iyi { color:var(--ok); } .ar-sonuc.kotu { color:var(--bad); } .ar-elendin { background:var(--warn-bg); color:var(--warn); border-radius:12px; padding:8px; font-size:13.5px; font-weight:600; }
.ar-ifade { margin-top:10px; } .ar-ifadeler { display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; } .ar-ifadeler::-webkit-scrollbar { display:none; }
.ar-ifadeler button { flex:0 0 auto; font:inherit; font-size:13px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 12px; }
.ar-son .ar-xp { font-size:26px; font-weight:800; color:var(--ok); margin:4px 0 0; }
.ar-sira .sr { display:flex; align-items:center; gap:8px; padding:9px 4px; border-bottom:1px solid var(--line); } .ar-sira .sr:last-child { border-bottom:0; } .ar-sira .sr.ben { background:var(--warn-bg); border-radius:10px; padding-inline:8px; }
.ar-sira .md { width:26px; text-align:center; font-size:18px; } .ar-sira .yz { font-size:22px; } .ar-sira b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ar-sira .pn { color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; }
.ar-engel { background:none; border:0; font-size:16px; padding:2px 4px; opacity:.6; }
.ar-hatalar { margin-top:10px; text-align:left; } .ar-hatalar .hk { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); } .ar-hatalar .hk b { color:var(--primary); } .ar-hatalar .hk small { color:var(--muted); width:100%; }
.ar-bilgi { position:sticky; bottom:8px; background:var(--navy); color:#fff; border-radius:12px; padding:9px 12px; font-size:13.5px; text-align:center; margin-top:10px; }
.ar-kisiler.oyun { grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:6px; } .ar-kisiler.oyun .ar-kisi { padding:5px 3px; gap:0; border-radius:12px; } .ar-kisiler.oyun .yz { font-size:20px; } .ar-kisiler.oyun b { font-size:12px; } .ar-kisiler.oyun .bm { font-size:10.5px; letter-spacing:0; } .ar-kisiler.oyun .dr { top:2px; right:4px; font-size:10.5px; }
.ar-soru { padding-bottom:12px; } .ar-soru .ar-kelime { font-size:30px; margin:6px 0 0; } .ar-soru .ar-secenek { gap:7px; margin-top:8px; } .ar-soru .ar-secenek button { padding:11px 10px; font-size:16px; }

.ar-kisi.sirada { border-color:var(--ok); box-shadow:0 0 0 1px var(--ok) inset; }
.ar-soru.sol { text-align:left; } .ar-tr { font-size:17px; font-weight:600; margin:8px 0; } .ar-tr.buyuk { font-size:21px; margin:14px 0; } .ar-cozum { font-size:18px; font-weight:700; color:var(--ok); margin:8px 0; overflow-wrap:anywhere; }
.ar-dizi { min-height:52px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; border:2px dashed var(--line); border-radius:14px; padding:8px; margin:8px 0; }
.ar-parca { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; } .ar-parca button, .ar-dizi button, .ar-avci button { font:inherit; font-size:17px; font-weight:600; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:12px; padding:9px 12px; box-shadow:0 3px 0 var(--line); }
.ar-parca button:disabled { opacity:.25; } .ar-dizi button { border-color:var(--primary); box-shadow:0 3px 0 var(--primary); }
.ar-avci { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:10px 0; } .ar-avci button.yanlis { border-color:var(--bad); background:var(--bad-bg); color:var(--bad); box-shadow:0 3px 0 var(--bad); } .ar-avci button.dogru { border-color:var(--ok); background:var(--ok-bg); color:var(--ok); } .ar-avci button.sonuk { opacity:.55; }
.ar-koci { background:var(--warn-bg); border-radius:12px; padding:10px; font-size:14px; line-height:1.4; text-align:left; margin:8px 0; } :root[data-theme="dark"] .ar-koci { color:var(--ink); }
.ar-dinle { font:inherit; font-weight:700; font-size:15px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:9px 16px; margin:8px 0; } .ar-dinle:disabled { opacity:.5; }
.ar-bosluk { font-size:21px; font-weight:700; margin:10px 0; line-height:1.35; overflow-wrap:anywhere; } .ar-secenek.iki { grid-template-columns:1fr 1fr; }
.ar-yaz { display:flex; gap:8px; margin-top:10px; } .ar-yaz input { flex:1; min-width:0; font-size:17px; } .ar-yaz .btn { width:auto; margin:0; padding-inline:16px; }
.ar-cevap { text-align:left; border:1px solid var(--line); border-radius:12px; padding:9px 11px; margin-top:8px; } .ar-cevap.aldi { border-color:var(--ok); } .ar-cevap .bas { display:flex; justify-content:space-between; font-size:13.5px; } .ar-cevap .nt { font-weight:800; color:var(--primary); } .ar-cevap p { margin:4px 0; font-size:16px; overflow-wrap:anywhere; } .ar-cevap small { color:var(--muted); }
.ar-zincir { display:flex; flex-wrap:wrap; gap:4px 6px; justify-content:center; align-items:center; margin:10px 0 4px; } .ar-zincir span { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:5px 9px; font-weight:600; font-size:15px; } .ar-zincir span.son { border-color:var(--primary); font-size:19px; } .ar-zincir em { font-style:normal; color:var(--primary); font-weight:800; } .ar-zincir i { font-style:normal; color:var(--muted); }
.ar-harf { font-size:16px; margin:6px 0; } .ar-harf b { font-size:30px; color:var(--primary); vertical-align:middle; margin-left:4px; } .ar-olay { font-size:14px; margin:8px 0 0; color:var(--muted); }
.ar-hikaye { max-height:34vh; overflow-y:auto; margin:8px 0; } .ar-hikaye p { margin:0 0 8px; font-size:16.5px; line-height:1.4; } .ar-hikaye small { display:block; color:var(--muted); font-size:11.5px; font-weight:600; }
.ar-on { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:8px; } .ar-on button { font:inherit; font-size:18px; font-weight:700; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:12px; padding:10px 0; box-shadow:0 3px 0 var(--line); } .ar-on button.secili { border-color:var(--primary); box-shadow:0 3px 0 var(--primary); }
.ar-mik { margin-top:10px; } .ar-mik.on { background:var(--bad); box-shadow:0 4px 0 #9d2f25; } .ar-not { font-size:56px; font-weight:800; color:var(--primary); margin:4px 0; } .ar-not small { font-size:20px; color:var(--muted); }
.ar-hatalar .hk .ys { color:var(--bad); text-decoration:line-through; width:100%; font-size:14px; }
.pa-ayar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; } .pa-ayar span { min-width:0; } .pa-ayar small { display:block; color:var(--muted); font-size:11.5px; }
.pa-ayar input[type=number] { width:84px; flex:0 0 84px; text-align:center; font-weight:700; padding:7px 4px; } .pa-ayar input.degisik { border-color:var(--primary); color:var(--primary); } .pa-ayar input[type=checkbox] { width:22px; height:22px; }
.pa-kaydet { width:auto !important; padding:9px 16px !important; font-size:14px !important; margin-top:10px !important; } .pa-kapali { opacity:.6; }
.pa-ayar input.pa-ad { width:130px; flex:0 0 130px; text-align:center; font-weight:700; padding:7px 4px; }

/* 💬 Motive sözleri (Not 88) */
.gaz-kart { position:relative; background:linear-gradient(135deg,#fff4dc 0%,#fde3d3 100%); border:1px solid #f1d3a8; border-radius:var(--radius); padding:14px 44px 14px 16px; margin:0 0 12px; color:#3a2a14; box-shadow:0 3px 0 #ecd2a6; }
:root[data-theme="dark"] .gaz-kart { background:linear-gradient(135deg,#3a2f1c 0%,#40261c 100%); border-color:#5a4526; color:#f6e6c8; box-shadow:0 3px 0 #2a2115; }
.gaz-kart .en { font-size:17px; font-weight:700; font-style:italic; line-height:1.35; margin:0 0 4px; } .gaz-kart .tr { font-size:14.5px; margin:0; opacity:.85; line-height:1.35; } .gaz-kart small { display:block; margin-top:6px; font-size:12px; opacity:.7; }
.gaz-ses, .gaz-x { position:absolute; right:8px; background:none; border:0; font-size:17px; padding:4px; color:inherit; opacity:.75; } .gaz-ses { top:8px; } .gaz-x { bottom:6px; font-size:13px; }
.toast.gaz-toast { position:fixed; left:50%; right:auto; bottom:92px; transform:translateX(-50%); animation:none; background:none; padding:0; box-shadow:none; width:calc(100% - 28px); max-width:420px; z-index:60; } .toast.gaz-toast .gaz-kart { margin:0; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.pa-ayar.dik { flex-direction:column; align-items:stretch; gap:4px; border-bottom:0; } .pa-ayar.dik input, .pa-ayar.dik select { width:100%; }
.pa-soz, .pa-bildirim { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; } .pa-soz.kapali, .pa-bildirim.kapali { opacity:.45; } .pa-soz .dg { display:flex; gap:2px; flex:0 0 auto; } .pa-soz .dg button { background:none; border:0; font-size:17px; padding:4px; }
.pa-bildirim { flex-direction:column; gap:4px; } .pa-bildirim ul { margin:4px 0; padding-left:18px; } .pa-bildirim li { font-size:14px; overflow-wrap:anywhere; }
.pa-madde { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; } .pa-madde .ik { flex:0 0 22px; }

/* 👤 Açık profil kartı (Not 90) */
.pr-ad, .ae[data-profil] { cursor:pointer; } .pr-ad { text-decoration:underline dotted; text-underline-offset:3px; }
.profil-ortu { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.profil-kart { position:relative; width:100%; max-width:340px; background:var(--card); color:var(--ink); border-radius:22px; padding:22px 18px 18px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.4); }
.profil-kart.unvanli { border:2px solid #e0b64a; box-shadow:0 0 0 4px rgba(224,182,74,.18), 0 18px 50px rgba(0,0,0,.4); }
.profil-kart .px { position:absolute; top:10px; right:12px; background:none; border:0; font-size:16px; color:var(--muted); padding:6px; } .profil-kart .pyuz { font-size:52px; line-height:1.1; } .profil-kart h2 { margin:6px 0 2px; font-size:22px; } .profil-kart h2 i { font-style:normal; font-size:15px; }
.punvan { display:inline-block; margin:4px 0 6px; padding:5px 12px; border-radius:999px; font-weight:800; font-size:14px; background:linear-gradient(135deg,#f7d774,#e0a93a); color:#3a2a05; } .punvan.bot { background:var(--bg); color:var(--muted); font-weight:600; border:1px solid var(--line); }
.psayi { display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:8px; margin:12px 0 6px; } .psayi div { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 4px; } .psayi b { display:block; font-size:18px; } .psayi small { color:var(--muted); font-size:11.5px; }
.pdurum { font-size:15.5px; font-style:italic; line-height:1.4; margin:8px 4px; overflow-wrap:anywhere; } .pduzen { margin-top:12px; text-align:left; } .pduzen textarea { width:100%; font:inherit; font-size:15px; border:1px solid var(--line); border-radius:12px; padding:9px; background:var(--bg); color:var(--ink); resize:none; }
.pduzen .row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; } .pkaydet { width:auto !important; margin:0 !important; padding:8px 16px !important; font-size:14px !important; } .kirmizi { color:var(--bad) !important; }
.pbildir { background:none; border:0; color:var(--muted); font:inherit; font-size:12.5px; margin-top:10px; text-decoration:underline; }
.cevrimici { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:13px; color:var(--muted); margin:0 2px 10px; } .cevrimici b { color:var(--ink); } .nokta { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(46,158,106,.2); vertical-align:middle; margin-right:3px; }

/* Panel düzeni (Not 96) */
.pn-grup { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); padding:12px 10px 3px; } .pn-grup:first-child { padding-top:2px; }
@media (max-width: 760px) { .pn-grup { display:none; } }
.pa-harita { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; } .pa-harita button { text-align:left; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; } .pa-harita b { display:block; font-size:14.5px; } .pa-harita small { color:var(--muted); font-size:12.5px; line-height:1.35; }
.pa-tablo { display:flex; flex-direction:column; } .pa-tablo .bas, .pa-tablo .sat { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,2fr) minmax(0,1.2fr) 64px; gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); font-size:13.5px; text-align:left; }
.pa-tablo .bas { font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); } .pa-tablo .sat { background:none; border-left:0; border-right:0; border-top:0; font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; } .pa-tablo .sat:hover { background:var(--bg); } .pa-tablo .sat.aktif span:nth-child(2) { color:var(--ok); font-weight:700; }
.pa-tablo b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pa-tablo small { color:var(--muted); font-size:11.5px; }
@media (max-width: 760px) { .pa-tablo .bas { display:none; } .pa-tablo .sat { grid-template-columns:1fr 64px; } .pa-tablo .sat span:nth-child(3) { display:none; } .pa-tablo .sat span:nth-child(2) { grid-column:1 / -1; grid-row:2; color:var(--primary); font-weight:600; } }
.pa-yol { max-height:300px; overflow-y:auto; font-size:13.5px; } .pa-yol div { display:flex; gap:10px; padding:4px 0; border-bottom:1px dashed var(--line); } .pa-yol small { flex:0 0 96px; color:var(--muted); } .pa-yol i { font-style:normal; color:var(--muted); }
.pa-onizle { background:#fff; color:#1f2a44; border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0; max-height:380px; overflow:auto; } .pa-ayar.dik textarea { width:100%; font:inherit; font-size:14.5px; border:1px solid var(--line); border-radius:10px; padding:9px; background:var(--bg); color:var(--ink); }
.sistem-serit { background:var(--warn-bg); color:var(--warn); font-size:13.5px; font-weight:600; padding:8px 14px; text-align:center; border-bottom:1px solid var(--line); }

/* 🎖️ Rütbe ve sıfat (Not 97) */
.rutbe-kart .rk-ust { display:flex; gap:12px; align-items:center; margin-bottom:10px; } .rk-ikon { font-size:40px; line-height:1; } .rutbe-kart small { color:var(--muted); font-weight:600; } .rutbe-kart h2 { margin:0; }
.rk-sifat { font-size:13px; font-weight:700; background:var(--ok-bg); color:var(--ok); border-radius:999px; padding:3px 9px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
.rutbe-kart details { margin-top:8px; } .rutbe-kart summary { cursor:pointer; color:var(--primary); font-weight:700; font-size:14px; } .rk-liste { margin-top:8px; } .rk-liste div { display:flex; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:8px; font-size:14px; color:var(--muted); } .rk-liste .gecti { color:var(--ink); } .rk-liste .ben { background:var(--warn-bg); color:var(--ink); font-weight:700; } :root[data-theme="dark"] .rk-liste .ben { color:#f6e6c8; }
.prutbe { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:4px 0 6px; } .prutbe span { background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:13.5px; font-weight:700; } .prutbe .sf { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.pn-rozet.rt { background:var(--bg); color:var(--muted); border:1px solid var(--line); }

/* 🖨️ Kişiye özel PDF + marka alt yazısı (Not 98) */
.marka-alt { text-align:center; font-size:11.5px; color:var(--muted); line-height:1.5; margin:18px 12px 8px; padding:0 8px 76px; }   /* alt boşluk: görüş balonu yazının üstüne binmesin (Riven'ın ekran görüntüsü) */
#pdfBelge { display:none; }
@media print {
  body.pdf-modu > *:not(#pdfBelge) { display:none !important; } body.pdf-modu { background:#fff !important; padding:0 !important; margin:0 !important; }
  body.pdf-modu #pdfBelge { display:block; color:#1f2a44; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:11.5pt; line-height:1.45; padding:0; }
  @page { size:A4; margin:14mm 14mm 16mm; }
  #pdfBelge * { -webkit-print-color-adjust:exact; print-color-adjust:exact; box-sizing:border-box; }
  .pb-bas { display:flex; align-items:center; gap:12px; background:#1f2a44; color:#fff; border-radius:12px; padding:12px 16px; } .pb-logo { font-size:34pt; line-height:1; } .pb-baslik { flex:1; } .pb-baslik small { color:#d9d4fb; font-size:9.5pt; letter-spacing:.4px; text-transform:uppercase; } .pb-baslik h1 { margin:2px 0 0; font-size:18pt; color:#fff; line-height:1.2; }
  .pb-sev { background:#d9633a; color:#fff; font-weight:800; font-size:14pt; border-radius:10px; padding:6px 12px; }
  .pb-ozel { font-size:9.5pt; color:#7a6f66; text-align:right; margin:6px 2px 12px; } .pb-ozel b { color:#1f2a44; }
  #pdfBelge h2 { font-size:12.5pt; margin:0 0 5px; } #pdfBelge h3 { font-size:11.5pt; margin:0 0 3px; color:#b04b27; } #pdfBelge p { margin:0 0 6px; } #pdfBelge section { margin-bottom:11px; break-inside:avoid; }
  .pb-kural { background:#e8f6ee; border-left:5px solid #2e9e6a; border-radius:8px; padding:9px 12px; font-size:12.5pt; font-weight:600; } .pb-tuzak { background:#fff4dc; border-left:5px solid #b8811c; border-radius:8px; padding:9px 12px; }
  #pdfBelge table { width:100%; border-collapse:collapse; font-size:10.5pt; } #pdfBelge th { text-align:left; font-size:9pt; text-transform:uppercase; letter-spacing:.4px; color:#7a6f66; border-bottom:1.5px solid #1f2a44; padding:4px 6px; } #pdfBelge td { border-bottom:1px solid #eadfd3; padding:5px 6px; vertical-align:top; }
  #pdfBelge td.y { color:#d64a3c; text-decoration:line-through; width:31%; } #pdfBelge td.d { color:#1c7a50; font-weight:700; width:37%; } #pdfBelge td small { display:block; font-weight:400; color:#7a6f66; font-size:9pt; } #pdfBelge td.dr { font-size:9pt; color:#7a6f66; white-space:nowrap; }
  .pb-senin { border:1.5px dashed #d9633a; border-radius:10px; padding:10px 12px; } .pb-test { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; } .pt { border:1px solid #eadfd3; border-radius:8px; padding:4px 9px; font-size:9.5pt; text-align:center; } .pt b { display:block; font-size:12pt; } .pt.iyi { background:#e8f6ee; border-color:#2e9e6a; } .pt.zayif { background:#fdecea; border-color:#d64a3c; } .kucuk { font-size:9pt; color:#7a6f66; }
  .pb-alistirma ol { margin:0; padding-left:18px; } .pb-alistirma li { margin-bottom:7px; break-inside:avoid; } .pb-alistirma li p { font-weight:600; margin-bottom:3px; } .sk { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:10.5pt; }
  .pb-cevap { font-size:8pt; color:#9a8f86; margin-top:8px; transform:rotate(180deg); text-align:left; } .pb-slogan { text-align:center; font-style:italic; color:#b04b27; margin-top:8px; }
  .pb-son { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:14px; break-inside:avoid; } .pb-uyari { font-size:8pt; color:#9a8f86; max-width:48%; margin:0 !important; }
  .pb-kase { transform:rotate(-5deg); margin:6px 10px 10px 0; color:#27408b; opacity:.86; border:2.2px solid #27408b; border-radius:12px; padding:3px; } .pb-kase .ic { border:1px solid #27408b; border-radius:9px; padding:7px 16px 6px; text-align:center; display:flex; flex-direction:column; gap:1px; }
  .pb-kase small { font-size:7pt; letter-spacing:1.6px; font-weight:700; } .pb-kase b { font-size:12.5pt; letter-spacing:1.2px; font-weight:800; border-top:1px solid #27408b; border-bottom:1px solid #27408b; padding:2px 0; margin:2px 0; } .pb-kase span { font-size:7.5pt; font-style:italic; } .pb-kase em { font-style:normal; font-size:8pt; font-weight:800; letter-spacing:1.4px; } .pb-kase i { font-style:normal; font-size:7pt; opacity:.85; }
}
.pn-rozet.dv { background:#efe9ff; color:#5b3fb8; }
.pa-gun { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); } .pa-gun .ik { font-size:24px; flex:0 0 28px; text-align:center; } .pa-gun div { flex:1; min-width:0; } .pa-gun b { display:block; font-size:14.5px; } .pa-gun small { display:block; font-size:12px; } .pa-gun .btn { flex:0 0 auto; margin:0 !important; }
.pa-gun.bugun { background:var(--warn-bg); border-radius:10px; padding-inline:10px; } .pa-gun.bugun small { color:var(--warn) !important; font-weight:700; }
.btn.secondary.sm { width:auto !important; margin:0 !important; padding:8px 14px !important; font-size:13.5px !important; }

/* 🎌 Özel gün afişi (Not 108) */
.afis { position:relative; flex:0 0 auto; border-radius:var(--radius); padding:16px 44px 16px 16px; margin:0 0 12px; overflow:hidden; }   /* #screen esnek kutu: flex:0 0 auto olmadan afiş 32 px'e sıkışıyordu */
.afis.bayrak { background:linear-gradient(100deg,#c8102e 0%,#e01b3c 45%,#c8102e 100%); background-size:220% 100%; color:#fff; animation:bayrakDalga 5s ease-in-out infinite; box-shadow:0 3px 0 #970c22; }
.afis.anma { background:#2b3040; color:#e8eaf0; box-shadow:0 3px 0 #1b1f2b; }
.afis.sade { background:var(--sari, #fff4dc); color:var(--ink); border:1px solid var(--line); box-shadow:0 3px 0 var(--line); }
:root[data-theme="dark"] .afis.sade { background:#3a2f1c; color:#f6e6c8; border-color:#5a4526; }
@keyframes bayrakDalga { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
.afis-ic { display:flex; gap:12px; align-items:center; } .afis-ikon { font-size:38px; line-height:1; flex:0 0 auto; }
.tr-bayrak { display:inline-block; animation:bayrakSalla 3.2s ease-in-out infinite; transform-origin:0 60%; }
@keyframes bayrakSalla { 0%,100% { transform:rotate(-4deg) skewX(0deg); } 35% { transform:rotate(3deg) skewX(-6deg); } 70% { transform:rotate(-1deg) skewX(4deg); } }
.afis-yazi { min-width:0; } .afis-yazi b { display:block; font-size:16.5px; line-height:1.3; } .afis-yazi small { display:block; font-size:12.5px; opacity:.8; margin-top:2px; }
.afis-soz { font-size:13.5px; font-style:italic; line-height:1.45; margin:8px 0 0; opacity:.92; } .afis-soz i { display:block; font-style:normal; font-size:12px; opacity:.75; margin-top:3px; }
.afis-x { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.18); border:0; color:inherit; font-size:13px; line-height:1; width:26px; height:26px; border-radius:50%; cursor:pointer; }
.afis.sade .afis-x { background:rgba(0,0,0,.08); }
.afis-en { margin-top:12px; background:rgba(255,255,255,.16); border-radius:10px; padding:8px 11px; cursor:pointer; }
.afis.sade .afis-en { background:rgba(0,0,0,.05); } .afis-en b { display:block; font-size:14.5px; } .afis-en span { font-size:12.5px; opacity:.8; }
@media (prefers-reduced-motion: reduce) { .afis.bayrak, .tr-bayrak { animation:none; } }
.pa-once { display:flex; align-items:center; gap:5px; flex:0 0 auto; font-size:12px; color:var(--muted); } .pa-once input { width:48px; text-align:center; padding:6px 2px; }
.pa-afis-on { display:flex; gap:12px; align-items:center; border-radius:14px; padding:14px; margin:8px 0; } .pa-afis-on .ik { font-size:34px; } .pa-afis-on b { font-size:16px; } .pa-afis-on small { display:block; font-size:12px; opacity:.8; } .pa-afis-on p { font-size:13px; font-style:italic; margin:6px 0 0; } .pa-afis-on i { font-style:normal; opacity:.75; }
.pa-afis-on.bayrak { background:linear-gradient(100deg,#c8102e,#e01b3c,#c8102e); color:#fff; } .pa-afis-on.anma { background:#2b3040; color:#e8eaf0; } .pa-afis-on.sade { background:var(--bg); border:1px solid var(--line); }
.afis-ses { display:block; width:100%; margin-top:10px; background:rgba(255,255,255,.18); border:0; border-radius:10px; padding:9px 12px; color:inherit; font:inherit; font-size:14.5px; font-weight:700; text-align:left; cursor:pointer; }
.afis.sade .afis-ses { background:rgba(0,0,0,.06); } .afis-ses small { display:block; font-size:11px; font-weight:400; opacity:.75; margin-top:2px; } .afis-ses.calisiyor { opacity:.6; }
.pa-ses { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0 0 10px 36px; border-bottom:1px solid var(--line); } .pa-ses input[type=text] { flex:1; min-width:180px; font-size:13px; padding:6px 8px; } .pa-ses input[type=file] { font-size:12px; max-width:190px; }

/* 🧭 Sayfa yardımı (Not 109) */
.ipucu { position:relative; flex:0 0 auto; background:var(--card); border:2px solid var(--primary); border-radius:var(--radius); padding:15px 42px 13px 15px; margin:0 0 12px; box-shadow:0 3px 0 var(--primary); }
.ipucu-bas { display:flex; align-items:center; gap:9px; margin-bottom:6px; } .ipucu-bas span { font-size:24px; } .ipucu-bas b { font-size:16.5px; }
.ipucu p { margin:0 0 10px; font-size:14.5px; line-height:1.5; color:var(--ink); }
.ipucu-liste { background:var(--bg); border-radius:12px; padding:9px 11px; } .ipucu-liste small { display:block; font-size:11.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.ipucu-liste span { display:block; font-size:14px; line-height:1.55; color:var(--ink); }
.ipucu-x { position:absolute; top:9px; right:9px; background:var(--bg); border:0; color:var(--muted); font-size:13px; width:28px; height:28px; border-radius:50%; cursor:pointer; }
.ipucu-hepsi { display:block; width:100%; margin-top:9px; background:none; border:0; color:var(--muted); font:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; }
.news-metin { white-space:normal; line-height:1.55; }