/* Masal Diyarı – mobil öncelikli tema */
:root{
  --sky1:#bde7ff; --sky2:#fff4fb;
  --ink:#3b2f5c; --ink-soft:#6d6390;
  --card:#ffffff; --line:#efe7fb;
  --pink:#ff7eb6; --purple:#9b7bff; --blue:#5ec8ff; --green:#5fd39a; --yellow:#ffd25e; --orange:#ff9f5a; --red:#ff6b6b;
  --radius:22px;
  --shadow:0 6px 0 rgba(155,123,255,.14), 0 12px 26px rgba(59,47,92,.09);
  --nav-h:68px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:'Nunito',system-ui,sans-serif; color:var(--ink); font-size:16px;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 50%,#fff 100%) fixed;
  min-height:100vh; overflow-x:hidden;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
}
h1,h2,h3,.baloo{font-family:'Baloo 2','Nunito',sans-serif; line-height:1.15}
h1{font-size:26px; margin:0 0 12px} h2{font-size:22px; margin:0 0 10px} h3{font-size:18px; margin:0 0 8px}
a{color:var(--purple)}
.muted{color:var(--ink-soft)}
.small{font-size:13px}

/* ---------- Dekor ---------- */
.decor{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
body.sade .decor{opacity:.15}
.cloud{position:absolute; animation:drift linear infinite; opacity:.85}
@keyframes drift{from{transform:translateX(-260px)} to{transform:translateX(calc(100vw + 260px))}}
.butterfly{position:absolute; width:40px; animation:flyPath 24s ease-in-out infinite}
.butterfly .wing{transform-box:fill-box; transform-origin:right center; animation:flap .35s ease-in-out infinite alternate}
.butterfly .wing.r{transform-origin:left center}
@keyframes flap{from{transform:scaleX(1)} to{transform:scaleX(.25)}}
@keyframes flyPath{0%{transform:translate(-60px,60vh)}25%{transform:translate(25vw,35vh)}50%{transform:translate(55vw,55vh)}75%{transform:translate(80vw,25vh)}100%{transform:translate(110vw,45vh)}}

/* ---------- Yerleşim ---------- */
.wrap{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:12px 16px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0 12px}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none}
.logo .castle{font-size:32px; animation:bob 3s ease-in-out infinite}
.logo b{font:800 24px/1 'Baloo 2'; background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
.user-chip{display:flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:4px 12px 4px 4px; box-shadow:0 4px 0 var(--line); font-weight:800; font-size:14px; text-decoration:none; color:var(--ink)}
.user-chip .ini{width:32px; height:32px; border-radius:50%; background:var(--purple); color:#fff; display:grid; place-items:center; font-size:14px}

/* Alt menü (telefon) → üst sekmeler (geniş ekran) */
nav.bottom{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:space-around;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:2px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)); height:calc(var(--nav-h) + env(safe-area-inset-bottom))}
nav.bottom a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none;
  color:var(--ink-soft); font-weight:800; font-size:11px; border-radius:16px; min-width:0}
nav.bottom a .em{font-size:24px; line-height:1; transition:transform .2s}
nav.bottom a.on{color:var(--purple); background:#f3eeff}
nav.bottom a.on .em{transform:translateY(-2px) scale(1.12)}
@media (min-width:900px){
  body{padding-bottom:24px}
  nav.bottom{position:sticky; top:8px; bottom:auto; height:auto; margin:0 auto 14px; max-width:1100px; border:0; border-radius:20px;
    box-shadow:var(--shadow); justify-content:flex-start; gap:6px; padding:8px}
  nav.bottom a{flex:0 0 auto; flex-direction:row; gap:8px; font-size:15px; padding:10px 16px}
  nav.bottom a .em{font-size:20px}
}

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px}
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){ .g4{grid-template-columns:repeat(4,1fr)} .g2w{grid-template-columns:repeat(2,1fr)} }
.pill{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-weight:800; font-size:12px}
.warn{background:#fff0f0; color:#d64545}
.ok{background:#e3f8ec; color:#1b8a52} .late{background:#ffe6e6; color:#c53b3b} .part{background:#fff3d1; color:#9a6a00}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; cursor:pointer; text-decoration:none;
  font:800 15px 'Nunito'; padding:12px 18px; min-height:46px; border-radius:16px; color:#fff; background:var(--purple);
  box-shadow:0 5px 0 rgba(0,0,0,.14); transition:transform .1s}
.btn:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.14)}
.btn.pink{background:var(--pink)} .btn.green{background:var(--green)} .btn.orange{background:var(--orange)}
.btn.ghost{background:#fff; color:var(--ink); box-shadow:0 5px 0 var(--line)}
.btn.block{width:100%}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}

/* ---------- Panel ---------- */
.hello{display:flex; align-items:center; gap:14px; background:linear-gradient(120deg,#fff 0%,#fff6d9 100%)}
.hello .sun{font-size:44px; animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stat{position:relative; overflow:hidden; text-decoration:none; color:inherit; display:block; margin:0}
.stat .big{font:800 34px/1 'Baloo 2'; margin:4px 0}
.stat .ico{position:absolute; right:10px; top:8px; font-size:30px; animation:bob 3.4s ease-in-out infinite}
.stat.a{background:linear-gradient(140deg,#e6f9ff,#fff)} .stat.b{background:linear-gradient(140deg,#ffe8f3,#fff)}
.stat.c{background:linear-gradient(140deg,#e9fff3,#fff)} .stat.d{background:linear-gradient(140deg,#f1ebff,#fff)}
.list{list-style:none; padding:0; margin:0}
.list li{display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:2px dashed var(--line); font-weight:700}
.list li:last-child{border:0}
.list .t{min-width:70px; color:var(--ink-soft); font-size:13px}
.class-btn{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); padding:14px; border-radius:18px;
  background:#fff; box-shadow:0 5px 0 var(--line); font:800 18px 'Baloo 2'; border-left:8px solid var(--c,var(--purple))}
.class-btn .em{font-size:30px}

/* ---------- Avatar ---------- */
.avatar{display:block; width:100%; height:auto; overflow:visible}
.avatar-img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%}
.avatar .eyes{transform-box:fill-box; transform-origin:center; animation:blink 4.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)}}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}

/* ---------- Yoklama kartları ---------- */
.kids{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (min-width:600px){ .kids{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px} }
.kid{position:relative; border:0; cursor:pointer; background:#fff; border-radius:22px; padding:10px 6px; box-shadow:0 5px 0 var(--line);
  text-align:center; font:inherit; color:inherit; transition:background .25s, box-shadow .25s; touch-action:manipulation}
.kid .face{width:72%; margin:0 auto; filter:grayscale(.85) opacity(.55); transition:filter .3s}
.kid .name{font:800 15px 'Baloo 2'; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kid .st{font-size:11px; font-weight:800; color:var(--ink-soft)}
.kid.geldi{background:linear-gradient(180deg,#eafff4,#fff); box-shadow:0 5px 0 #bdf0d5}
.kid.geldi .face{filter:none} .kid.geldi .st{color:#22a866}
.kid.izinli,.kid.hasta{background:linear-gradient(180deg,#fff7e0,#fff); box-shadow:0 5px 0 #ffe7a6}
.kid.izinli .st,.kid.hasta .st{color:#9a6a00}
.kid.jump .face{animation:jump .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{0%{transform:none} 35%{transform:translateY(-22px) scale(1.08,.95)} 70%{transform:scale(.96,1.05)} 100%{transform:none}}
.bubble{position:absolute; top:-10px; left:50%; transform:translateX(-50%) scale(0); background:var(--yellow); font:800 13px 'Baloo 2';
  padding:3px 10px; border-radius:12px; white-space:nowrap; pointer-events:none; z-index:2}
.kid.jump .bubble{animation:bubble 1.6s ease forwards}
@keyframes bubble{0%{transform:translateX(-50%) scale(0)} 15%{transform:translateX(-50%) scale(1.15)} 25%,80%{transform:translateX(-50%) scale(1)} 100%{transform:translateX(-50%) scale(0)}}
.badge-corner{position:absolute; right:6px; top:6px; font-size:16px}
.sticky-bar{position:sticky; top:0; z-index:5; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); margin:-16px -16px 14px; padding:12px 16px; border-radius:var(--radius) var(--radius) 0 0}

/* ---------- Yemek ---------- */
.seg{display:flex; background:#f3eeff; border-radius:16px; padding:4px; gap:4px; overflow-x:auto}
.seg a{flex:1; text-align:center; text-decoration:none; color:var(--ink); font-weight:800; padding:10px 8px; border-radius:12px; white-space:nowrap}
.seg a.on{background:#fff; box-shadow:0 3px 0 var(--line)}
.meal-row{display:grid; grid-template-columns:48px 1fr; gap:4px 10px; align-items:center; padding:10px 0; border-bottom:2px dashed var(--line)}
.meal-row:last-child{border:0}
.meal-row .who{font:800 16px 'Baloo 2'}
.meal-row .choices{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
@media (min-width:700px){ .meal-row{grid-template-columns:52px 1fr auto} .meal-row .choices{grid-column:auto; display:flex} }
.choice{border:0; cursor:pointer; background:#f6f2ff; border-radius:14px; padding:8px 10px; min-height:52px; font:800 13px 'Nunito'; color:var(--ink); transition:transform .15s}
.choice .e{font-size:20px; display:block}
.choice.on{transform:scale(1.05)}
.choice.on[data-v="hepsi"]{background:#d6f8e6} .choice.on[data-v="yarisi"]{background:#fff1c7} .choice.on[data-v="hic"]{background:#ffe0e0}

/* ---------- Formlar ---------- */
label{display:block; font-weight:800; font-size:14px; margin:10px 0 4px}
input,select,textarea{width:100%; font:600 16px 'Nunito'; padding:12px 14px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--purple)}
.errorlist{color:#c53b3b; font-weight:700; font-size:13px; padding-left:18px; margin:4px 0}
.messages{list-style:none; padding:0; margin:0 0 12px}
.messages li{background:#e3f8ec; color:#1b8a52; padding:12px 16px; border-radius:14px; font-weight:800; margin-bottom:6px}
.messages li.error{background:#ffe6e6; color:#c53b3b}

/* ---------- Tablolar (yönetici – sade) ---------- */
.plain{box-shadow:0 2px 10px rgba(59,47,92,.08); border-radius:16px}
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid #eee; white-space:nowrap}
th{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft)}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Öğrenci listesi ---------- */
.ogr-list{display:grid; gap:10px}
@media (min-width:700px){ .ogr-list{grid-template-columns:repeat(2,1fr)} }
.ogr{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); background:#fff; border-radius:18px; padding:10px 14px; box-shadow:0 4px 0 var(--line)}
.ogr .mini{width:52px; flex:0 0 52px}
.ogr b{font:800 17px 'Baloo 2'}
.profile-head{display:flex; gap:16px; align-items:center}
.profile-head .face{width:110px; flex:0 0 110px}

.chart text{font:700 11px 'Nunito'; fill:var(--ink-soft)}
.ai-note{background:linear-gradient(140deg,#f3eeff,#fff); border:2px dashed #cdbcff}

/* ---------- Giriş ---------- */
.login{max-width:400px; margin:6vh auto 0; text-align:center}
.login .castle{font-size:64px; display:block; animation:bob 3s ease-in-out infinite}

/* ---------- Yönetim ---------- */
input[type=checkbox]{width:22px; height:22px; padding:0; accent-color:var(--purple); flex:0 0 auto}
input[type=color]{height:52px; padding:4px; cursor:pointer}
.tutar{font-size:22px; font-weight:800}
.hub{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:700px){ .hub{grid-template-columns:repeat(3,1fr)} }
.hub-k{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); background:#fff; border-radius:20px; padding:16px;
  box-shadow:0 5px 0 var(--line); border-top:6px solid var(--c); min-height:120px}
.hub-k .em{font-size:30px} .hub-k b{font:800 17px 'Baloo 2'}
.ay-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border-radius:18px; padding:6px; margin-bottom:12px; box-shadow:0 4px 0 var(--line)}
.ay-nav b{font-size:20px} .ay-nav .btn{min-height:40px; padding:6px 16px; font-size:22px}
.check-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px}
.check{display:flex; gap:8px; align-items:center; font-weight:700; margin:0; padding:8px 10px; background:#f8f5ff; border-radius:12px}
.gun-kart{margin-bottom:8px; padding:12px}
.gun-kart.bugun{outline:3px solid var(--green)}
.ogun-satir{display:grid; grid-template-columns:1fr; gap:4px; margin-bottom:8px}
.ogun-satir .ogun-ad{font-weight:800; font-size:13px; color:var(--ink-soft)}
.ogun-satir input{padding:9px 12px; font-size:15px}
.ogun-satir .alerjen{font-size:13px; padding:6px 12px; background:#fffafa}
@media (min-width:700px){ .ogun-satir{grid-template-columns:110px 1fr 180px; align-items:center} }
.hafta-ayrac{height:2px; background:repeating-linear-gradient(90deg,var(--purple) 0 8px,transparent 8px 14px); margin:14px 0; opacity:.4}
.kaydet-bar{position:sticky; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index:4; padding-top:8px}
@media (min-width:900px){ .kaydet-bar{bottom:12px} }
.bar-satir{display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center; margin:8px 0; font-size:14px}
.bar-satir span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar{height:12px; background:#f3eeff; border-radius:999px; overflow:hidden}
.bar i{display:block; height:100%; background:#e86a6a; border-radius:999px}
.bar.gelir i{background:#3fbf7f}
.sil{border:0; background:none; cursor:pointer; font-size:18px; padding:6px}

.confetti{position:fixed; top:-20px; width:10px; height:14px; z-index:50; border-radius:3px; pointer-events:none; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.toast{position:fixed; left:50%; bottom:calc(var(--nav-h) + 20px); transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px;
  border-radius:14px; font-weight:800; z-index:60; opacity:0; transition:opacity .3s; pointer-events:none}
.toast.show{opacity:1}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }