/* =====================================================================
   OYUNLAŞTIRILMIŞ ARAYÜZ KATMANI ("Akış · Oyun"): kalın 3B düğmeler, yeşil ana renk,
   büyük yuvarlak yol düğümleri, alttan çıkan geri bildirim şeridi.
   Yalnızca token ve bileşen üzerine biner; kontrast AA'dır (metin rengi koyu yeşil).
   ===================================================================== */
:root { --accent-text: #58cc02; --accent: #58cc02; --accent-d: #3d9100; --accent-soft: #1d3310; --onaccent: #0c2300; --depth: 4px; --r1: 12px; --r2: 16px; --r3: 22px; }
:root[data-theme="light"] { --accent-text: #1f5a00; --accent: #2f8000; --accent-d: #1f5a00; --accent-soft: #e2f3d4; --onaccent: #ffffff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --accent-text: #1f5a00; --accent: #2f8000; --accent-d: #1f5a00; --accent-soft: #e2f3d4; --onaccent: #ffffff; } }

/* kalın 3B düğme: alt kenar "derinlik", basınca çöker */
.btn { border-width: 2px; border-bottom-width: var(--depth); border-radius: var(--r2); font-weight: 700; letter-spacing: .02em; text-transform: none; transition: transform .08s, border-color var(--t1), background var(--t1); }
.btn:hover { border-color: var(--line); border-bottom-color: var(--line); }
.btn:active:not(:disabled) { transform: translateY(calc(var(--depth) - 1px)); border-bottom-width: 1px; margin-top: calc(var(--depth) - 1px); }
.btn.primary { border-color: var(--accent-d); border-bottom-color: var(--accent-d); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.08); border-color: var(--accent-d); }
.btn.ghost, .btn.ghost:active { border-width: 2px; border-color: transparent; margin-top: 0; transform: none; }
.btn.danger { border-bottom-color: var(--bad); }
.btn.big { min-height: 54px; text-transform: uppercase; font-size: .9375rem; letter-spacing: .06em; }

/* yol düğümleri: kalın halkalı, 3B daire */
.ncirc { width: 76px; height: 76px; border-width: 0; background: var(--raise); color: var(--ink); box-shadow: 0 6px 0 var(--line); transition: transform .08s, box-shadow .08s; }
.node.u0 .ncirc, .node .ncirc { border-color: transparent; }
.node.done .ncirc, .node.cur .ncirc { background: var(--col); color: var(--bg); box-shadow: 0 6px 0 color-mix(in srgb, var(--col) 55%, #000); }
.node.cur .ncirc { outline: 0; }
.node:hover .ncirc { transform: translateY(-2px); } .node:active .ncirc { transform: translateY(5px); box-shadow: 0 1px 0 var(--line); }
.node:not(.bnode) .ncirc::after { inset: -10px; }
.start-bubble { background: var(--panel); color: var(--accent); border: 2px solid var(--line); border-radius: var(--r2); font-size: .75rem; animation: bob 1.4s ease-in-out infinite; } .start-bubble::after { background: var(--panel); border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); width: 10px; height: 10px; bottom: -7px; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.bnode .ncirc { border-radius: 24px; box-shadow: 0 6px 0 color-mix(in srgb, var(--violet) 45%, #000); background: var(--violet-soft); }
.bnode.won .ncirc { background: var(--violet); color: var(--bg); }
.ubanner { border-radius: var(--r3); border-width: 2px; }

/* kartlar ve paneller: 2 px çerçeve, daha yuvarlak */
.card, .pbox, .hubc, .mu, .widget, .plinks, .boss, .card-lvl { border-width: 2px; }
.card.clink, .hubc, .boss { box-shadow: 0 4px 0 var(--line); } .clink:active, .hubc:active, .boss:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.hero { border-width: 2px; }

/* seçenek düğmeleri: Duolingo tarzı büyük, kalın kenarlı */
.opt { border-width: 2px; border-bottom-width: var(--depth); border-radius: var(--r2); min-height: 56px; font-weight: 500; }
.opt:active:not(:disabled) { transform: translateY(calc(var(--depth) - 1px)); border-bottom-width: 1px; }
.opt.right { border-color: var(--ok); } .opt.wrong { border-color: var(--bad); }
.chip, .tab { border-width: 2px; border-bottom-width: 3px; font-weight: 600; } .seg { border-radius: var(--r2); } .seg-b { font-weight: 700; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], select, textarea { border-width: 2px; border-radius: var(--r2); background: var(--panel2); }

/* geri bildirim şeridi: ders içinde alttan çıkar */
.fb.ok, .fb.no { border-left: 0; border-radius: var(--r2); border: 2px solid; animation: fbin .22s var(--ease); }
.fb.ok { border-color: var(--ok); } .fb.no { border-color: var(--bad); }
.fb.ok > b:first-child { color: var(--ok); font-family: var(--disp); font-size: 1.125rem; } .fb.no > b:first-child { color: var(--bad); font-family: var(--disp); font-size: 1.125rem; }
@keyframes fbin { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ders ilerleme çubuğu: kalın, yuvarlak, yeşil */
.lbar { height: 16px; background: var(--raise); border-radius: var(--rp); overflow: hidden; } .lbar > * { height: 100%; }
.lbar .meter, .lbar .meter i { height: 100%; } .lbar .meter { background: transparent; border-radius: var(--rp); } .lbar .meter i { background: var(--accent); border-radius: var(--rp); box-shadow: inset 0 4px 0 rgba(255,255,255,.22); }
.lfoot { border-top-width: 2px; } .lfoot-in .btn { min-width: 140px; }
.done-screen h2 { font-size: 2rem; } .stars { font-size: 2.5rem; } .gain { font-size: 2.5rem; }

/* üst çubuk göstergeleri: rozet biçimli */
.lv-n { border: 2px solid var(--amber); } #streak:not(:empty) { background: var(--amber-soft); border: 2px solid var(--amber); border-radius: var(--rp); padding: 2px 10px; font-weight: 700; }
.prog-bar, .xpbar, .meter { height: 12px; } .prog-bar i, .xpbar i, .meter i { box-shadow: inset 0 3px 0 rgba(255,255,255,.2); }
.rl.on { border: 2px solid var(--accent); } .rl { border: 2px solid transparent; font-weight: 600; }
.big-lv { box-shadow: 0 5px 0 color-mix(in srgb, var(--amber) 50%, #000); }
.toast { border-width: 2px; border-left-width: 2px; border-radius: var(--r2); font-weight: 600; }
@media (max-width: 899px) { .tabbar { gap: 4px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); } .tabbar .rl { border-radius: var(--r2); min-height: 52px; padding: 4px 2px; } }
@media (max-width: 560px) { .lfoot-in { gap: var(--s2); } .lfoot-in .btn { min-width: 0; padding: 8px 12px; flex: 1 1 auto; } .lfoot-in .btn.big { letter-spacing: .02em; font-size: .8125rem; } }

/* erişilebilirlik düzeltmeleri */
.rl.on, .tag, .quiz .tag, .start-bubble, .hubc .go { color: var(--accent-text); }
.bdg { opacity: 1; } .bdg:not(.on) > b, .bdg:not(.on) .ic { color: var(--muted); } .bdg:not(.on) { border-style: dashed; }
.tab.on, .chip.on { color: var(--onaccent); }