:root{
  --navy:#1B1F4B; --navy2:#2A2F6E; --navy3:#3A3F86; --lav:#C9CCF2;
  --yellow:#FFD23F; --yellow-d:#C9A21E; --yellow-l:#FFF3C4;
  --coral:#FF6B57; --coral-d:#C2463A; --coral-l:#FFE3DE;
  --mint:#3DDC97; --mint-d:#22A36C; --mint-l:#D4F7E7; --mint-ink:#0E3B28;
  --sky:#4CC9F0; --pink:#FF8FA3; --purple:#B49CFF; --orange:#FFA94D;
  --paper:#F4F5FF;
  --display:'Baloo 2',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--navy);color:#fff;font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
#app{min-height:100vh;display:flex;flex-direction:column}
#confetti{position:fixed;inset:0;pointer-events:none;width:100vw;height:100vh;z-index:50}
.screen{flex:1;display:flex;flex-direction:column;gap:20px;padding:24px clamp(16px,3vw,40px);animation:enter .35s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.5vw,56px);line-height:1;margin:0}
.muted{color:var(--lav);font-weight:700}
.big{font-family:var(--display);font-weight:800}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* butonlar */
.btn{border:0;border-radius:22px;padding:14px 26px;font-family:var(--display);font-weight:800;font-size:24px;min-height:56px;transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(5px);box-shadow:none!important}
.btn-yellow{background:var(--yellow);color:#3A2E00;box-shadow:0 7px 0 var(--yellow-d)}
.btn-navy{background:var(--navy);color:var(--yellow);box-shadow:0 7px 0 #0B0D26}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 7px 0 var(--lav)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 7px 0 var(--coral-d)}
.btn-mint{background:var(--mint);color:var(--mint-ink);box-shadow:0 7px 0 var(--mint-d)}
.pill{border:0;border-radius:999px;padding:10px 18px;font-weight:800;font-size:18px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.pill-ghost{background:transparent;border:2px solid var(--navy3);color:var(--lav)}
.pill-light{background:rgba(255,255,255,.55);color:inherit}

/* PIN */
.pin-wrap{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(24px,8vw,120px);flex-wrap:wrap;position:relative}
.blob{position:absolute;border-radius:50%;background:var(--navy2);z-index:-1}
.mascot{width:140px;height:140px;border-radius:40px;background:var(--yellow);display:flex;align-items:center;justify-content:center;transform:rotate(-6deg);box-shadow:0 14px 0 var(--yellow-d);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(-2deg) translateY(-8px)}}
.pin-card{width:min(400px,100%);padding:32px;border-radius:40px;background:#fff;color:var(--navy);display:flex;flex-direction:column;align-items:center;gap:22px;box-shadow:0 18px 0 #11143A}
.pin-card.parent{background:var(--yellow-l)}
.dots{display:flex;gap:18px}
.dot{width:26px;height:26px;border-radius:50%;border:4px solid #D5D7EE;transition:all .15s}
.dot.on{background:var(--coral);border-color:var(--coral);transform:scale(1.15)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
.key{height:76px;border:0;border-radius:22px;background:#EEF0FF;color:var(--navy);font-family:var(--display);font-weight:800;font-size:34px;box-shadow:0 6px 0 var(--lav)}
.key:active{transform:translateY(4px);box-shadow:none}
.key.del{background:var(--coral-l);color:#B23A2A;box-shadow:0 6px 0 #F5B8AD}
.key.go{background:var(--mint);color:var(--mint-ink);box-shadow:0 6px 0 var(--mint-d)}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.err{color:#FFB4A8;font-weight:800;min-height:24px;text-align:center}
.pin-card .err{color:#B23A2A}

/* ana ekran */
.topbar{display:grid;grid-template-columns:minmax(0,300px) 1fr minmax(0,300px);gap:20px;align-items:stretch}
.stat{padding:14px 20px;border-radius:28px;display:flex;align-items:center;gap:14px;min-width:0}
.stat .lbl{font-size:16px;font-weight:800}
.stat .val{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1}
.stat .ico{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex:none}
.stat.spent{background:var(--coral);color:#3A0E07;box-shadow:0 8px 0 var(--coral-d)}
.stat.spent .ico{background:var(--coral-l)}
.stat.earned{background:var(--mint);color:var(--mint-ink);box-shadow:0 8px 0 var(--mint-d);justify-content:flex-end;text-align:right}
.stat.earned .ico{background:var(--mint-l)}
.bank{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bank .lbl{font-size:16px;font-weight:800;color:var(--lav);letter-spacing:2px}
.bank .val{font-family:var(--display);font-weight:800;font-size:clamp(64px,8vw,104px);line-height:.9;color:var(--yellow)}
.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.18)}}
.balance-chip{padding:10px 18px;border-radius:999px;background:var(--navy2);font-size:17px;font-weight:800;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sq{width:22px;height:22px;border-radius:8px;border:3px dashed #6B70B8}
.sq.on{border:0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;flex:1}
.card{border:0;text-align:left;border-radius:30px;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:170px;transition:transform .15s}
.card:hover{transform:translateY(-4px) rotate(-.5deg)}
.card:active{transform:translateY(6px);box-shadow:none!important}
.card .glyph{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:30px;flex:none}
.card .t{font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.card .s{font-size:16px;font-weight:800;margin-top:4px;opacity:.85}
.gain{padding:8px 14px;border-radius:999px;color:#fff;font-weight:800;font-size:17px}
.gain b{font-family:var(--display);font-size:22px}
.fastchip{padding:8px 12px;border-radius:999px;font-weight:800;font-size:15px;display:inline-flex;align-items:center;gap:6px}

/* konu seçimi */
.sheet-bg{position:fixed;inset:0;background:rgba(10,12,40,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20;animation:enter .2s}
.sheet{width:min(720px,100%);max-height:90vh;overflow:auto;border-radius:36px;padding:28px;color:var(--navy);background:#fff;box-shadow:0 16px 0 #11143A}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.topic{border:0;border-radius:20px;padding:16px 18px;text-align:left;font-weight:800;font-size:19px;display:flex;align-items:center;gap:10px;background:var(--paper);color:var(--navy);box-shadow:0 5px 0 #DDE0F5}
.topic.rec{background:var(--yellow);box-shadow:0 5px 0 var(--yellow-d)}
.topic[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.stars{margin-left:auto;color:#C9A21E;letter-spacing:2px;font-size:18px}

/* soru */
.quiz{background:var(--yellow);color:#3A2E00}
.qhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.progress{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center}
.pdot{width:22px;height:12px;border-radius:999px;background:rgba(255,255,255,.6)}
.pdot.ok{background:var(--navy)}
.pdot.bad{background:var(--coral)}
.pdot.cur{width:38px;background:#fff;border:3px solid var(--navy)}
.qbody{flex:1;display:flex;align-items:center;gap:clamp(20px,5vw,60px);flex-wrap:wrap;justify-content:center}
.qleft{flex:1;min-width:280px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.prompt{font-family:var(--display);font-weight:800;color:var(--navy);font-size:clamp(80px,13vw,180px);line-height:.9;letter-spacing:-3px}
.prompt.small{font-size:clamp(30px,4vw,48px);letter-spacing:0;line-height:1.15;max-width:700px}
.ansbox{min-width:220px;height:120px;padding:0 24px;border-radius:34px;background:#fff;border:6px solid var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:clamp(56px,7vw,90px);color:var(--navy);box-shadow:0 10px 0 var(--navy)}
.ansbox .cur{color:var(--lav);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.qpad{width:min(380px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qpad .key{height:82px;background:#fff;font-size:40px;box-shadow:0 8px 0 var(--yellow-d)}
.qpad .key.go{background:var(--navy);color:var(--yellow);box-shadow:0 8px 0 #0B0D26}
.opts{display:flex;flex-direction:column;gap:14px;width:min(560px,100%)}
.opt{border:0;border-radius:24px;padding:18px 24px;font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,34px);background:#fff;color:var(--navy);box-shadow:0 8px 0 var(--yellow-d);text-align:center}
.opt.ok{background:var(--mint);color:var(--mint-ink);box-shadow:0 8px 0 var(--mint-d)}
.opt.bad{background:var(--coral);color:#fff;box-shadow:0 8px 0 var(--coral-d)}
.feedback{width:min(760px,100%);border-radius:28px;padding:18px 22px;font-weight:800;font-size:20px;display:flex;flex-direction:column;gap:10px;animation:enter .25s}
.feedback.ok{background:var(--mint);color:var(--mint-ink)}
.feedback.bad{background:var(--navy);color:#fff}
.feedback .corr{font-family:var(--display);font-size:34px;color:var(--yellow)}
.flash-ok{animation:flashok .5s}
@keyframes flashok{30%{box-shadow:inset 0 0 0 14px var(--mint)}}
.floater{position:fixed;font-family:var(--display);font-weight:800;font-size:56px;color:var(--mint-d);pointer-events:none;animation:float 1s ease-out forwards;z-index:40}
@keyframes float{to{transform:translateY(-120px);opacity:0}}

/* noktalama */
.punct{background:var(--pink);color:#4A0717}
.sentence{background:#fff;border-radius:34px;padding:28px 32px;box-shadow:0 12px 0 #D9607A;display:flex;flex-wrap:wrap;align-items:center;gap:12px 8px;font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,48px);color:var(--navy)}
.word{border:3px solid transparent;border-radius:16px;padding:0 12px;background:#F4F5FF;color:var(--navy);font:inherit}
.word.cap{background:var(--mint-l);color:#0E5A38}
.gap{min-width:30px;height:56px;border-radius:12px;border:3px dashed #C9CCF2;background:#fff;color:#6B5200;font:inherit;padding:0 4px;display:inline-flex;align-items:center;justify-content:center}
.gap.inner{min-width:22px;margin:0 -6px}
.gap.has{border:3px solid var(--yellow);background:var(--yellow-l)}
.gap.sel{border:3px solid var(--coral);background:var(--coral-l)}
.marks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.mark{height:84px;border:0;border-radius:24px;background:#fff;color:var(--navy);font-family:var(--display);font-weight:800;font-size:48px;box-shadow:0 8px 0 #D9607A}
.mark.clear{font-size:20px;background:#FFE1E7;color:#9B1B37}
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:flex;gap:10px;align-items:center;font-weight:800}
.cbox{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}

/* hafıza */
.memory{background:#4A2BB0}
.mgrid{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;perspective:900px}
.mcard{border:0;border-radius:24px;min-height:110px;position:relative;transform-style:preserve-3d;transition:transform .45s;background:transparent;padding:0}
.mcard.open,.mcard.done{transform:rotateY(180deg)}
.mface{position:absolute;inset:0;border-radius:24px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,42px)}
.mback{background:#8466E0;box-shadow:0 8px 0 #31188A;color:#B49CFF}
.mfront{background:#fff;color:var(--navy);transform:rotateY(180deg);box-shadow:0 8px 0 var(--lav);border:5px solid var(--yellow)}
.mcard.done .mfront{background:var(--mint);color:var(--mint-ink);border-color:var(--mint);box-shadow:0 8px 0 var(--mint-d)}
.mside{width:300px;display:flex;flex-direction:column;gap:16px}
.mstat{padding:14px;border-radius:22px;background:#5E3FD0}

/* ödül & öğren */
.reward-card{width:min(760px,100%);margin:auto;padding:36px 40px;border-radius:48px;background:var(--mint);color:var(--mint-ink);display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 18px 0 var(--mint-d);animation:popin .5s cubic-bezier(.2,1.6,.4,1)}
.reward-card.zero{background:#fff;color:var(--navy);box-shadow:0 18px 0 var(--lav)}
@keyframes popin{from{transform:scale(.6);opacity:0}}
.gainbig{font-family:var(--display);font-weight:800;font-size:clamp(100px,14vw,170px);line-height:.85}
.lines{width:100%;padding:16px 20px;border-radius:24px;background:var(--mint-l);display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:17px}
.reward-card.zero .lines{background:var(--paper)}
.lines div{display:flex;justify-content:space-between;gap:14px}
.learn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.lcard{border-radius:28px;background:#fff;color:var(--navy);padding:18px 22px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 0 #11143A}
.yours{padding:8px 12px;border-radius:14px;background:#FFE1E7;color:#7A1428;font-family:var(--display);font-weight:800;font-size:22px}
.right{padding:8px 12px;border-radius:14px;background:var(--mint-l);color:#0E5A38;font-family:var(--display);font-weight:800;font-size:22px}
.rule{padding:10px 14px;border-radius:16px;background:var(--paper);font-weight:700}
.rule b{display:block;font-family:var(--display);font-size:20px}

/* ebeveyn */
.parent{background:var(--paper);color:var(--navy)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.panel{background:#fff;border-radius:28px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 0 #DDE0F5}
.panel.dark{background:var(--navy);color:#fff;box-shadow:none}
.panel h2{margin:0;font-family:var(--display);font-weight:800;font-size:24px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chip{height:50px;border:3px solid transparent;border-radius:16px;background:var(--navy2);color:#fff;font-weight:800;font-size:18px}
.chip.sel{border-color:var(--yellow);color:var(--yellow);background:var(--navy3)}
.panel input[type=time]{width:120px}
.panel input[type=text],.panel input[type=number],.panel input[type=time]{height:44px;border:0;border-radius:12px;padding:0 12px;font-family:var(--body);font-weight:800;font-size:16px;background:var(--navy2);color:#fff}
.panel:not(.dark) input[type=text],.panel:not(.dark) input[type=number]{background:var(--paper);color:var(--navy)}
.habit{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--paper);font-weight:800;font-size:17px}
.habit input{width:26px;height:26px;accent-color:var(--mint-d)}
.hist{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:15px;padding:4px 0;border-bottom:1px solid #EEF0FF}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:15px}
.setrow input{width:64px}
.toggle{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:4px 0}
.linkbtn{background:none;border:0;color:#3A3F86;font-weight:800;font-size:16px;text-decoration:underline;padding:6px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:14px 22px;border-radius:999px;font-weight:800;z-index:60;animation:enter .2s}

@media (max-width: 900px){
  .topbar{grid-template-columns:1fr 1fr}
  .bank{grid-column:1/-1;grid-row:1}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:1fr}
  .marks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mside{width:100%}
}
@media (max-width: 560px){
  .cards{grid-template-columns:1fr}
  .topics{grid-template-columns:1fr}
  .mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat .ico{display:none}
  .stat{padding:12px 16px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}