*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--page-bg,#EAF1FE);color:#0F172A;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100dvh}
body.kid{font-family:'Nunito',system-ui,sans-serif}
body.parent{font-family:'Inter',system-ui,sans-serif}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;text-align:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #FDE047;outline-offset:2px}

.app{max-width:460px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}

/* Üst bar */
.hdr{background:var(--c);color:#fff;padding:22px 20px 20px;border-radius:0 0 28px 28px;position:sticky;top:0;z-index:5}
.kid .hdr{box-shadow:0 6px 0 var(--cd)}
.hdr-row{display:flex;align-items:center;gap:14px}
.back,.hbtn{width:50px;height:50px;border-radius:15px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;flex:none;position:relative}
.hbtn .dot{position:absolute;top:9px;right:10px;border:2px solid var(--c)}
.hdr .eyebrow{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hdr .sub{font-size:16px;font-weight:600;opacity:.92}
.hdr .title{font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.hdr .htext{min-width:0;flex:1}
.xp-pill{margin-left:auto;background:#FDE047;color:#713F12;font-weight:900;border-radius:999px;padding:10px 16px;display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:17px}
.kid .xp-pill{box-shadow:0 4px 0 #CA8A04}
.bars{display:flex;gap:6px;margin-top:18px}
.bars i{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.3)}
.bars i.done{background:#fff}.bars i.cur{background:#FDE047}

/* İçerik */
.content{flex:1;padding:22px 20px 8px;display:flex;flex-direction:column;gap:18px}
.actions{position:sticky;bottom:0;padding:14px 20px 20px;background:linear-gradient(to bottom,transparent,var(--bg) 22%);display:flex;flex-direction:column;gap:12px;z-index:4}
.has-tabs .actions{bottom:74px}

.btn{width:100%;min-height:60px;border-radius:18px;background:var(--c);color:#fff;font-weight:800;font-size:19px;box-shadow:0 5px 0 var(--cd);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;transition:transform .08s,box-shadow .08s;text-align:center}
.parent .btn{font-weight:700;font-size:18px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cd)}
.btn.ghost{background:#fff;color:var(--ct);border:2.5px solid var(--sb);box-shadow:none}
.btn.small{min-height:48px;font-size:16px;border-radius:14px}
.btn-row{display:flex;gap:12px}.btn-row>*{flex:1}
.link{color:var(--ct);font-weight:800;text-decoration:underline;text-underline-offset:3px}

.card{background:#fff;border-radius:22px;padding:20px}
.kid .card{box-shadow:0 4px 0 rgba(15,23,42,.07)}
.parent .card{box-shadow:0 1px 4px rgba(15,23,42,.06)}
.card.soft{background:var(--soft);box-shadow:none}
.card.gray{background:#F1F5F9;box-shadow:none}
.tag{display:inline-block;background:var(--soft);color:var(--ct);font-weight:800;font-size:14px;padding:6px 14px;border-radius:999px}
.h{font-size:27px;font-weight:900;line-height:1.2;letter-spacing:-.01em}
.parent .h{font-weight:800}
.h3{font-size:21px;font-weight:900}
.parent .h3{font-weight:700}
.lead{font-size:17px;line-height:1.5;color:#475569}
.body{font-size:18px;line-height:1.55}
.body+.body{margin-top:12px}
.label{font-weight:900;font-size:18px}
.parent .label{font-weight:700}
.muted{color:#64748B}
.quote{font-size:18px;line-height:1.5}
.small-cap{font-weight:800;color:#475569;font-size:16px;margin-bottom:6px}

/* Sorbi */
.sorbi-row{display:flex;gap:12px;align-items:flex-start}
.sorbi{flex:none}
.bubble{flex:1;background:#fff;border:2.5px solid var(--c);border-radius:22px;padding:14px 18px}
.bubble b{display:block;color:var(--ct);font-weight:800;font-size:18px;margin-bottom:2px}
.bubble p{font-size:18px;line-height:1.45}
.me-bubble{align-self:flex-end;max-width:86%;background:var(--c);color:#fff;font-weight:800;padding:14px 18px;border-radius:22px 6px 22px 22px;font-size:18px;line-height:1.4}
.quick{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.quick button{background:#fff;border:2.5px solid var(--c);color:var(--ct);font-weight:800;padding:12px 16px;border-radius:18px 6px 18px 18px;max-width:90%;text-align:left;font-size:16px}

/* Form */
textarea.ta,input.inp{width:100%;border:2.5px solid var(--sb);border-radius:20px;padding:16px 18px;font-size:18px;line-height:1.45;background:#fff;outline:none}
textarea.ta{min-height:120px;resize:vertical}
textarea.ta:focus,input.inp:focus{border-color:var(--c)}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{width:100%;display:flex;align-items:center;gap:14px;background:#fff;border:2.5px solid #E2E8F0;border-radius:18px;padding:16px 18px;font-weight:800;font-size:17px;line-height:1.35}
.parent .opt{font-weight:500}
.kid .opt{box-shadow:0 4px 0 #E2E8F0}
.opt .radio{width:28px;height:28px;border-radius:50%;border:2.5px solid #94A3B8;flex:none;display:grid;place-items:center}
.opt.on{border-color:var(--c);background:var(--bg)}
.kid .opt.on{box-shadow:0 4px 0 var(--c)}
.opt.on .radio{border-color:var(--c);background:var(--c)}
.opt.on .radio::after{content:'';width:10px;height:10px;border-radius:50%;background:#fff}
.opt .box{width:28px;height:28px;border-radius:6px;border:2.5px solid #94A3B8;flex:none;display:grid;place-items:center;color:#fff}
.opt.on .box{background:var(--c);border-color:var(--c)}
.opt.plain{border:0;box-shadow:none;padding:14px 0;border-radius:0;border-top:1px solid #EEF2F6;background:none}
.opt.plain:first-of-type{border-top:0}
.letter{width:42px;height:42px;border-radius:11px;color:#fff;font-weight:900;display:grid;place-items:center;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:12px 22px;border-radius:999px;background:#fff;border:2.5px solid #E2E8F0;font-weight:800;font-size:17px;color:#334155}
.chip.on{background:var(--c);border-color:var(--c);color:#fff}
.chip.static{background:var(--soft);border-color:var(--soft);color:var(--ct)}

.note{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.4;font-weight:700}
.note .ic{flex:none;margin-top:1px}
.note.warn{background:#FFEDD5;color:#9A3412}
.note.ok{background:#E8FAF0;color:#166534}
.note.plain{padding:0;color:#475569;background:none}
.note.dark{background:#4C1D95;color:#fff}.note.dark .ic{color:#FDE047}

/* Alt menü */
.tabbar{position:sticky;bottom:0;background:#fff;border-top:1px solid #E2E8F0;display:flex;height:74px;z-index:6}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#64748B;font-weight:800;font-size:13px}
.parent .tabbar button{font-weight:600}
.tabbar button.on{color:var(--c)}

/* Liste satırları */
.list .row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid #EEF2F6;width:100%;text-align:left}
.list .row:first-of-type{border-top:0}
.list h3{margin-bottom:6px}
.ico-box{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
.ico-box.sm{width:42px;height:42px;border-radius:50%}
.row .t{font-weight:800;font-size:17px;display:block}
.parent .row .t{font-weight:600}
.row .s{color:#64748B;font-size:15px;display:block}
.row .end{margin-left:auto;color:#64748B;font-weight:800;font-size:14px;text-align:right;flex:none;display:flex;align-items:center;gap:4px}
.row.locked{opacity:.6}

/* Bildirimler */
.group{font-size:18px;font-weight:800;margin-top:6px}
.notif{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;position:relative}
.notif .nb{display:flex;flex-direction:column;gap:3px;flex:1;padding-right:14px}
.notif b{font-size:17px}.notif span span,.notif .nb>span{color:#475569;font-size:15px;line-height:1.4}
.notif small{color:#64748B;font-weight:800;font-size:13px}
.notif .dot{position:absolute;top:18px;right:18px}
.empty{text-align:center;color:#64748B;display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px}

.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:#0F172A;color:#fff;padding:13px 18px;border-radius:14px;font-weight:700;z-index:50;max-width:88vw;text-align:center;animation:toast 2.6s forwards;font-size:15px}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pop{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}

.avatar{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:21px;flex:none;border:3px solid #fff}
.avatar.lg{width:96px;height:96px;font-size:40px;border-width:5px}
.av-d{background:#FDE047;color:#713F12}.av-a{background:#F9A8D4;color:#831843}
.pair{display:flex}.pair .avatar+.avatar{margin-left:-14px}
.dot{width:11px;height:11px;border-radius:50%;background:#DC2626;display:inline-block;flex:none}

/* Aile kartı */
.rule-card{background:#1E3A8A;color:#fff;border-radius:22px;padding:22px;box-shadow:0 10px 24px rgba(30,58,138,.25)}
.rule-card.ok{background:#BE185D;box-shadow:0 5px 0 #831843}
.parent .rule-card.ok{box-shadow:0 4px 0 #831843}
.rule-card .rc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rule-card .tag{background:rgba(255,255,255,.18);color:#fff}
.rule-card .rt{font-size:21px;font-weight:800;line-height:1.4;margin:14px 0 10px}
.rule-card small{color:rgba(255,255,255,.8);font-size:15px;font-weight:600}
.rule-card .status{color:#FDE68A;font-weight:800;font-size:15px}
.rule-card textarea{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.4);border-radius:14px;width:100%;min-height:130px;padding:12px;font-size:19px;font-weight:700;line-height:1.4;margin:12px 0;outline:none}

/* Kod kutuları */
.code{display:flex;gap:10px;align-items:center;justify-content:center}
.code .pre{font-size:30px;font-weight:900;margin-right:4px}
.code .d,.code input{width:62px;height:74px;border-radius:15px;text-align:center;font-size:34px;font-weight:900;display:grid;place-items:center}
.code input{border:3px solid var(--c);background:#fff;color:var(--ct);outline:none}
.code input:focus{box-shadow:0 0 0 4px var(--soft)}

.progress{height:10px;border-radius:99px;background:#EEF2F6;overflow:hidden}
.progress i{display:block;height:100%;background:var(--c);border-radius:99px}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{text-align:center;padding:22px 10px}
.stat b{display:block;font-size:40px;font-weight:900;color:#C2410C;line-height:1.1}
.stat span{color:#475569;font-weight:800}

/* Yarışma sonuç tablosu */
.score{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:14px;text-align:center}
.score b{display:block;font-size:46px;font-weight:900;line-height:1}
.score span{font-weight:800;opacity:.9}
.score>i{width:2px;height:60px;background:rgba(255,255,255,.35)}

.rt-table{width:100%;border-collapse:collapse;font-size:16px}
.rt-table th{color:#475569;font-weight:800;text-align:left;padding:0 4px 10px;font-size:15px}
.rt-table th:nth-child(3),.rt-table th:nth-child(4){text-align:center;width:58px}
.rt-table td{padding:12px 4px;border-top:1px solid #EEF2F6;font-weight:700;line-height:1.3}
.rt-table td.n{color:#64748B;font-weight:900;width:28px}
.rt-table td:nth-child(3),.rt-table td:nth-child(4){text-align:center}
.res{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center}
.res.y{background:#16A34A;color:#fff}.res.n{background:#FEE2E2;color:#B91C1C}


@media (max-width:380px){
  .hdr .title{font-size:26px}
  .code .d,.code input{width:52px;height:64px;font-size:28px}
  .h{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}