/* ============ 1. TEMA DEĞİŞKENLERİ ============ */
:root{
  --bg:#0b0a16; --bg2:#141026; --surface:#14121f;
  --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.10); --brd:rgba(255,255,255,.13);
  --ink:#f5f3ff; --ink2:#c3bde2; --muted:#8e88ad;
  --acc:#a78bfa; --acc2:#38d8f0; --ok:#0ca30c; --warn:#fab219; --crit:#d03b3b;
  --s1:#9085e9; --s2:#d95926;                     /* veri serileri (doğrulanmış) */
  --grid:rgba(255,255,255,.07); --axis:rgba(255,255,255,.16);
  --h0:rgba(255,255,255,.05); --h1:#33285f; --h2:#4b3a86; --h3:#654eb0; --h4:#8069d6; --h5:#a992f5;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:22px;
}
html[data-theme="light"]{
  --bg:#eef0fb; --bg2:#e6f2fb; --surface:#f5f4fb;
  --glass:rgba(255,255,255,.62); --glass2:rgba(255,255,255,.82); --brd:rgba(23,20,48,.09);
  --ink:#171430; --ink2:#4c476d; --muted:#7b7796;
  --acc:#6d4aff; --acc2:#0e9fbb;
  --s1:#5b3fd6; --s2:#eb6834;
  --grid:rgba(23,20,48,.08); --axis:rgba(23,20,48,.18);
  --h0:rgba(23,20,48,.06); --h1:#ded7f7; --h2:#bdb0ee; --h3:#9784e2; --h4:#7157cf; --h5:#4a35a5;
  --shadow:0 18px 40px rgba(60,50,120,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; padding:18px 16px 60px; overflow-x:hidden;
}
.mesh{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(60vw 60vw at 12% -5%, color-mix(in srgb,var(--acc) 45%, transparent), transparent 60%),
  radial-gradient(50vw 50vw at 92% 8%, color-mix(in srgb,var(--acc2) 40%, transparent), transparent 60%),
  radial-gradient(70vw 50vw at 50% 105%, color-mix(in srgb,var(--s2) 26%, transparent), transparent 65%),
  linear-gradient(160deg,var(--bg),var(--bg2));
  filter:saturate(1.05)}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* ============ 2. GENEL BİLEŞENLER ============ */
.glass{background:var(--glass);border:1px solid var(--brd);border-radius:var(--r);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--shadow)}
.card{padding:18px}
h1{font-size:19px;letter-spacing:-.02em}
h2{font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
h2 .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.sub,.mini{font-size:12px;color:var(--muted)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(140deg,var(--acc),var(--acc2));box-shadow:0 8px 24px color-mix(in srgb,var(--acc) 45%,transparent)}
.topactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ic{width:38px;height:38px;border-radius:12px;border:1px solid var(--brd);background:var(--glass2);
  color:var(--ink);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .2s}
.ic:hover{transform:translateY(-2px);background:var(--acc);color:#fff}
.ic.danger:hover{background:var(--crit)}
button{font-family:inherit}
.ghost{background:transparent;border:1px dashed var(--brd);color:var(--ink2);border-radius:999px;
  padding:5px 12px;font-size:12px;cursor:pointer;transition:.2s}
.ghost:hover{border-style:solid;color:var(--ink);background:var(--glass2)}
.btn{background:linear-gradient(140deg,var(--acc),var(--acc2));color:#fff;border:0;border-radius:12px;
  padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:transform .12s,filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn.sec{background:var(--glass2);color:var(--ink);border:1px solid var(--brd)}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink);background:var(--glass2);
  border:1px solid var(--brd);border-radius:10px;padding:8px 10px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
select option{background:var(--bg2);color:var(--ink)}
.bar{height:8px;border-radius:99px;background:var(--h0);overflow:hidden;margin:8px 0 4px}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));
  width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.tabular{font-variant-numeric:tabular-nums}

/* ============ 3. ÜST KARTLAR ============ */
.hero{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hero .card{display:flex;flex-direction:column;gap:2px;justify-content:center}
.big{font-size:52px;line-height:1;font-weight:750;letter-spacing:-.04em;
  background:linear-gradient(140deg,var(--ink),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cdclock{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.lvlrow{display:flex;align-items:center;gap:12px}
.lvlbadge{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:22px;font-weight:800;
  background:conic-gradient(from 140deg,var(--acc),var(--acc2),var(--acc));color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--acc) 40%,transparent)}
.lvlrow b{display:block;font-size:15px}
.today{flex-direction:row!important;align-items:center;gap:14px}
.donutwrap{width:104px;flex:0 0 104px}
.remain{list-style:none;display:flex;flex-direction:column;gap:3px;margin-top:6px;max-height:82px;overflow:auto}
.remain li{font-size:12px;color:var(--ink2);display:flex;gap:6px;align-items:center}
.remain li::before{content:"○";color:var(--warn)}
.remain li.done::before{content:"●";color:var(--ok)}
.quote{position:relative}
.quote p{font-size:14px;line-height:1.55;font-style:italic}
.qmark{position:absolute;top:-6px;right:14px;font-size:56px;color:var(--brd);line-height:1}
.quote .ghost{margin-top:auto;align-self:flex-start}

/* ============ 4. GÜN NAVİGASYONU ============ */
.daynav{display:flex;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap}
.daynav .nav{width:34px;height:34px;border-radius:10px;border:1px solid var(--brd);background:var(--glass2);color:var(--ink);cursor:pointer}
.daynav .nav:disabled{opacity:.35;cursor:not-allowed}
.daynav .dlabel{font-weight:650;font-size:15px}
.chipset{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:5px 10px;border-radius:999px;
  background:var(--glass2);border:1px solid var(--brd);color:var(--ink2)}
.chip b{color:var(--ink)}
.chip.hot{border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--ink)}
.chip.cold{opacity:.6}

/* ============ 5. GÖREVLER ============ */
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.tasks{display:flex;flex-direction:column;gap:12px}
.task{border:1px solid var(--brd);border-radius:16px;padding:13px;background:var(--glass);transition:.25s}
.task.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--glass))}
.thead{display:flex;align-items:center;gap:10px}
.thead .em{font-size:20px}
.thead .tt{font-weight:650;font-size:14px}
.thead .xp{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.tdesc{font-size:12px;color:var(--muted);margin-top:2px}
.check{width:30px;height:30px;border-radius:10px;border:2px solid var(--brd);background:transparent;cursor:pointer;
  display:grid;place-items:center;color:transparent;font-size:16px;transition:.2s;flex:0 0 30px}
.check:hover{border-color:var(--acc)}
.check.on{background:linear-gradient(140deg,var(--ok),#3ec93e);border-color:transparent;color:#fff;animation:pop .35s}
@keyframes pop{0%{transform:scale(.6)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
.prayers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:11px}
.pbtn{border:1px solid var(--brd);background:var(--glass2);border-radius:14px;padding:10px 4px;cursor:pointer;
  color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;transition:.2s;position:relative;overflow:hidden}
.pbtn .pi{font-size:17px}
.pbtn:hover{transform:translateY(-2px);border-color:var(--acc)}
.pbtn.on{background:linear-gradient(150deg,color-mix(in srgb,var(--ok) 85%,#000),#3ec93e);color:#fff;border-color:transparent;animation:pop .35s}
.pbtn.on .pi::after{content:" ✓"}
.rowline{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:var(--h0);padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(140deg,var(--acc),var(--acc2));border:2px solid #fff2;cursor:pointer;box-shadow:0 3px 10px #0006}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--acc);border:0;cursor:pointer}
.stepbtn{width:32px;height:32px;border-radius:10px;border:1px solid var(--brd);background:var(--glass2);color:var(--ink);
  font-size:16px;cursor:pointer;flex:0 0 32px}
.stepbtn:hover{background:var(--acc);color:#fff}
.pagecount{font-weight:700;font-size:16px;min-width:74px;text-align:center;font-variant-numeric:tabular-nums}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.toggle{display:flex;align-items:center;gap:9px;border:1px solid var(--brd);background:var(--glass2);border-radius:14px;
  padding:10px;cursor:pointer;font-size:12.5px;color:var(--ink2);transition:.2s;text-align:left}
.toggle:hover{border-color:var(--acc)}
.toggle.on{color:var(--ink);border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 12%,var(--glass2))}
.toggle .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--brd);display:grid;place-items:center;color:transparent;flex:0 0 22px}
.toggle.on .box{background:var(--ok);border-color:transparent;color:#fff;font-size:13px}
/* zamanlayıcı */
.timer{display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.tring{width:96px;height:96px;flex:0 0 96px;position:relative;display:grid;place-items:center}
.tring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.tring span{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.tbtns{display:flex;gap:8px;flex-wrap:wrap}
.topicin{width:100%;margin-top:11px}

/* ============ 6. KELİMELER ============ */
.wordform{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.flip{perspective:900px;cursor:pointer}
.flipin{position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);height:104px}
.flip.open .flipin{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;border:1px solid var(--brd);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center}
.face.f{background:var(--glass2)}
.face.b{transform:rotateY(180deg);background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc2) 22%,transparent))}
.face b{font-size:15px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.wlist{max-height:190px;overflow:auto;margin-top:12px;display:flex;flex-direction:column;gap:6px}
.wrow{display:flex;align-items:center;gap:8px;font-size:12.5px;border-bottom:1px solid var(--brd);padding-bottom:5px}
.wrow .m{color:var(--muted);margin-left:auto;text-align:right}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:0 2px}
.x:hover{color:var(--crit)}

/* ============ 7. PROJELER ============ */
.projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.proj{border:1px solid var(--brd);border-radius:18px;padding:14px;background:var(--glass)}
.proj h3{font-size:15px;display:flex;align-items:center;gap:8px}
.proj h3 .x{margin-left:auto}
.ptasks{list-style:none;display:flex;flex-direction:column;gap:7px;margin:10px 0}
.ptask{display:flex;gap:8px;align-items:flex-start;font-size:13px;border:1px solid transparent;border-radius:10px;padding:5px;transition:.2s}
.ptask:hover{border-color:var(--brd);background:var(--glass2)}
.ptask.done .pt{text-decoration:line-through;color:var(--muted)}
.ptask .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.tag{font-size:10.5px;padding:2px 7px;border-radius:999px;border:1px solid var(--brd);color:var(--muted)}
.tag.p-yüksek{color:#fff;background:var(--crit);border-color:transparent}
.tag.p-orta{color:#3a2a00;background:var(--warn);border-color:transparent}
.tag.p-düşük{color:var(--ink2)}
.tag.late{color:#fff;background:var(--crit);border-color:transparent}
.addform{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px}
.addform .r{display:grid;grid-template-columns:1fr 96px 120px auto;gap:6px}

/* ============ 8. GRAFİKLER ============ */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chart{padding:16px}
.chart.wide{grid-column:span 2}
.chart .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.chart .hd h3{font-size:14.5px}
.chart .hd .mini{margin-left:auto}
svg .grid{stroke:var(--grid);stroke-width:1}
svg .axis{stroke:var(--axis);stroke-width:1}
svg text{fill:var(--muted);font-size:10px;font-family:system-ui,sans-serif}
svg text.val{fill:var(--ink2);font-size:10.5px;font-variant-numeric:tabular-nums}
svg .lbl2{fill:var(--ink2);font-size:11px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin-top:8px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
/* ısı haritası */
.hm{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:4px;overflow-x:auto;padding-bottom:4px;grid-auto-columns:minmax(13px,34px);justify-content:center;flex:1}
.hc{width:100%;aspect-ratio:1;min-width:13px;border-radius:4px;background:var(--h0);cursor:pointer;transition:transform .15s}
.hc:hover{transform:scale(1.25)}
.hc.l1{background:var(--h1)}.hc.l2{background:var(--h2)}.hc.l3{background:var(--h3)}
.hc.l4{background:var(--h4)}.hc.l5{background:var(--h5)}
.hc.today{outline:2px solid var(--acc2);outline-offset:1px}
.hc.empty{background:transparent;cursor:default}
.hmwrap{display:flex;gap:6px;align-items:stretch}
.hmdays{display:grid;grid-template-rows:repeat(7,1fr);gap:4px;font-size:9px;color:var(--muted);flex:0 0 24px}
.hmdays span{display:grid;place-items:center}
.hmleg{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:8px;justify-content:flex-end}
.hmleg i{width:12px;height:12px;border-radius:3px;display:inline-block}
/* istatistik kutuları + tablo */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{border:1px solid var(--brd);border-radius:16px;padding:12px;background:var(--glass2)}
.tile .v{font-size:23px;font-weight:750;letter-spacing:-.02em}
.tile .k{font-size:11px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px}
th,td{text-align:right;padding:7px 6px;border-bottom:1px solid var(--brd);font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
/* rozetler */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.badge{border:1px solid var(--brd);border-radius:16px;padding:12px 10px;text-align:center;background:var(--glass2);opacity:.42;transition:.3s;filter:grayscale(1)}
.badge.on{opacity:1;filter:none;border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 20%,transparent),var(--glass2));box-shadow:0 8px 24px color-mix(in srgb,var(--acc) 18%,transparent)}
.badge .bi{font-size:26px}
.badge b{display:block;font-size:12.5px;margin-top:4px}
.badge span{font-size:10.5px;color:var(--muted);display:block;line-height:1.35}

/* ============ 9. EFEKTLER ============ */
.tip{position:fixed;z-index:99;pointer-events:none;opacity:0;transition:opacity .15s;
  background:var(--surface);color:var(--ink);border:1px solid var(--brd);border-radius:10px;padding:7px 10px;font-size:12px;
  box-shadow:0 10px 30px #0007;max-width:230px;line-height:1.45}
.particle{position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:98}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center}
.toastitem{background:var(--surface);border:1px solid var(--brd);border-radius:14px;padding:11px 16px;font-size:13px;
  box-shadow:0 14px 40px #0008;display:flex;gap:10px;align-items:center;animation:up .4s cubic-bezier(.2,.9,.2,1)}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.overlay{position:fixed;inset:0;z-index:101;display:grid;place-items:center;background:#000a;backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lvlcard{text-align:center;padding:34px 40px;border-radius:26px;background:var(--surface);border:1px solid var(--brd);
  box-shadow:0 30px 80px #000a;animation:zoom .5s cubic-bezier(.2,.9,.2,1)}
@keyframes zoom{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.lvlcard .n{font-size:70px;font-weight:800;line-height:1;
  background:linear-gradient(140deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.shine{animation:shine 1.1s}
@keyframes shine{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--ok) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ 10. RESPONSIVE ============ */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr 1fr}
  .grid2,.charts{grid-template-columns:1fr}
  .chart.wide{grid-column:span 1}
}
@media(max-width:620px){
  body{padding:12px 10px 50px}
  .hero{grid-template-columns:1fr}
  .today{flex-direction:column!important;text-align:center}
  .big{font-size:44px}
  .prayers{grid-template-columns:repeat(3,1fr)}
  .wordform,.addform .r{grid-template-columns:1fr}
  .dual{grid-template-columns:1fr}
  h2{font-size:13px}
}

/* taşma koruması */
.hero>*,.grid2>*,.charts>*{min-width:0}
.wrow>*{min-width:0;overflow-wrap:anywhere}

/* ============ 11. GİRİŞ EKRANI ve SENKRON ============ */
[hidden]{display:none!important}

.loginwrap{min-height:100dvh;display:grid;place-items:center;padding:20px}
.logincard{width:100%;max-width:390px;padding:30px 26px;display:flex;flex-direction:column;gap:6px;
  animation:zoom .45s cubic-bezier(.2,.9,.2,1)}
.loginlogo{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;font-size:29px;margin:0 auto 8px;
  background:linear-gradient(140deg,var(--acc),var(--acc2));box-shadow:0 12px 34px color-mix(in srgb,var(--acc) 45%,transparent)}
.logincard h1{text-align:center;font-size:21px}
.logincard .sub{text-align:center;margin-bottom:14px;line-height:1.5}
.logincard .lbl{margin-top:10px;margin-bottom:5px}
.logincard .btn{margin-top:18px;padding:12px;font-size:14.5px}
.logincard .btn:disabled{opacity:.6;cursor:progress}
.logincard .mini{text-align:center;margin-top:14px;line-height:1.55}
.loginerr{margin-top:12px;padding:9px 12px;border-radius:11px;font-size:12.5px;line-height:1.45;
  background:color-mix(in srgb,var(--crit) 16%,transparent);border:1px solid color-mix(in srgb,var(--crit) 45%,transparent)}

/* senkron rozeti */
.chip.sync{cursor:pointer;gap:7px;transition:.2s}
.chip.sync:hover{border-color:var(--acc);color:var(--ink)}
.chip.sync .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 8px;transition:.3s}
.chip.sync[data-durum="senkron"] .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.chip.sync[data-durum="gonderiliyor"] .dot{background:var(--acc2);animation:nabiz 1s infinite}
.chip.sync[data-durum="cevrimdisi"] .dot{background:var(--warn)}
.chip.sync[data-durum="hata"] .dot{background:var(--crit)}
@keyframes nabiz{50%{opacity:.25;transform:scale(.7)}}
@media(max-width:620px){.chip.sync span{display:none}}

/* ============ 12. SEKMELİ GEZİNME ============
   Dar ekranda (telefon / Android uygulaması) menü alta sabitlenir;
   geniş ekranda üstte yatay bir sekme satırı olur. */
.sayfa{display:flex;flex-direction:column;gap:16px}
/* Gizleme yalnizca nav.js calistiktan sonra devreye girer; script yuklenemezse
   butun bolumler alt alta gorunur (bos ekran yerine eski davranis). */
body.sekmeliHazir .sayfa:not(.acik){display:none}

.sekmeler{display:none;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px}
body.sekmeliHazir .sekmeler{display:grid}
.sekmeler button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:0;border-radius:16px;padding:11px 6px;cursor:pointer;
  color:var(--muted);font-size:13px;font-weight:600;font-family:inherit;
  transition:color .2s,background .2s;position:relative;-webkit-tap-highlight-color:transparent}
.sekmeler button span{font-size:17px;line-height:1;transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.sekmeler button:hover{color:var(--ink2)}
.sekmeler button.acik{color:#fff;background:linear-gradient(140deg,var(--acc),var(--acc2));
  box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 35%,transparent)}
.sekmeler button.acik span{transform:scale(1.15)}

/* --- dar ekran: alt menü --- */
@media(max-width:820px){
  .sekmeler{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    border-radius:20px 20px 0 0;border-bottom:0;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
  .sekmeler button{flex-direction:column;gap:3px;font-size:10.5px;padding:7px 2px;border-radius:14px}
  .sekmeler button span{font-size:20px}
  .sekmeler button.acik{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--ink);box-shadow:none}
  .sekmeler button.acik::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
    width:22px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
  /* alt menünün altında kalan içerik olmasın */
  body.sekmeliHazir{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .altbilgi{display:none}
}

/* Sekme değişince içerik yumuşak girsin */
@media (prefers-reduced-motion:no-preference){
  .sayfa.acik{animation:sekmeGir .28s cubic-bezier(.2,.8,.3,1)}
  @keyframes sekmeGir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* Telefonda üst kartlar daha derli toplu dursun */
@media(max-width:620px){
  .hero{grid-template-columns:1fr 1fr}
  .hero .today,.hero .quote{grid-column:span 2}
  .topbar h1{font-size:16px}
  .topbar .sub{display:none}
}

/* Telefonda üst bar tek satıra sığsın, "bugün" kartı yatay kalsın
   (dikey alan sekmeli görünümde değerli) */
@media(max-width:620px){
  .topbar{padding:10px 12px;gap:8px}
  .topbar .logo{width:36px;height:36px;border-radius:12px;font-size:17px}
  .topactions{gap:6px;flex-wrap:nowrap}
  .ic{width:34px;height:34px;border-radius:10px;font-size:14px}
  .topbar h1{font-size:16px;white-space:nowrap}
  .hero .today{flex-direction:row!important;text-align:left}
  .donutwrap{width:88px;flex:0 0 88px}
  .remain{max-height:96px}
  .quote p{font-size:13px}
  .qmark{font-size:44px}
}

/* Veri ve hesap kartındaki düğmeler */
.veriler{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:8px;margin-top:12px}
.veriler .btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;cursor:pointer;
  width:100%;text-align:center}
.veriler .btn.tehlike{border-color:color-mix(in srgb,var(--crit) 45%,transparent);color:var(--crit)}
.veriler .btn.tehlike:hover{background:var(--crit);color:#fff;border-color:transparent}

/* Telefonda taşan iki nokta */
@media(max-width:620px){
  #todayPct{font-size:14px;display:block;overflow-wrap:anywhere}
  /* proje görev formu 4 satır yerine 3 satıra insin */
  .addform .r{grid-template-columns:1fr 1fr;gap:6px}
  .addform .r>input:first-child{grid-column:span 2}
  .addform .r>button{grid-column:span 2}
}