:root{
  --bg:#f6f1e6;--paper:#fffcf5;--fg:#1c2331;--mut:#5b6476;--line:#e4dccb;--line2:#efe8d8;
  --ac:#1b4f8f;--ac2:#e6eefa;--wm:#b24a1f;--wm2:#fbece3;
  --tip:#e8f4ea;--tipb:#2c7a45;--warn:#fff1d8;--warnb:#b86e00;--map:#efe9fb;--mapb:#5b3fb0;--def:#e6eefa;--defb:#1b4f8f;--sum:#fffcf5;
  --shadow:0 1px 2px rgba(40,30,10,.06),0 8px 24px rgba(40,30,10,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,"Georgia",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="acik"]){
  --bg:#12151c;--paper:#181c25;--fg:#e8eaf0;--mut:#9ba4b8;--line:#2a303d;--line2:#222733;
  --ac:#7fb0ff;--ac2:#1c2740;--wm:#ffa171;--wm2:#2e1f18;
  --tip:#16301f;--tipb:#5bd183;--warn:#33270f;--warnb:#f5ae45;--map:#241d3a;--mapb:#b49aff;--def:#1c2740;--defb:#7fb0ff;--sum:#181c25;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25)}}
:root[data-tema="koyu"]{
  --bg:#12151c;--paper:#181c25;--fg:#e8eaf0;--mut:#9ba4b8;--line:#2a303d;--line2:#222733;
  --ac:#7fb0ff;--ac2:#1c2740;--wm:#ffa171;--wm2:#2e1f18;
  --tip:#16301f;--tipb:#5bd183;--warn:#33270f;--warnb:#f5ae45;--map:#241d3a;--mapb:#b49aff;--def:#1c2740;--defb:#7fb0ff;--sum:#181c25;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-underline-offset:3px}
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--ac),var(--wm));z-index:50}
/* üst bar */
.top{position:sticky;top:0;z-index:40;display:flex;gap:12px;align-items:center;padding:10px clamp(12px,2vw,28px);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font:700 1.2rem var(--serif);color:var(--fg);text-decoration:none;white-space:nowrap;letter-spacing:.2px}
.hex{color:var(--wm)}
#q{flex:1;max-width:560px;min-width:0;margin:0 auto;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);font:inherit;font-size:.93rem}
#q:focus{outline:2px solid var(--ac);outline-offset:1px}
#menu,#tema{border:1px solid var(--line);background:var(--paper);color:var(--fg);border-radius:10px;padding:6px 11px;font-size:1rem;cursor:pointer}
#menu{display:none}
#sonuc{position:fixed;top:62px;left:50%;transform:translateX(-50%);width:min(680px,94vw);max-height:70vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:60;padding:6px}
#sonuc a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--fg)}
#sonuc a:hover{background:var(--ac2)}
#sonuc small{display:block;color:var(--mut)}
/* düzen */
.wrap{display:grid;grid-template-columns:262px minmax(0,1fr) 220px;max-width:1500px;margin:0 auto;gap:0 8px}
body.home .wrap{grid-template-columns:minmax(0,1fr);max-width:none;padding:0}
body.home nav,body.home #toc{display:none}
nav{position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);overflow:auto;padding:20px 10px 40px 20px;font-size:.9rem;scrollbar-width:thin}
.nt{font:700 .7rem var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:18px 10px 6px}
nav a{display:flex;gap:9px;align-items:baseline;padding:6px 10px;border-radius:9px;color:var(--fg);text-decoration:none;line-height:1.35}
nav a i{font-style:normal;font-size:.75rem;color:var(--mut);min-width:1.3em;text-align:right}
nav a:hover{background:var(--ac2)}
nav a.cur{background:var(--ac2);color:var(--ac);font-weight:600}
nav a.ok i::before{content:"✓";color:var(--tipb)}
nav a.ok i{font-size:0}
nav a.ok i::before{font-size:.8rem}
#toc{position:sticky;top:58px;align-self:start;max-height:calc(100vh - 58px);overflow:auto;padding:28px 12px 20px 12px;font-size:.84rem;border-left:1px solid var(--line2)}
#toc .tt{font:700 .7rem var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:8px}
#toc a{display:block;padding:4px 0 4px 10px;margin-left:-1px;border-left:2px solid transparent;color:var(--mut);text-decoration:none;line-height:1.4}
#toc a:hover,#toc a.on{color:var(--ac);border-left-color:var(--ac)}
main{min-width:0;padding:26px clamp(16px,3.5vw,52px) 20px}
article{max-width:840px;margin:0 auto}
.kicker{font:600 .78rem var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--wm);color:#fff;font-size:.72rem;letter-spacing:.06em}
h1{font:700 clamp(1.9rem,4.2vw,2.7rem)/1.15 var(--serif);margin:.35em 0 .25em;letter-spacing:-.01em}
.lead{font:italic 1.2rem/1.55 var(--serif);color:var(--mut);margin:0 0 1.4em;padding-bottom:1.2em;border-bottom:1px solid var(--line)}
article>p,article>ul,article>ol{font-family:var(--serif);font-size:1.15rem;line-height:1.85}
article p{margin:0 0 1em}
article ul,article ol{padding-left:1.3em;margin:0 0 1.1em}
article li{margin:.3em 0}
article{counter-reset:sec}
h2{font:700 1.7rem/1.25 var(--serif);margin:2.8em 0 .7em;padding-top:0;border:0;position:relative}
h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:block;font:800 .8rem var(--sans);letter-spacing:.14em;color:var(--wm);margin-bottom:6px}
h2::after{content:"";display:block;width:48px;height:3px;background:var(--wm);margin-top:10px;border-radius:3px}
h3{font:700 1.2rem var(--serif);margin:2em 0 .5em;color:var(--fg);padding-left:12px;border-left:4px solid var(--ac)}
code{background:var(--ac2);padding:1px 6px;border-radius:5px;font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
strong{font-weight:700}
/* örnek blokları: üst üste, okunaklı cümle kartları */
.ex{margin:20px 0 26px;display:grid;gap:10px}
.pair{display:block;padding:12px 18px 12px 20px;border:1px solid var(--line);border-left:5px solid var(--ac);border-radius:12px;background:var(--paper)}
.pair+.pair{border-top:1px solid var(--line)}
.pair span{display:block;padding:0}
.pair .en{font:600 1.18rem/1.5 var(--serif);color:var(--fg);border:0}
.pair .tr{margin-top:3px;font:400 1.02rem/1.5 var(--sans);color:var(--mut);border:0}
.pair .tr::before{content:"→ ";color:var(--wm);font-weight:700}
.ex .en strong{color:var(--wm);font-weight:800;background:var(--wm2);padding:0 4px;border-radius:5px}
.ex .tr strong{color:var(--fg);font-weight:700}
/* formül */
.formula{margin:18px 0;padding:16px 20px;border-radius:14px;background:var(--fg);color:var(--bg);font:600 1.15rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;letter-spacing:.02em}
.formula strong{color:#ffb98f}.formula em{color:#a9c8ff;font-style:normal}
/* tablolar: ferah, okunaklı */
.tw{overflow-x:auto;margin:20px 0 28px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:1rem;line-height:1.5}
th,td{padding:13px 16px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb,var(--ac2) 55%,transparent)}
th{background:var(--ac2);font:700 .76rem var(--sans);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;color:var(--ac)}
td:first-child{font-weight:700;color:var(--fg)}
td strong{color:var(--wm)}
/* kutular: ikonlu, yumuşak */
aside{margin:22px 0;padding:16px 20px 16px 58px;border-radius:14px;position:relative;font-size:1rem;border:1px solid transparent}
aside::before{position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 1rem var(--sans);color:#fff}
aside p{margin:0;font:400 1.05rem/1.65 var(--serif)}
aside b{display:block;font:800 .72rem var(--sans);text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}
.tip{background:var(--tip);border-color:color-mix(in srgb,var(--tipb) 30%,transparent)}.tip b{color:var(--tipb)}.tip::before{content:"i";background:var(--tipb)}
.warn{background:var(--warn);border-color:color-mix(in srgb,var(--warnb) 35%,transparent)}.warn b{color:var(--warnb)}.warn::before{content:"!";background:var(--warnb)}
.kar{background:var(--map);border-color:color-mix(in srgb,var(--mapb) 30%,transparent)}.kar b{color:var(--mapb)}.kar::before{content:"⇄";background:var(--mapb)}
.def{margin:6px 0 26px;padding:22px 26px 22px 26px;background:linear-gradient(135deg,var(--def),var(--paper));border:1px solid color-mix(in srgb,var(--defb) 35%,transparent);box-shadow:var(--shadow)}
.def::before{display:none}
.def b{color:var(--defb);font-size:.74rem}
.def p{font:500 1.22rem/1.6 var(--serif)}
.def strong{color:var(--wm)}
.sum{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:20px 24px}
.sum::before{display:none}
.sum b{color:var(--wm);font-size:.8rem;margin-bottom:8px}
.sum ul{list-style:none;margin:0;padding:0;font-family:var(--serif);font-size:1.06rem}
.sum li{position:relative;padding:5px 0 5px 30px;margin:0}
.sum li::before{content:"✓";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;background:var(--tipb);color:#fff;font:700 .72rem/20px var(--sans);text-align:center}
/* test */
.quiz{margin:2.4em 0 0;padding:6px 22px 22px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow)}
.quiz h2.qh{margin:.9em 0 .2em;border:0;padding:0;font-size:1.3rem}
.quiz h2.qh::before,.quiz h2.qh::after{display:none}
.qq{margin:18px 0;padding-top:14px;border-top:1px dashed var(--line)}
.qq:first-of-type{border-top:0}
.qq p{margin:0 0 8px;font:600 1.02rem var(--serif)}
.opt{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;font-size:.96rem;cursor:pointer;transition:border-color .15s,transform .05s}
.opt:hover{border-color:var(--ac)}.opt:active{transform:scale(.995)}
.opt.ok{border-color:var(--tipb);background:var(--tip);font-weight:600}
.opt.no{border-color:var(--warnb);background:var(--warn)}
.why{margin-top:8px;padding:9px 13px;border-radius:9px;background:var(--ac2);font-size:.92rem;color:var(--fg)}
.skor{margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--ac2);font-weight:700}
.done{margin:30px 0 0;text-align:center}
.done button{border:1px solid var(--tipb);background:transparent;color:var(--tipb);padding:9px 18px;border-radius:999px;font:600 .92rem var(--sans);cursor:pointer}
.done button.on{background:var(--tipb);color:#fff}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 12px}
.pn a{display:block;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none;color:var(--fg);box-shadow:var(--shadow)}
.pn a:hover{border-color:var(--ac)}
.pn small{display:block;color:var(--mut);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em}
.pn b{font:700 1.02rem var(--serif)}
.pn .nx{grid-column:2;text-align:right}.pn .pv{grid-column:1}
footer{text-align:center;color:var(--mut);padding:30px 16px;border-top:1px solid var(--line);font-size:.86rem;margin-top:30px}
/* ana sayfa */
.hm{max-width:1120px;margin:0 auto;padding-top:30px}
.hero{padding:44px clamp(20px,5vw,56px);border-radius:26px;background:radial-gradient(1200px 400px at 90% -20%,color-mix(in srgb,var(--wm) 22%,transparent),transparent),linear-gradient(135deg,var(--ac2),var(--paper));border:1px solid var(--line);box-shadow:var(--shadow)}
.eyebrow{font:700 .78rem var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--wm)}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.5rem);margin:.3em 0 .4em}
.hero h1 span{color:var(--ac)}
.hero .lead{border:0;padding:0;max-width:720px;font-style:normal;font-size:1.15rem;color:var(--fg)}
.cta{margin:1.4em 0 0}
.btn{display:inline-block;padding:13px 22px;margin:0 8px 8px 0;background:var(--ac);color:#fff;border-radius:12px;text-decoration:none;font-weight:700}
.btn.alt{background:transparent;color:var(--ac);border:1.5px solid var(--ac)}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.stats div{display:block}.stats dt{font:700 1.5rem var(--serif);color:var(--wm)}.stats dd{margin:0;color:var(--mut);font-size:.88rem}
.path{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0}
.path div{padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.path b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--wm);color:#fff}
.path h3{margin:.5em 0 .2em;color:var(--fg);font-family:var(--serif);font-size:1.15rem}
.path p{margin:0;color:var(--mut);font-size:.95rem}
.grp{margin:44px 0}
.gh{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.gh .tag{font-size:.9rem;padding:8px 12px}
.gh h2{border:0;padding:0;margin:0;font-size:1.6rem}.gh h2::before,.gh h2::after{display:none}
.gh p{margin:0;color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{position:relative;display:block;padding:16px 18px 16px 52px;background:var(--paper);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--fg);box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-2px);border-color:var(--ac)}
.card em{position:absolute;left:16px;top:15px;font:700 1.25rem var(--serif);color:var(--wm);font-style:normal}
.card b{display:block;font:700 1.02rem var(--serif);margin-bottom:3px}
.card span{display:block;color:var(--mut);font-size:.88rem;line-height:1.45}
/* duyarlı */
@media (max-width:1180px){.wrap{grid-template-columns:272px minmax(0,1fr)}#toc{display:none}}
@media (max-width:860px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  #menu{display:block}
  nav{display:none;position:fixed;inset:57px 0 0 0;height:auto;background:var(--bg);z-index:35;padding:16px}
  nav.ac{display:block}
  body.home nav.ac{display:block}
  .pair{grid-template-columns:1fr}.pair .tr{border-left:4px solid var(--line);border-top:1px dashed var(--line)}
  .pn{grid-template-columns:1fr}.pn .nx,.pn .pv{grid-column:1}
  article>p,article>ul,article>ol{font-size:1.06rem}
}
@media print{.top,nav,#toc,.done,.pn,footer,#bar{display:none!important}.wrap{display:block}body{background:#fff}}

/* ================= PLATFORM KATMANI ================= */
:root{--hero-bg:#0a0f1f}
/* başlık bandı */
.phero{position:relative;overflow:hidden;color:#fff;min-height:320px;background:
  radial-gradient(900px 420px at 88% 30%,rgba(70,110,255,.38),transparent 60%),
  radial-gradient(700px 360px at 10% 120%,rgba(255,140,90,.28),transparent 60%),
  linear-gradient(135deg,#090e1d,#121a36 60%,#0c1226)}
.phero.g-tr{background:radial-gradient(900px 420px at 88% 30%,rgba(255,140,90,.35),transparent 60%),radial-gradient(700px 360px at 8% 120%,rgba(70,110,255,.25),transparent 60%),linear-gradient(135deg,#120c10,#241520 60%,#150d14)}
.phero.g-ref{background:radial-gradient(900px 420px at 88% 30%,rgba(90,220,150,.3),transparent 60%),linear-gradient(135deg,#08130f,#10241d 60%,#0a1511)}
.phero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.phero-in{position:relative;max-width:1560px;margin:0 auto;padding:56px clamp(20px,5vw,72px) 46px;pointer-events:none}
.phero-in *{pointer-events:auto}
.phero .kicker{color:#b5c0dc}
.phero h1{color:#fff;font-size:clamp(2.2rem,5.4vw,4rem);margin:.3em 0 .25em;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.phero .lead{color:#d2daf0;border:0;padding:0;margin:0 0 20px;max-width:680px;font-style:normal;font-family:var(--sans);font-size:1.15rem}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font:600 .86rem var(--sans);cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,transform .15s}
.chip:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
/* ana sayfa haritası */
.map{position:relative;overflow:hidden;min-height:clamp(620px,86vh,880px);color:#fff;background:
  radial-gradient(1000px 520px at 70% 40%,rgba(70,110,255,.28),transparent 60%),
  radial-gradient(800px 460px at 12% 80%,rgba(255,140,90,.2),transparent 60%),
  linear-gradient(160deg,#070b18,#0f1630 55%,#0a0f20)}
.map canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.map-in{position:relative;z-index:2;max-width:1560px;margin:0 auto;padding:clamp(40px,8vh,96px) clamp(20px,5vw,72px);pointer-events:none;max-width:640px;margin-left:max(0px,calc((100vw - 1560px)/2))}
.map-in>*{pointer-events:auto}
.map .eyebrow{color:#ffa171}
.map h1{color:#fff;font-size:clamp(2.2rem,4.8vw,3.9rem);margin:.3em 0 .4em;letter-spacing:-.02em;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.map h1 span{background:linear-gradient(90deg,#7fb0ff,#9be7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.map .lead{color:#cdd6ee;border:0;padding:0;font:400 1.12rem/1.65 var(--sans);font-style:normal}
.map .stats{border-color:rgba(255,255,255,.15)}
.map .stats dt{color:#ffa171}.map .stats dd{color:#b5c0dc}
.map .btn.alt{color:#cfe0ff;border-color:rgba(255,255,255,.4)}
.glabel{position:absolute;left:0;top:0;z-index:1;pointer-events:none;font:700 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding:5px 12px;border-radius:999px;border:1px solid currentColor;background:rgba(8,12,26,.55);backdrop-filter:blur(4px)}
.glabel.g-tr{color:#ffa171}.glabel.g-en{color:#7fb0ff}.glabel.g-ref{color:#9be7b5}
.tip3d{position:absolute;z-index:3;pointer-events:none;max-width:240px;padding:11px 14px;border-radius:12px;background:rgba(10,15,32,.88);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;font:.86rem/1.4 var(--sans);color:#dbe4fa}
.tip3d.on{opacity:1;transform:none}
.tip3d b{display:block;color:#fff;font-size:.95rem;margin-bottom:2px}
.hint{position:absolute;z-index:2;right:22px;bottom:18px;font:.76rem var(--sans);color:#90a0c8;letter-spacing:.04em}
@media (max-width:860px){.map-in{max-width:none;margin-left:0}.hint{left:16px;right:auto;bottom:10px}.map canvas{opacity:.75}}
/* ana sayfa şeritleri */
body.home .hm{max-width:none;width:100%;margin:0;padding:0}
.hm>.path,.hm>.grp{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px)}
.hm>.path{margin-top:44px}
.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{padding:22px 22px 22px 66px;border-radius:18px;overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease,box-shadow .2s,border-color .2s}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ac) 18%,transparent),transparent 60%);opacity:0;transition:opacity .2s;pointer-events:none}
.card:hover{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px);box-shadow:0 18px 44px rgba(20,30,70,.18);border-color:var(--ac)}
.card:hover::after{opacity:1}
.card em{left:22px;top:20px;font-size:1.6rem}
.card b{font-size:1.12rem}
.grp{margin:64px auto}
.gh{margin-bottom:22px}
.gh .tag{border-radius:12px;padding:12px 16px}
.path div{transition:transform .2s}.path div:hover{transform:translateY(-4px)}
/* sayfa düzeni: geniş */
.wrap{max-width:1560px;grid-template-columns:270px minmax(0,1fr) 230px}
article{max-width:1020px}
.ex{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
@media (max-width:1000px){.ex{grid-template-columns:1fr}}
/* açılır-kapanır bölümler */
.accbar{display:flex;justify-content:flex-end;gap:10px;margin:0 0 6px}
.acc{margin:22px 0;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden;transition:border-color .2s}
.acc:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--line))}
.acc>h2{margin:0;padding:20px 24px;cursor:pointer;display:flex;align-items:center;gap:14px;user-select:none;font-size:1.45rem}
.acc>h2::before{position:static;margin:0;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--wm2);color:var(--wm);font:800 .95rem var(--sans);letter-spacing:.02em}
.acc>h2::after{content:"";margin:0 0 0 auto;flex:none;width:10px;height:10px;border-right:2.5px solid var(--mut);border-bottom:2.5px solid var(--mut);border-radius:0;background:none;transform:rotate(45deg);transition:transform .3s;margin-top:-4px}
.acc.open>h2::after{transform:rotate(225deg);margin-top:4px}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.4,.1,.2,1)}
.acc.open .acc-body{grid-template-rows:1fr}
.acc-in{overflow:hidden;padding:0 24px;min-height:0}
.acc.open .acc-in{padding-bottom:10px}
.acc-in>*:first-child{margin-top:0}
.acc:not(.open) .acc-in>*{visibility:hidden}
/* kaydırınca belirme */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.acc-body{transition:none}}
/* nav grupları */
.nt{cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.nt::after{content:"▾";font-size:.8rem;transition:transform .2s}
.ng.shut .nt::after{transform:rotate(-90deg)}
.ng.shut a{display:none}
/* test: daha canlı */
.quiz{border-radius:22px;background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--ac2) 40%,var(--paper)))}
.opt{border-radius:12px;padding:13px 16px;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.opt:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.why{animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* sayfa aç ve tablo parıltısı */
.tw{transition:box-shadow .25s}.tw:hover{box-shadow:0 14px 40px rgba(20,30,70,.12)}
.top{background:color-mix(in srgb,var(--paper) 78%,transparent)}

/* ===== embed (harita içindeki ders) ===== */
.embed .top,.embed nav,.embed #toc,.embed .phero,.embed footer,.embed .pn,.embed #bar,.embed .done,.embed #hepsi{display:none!important}
.embed .wrap{display:block;max-width:none}
.embed main{padding:18px clamp(14px,3vw,34px) 60px}
.embed article{max-width:900px}
.embed #sonuc{display:none}
.toplink{font:600 .86rem var(--sans);color:var(--ac);text-decoration:none;padding:7px 14px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.toplink:hover{border-color:var(--ac)}
/* ===== öğrenme haritası sayfası ===== */
body.hp{overflow:hidden}
.hp-title{font:600 .9rem var(--sans);color:var(--mut);margin-right:auto;margin-left:6px}
.hp-root{position:fixed;inset:57px 0 0 0;background:radial-gradient(1200px 600px at 70% 30%,rgba(70,110,255,.22),transparent 60%),radial-gradient(900px 500px at 10% 90%,rgba(255,140,90,.16),transparent 60%),linear-gradient(160deg,#070b18,#0e1530 55%,#090e1d);color:#e6ecff;overflow:hidden}
#hp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.hp-hud{position:absolute;z-index:3;background:rgba(10,15,34,.72);border:1px solid rgba(255,255,255,.14);border-radius:16px;backdrop-filter:blur(10px);padding:12px 14px}
.hp-methods{left:16px;top:16px;max-width:330px}
.hp-h{font:800 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9fb0d8;margin-bottom:8px}
.hp-chips{display:flex;gap:6px;flex-wrap:wrap}
.hp-chip{border:1px solid rgba(255,255,255,.22);background:transparent;color:#dbe4fa;border-radius:999px;padding:6px 12px;font:600 .82rem var(--sans);cursor:pointer;transition:.15s}
.hp-chip:hover{border-color:var(--c)}
.hp-chip.on{background:var(--c);color:#0a0f20;border-color:var(--c)}
.hp-mdesc{margin:8px 0 0;font:.82rem/1.45 var(--sans);color:#b9c6e6}
.hp-prog{right:16px;top:16px;text-align:right;font:600 .92rem var(--sans);min-width:190px}
.hp-prog b{font-size:1.4rem;color:#6ee7a0}
.hp-bar{height:6px;background:rgba(255,255,255,.14);border-radius:6px;margin:8px 0 10px;overflow:hidden}
.hp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6ee7a0,#7fb0ff);transition:width .5s}
.hp-mini{display:block;width:100%;margin-top:6px;padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#cfdcff;font:600 .78rem var(--sans);cursor:pointer}
.hp-mini:hover{background:rgba(255,255,255,.1)}
.hp-legend{left:16px;bottom:14px;display:flex;gap:14px;flex-wrap:wrap;font:.76rem var(--sans);color:#c3cfee;align-items:center;max-width:calc(100% - 32px)}
.hp-legend .d{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.d.tr{background:#ffa171}.d.en{background:#7fb0ff}.d.ref{background:#9be7b5}.d.ok{background:#6ee7a0;box-shadow:0 0 0 2px rgba(110,231,160,.35)}.d.lock{background:#59627f}
.hp-help{color:#8d9cc4;margin-left:auto}
.hp-tip{position:absolute;z-index:6;pointer-events:none;max-width:280px;padding:10px 13px;border-radius:12px;background:rgba(8,12,28,.92);border:1px solid rgba(255,255,255,.2);font:.84rem/1.4 var(--sans);opacity:0;transition:opacity .12s}
.hp-tip.on{opacity:1}.hp-tip b{display:block;color:#fff}.hp-tip span{color:#aab8dd}
.hp-listpanel{position:absolute;z-index:5;right:16px;top:150px;bottom:70px;width:min(360px,calc(100% - 32px));overflow:auto;background:rgba(10,15,34,.92);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px;backdrop-filter:blur(10px)}
.hp-listpanel h3{margin:0 0 8px;color:#fff;font:700 1rem var(--sans);border:0;padding:0}
.hp-ls{font:800 .68rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8da0d4;margin:14px 0 6px}
.hp-listpanel button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 10px;margin:2px 0;border-radius:10px;border:0;background:transparent;color:#dbe4fa;font:.86rem var(--sans);cursor:pointer}
.hp-listpanel button:hover{background:rgba(255,255,255,.08)}
.hp-listpanel button i{font-style:normal;min-width:1.6em;color:#8da0d4;font-size:.78rem}
.hp-listpanel button span{flex:1}
.hp-listpanel button em{font-style:normal;font-size:.68rem;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.1)}
.hp-listpanel button.ok span::before{content:"✓ ";color:#6ee7a0}.hp-listpanel button.lk{opacity:.6}
.g-tr{color:#ffa171}.g-en{color:#7fb0ff}.g-ref{color:#9be7b5}
/* panel */
.hp-panel{position:absolute;z-index:7;top:12px;right:12px;bottom:12px;width:min(58vw,880px);display:flex;flex-direction:column;background:var(--paper);color:var(--fg);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateX(calc(100% + 40px));opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;overflow:hidden}
.hp-panel.open{transform:none;opacity:1}
.hp-ph{display:flex;justify-content:space-between;gap:12px;padding:16px 20px 10px;border-bottom:1px solid var(--line)}
.hp-kick{font:700 .74rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.hp-kick .tg{display:inline-block;padding:2px 8px;border-radius:6px;color:#0a0f20;margin-right:6px}
.tg.tr{background:#ffa171}.tg.en{background:#7fb0ff}.tg.ref{background:#9be7b5}
.hp-ph h2{margin:.2em 0 .3em;font:700 1.55rem/1.2 var(--serif);border:0;padding:0}.hp-ph h2::before,.hp-ph h2::after{display:none}
.hp-pre{font:.82rem var(--sans);color:var(--mut);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hp-pre .pre{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:999px;padding:3px 10px;font:600 .76rem var(--sans);cursor:pointer}
.hp-pre .pre.ok{border-color:var(--tipb);color:var(--tipb)}
.hp-exit{align-self:flex-start;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:8px 14px;font:700 .85rem var(--sans);cursor:pointer;white-space:nowrap}
.hp-exit:hover{border-color:var(--wm);color:var(--wm)}
.hp-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.hp-tabs button{border:0;background:transparent;color:var(--mut);padding:9px 14px;border-radius:10px 10px 0 0;font:700 .86rem var(--sans);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.hp-tabs button.on{color:var(--ac);border-bottom-color:var(--ac)}
.hp-body{flex:1;overflow:auto;min-height:0;background:var(--bg)}
.hp-frame{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.hp-pad{padding:18px 22px}
.hp-pad h3{margin:0 0 6px;font:700 1.15rem var(--serif);color:var(--fg);padding:0;border:0}
.hp-small{font:.84rem/1.5 var(--sans);color:var(--mut);margin:0 0 12px}
.hp-res{display:grid;gap:8px}
.res{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none;color:var(--fg);transition:.15s}
.res:hover{border-color:var(--ac);transform:translateX(3px)}
.res .ico{font-size:1.3rem;width:34px;text-align:center}
.res b{display:block;font:700 .95rem var(--sans)}.res em{display:block;font:.8rem var(--sans);color:var(--mut);font-style:normal}
.res.yt .ico{color:#ff3b3b}
.hp-steps{list-style:none;padding:0;margin:10px 0 0;counter-reset:st}
.hp-steps li{counter-increment:st;display:flex;gap:10px;align-items:center;padding:12px 14px;margin:8px 0;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.hp-steps li.on{border-color:var(--tipb);background:var(--tip)}
.hp-steps label{display:flex;gap:12px;flex:1;align-items:flex-start;cursor:pointer}
.hp-steps input{margin-top:5px;width:18px;height:18px;accent-color:var(--tipb)}
.hp-steps b{display:block;font:700 .95rem var(--sans)}.hp-steps em{display:block;font:.82rem var(--sans);color:var(--mut);font-style:normal}
.hp-steps .go{border:1px solid var(--ac);background:transparent;color:var(--ac);border-radius:10px;padding:6px 12px;font:700 .8rem var(--sans);cursor:pointer}
#hp-note{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--fg);padding:12px;font:1rem/1.6 var(--serif);resize:vertical}
.hp-pf{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--paper)}
.hp-btn{flex:1;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:10px 12px;font:700 .86rem var(--sans);cursor:pointer}
.hp-btn:hover:not(:disabled){border-color:var(--ac)}.hp-btn:disabled{opacity:.4;cursor:default}
.hp-btn.ok{border-color:var(--tipb);color:var(--tipb)}.hp-btn.ok.on{background:var(--tipb);color:#fff}
@media (max-width:900px){
  .hp-panel{left:8px;right:8px;top:8px;bottom:8px;width:auto}
  .hp-methods{max-width:none;right:16px}.hp-prog{display:none}.hp-help{display:none}
  .hp-listpanel{top:130px}
}

/* ===== ÖĞRENME TUVALİ (n8n / Obsidian canvas) ===== */
body.tv-body{overflow:hidden}
.tv{position:fixed;inset:57px 0 0 0;overflow:hidden;cursor:grab;touch-action:none;
  background-color:var(--bg);background-image:radial-gradient(circle,color-mix(in srgb,var(--fg) 22%,transparent) 1.4px,transparent 1.6px);background-size:40px 40px}
.tv.pan{cursor:grabbing}
.tv-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.tv-edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1}
.tv-edges path.e{fill:none;stroke-width:3;stroke:color-mix(in srgb,var(--mc,#ffd36b) 70%,transparent);color:var(--mc,#ffd36b)}
.tv-edges path.pair{stroke:#ffa171;stroke-width:2.2;stroke-dasharray:8 8;opacity:.7}
.tv-edges path.order{stroke-dasharray:none}
.tv-edges path.order.ok{stroke:#6ee7a0;color:#6ee7a0}
.tv-edges path.hi{stroke-width:5;opacity:1;filter:drop-shadow(0 0 6px currentColor)}
.tv-group{position:absolute;border:2px solid color-mix(in srgb,var(--ac) 35%,transparent);border-radius:34px;background:color-mix(in srgb,var(--ac) 5%,transparent);z-index:0}
.tv-group .gt{position:absolute;left:34px;top:18px;font:800 2rem/1.1 var(--serif);color:var(--fg);display:flex;align-items:center;gap:14px}
.tv-group .gt i{font-style:normal;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--wm);color:#fff;font:800 1.4rem var(--sans)}
.tv-group .gl{position:absolute;left:44px;right:44px;top:62px;display:flex;font:700 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tv-group .gl span:first-child{width:350px}.tv-group .gl span:last-child{margin-left:110px}
.tv-note{position:absolute;z-index:2;padding:22px 26px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);font:1rem/1.6 var(--serif);overflow:hidden}
.tv-note h3{margin:0 0 .5em;font:800 1.35rem var(--serif);color:var(--wm);border:0;padding:0}
.tv-note ul{margin:.4em 0;padding-left:1.1em}.tv-note li{margin:.4em 0}
.tv-card{position:absolute;z-index:3;border-radius:20px;background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:6px;
  transition:left .5s cubic-bezier(.2,.8,.2,1),top .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s,opacity .3s;overflow:hidden}
.tv-card.drag{transition:none;z-index:9;box-shadow:0 20px 50px rgba(20,30,70,.3);cursor:grabbing}
.tv-card:hover{border-color:var(--ac);box-shadow:0 14px 36px rgba(20,30,70,.16)}
.tv-card.g-tr{border-top:6px solid #ffa171}.tv-card.g-en{border-top:6px solid #7fb0ff}.tv-card.g-ref{border-top:6px solid #9be7b5}
.tv-card.sel{border-color:var(--wm);box-shadow:0 0 0 4px color-mix(in srgb,var(--wm) 25%,transparent),var(--shadow)}
.tv-card.done{background:color-mix(in srgb,var(--tip) 70%,var(--paper))}
.tv-card.lock{opacity:.82}
.tv-card.next{border-color:var(--mc,#ffd36b);animation:nx 1.8s ease-in-out infinite}
@keyframes nx{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mc,#ffd36b) 55%,transparent)}50%{box-shadow:0 0 0 12px transparent}}
.tv-card .ch{display:flex;align-items:center;gap:8px;cursor:grab}
.tv-card .tag{padding:3px 9px;border-radius:7px;color:#0a0f20;font:800 .72rem var(--sans);letter-spacing:.06em}
.tag.tr{background:#ffa171}.tag.en{background:#7fb0ff}.tag.ref{background:#9be7b5}
.tv-card .no{font:800 1.05rem var(--serif);color:var(--wm)}
.tv-card .stt{margin-left:auto;font:700 .72rem var(--sans);color:var(--mut)}
.tv-card.done .stt{color:var(--tipb)}
.tv-card .op{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:10px;width:32px;height:30px;cursor:pointer;font-size:1rem}
.tv-card .op:hover{border-color:var(--ac);color:var(--ac)}
.tv-card h3{flex:none;margin:.1em 0 0;font:700 1.2rem/1.25 var(--serif);border:0;padding:0;color:var(--fg)}
.tv-card .sm{flex:none;margin:0;font:.84rem/1.45 var(--sans);color:var(--mut);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tv-card .cf{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap;font:600 .74rem var(--sans);color:var(--mut)}
.tv-card .cf .pre{margin-left:auto;color:var(--mut)}
/* açık (genişlemiş) kart */
.tv-card.x{z-index:20;padding:0;gap:0;border-color:var(--ac);box-shadow:0 40px 100px rgba(10,20,60,.45);cursor:default}
.tv-card.x>.ch,.tv-card.x>h3,.tv-card.x>.sm,.tv-card.x>.cf{display:none}
.tv-open .tv-card:not(.x),.tv-open .tv-note{opacity:.28;pointer-events:none}
.xb{display:flex;flex-direction:column;height:100%;min-height:0;animation:fadeIn .5s .25s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.xh{display:flex;justify-content:space-between;gap:12px;padding:18px 24px 10px;border-bottom:1px solid var(--line)}
.xk{font:700 .74rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.xh h2{margin:.2em 0 .3em;font:700 1.9rem/1.2 var(--serif);border:0;padding:0}.xh h2::before,.xh h2::after{display:none}
.xp{font:.84rem var(--sans);color:var(--mut);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pre-b{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:999px;padding:3px 11px;font:600 .78rem var(--sans);cursor:pointer}
.pre-b.ok{border-color:var(--tipb);color:var(--tipb)}
.xclose{align-self:flex-start;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:9px 16px;font:700 .86rem var(--sans);cursor:pointer;white-space:nowrap}
.xclose:hover{border-color:var(--wm);color:var(--wm)}
.xt{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.xt button{border:0;background:transparent;color:var(--mut);padding:10px 16px;font:700 .9rem var(--sans);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.xt button.on{color:var(--ac);border-bottom-color:var(--ac)}
.xbody{flex:1;min-height:0;overflow:auto;background:var(--bg)}
.xframe{display:block;width:100%;height:100%;border:0}
.xpad{padding:20px 26px}.xpad h4{margin:0 0 6px;font:700 1.2rem var(--serif)}
.sm2{font:.86rem/1.5 var(--sans);color:var(--mut);margin:0 0 12px}
.xres{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.xsteps{list-style:none;padding:0;margin:10px 0 0}
.xsteps li{display:flex;gap:10px;align-items:center;padding:13px 16px;margin:8px 0;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.xsteps li.on{border-color:var(--tipb);background:var(--tip)}
.xsteps label{display:flex;gap:12px;flex:1;cursor:pointer;align-items:flex-start}
.xsteps input{margin-top:5px;width:18px;height:18px;accent-color:var(--tipb)}
.xsteps b{display:block;font:700 .98rem var(--sans)}.xsteps em{display:block;font:.84rem var(--sans);color:var(--mut);font-style:normal}
.xsteps .go{border:1px solid var(--ac);background:transparent;color:var(--ac);border-radius:10px;padding:6px 12px;font:700 .8rem var(--sans);cursor:pointer}
#xnote{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--fg);padding:12px;font:1.02rem/1.6 var(--serif);resize:vertical}
.xf{display:flex;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:var(--paper)}
.xf button{flex:1;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:10px;font:700 .88rem var(--sans);cursor:pointer}
.xf button:hover:not(:disabled){border-color:var(--ac)}.xf button:disabled{opacity:.4}
.xf .xdone{border-color:var(--tipb);color:var(--tipb)}.xf .xdone.on{background:var(--tipb);color:#fff}
/* HUD */
.tv-hud{position:absolute;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.tv-top{left:50%;top:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:8px 10px;max-width:calc(100% - 24px)}
.tv-chips{display:flex;gap:6px}
.tv-chip{border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:999px;padding:6px 13px;font:700 .8rem var(--sans);cursor:pointer;white-space:nowrap}
.tv-chip:hover{border-color:var(--c)}.tv-chip.on{background:var(--c);color:#0a0f20;border-color:var(--c)}
#tv-search{border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);padding:7px 14px;font:.86rem var(--sans);width:220px;min-width:0}
.tv-results{position:absolute;top:calc(100% + 8px);right:0;width:300px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px}
.tv-results button{display:flex;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--fg);padding:9px 10px;border-radius:9px;font:.88rem var(--sans);cursor:pointer}
.tv-results button:hover{background:var(--ac2)}.tv-results i{font-style:normal;color:var(--wm);font-weight:800;min-width:1.5em}
.tv-zoom{left:14px;bottom:14px;display:flex;gap:6px;align-items:center;padding:6px}
.tv-zoom button{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:10px;min-width:36px;height:34px;padding:0 10px;font:700 1rem var(--sans);cursor:pointer}
.tv-zoom button:hover{border-color:var(--ac)}
#z-next{font-size:.8rem;border-color:var(--mc,#ffd36b)}
#z-pct{font:700 .76rem var(--sans);color:var(--mut);min-width:42px;text-align:center}
.tv-prog{right:14px;top:14px;padding:10px 14px;font:600 .88rem var(--sans);min-width:170px;text-align:right}
.tv-prog b{font-size:1.3rem;color:var(--tipb)}
.tv-mini{position:absolute;right:14px;bottom:14px;z-index:30;width:220px;height:150px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 90%,transparent);box-shadow:var(--shadow);cursor:pointer}
.tv-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font:.74rem var(--sans);color:var(--mut);background:color-mix(in srgb,var(--paper) 80%,transparent);padding:5px 12px;border-radius:999px;z-index:29;white-space:nowrap;pointer-events:none}
@media (max-width:900px){.tv-prog,.tv-hint{display:none}.tv-top{flex-wrap:wrap;justify-content:center}#tv-search{width:150px}.tv-mini{width:140px;height:96px}}

.tv-card.x{opacity:1!important;background:var(--paper)!important;animation:none!important}
.tv-open .tv-top,.tv-open .tv-prog{opacity:0;pointer-events:none}
.tv-top,.tv-prog{transition:opacity .25s}

/* ===== 3B tuval + oyunlaştırma ===== */
.tv3d{background:radial-gradient(1400px 700px at 70% 20%,rgba(70,110,255,.22),transparent 60%),radial-gradient(1000px 600px at 5% 95%,rgba(255,140,90,.15),transparent 60%),linear-gradient(160deg,#060a16,#0d1430 55%,#080d1d);cursor:grab;color:#e6ecff}
.tv3d.pan{cursor:grabbing}
.tv3d #gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.tv3d #css3d{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tv3d #css3d>div,.tv3d #css3d>div>div{pointer-events:none}
.tv3d .tv-card,.tv3d .tv-note{pointer-events:auto;position:absolute}
.tv3d .tv-note{background:rgba(14,20,44,.92);border-color:rgba(255,255,255,.14);color:#dbe4fa;box-shadow:0 10px 40px rgba(0,0,0,.4);border-radius:22px;padding:22px 26px;font:1rem/1.6 var(--sans);overflow:hidden}
.tv3d .tv-note h3{color:#ffd36b}
.tv3d .tv-card{transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s;background:#fffcf5;color:#1c2331;border:2px solid rgba(255,255,255,.2);box-shadow:0 10px 40px rgba(0,0,0,.45)}
[data-tema="koyu"] .tv3d .tv-card,:root:not([data-tema="acik"]) .tv3d .tv-card{}
.tv3d .tv-card h3{color:#1c2331}.tv3d .tv-card .sm{color:#5b6476}.tv3d .tv-card .cf,.tv3d .tv-card .stt,.tv3d .tv-card .cf .pre{color:#5b6476}
.tv3d .tv-card.done{background:#e8f6ec}
.tv3d .tv-card.lock{filter:grayscale(.7) brightness(.55)}
.tv3d .tv-card.soft{opacity:.88}
.tv3d .tv-card .lockv{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:4rem;background:rgba(5,8,20,.55)}
.tv3d .tv-card.lock .lockv{display:flex}
.tv3d .tv-card .stars{color:#e8a500;font-size:.8rem;letter-spacing:1px}
.tv3d .tv-card.x{filter:none;z-index:50;background:#fffcf5;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.tv3d .tv-card.x .xb{color:#1c2331}
.tv-stage-title{pointer-events:none;display:flex;align-items:center;gap:16px;white-space:nowrap;color:#fff;width:640px;text-align:left;position:relative}
.tv-stage-title i{font-style:normal;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--wm);color:#fff;font:800 1.7rem var(--sans)}
.tv-stage-title span{font:800 2.3rem/1.1 var(--serif);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.tv-stage-title em{font:700 .85rem var(--sans);font-style:normal;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#cfe0ff}
.tv-stage-title small{position:absolute;left:80px;top:60px;font:600 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8da0d4}
.tv-stage-title.lk span{opacity:.55}
.gm{position:absolute;z-index:40;background:rgba(10,15,34,.78);border:1px solid rgba(255,255,255,.16);border-radius:18px;backdrop-filter:blur(10px);color:#e6ecff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.gm-profile{left:14px;top:14px;display:flex;gap:12px;align-items:center;padding:10px 14px;min-width:240px}
.lv{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#ffd36b,#ff9a5a);color:#1b1100;display:grid;place-items:center;text-align:center;line-height:1}
.lv b{font:800 1.5rem var(--sans)}.lv span{font:800 .55rem var(--sans);letter-spacing:.14em;margin-top:-10px;display:block}
.gm-info{flex:1}.gm-title{font:800 1rem var(--serif)}
.gm-xp{height:8px;background:rgba(255,255,255,.14);border-radius:8px;margin:6px 0;overflow:hidden}
.gm-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd36b,#ff9a5a);transition:width .6s}
.gm-sub{font:600 .76rem var(--sans);color:#b9c6e6}
.gm-top{left:50%;top:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:8px 10px;max-width:calc(100% - 24px)}
.gm-side{right:14px;top:14px;width:268px;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:calc(100% - 28px);overflow:auto}
.gm-h{font:800 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9fb0d8}
.gm-st{position:relative;display:flex;gap:10px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e6ecff;border-radius:12px;padding:8px 10px;cursor:pointer;overflow:hidden;margin-bottom:6px}
.gm-st:hover{border-color:var(--c)}
.gm-st i{font-style:normal;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--c);color:#0a0f20;font:800 .9rem var(--sans)}
.gm-st span{font:700 .8rem/1.25 var(--sans);flex:1}.gm-st em{display:block;font:600 .7rem var(--sans);font-style:normal;color:#9fb0d8;margin-top:2px}
.gm-st u{position:absolute;left:0;bottom:0;height:3px;background:var(--c)}
.gm-st.lk{opacity:.6}
.gm-quest{padding:10px;border-radius:12px;background:rgba(255,255,255,.05);font:600 .78rem var(--sans)}
.gm-quest b{display:block;font:800 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#ffd36b}
.gm-btn{border:1px solid rgba(255,255,255,.2);background:transparent;color:#ffd36b;border-radius:12px;padding:9px 12px;font:700 .85rem var(--sans);cursor:pointer;text-align:left}
.gm-btn:hover{background:rgba(255,255,255,.08)}
.gm-free{font:600 .74rem var(--sans);color:#9fb0d8;display:flex;gap:8px;align-items:center;cursor:pointer}
.gm-zoom{left:14px;bottom:14px;display:flex;gap:6px;padding:6px}
.gm-zoom button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#e6ecff;border-radius:10px;min-width:36px;height:34px;padding:0 10px;font:700 1rem var(--sans);cursor:pointer}
.gm-zoom button:hover{border-color:#ffd36b}
.tv3d .tv-hint{background:rgba(10,15,34,.7);color:#9fb0d8;border:1px solid rgba(255,255,255,.1)}
.tv3d .tv-chip{color:#dbe4fa;border-color:rgba(255,255,255,.22)}
.tv3d #tv-search{background:rgba(255,255,255,.07);color:#e6ecff;border-color:rgba(255,255,255,.2)}
.tv3d .tv-results{background:#0e1430;border-color:rgba(255,255,255,.18)}
.tv3d .tv-results button{color:#dbe4fa}.tv3d .tv-results button:hover{background:rgba(255,255,255,.08)}
.gm-toast{position:absolute;left:50%;top:84px;transform:translate(-50%,-14px);z-index:60;background:linear-gradient(135deg,#ffd36b,#ff9a5a);color:#1b1100;padding:10px 20px;border-radius:999px;font:800 .92rem var(--sans);opacity:0;pointer-events:none;transition:.3s;box-shadow:0 10px 30px rgba(255,150,60,.4)}
.gm-toast.on{opacity:1;transform:translate(-50%,0)}
.gm-modal{position:absolute;inset:0;z-index:70;background:rgba(3,6,16,.7);display:grid;place-items:center;backdrop-filter:blur(4px)}
.gm-modal[hidden]{display:none}
.gm-box{position:relative;width:min(760px,92vw);max-height:80vh;overflow:auto;background:#0e1430;border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:24px;color:#e6ecff}
.gm-box h3{margin:0 0 14px;font:800 1.4rem var(--serif);border:0;padding:0;color:#ffd36b}
.gm-x{position:absolute;right:14px;top:14px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#e6ecff;border-radius:10px;width:34px;height:34px;cursor:pointer}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.gm-a{padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04);opacity:.55}
.gm-a.on{opacity:1;border-color:#ffd36b;background:rgba(255,211,107,.08)}
.gm-a i{font-style:normal;font-size:1.6rem}.gm-a b{display:block;margin-top:4px}.gm-a span{font:.8rem var(--sans);color:#9fb0d8}
@media (max-width:900px){.gm-side{display:none}.gm-profile{min-width:0}.tv-hint{display:none}}

/* ===== oyun: gemi, yakınlık, canavar savaşı ===== */
.gm-prompt{position:absolute;left:50%;bottom:64px;transform:translateX(-50%) translateY(10px);z-index:45;padding:10px 20px;border-radius:999px;background:rgba(10,15,34,.9);border:1px solid #ffd36b;color:#fff;font:600 .95rem var(--sans);opacity:0;pointer-events:none;transition:.2s}
.gm-prompt.on{opacity:1;transform:translateX(-50%)}
.gm-prompt b{background:#ffd36b;color:#1b1100;padding:2px 8px;border-radius:6px;margin:0 2px}
.tv3d .tv-card.near{border-color:#ffd36b;box-shadow:0 0 0 6px rgba(255,211,107,.35),0 10px 40px rgba(0,0,0,.45)}
.gp{padding:22px 26px;max-width:760px;margin:0 auto;color:#1c2331}
.gp h4{font:800 1.5rem var(--serif);margin:.2em 0}
.gp-intro,.gp-end{text-align:center;padding-top:50px}
.gp-bigboss{font-size:6rem;line-height:1;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.gp-intro p,.gp-end p{font:1.05rem/1.6 var(--sans);color:#5b6476;max-width:520px;margin:10px auto}
.gp-go,.gp-btns button{border:0;border-radius:14px;padding:13px 24px;font:800 1rem var(--sans);cursor:pointer;background:linear-gradient(135deg,#ffd36b,#ff9a5a);color:#1b1100;margin:6px}
.gp-btns button.lesson,.gp-btns button.nx{background:#e6eefa;color:#1b4f8f}
.gp-top{display:flex;justify-content:space-between;font:800 1rem var(--sans);margin-bottom:10px}
.gp-lives{font-size:1.4rem;letter-spacing:3px}.gp-lives.shake{animation:shk .4s}
@keyframes shk{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.gp-score b{color:#ff7a3a}
.gp-boss{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.gp-b{font-size:3.4rem;line-height:1}.gp-b.hit{animation:hit .5s}
@keyframes hit{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(12deg);filter:brightness(2)}100%{transform:scale(1)}}
.gp-hp{flex:1;height:16px;border-radius:10px;background:#e4dccb;overflow:hidden;border:1px solid #cdbf9f}
.gp-hp i{display:block;height:100%;background:linear-gradient(90deg,#ff5d5d,#ff9a5a);transition:width .5s}
.gp-boss em{font:800 .8rem var(--sans);font-style:normal;color:#5b6476;min-width:48px}
.gp-q{font:700 1.35rem/1.4 var(--serif);padding:14px 4px}
.gp-time{height:8px;background:#e4dccb;border-radius:8px;overflow:hidden;margin-bottom:14px}
.gp-time i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#6ee7a0,#ffd36b,#ff5d5d)}
.gp-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gp-opts button{border:2px solid #d8cfba;background:#fffdf8;color:#1c2331;border-radius:14px;padding:16px 14px;font:700 1rem var(--sans);cursor:pointer;transition:transform .12s,border-color .12s}
.gp-opts button:hover:not(:disabled){transform:translateY(-3px);border-color:#1b4f8f}
.gp-opts button.ok{background:#d9f5e1;border-color:#2c7a45}
.gp-opts button.no{background:#fde0dc;border-color:#c0392b;animation:shk .4s}
.gp-fb{min-height:54px;margin-top:14px;font:.95rem/1.5 var(--sans);color:#3a4256}
.gp-fb .g{color:#2c7a45}.gp-fb .r{color:#c0392b}
.gp-stars{font-size:2.4rem;color:#e8a500;letter-spacing:6px}
@media (max-width:700px){.gp-opts{grid-template-columns:1fr}}