/* ============ TEMA ============ */
:root{
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-d:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --frame:linear-gradient(165deg,#EC6FA6 0%,#D45FA8 45%,#A866D6 100%);
  --bg:#FBF5F8;
  --bg2:#F7EEF3;
  --card:#FFFFFF;
  --ink:#3B2537;
  --ink-soft:#8C7487;
  --line:#F2E4EC;
  --pink:#E0609A;
  --pink-soft:#FBD7E7;
  --pink-deep:#C2427F;
  --mint:#4FC9A6;
  --lilac:#A86CE0;
  --sun:#F6B04D;
  --sky:#5DB7E8;
  --ok:#3FBF8F;
  --bad:#F06A7E;
  --shadow:0 14px 40px rgba(150,70,120,.10);
  --shadow-sm:0 6px 20px rgba(150,70,120,.07);
  --r:22px;
  /* alt menü yüksekliği: 7px üst + 45px düğme + 7px alt (güvenli alan hariç) */
  --tabbar-h:59px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  font-weight:500;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-d);margin:0;font-weight:800;letter-spacing:.2px}
button{font-family:inherit;font-weight:700;cursor:pointer;border:0;color:inherit}
input,select{font-family:inherit;font-weight:700;color:inherit}
.hidden{display:none !important}

/* ============ SAKURA ============ */
.petals{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.petal{position:absolute;top:-6vh;font-size:16px;opacity:.55;animation:fall linear infinite}
@keyframes fall{
  0%{transform:translateY(-10vh) rotate(0deg)}
  100%{transform:translateY(112vh) rotate(420deg)}
}
@media (prefers-reduced-motion:reduce){.petal{display:none}}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:120;display:none}

/* ============ KİLİT ============ */
.lock{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(170deg,#FFF3F7,#FFE4F0 60%,#F1E8FF);
}
.lock-card{
  width:100%;max-width:360px;background:var(--card);border-radius:30px;
  padding:28px 22px 24px;text-align:center;box-shadow:var(--shadow);
  border:2px solid var(--pink-soft);
  animation:pop .45s cubic-bezier(.2,1.2,.35,1);
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.lock-emoji{font-size:52px;line-height:1;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.lock-title{font-size:25px;margin:10px 0 4px;color:var(--pink-deep)}
.lock-sub{margin:0 0 18px;color:var(--ink-soft);font-size:14px;min-height:20px}
.lock-sub.err{color:var(--bad)}

.pin-dots{display:flex;gap:11px;justify-content:center;margin-bottom:22px}
.pin-dots span{
  width:15px;height:15px;border-radius:50%;background:#FFE6EF;
  border:2px solid var(--pink-soft);transition:.18s;
}
.pin-dots span.on{background:var(--pink);border-color:var(--pink);transform:scale(1.18)}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.keypad button{
  height:60px;border-radius:19px;font-size:23px;background:#FFF0F5;
  color:var(--pink-deep);box-shadow:var(--shadow-sm);transition:.12s;
  font-family:var(--font-d);
}
.keypad button:active{transform:scale(.92);background:var(--pink-soft)}
.keypad button.ghost{background:transparent;box-shadow:none;color:var(--ink-soft);font-size:19px}
.shake{animation:shake .42s}
@keyframes shake{
  10%,90%{transform:translateX(-6px)} 20%,80%{transform:translateX(7px)}
  30%,50%,70%{transform:translateX(-10px)} 40%,60%{transform:translateX(10px)}
}

.big-input{
  width:100%;height:54px;border-radius:16px;border:2px solid var(--pink-soft);
  background:#FFF8FB;padding:0 16px;font-size:17px;text-align:center;margin-bottom:14px;outline:none;
}
.big-input:focus{border-color:var(--pink)}

/* ============ ÜST BAR ============ */
.app{
  position:relative;z-index:1;width:100%;
  /* ekran genişledikçe kenar boşluğu az miktarda artar, içerik tüm alanı kullanır */
  padding:0 clamp(10px, 1.6vw, 26px);
  /* Menü her ekranda altta sabit: içerik menünün biraz üstünde bitsin */
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
}
.topbar{padding:18px 4px 12px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(255,243,247,.97) 70%,rgba(255,243,247,0));
  backdrop-filter:blur(6px);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hello-text{font-family:var(--font-d);font-size:21px;font-weight:800;color:var(--pink-deep);line-height:1.15}
.hello-date{font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.top-badges{display:flex;gap:7px;flex-shrink:0}
.chip{
  background:var(--card);border-radius:14px;padding:7px 11px;font-size:13px;
  box-shadow:var(--shadow-sm);white-space:nowrap;border:1.5px solid var(--line);
}
.chip b{font-family:var(--font-d);font-size:15px}
.chip-fire b{color:#FF8A3D}
.chip-count b{color:var(--lilac)}

.level-wrap{margin-top:11px}
.level-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.level-name{font-family:var(--font-d);font-size:14px;color:var(--pink-deep)}
.level-xp{font-size:11.5px;color:var(--ink-soft)}
.level-bar{height:11px;border-radius:99px;background:#FFE2EC;overflow:hidden;box-shadow:inset 0 1px 3px rgba(200,120,160,.18)}
.level-fill{height:100%;width:0;border-radius:99px;transition:width .6s cubic-bezier(.2,1,.3,1);
  background:linear-gradient(90deg,#FF9CC5,#F0679B,#A38CF0);background-size:200% 100%;animation:shine 3s linear infinite}
@keyframes shine{to{background-position:200% 0}}

/* ============ KARTLAR ============ */
.card{
  background:var(--card);border-radius:var(--r);padding:16px;
  box-shadow:var(--shadow-sm);border:1.5px solid var(--line);margin-bottom:13px;
}
.card-title{font-size:16px;display:flex;align-items:center;gap:7px;margin-bottom:12px;color:var(--pink-deep)}
.sec-title{font-family:var(--font-d);font-size:15px;color:var(--ink-soft);margin:20px 4px 9px;text-transform:uppercase;letter-spacing:.6px}

/* hedef halkası */
.goal-card{display:flex;align-items:center;gap:16px}
.ring{position:relative;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-num{font-family:var(--font-d);font-size:26px;color:var(--pink-deep);line-height:1}
.ring-lbl{font-size:10.5px;color:var(--ink-soft);margin-top:1px}
.goal-info{flex:1;min-width:0}
.goal-head{font-family:var(--font-d);font-size:18px;margin-bottom:3px}
.goal-msg{font-size:13px;color:var(--ink-soft);line-height:1.45}
.mini-stats{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.mini-stat{font-size:12px;color:var(--ink-soft)}
.mini-stat b{font-family:var(--font-d);font-size:16px;color:var(--ink);display:block}

/* ders kartı */
.subj{border-radius:var(--r);padding:13px 14px;margin-bottom:11px;box-shadow:var(--shadow-sm);border:1.5px solid rgba(255,255,255,.7)}
.subj-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.subj-emoji{font-size:22px}
.subj-name{font-family:var(--font-d);font-size:16px;flex:1;letter-spacing:.3px}
.subj-net{background:rgba(255,255,255,.82);border-radius:12px;padding:4px 10px;font-size:12px;white-space:nowrap}
.subj-net b{font-family:var(--font-d);font-size:14px}
.steps{display:flex;flex-wrap:wrap;gap:8px}
.steps.extra{margin-top:8px}
/* Esneme sayesinde kart daraldıkça sayaçlar alta iner, taşma olmaz;
   tek başına kalan sayaç satırın tamamını doldurur. */
.step{flex:1 1 104px;min-width:0;background:rgba(255,255,255,.85);border-radius:14px;padding:7px 6px;text-align:center}
.step-lbl{font-size:10.5px;color:var(--ink-soft);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-row{display:flex;align-items:center;gap:4px;justify-content:center}
.step-row button{
  width:27px;height:27px;border-radius:9px;background:#FFF0F5;color:var(--pink-deep);
  font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;transition:.1s
}
.step-row button:active{transform:scale(.86)}
.step-row input{
  flex:1 1 34px;min-width:0;max-width:60px;height:28px;border:0;background:transparent;
  text-align:center;font-family:var(--font-d);font-size:19px;outline:none;padding:0;
  -moz-appearance:textfield;
}
.step-row input::-webkit-outer-spin-button,.step-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ============ ÇİZELGE ============ */
.week-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.week-nav button{background:var(--card);border-radius:13px;width:40px;height:38px;font-size:17px;box-shadow:var(--shadow-sm);color:var(--pink-deep)}
.week-label{font-family:var(--font-d);font-size:15px;text-align:center;flex:1;color:var(--pink-deep)}
.table-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--shadow-sm);background:var(--card);border:1.5px solid var(--line);-webkit-overflow-scrolling:touch}
table.grid{border-collapse:collapse;width:100%;min-width:720px;font-size:12.5px}
table.grid th{background:var(--pink);color:#fff;padding:9px 6px;font-family:var(--font-d);font-size:12px;font-weight:700;position:sticky;top:0;z-index:2;white-space:nowrap}
table.grid th.today-col{background:var(--pink-deep)}

/* hedef / ilerleme şeridi — gün adının hemen altında, aynı başlık hücresinin içinde */
table.grid th.day-h{padding-bottom:0;vertical-align:top}
table.grid th.day-h.week-goal{background:#E0913F}
.goal-wrap{
  display:block;margin:6px -6px 0;padding:4px 6px 5px;
  background:rgba(0,0,0,.14);transition:background .25s ease;
}
.today-col .goal-wrap{background:rgba(0,0,0,.2)}
.hit .goal-wrap{background:var(--ok)}
.goal-n{display:block;font-size:11.5px;line-height:1.1;letter-spacing:.2px}
.goal-n i{font-style:normal;opacity:.72;font-size:10px}
.goal-bar{
  display:block;height:4px;margin-top:3px;border-radius:99px;
  background:rgba(255,255,255,.3);overflow:hidden;
}
.goal-bar > i{
  display:block;height:100%;border-radius:99px;background:#fff;
  transition:width .25s ease;
}
table.grid td{border:1px solid #FCE6EE;padding:0;text-align:center}
td.subj-cell{font-family:var(--font-d);font-size:12.5px;padding:6px;width:92px;line-height:1.2}
td.metric{text-align:left;padding:5px 8px;white-space:nowrap;background:#FFFBFD;font-size:11.5px;width:132px}
td.total{background:#FFF4DC;font-family:var(--font-d);font-size:13px}
td.auto{background:#FBFBFF;color:var(--ink-soft);font-family:var(--font-d)}
table.grid input{
  width:100%;height:30px;border:0;background:transparent;text-align:center;
  font-size:13px;font-family:var(--font-d);outline:none;padding:0;
  -moz-appearance:textfield;
}
table.grid input:focus{background:#FFF0F6;box-shadow:inset 0 0 0 2px var(--pink)}
table.grid input::-webkit-outer-spin-button,table.grid input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
tr.today-row td{background:#FFFAF0}
.hint{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:9px}

/* ============ İSTATİSTİK ============ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;margin-bottom:13px}
.stat-box{background:var(--card);border-radius:18px;padding:13px;text-align:center;box-shadow:var(--shadow-sm);border:1.5px solid var(--line)}
.stat-val{font-family:var(--font-d);font-size:26px;line-height:1.1;color:var(--pink-deep)}
.stat-lbl{font-size:11.5px;color:var(--ink-soft);margin-top:3px}
.chart{width:100%;overflow:visible}
.legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px;font-size:12px;color:var(--ink-soft)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.weak{background:linear-gradient(120deg,#FFF0F4,#FFE9F5);border:1.5px dashed var(--pink);border-radius:var(--r);padding:14px;margin-bottom:13px}
.weak h4{font-size:15px;color:var(--pink-deep);margin-bottom:5px}
.weak p{margin:0;font-size:13px;color:var(--ink-soft);line-height:1.5}

/* rozetler */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(97px,1fr));gap:10px}
.badge{background:var(--card);border-radius:17px;padding:12px 7px;text-align:center;box-shadow:var(--shadow-sm);border:1.5px solid var(--line)}
.badge.locked{opacity:.42;filter:grayscale(1)}
.badge-ico{font-size:27px;line-height:1}
.badge-name{font-family:var(--font-d);font-size:11.5px;margin-top:5px;line-height:1.2}
.badge-desc{font-size:10px;color:var(--ink-soft);margin-top:2px;line-height:1.25}
.badge.earned{border-color:#FFD9A8;background:linear-gradient(170deg,#FFFDF8,#FFF6E9)}

/* kilitli rozetin ilerlemesi */
.badge-prog{margin-top:7px;display:flex;flex-direction:column;align-items:center;gap:3px}
.badge-prog-bar{display:block;width:100%;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.badge-prog-bar > i{display:block;height:100%;border-radius:99px;background:var(--pink);transition:width .3s ease}
.badge-prog-txt{font-family:var(--font-d);font-size:9.5px;color:var(--ink-soft);line-height:1}

/* ============ ROZETLER SAYFASI ============ */
.sec-count{float:right;font-size:12.5px;letter-spacing:0;text-transform:none;opacity:.8}
.badge-summary{text-align:center}
.badge-sum-head{display:flex;flex-direction:column;align-items:center;gap:1px}
.badge-sum-num{font-family:var(--font-d);font-size:34px;line-height:1;color:var(--pink-deep)}
.badge-sum-num i{font-style:normal;font-size:17px;color:var(--ink-soft)}
.badge-sum-lbl{font-size:12px;color:var(--ink-soft)}
.badge-sum-bar{display:block;height:9px;border-radius:99px;background:var(--pink-soft);overflow:hidden;margin:11px 0 0}
.badge-sum-bar > i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--pink),var(--sun));transition:width .4s ease;
}
.badge-next{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line);text-align:left}
.badge-next-title{font-family:var(--font-d);font-size:12px;color:var(--ink-soft);margin-bottom:7px}
.badge-next-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.badge-next-ico{font-size:17px;line-height:1}
.badge-next-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-next-num{font-family:var(--font-d);color:var(--pink-deep);font-size:12.5px}

/* İstatistik ekranındaki rozet kısayolu */
.badge-link{display:block;width:100%;text-align:left;cursor:pointer;transition:.15s}
.badge-link:active{transform:scale(.99)}
.badge-link-head{display:flex;align-items:center;justify-content:space-between;gap:9px}
.badge-link-title{font-family:var(--font-d);font-size:15px}
.badge-link-count{font-family:var(--font-d);font-size:13.5px;color:var(--pink-deep)}
.badge-link-icos{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;font-size:21px;line-height:1}
.badge-link-empty{font-size:12px;font-weight:700;color:var(--ink-soft)}

/* ============ DENEMELER ============ */
.exam-form{display:grid;gap:9px}
.frow{display:flex;gap:9px;flex-wrap:wrap}
.frow>*{flex:1;min-width:130px}
.inp{
  width:100%;height:44px;border-radius:13px;border:1.5px solid var(--line);
  background:#FFF9FB;padding:0 13px;font-size:14px;outline:none;
}
.inp:focus{border-color:var(--pink)}
label.lbl{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:4px}
.dy-grid{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;margin-bottom:6px}
.dy-name{font-size:13px;font-family:var(--font-d)}
.dy-grid input{width:62px;height:38px;border-radius:11px;border:1.5px solid var(--line);background:#FFF9FB;text-align:center;font-size:15px;font-family:var(--font-d);outline:none;-moz-appearance:textfield}
.dy-grid input::-webkit-outer-spin-button,.dy-grid input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dy-grid input:focus{border-color:var(--pink)}
.dy-head{display:grid;grid-template-columns:1fr auto auto;gap:7px;font-size:11px;color:var(--ink-soft);margin-bottom:5px}
.dy-head span:nth-child(2),.dy-head span:nth-child(3){width:62px;text-align:center}

.btn-primary{
  background:linear-gradient(100deg,var(--pink),#C86BE0);color:#fff;border-radius:15px;
  padding:13px 20px;font-size:15px;box-shadow:0 6px 18px rgba(240,103,155,.34);transition:.14s;
  font-family:var(--font-d);
}
.btn-primary:active{transform:scale(.96)}
.btn-primary.wide{width:100%}
.btn-ghost{background:#FFF0F5;color:var(--pink-deep);border-radius:14px;padding:11px 16px;font-size:13.5px}
.btn-danger{background:#FFEDEF;color:#D64257;border-radius:14px;padding:11px 16px;font-size:13.5px}
.btn-row{display:flex;gap:9px;flex-wrap:wrap}
.btn-row>*{flex:1;min-width:120px}

.exam-item{background:var(--card);border-radius:17px;padding:13px;margin-bottom:10px;box-shadow:var(--shadow-sm);border:1.5px solid var(--line)}
.exam-top{display:flex;align-items:center;gap:10px}
.exam-name{font-family:var(--font-d);font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exam-date{font-size:11.5px;color:var(--ink-soft)}
.exam-score{font-family:var(--font-d);font-size:21px;color:var(--pink-deep);text-align:right;line-height:1.1}
.exam-score small{display:block;font-size:10px;color:var(--ink-soft);font-family:var(--font)}
.exam-bars{display:flex;gap:5px;margin-top:10px}
.exam-bar{flex:1;text-align:center}
.exam-bar .bar{height:38px;background:#FFF0F5;border-radius:7px;display:flex;align-items:flex-end;overflow:hidden}
.exam-bar .fill{width:100%;border-radius:7px 7px 0 0;transition:height .5s}
.exam-bar .t{font-size:9.5px;color:var(--ink-soft);margin-top:3px}
.exam-bar .n{font-size:10.5px;font-family:var(--font-d)}
.del-x{width:30px;height:30px;border-radius:10px;background:#FFEDF1;color:#D64257;font-size:14px;flex-shrink:0}

.empty{text-align:center;padding:30px 16px;color:var(--ink-soft);font-size:13.5px;line-height:1.6}
.empty div{font-size:42px;margin-bottom:8px}

/* ============ TABBAR ============ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-top:1.5px solid var(--line);
  padding:7px 4px calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -5px 22px rgba(226,120,163,.12);
}
.tabbar button{
  background:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 4px;border-radius:13px;color:var(--ink-soft);flex:1;min-width:0;transition:.15s;
}
.tabbar button i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar button span{font-size:20px;line-height:1;transition:.2s;filter:grayscale(.65) opacity(.75)}
.tabbar button i{font-style:normal;font-size:10.5px;font-weight:700}
.tabbar button.on{color:var(--pink-deep);background:#FFF0F6}
.tabbar button.on span{filter:none;transform:translateY(-2px) scale(1.13)}

/* ============ TOAST ============ */
.toast{
  position:fixed;left:50%;bottom:88px;transform:translate(-50%,26px);
  background:var(--ink);color:#fff;padding:11px 19px;border-radius:15px;
  font-size:13.5px;z-index:200;opacity:0;pointer-events:none;transition:.28s;
  max-width:88vw;text-align:center;box-shadow:0 8px 26px rgba(90,61,78,.3);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Yalnız sekme değişiminde, kaydırmasız solma: transform kullanılırsa içindeki
   drawer/modal (position:fixed) animasyon süresince sayfaya göre konumlanıp sıçrıyordu */
.view.view-enter{animation:viewIn .28s ease}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media (min-width:760px){
  .topbar{position:static;background:none;backdrop-filter:none}
  .subj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
  .subj{margin-bottom:0}
}

/* ============ HOŞ GELDİN EKRANI ============ */
.welcome-card{
  width:100%;max-width:370px;background:var(--card);border-radius:30px;
  padding:24px 20px 22px;text-align:center;box-shadow:var(--shadow);
  border:2px solid var(--pink-soft);position:relative;
  animation:pop .5s cubic-bezier(.2,1.2,.35,1);
}
.sparkles{position:absolute;top:-14px;right:18px;font-size:30px;animation:twinkle 1.9s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.28) rotate(18deg);opacity:1}}

.photo-frame{
  position:relative;width:100%;max-width:250px;margin:0 auto 16px;
  background:#fff;padding:9px 9px 9px;border-radius:16px;
  box-shadow:0 8px 24px rgba(226,120,163,.26);
  transform:rotate(-2.2deg);
}
.photo-frame img{display:block;width:100%;border-radius:11px;background:#F3ECE6}
.photo-tape{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:78px;height:22px;background:rgba(255,198,92,.62);border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.07);
}
.welcome-title{font-size:23px;color:var(--pink-deep);margin-bottom:6px}
.welcome-quote{margin:0 0 14px;font-size:14px;color:var(--ink-soft);line-height:1.5;min-height:42px}
.welcome-count{
  display:inline-block;background:#FFF0F6;border-radius:14px;padding:8px 15px;
  font-size:13px;color:var(--pink-deep);margin-bottom:16px;border:1.5px solid var(--pink-soft);
}
.welcome-count b{font-family:var(--font-d);font-size:19px}

/* ============ MOBİL DÜZELTMELERİ ============ */
.d-short{display:none}

@media (max-width:600px){
  /* üst bar: uzun isim rozetleri dışarı itmesin */
  .hello{flex:1;min-width:0}
  .hello-text{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hello-date{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-badges{flex-shrink:0}
  .chip{padding:6px 9px;font-size:12px}
  .chip b{font-size:14px}

  /* hedef kartı */
  .goal-info{min-width:0}
  .goal-head{font-size:16px}
  .goal-msg{font-size:12.5px}

  /* dar ekranda sayaçlar biraz büyür, esnek düzen sığdırmayı hallediyor */
  .step-lbl{font-size:11px}
  .step-row input{font-size:17px}
  .step-row button{width:29px;height:29px}
  .subj-net{font-size:11px;padding:4px 8px}
  .subj-name{font-size:15px}

  /* iOS odaklanınca sayfayı yakınlaştırmasın (16px altı input'ta zoom yapar) */
  .inp,.big-input,.dy-grid input,table.grid input{font-size:16px}

  /* 6 sekme dar ekrana sığsın */
  :root{--tabbar-h:51px}   /* dar ekranda menü biraz kısalıyor */
  .tabbar{padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
  .tabbar button{padding:5px 1px;gap:1px}
  .tabbar button span{font-size:17.5px}
  .tabbar button i{font-size:8.5px;letter-spacing:-.2px}
}

@media (max-width:600px){
  /* çizelge: ilk iki sütun sabit kalsın, günler kayarak gezilsin */
  .d-full{display:none}
  .d-short{display:block;line-height:1.25}
  table.grid{min-width:560px;font-size:11.5px}
  table.grid th{padding:7px 3px;font-size:10px}
  table.grid th.day-h{padding-bottom:0}
  .goal-wrap{margin:5px -3px 0;padding:3px 3px 4px}
  .goal-n{font-size:10px}
  .goal-n i{font-size:9px}
  td.subj-cell{width:58px;font-size:10px;padding:4px 2px}
  td.metric{width:96px;font-size:10px;padding:4px 5px}
  table.grid input{height:32px}

  td.subj-cell{position:sticky;left:0;z-index:1}
  td.metric{position:sticky;left:58px;z-index:1}
  table.grid th:nth-child(1){position:sticky;left:0;z-index:3}
  table.grid th:nth-child(2){position:sticky;left:58px;z-index:3}
  td.subj-cell::after,td.metric::after{
    content:'';position:absolute;top:0;bottom:0;right:-1px;width:1px;background:#FCE6EE;
  }
  td.metric::after{box-shadow:2px 0 6px rgba(226,120,163,.13)}
}

@media (max-width:360px){
  .step-row button{width:27px;height:27px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .badges{grid-template-columns:repeat(3,1fr)}
}

/* senkron göstergesi */
.chip-sync{font-size:14px;padding:7px 9px;line-height:1}
.chip-sync.spin{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ KİTAPLARIM ============ */
.chip-gear{font-size:15px;padding:7px 10px;line-height:1;cursor:pointer;transition:.15s}
.chip-gear:active{transform:scale(.9)}
.chip-gear.on{background:var(--pink);border-color:var(--pink)}

/* ilerleme çubuğu */
.pbar{height:8px;border-radius:99px;background:#FFE6EF;overflow:hidden}
.pfill{height:100%;border-radius:99px;background:linear-gradient(90deg,#FF9CC5,#F0679B);transition:width .45s cubic-bezier(.2,1,.3,1)}

/* ders seçici */
.subj-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.spick{
  background:#FFF6FA;border:1.5px solid var(--line);border-radius:13px;
  padding:9px 8px;font-size:12px;text-align:left;color:var(--ink-soft);transition:.14s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.spick.on{background:var(--c);border-color:var(--c);color:var(--i)}
.spick:active{transform:scale(.97)}
textarea.ta{height:auto;padding:11px 13px;line-height:1.55;resize:vertical;min-height:120px}

/* kitap kartı */
.book{
  background:var(--card);border-radius:var(--r);margin-bottom:11px;
  box-shadow:var(--shadow-sm);border:1.5px solid var(--line);overflow:hidden;
  border-left:5px solid var(--c);
}
.book.finished{background:linear-gradient(120deg,#FFFDF7,#FFF6FB)}
.book-head{display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer}
.book-emoji{font-size:22px;flex-shrink:0}
.book-main{flex:1;min-width:0}
.book-name{font-family:var(--font-d);font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-sub{font-size:11.5px;color:var(--ink-soft);margin:2px 0 7px}
.book-pct{font-family:var(--font-d);font-size:14px;color:var(--i);flex-shrink:0}
.book-caret{color:var(--ink-soft);font-size:18px;flex-shrink:0;transition:transform .18s}
.book-head:hover .book-caret{transform:translateX(2px)}
.book.active{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink-soft),var(--shadow-sm)}

/* ============ KITAP DETAY DRAWER'I ============ */
.drawer-scrim{
  position:fixed;inset:0;z-index:40;background:rgba(90,61,78,.34);
  backdrop-filter:blur(2px);animation:scrim-in .22s ease;
}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:41;
  width:min(420px,92vw);display:flex;flex-direction:column;
  background:var(--card);border-left:1.5px solid var(--line);
  box-shadow:-14px 0 40px rgba(226,120,163,.22);
}
.drawer.opening{animation:drawer-in .26s cubic-bezier(.22,.7,.3,1)}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .drawer.opening,.drawer-scrim{animation:none}
}
.drawer-head{
  display:flex;align-items:center;gap:11px;flex-shrink:0;
  padding:calc(14px + env(safe-area-inset-top)) 14px 12px;
  background:linear-gradient(120deg,var(--c,var(--pink-soft))33,transparent);
  border-bottom:1px solid var(--line);
}
.drawer-title{flex:1;min-width:0}
.drawer-title .book-name{white-space:normal}
.drawer-title .book-sub{margin:3px 0 0}
.drawer-x{
  flex-shrink:0;width:34px;height:34px;border-radius:12px;
  background:var(--bg2);color:var(--ink-soft);font-size:15px;line-height:1;
}
.drawer-pbar{flex-shrink:0;border-radius:0;height:5px}
.drawer-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:13px 14px calc(16px + env(safe-area-inset-bottom));
}
body.drawer-open,body.modal-open{overflow:hidden}

/* üniteler */
ul.units{list-style:none;margin:0 0 11px;padding:0}
.unit{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dashed #FBE9F0}
.unit:last-child{border-bottom:0}
.ubox{
  width:26px;height:26px;border-radius:9px;flex-shrink:0;
  border:2px solid var(--pink-soft);background:#FFF8FB;color:#fff;
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s;
}
.unit.done .ubox{background:var(--ok);border-color:var(--ok)}
.ubox:active{transform:scale(.86)}
.uname{flex:1;min-width:0;font-size:13.5px;line-height:1.35;cursor:pointer;word-break:break-word}
.unit.done .uname{text-decoration:line-through;color:var(--ink-soft)}
.uedit{
  flex:1;min-width:0;height:34px;border-radius:10px;border:1.5px solid var(--pink);
  background:#FFF8FB;padding:0 9px;font-size:13.5px;outline:none;
}
.uicon{
  width:28px;height:28px;border-radius:9px;background:#FFF0F5;color:var(--pink-deep);
  font-size:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.uicon.danger{background:#FFEDF1;color:#D64257}
.uicon:active{transform:scale(.88)}

.add-unit{display:flex;gap:8px}
.add-unit .inp{flex:1;height:40px;font-size:13.5px}
.add-unit .btn-ghost{flex-shrink:0;padding:11px 14px}

@media (max-width:600px){
  .subj-picker{grid-template-columns:1fr 1fr}
  .spick{font-size:11.5px;padding:9px 7px}
  .add-unit .inp{font-size:16px}
  .uname{font-size:13px}
}

/* canlı bağlantı göstergesi */
.chip-sync.is-live{border-color:#9BE3C4;background:#F2FFF9}
.chip-sync b{font-family:var(--font-d);font-size:12px;margin-left:2px;color:var(--ok)}

/* ============ TAM GENİŞLİK / ESNEK IZGARA ============ */
/* Kart grupları: yer varken yan yana, darken alt alta geçer */
/* auto-fill: tek kart kaldığında satırın tamamına yayılıp seyrelmesin,
   bir sütun genişliğinde kalsın */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:13px;
  align-items:start;
}
.grid-cards > .card,
.grid-cards > .book,
.grid-cards > .exam-item{margin-bottom:0}

/* Özet kutuları da boşluğu doldursun */
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.badges{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

/* Geniş ekranda çizelge tüm alanı kullansın */
@media (min-width:760px){
  table.grid{min-width:0}
  .goal-card .ring{width:120px}
}

/* Çok geniş ekranlarda satırlar aşırı uzamasın diye kart içi içerik hizası */
@media (min-width:1200px){
  .grid-cards{gap:15px}
  .weak{padding:16px 18px}
  .goal-card{padding:20px}
  .goal-head{font-size:20px}
}

/* Ultra geniş: hedef kartı ile ders kartları yan yana akmaya devam etsin */
@media (min-width:1600px){
  .subj-list{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
  .badges{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
}

/* Geniş ekranda tam genişliğe uzayan tek düğmeler orantısız görünmesin */
@media (min-width:760px){
  #openForm,
  .btn-row > .btn-ghost,
  .btn-row > .btn-danger{max-width:420px}
  #openForm{width:100%}
}

/* ============ İNGİLİZCE: ALT SEKMELER ============ */
.subtabs{display:flex;gap:7px;margin-bottom:13px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.subtab{
  flex:1;white-space:nowrap;background:var(--card);border:1.5px solid var(--line);
  border-radius:14px;padding:9px 11px;font-size:13px;color:var(--ink-soft);
  box-shadow:var(--shadow-sm);transition:.15s;
}
.subtab.on{background:var(--pink);border-color:var(--pink);color:#fff}

/* ============ İNGİLİZCE: KELİME LİSTESİ ============ */
.hint-inline{font-size:11px;color:var(--ink-soft);font-weight:600}
ul.wlist{list-style:none;margin:0 0 13px;padding:0;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.wrow{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px dashed #FBE9F0}
.wrow:last-child{border-bottom:0}
.wrow.learned{background:linear-gradient(90deg,#F4FFFA,transparent)}
.w-en{font-family:var(--font-d);font-size:14.5px;flex:1 1 34%;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-tr{flex:1 1 34%;min-width:0;font-size:13px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-ticks{flex-shrink:0;font-size:11.5px;color:var(--ok);letter-spacing:1px;white-space:nowrap}
.wrow.editing .uedit{flex:1 1 40%}

/* ============ İNGİLİZCE: OYUNLAR ============ */
.pill-row{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  background:var(--bg2);border:1.5px solid var(--line);border-radius:12px;
  padding:8px 14px;font-size:13px;color:var(--ink-soft);transition:.15s;
}
.pill.on{background:var(--pink);border-color:var(--pink);color:#fff}

.game-pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;margin-bottom:0}
.game-pick.locked{opacity:.55;cursor:default}
.game-pick-ico{font-size:28px;flex-shrink:0;line-height:1}
.game-pick-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.game-pick-name{font-family:var(--font-d);font-size:15.5px}
.game-pick-desc{font-size:11.5px;color:var(--ink-soft);line-height:1.3}
.game-pick-go{font-size:17px;color:var(--pink-deep);flex-shrink:0}

/* oyun içi üst şerit */
.game-bar{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.game-quit{flex-shrink:0;padding:8px 13px}
.game-progress{flex:1}
.game-score{font-family:var(--font-d);font-size:12.5px;white-space:nowrap;flex-shrink:0}

.game-card{text-align:center}
.game-type{font-size:10.5px;letter-spacing:.8px;color:var(--ink-soft);margin-bottom:9px}
.game-prompt{font-family:var(--font-d);font-size:29px;color:var(--pink-deep);line-height:1.2;word-break:break-word}
.game-ask{font-size:12.5px;color:var(--ink-soft);margin-top:5px}
.choices{display:grid;gap:9px;margin-top:15px}
.choice{
  background:var(--bg2);border:1.5px solid var(--line);border-radius:15px;
  padding:14px 12px;font-size:14.5px;transition:.15s;
}
.choice.right{background:var(--ok);border-color:var(--ok);color:#fff}
.choice.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.choice.dim{opacity:.45}
.game-feedback{margin-top:14px;font-size:14px;line-height:1.45}
.game-feedback.ok{color:var(--ok)}
.game-feedback.no{color:var(--bad)}
.game-feedback + .btn-primary{margin-top:12px}
.game-done-ico{font-size:52px;line-height:1}
.game-done-title{font-family:var(--font-d);font-size:21px;color:var(--pink-deep);margin:6px 0 12px}

/* eşleştirme */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.match-col{display:grid;gap:9px;align-content:start}
.match-card{
  background:var(--bg2);border:1.5px solid var(--line);border-radius:14px;
  padding:13px 8px;font-size:13.5px;line-height:1.25;word-break:break-word;transition:.15s;
}
.match-card.sel{background:var(--pink-soft);border-color:var(--pink)}
.match-card.done{background:var(--ok);border-color:var(--ok);color:#fff;opacity:.6}
.match-card.miss{background:var(--bad);border-color:var(--bad);color:#fff;animation:shake .4s}

/* adam asmaca */
.hm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hm-face{font-size:36px;line-height:1}
.hm-lives{font-size:13px;letter-spacing:1px}
.hm-clue{font-size:23px}
.hm-word{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:17px 0}
.hm-word i{font-style:normal;font-family:var(--font-d);font-size:21px;line-height:1.4}
.hm-slot{min-width:24px;border-bottom:3px solid var(--pink-soft);text-align:center;color:var(--pink-deep)}
.hm-slot.on{border-bottom-color:var(--pink)}
.hm-fixed{min-width:14px;color:var(--ink-soft)}
.hm-space{width:15px}
.hm-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:6px}
.hm-key{
  background:var(--bg2);border:1.5px solid var(--line);border-radius:10px;
  padding:10px 0;font-family:var(--font-d);font-size:14px;transition:.12s;
}
.hm-key.hit{background:var(--ok);border-color:var(--ok);color:#fff}
.hm-key.miss{background:#EFE4EA;color:#B9A5B0;opacity:.6}

/* ilerleme */
.tprog{margin-bottom:12px}
.tprog:last-child{margin-bottom:0}
.tprog-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:5px}
.tprog-head b{font-family:var(--font-d);font-size:13.5px}

/* ============ 7 SEKMELİ MENÜ ============ */
.t-short{display:none}
@media (max-width:620px){
  .t-full{display:none}
  .t-short{display:inline}
  .hm-keys{grid-template-columns:repeat(7,1fr);gap:5px}
  .hm-key{padding:9px 0;font-size:13px}
  .match-card{font-size:12.5px;padding:11px 6px}
  .game-prompt{font-size:25px}
  .w-ticks{font-size:10.5px;letter-spacing:0}
}
@media (max-width:420px){
  .wrow{gap:6px;padding:8px 10px}
  .w-en{font-size:13.5px}
  .w-tr{font-size:12px}
}

/* ============ KELİME EKLEME MODAL'I ============ */
.modal-scrim{
  position:fixed;inset:0;z-index:50;background:rgba(90,61,78,.38);
  backdrop-filter:blur(2px);animation:scrim-in .2s ease;
}
.modal{
  position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(470px,94vw);max-height:min(88vh,720px);
  display:flex;flex-direction:column;
  background:var(--card);border:1.5px solid var(--pink-soft);border-radius:24px;
  box-shadow:0 22px 60px rgba(226,120,163,.3);
  animation:modal-in .24s cubic-bezier(.2,1.1,.35,1);
}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.modal,.modal-scrim{animation:none}}

.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;
  padding:15px 16px 11px;border-bottom:1px solid var(--line);
}
.modal-title{font-family:var(--font-d);font-size:17px;color:var(--pink-deep)}
.modal-modes{display:flex;gap:7px;flex-shrink:0;padding:12px 16px 0}
.modal-modes .subtab{flex:1}
.modal-body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:13px 16px;
}
.modal-foot{
  flex-shrink:0;padding:11px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.modal-count{display:block;font-size:12px;color:var(--ok);margin-bottom:9px;font-weight:700}
.modal-foot .btn-row > *{flex:1}

@media (max-width:480px){
  /* telefonda alttan oturan bir sayfa gibi dursun: başparmakla erişilebilir */
  .modal{
    top:auto;bottom:0;left:0;transform:none;width:100%;
    max-height:92vh;border-radius:24px 24px 0 0;border-bottom:0;
    animation:sheet-in .26s cubic-bezier(.2,1.05,.35,1);
  }
  @keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
}

/* ============ HEDİYELER ============ */
.gifts{padding:6px 14px}
.gift{display:flex;align-items:center;gap:12px;width:100%;padding:11px 0;text-align:left;background:none;border-bottom:1.5px dashed var(--line)}
.gift:last-child{border-bottom:0}
.gift-box{font-size:30px;line-height:1;flex-shrink:0;width:38px;text-align:center}
.gift-body{flex:1;min-width:0}
.gift-name{font-family:var(--font-d);font-size:15px;color:var(--pink-deep);line-height:1.2}
.gift-cond{font-size:12px;color:var(--ink-soft);margin-top:2px}
.gift-prog{align-items:stretch;margin-top:6px;max-width:340px}
.gift-prog .badge-prog-txt{align-self:flex-end}
.gift.locked .gift-box{filter:grayscale(1);opacity:.45}
.gift.locked .gift-cond{color:inherit;font-size:13px;margin:0}
.gift-state{font-size:11px;font-weight:700;color:var(--ink-soft);background:var(--line);border-radius:99px;padding:4px 9px;flex-shrink:0}
.gift-state.done{color:#fff;background:var(--ok)}

/* hazır kutu: ara ara sallanır, dokununca büyüyüp kaybolur */
.gift.ready{cursor:pointer}
.gift.ready .gift-box{animation:gift-wiggle 1.8s ease-in-out infinite;transform-origin:50% 85%}
.gift.ready:active .gift-box{transform:scale(.92)}
.gift.opening .gift-box{animation:gift-pop .75s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes gift-wiggle{
  0%,55%,100%{transform:rotate(0) scale(1)}
  8%{transform:rotate(-14deg) scale(1.08)}
  16%{transform:rotate(12deg) scale(1.08)}
  24%{transform:rotate(-10deg) scale(1.05)}
  32%{transform:rotate(8deg) scale(1.03)}
  40%{transform:rotate(-4deg)}
}
@keyframes gift-pop{
  0%{transform:scale(1)}
  35%{transform:scale(1.45) rotate(-10deg)}
  60%{transform:scale(1.25) rotate(8deg);opacity:1}
  100%{transform:scale(2.2);opacity:0}
}
@media (prefers-reduced-motion:reduce){.gift.ready .gift-box{animation:none}}

/* sağ üstteki hediye sepeti */
.chip-gift{cursor:pointer;position:relative;transition:.15s}
.chip-unit{font-style:normal}
/* dar telefonda sağ üstte beş düğme var (seri, sayaç, bulut, sepet, ayar): selamlamaya yer kalsın */
@media (max-width:420px){
  .top-badges{gap:4px}
  .top-badges .chip{padding:6px 7px}
  .chip-unit{display:none}
}
.chip-gift b{color:var(--pink-deep)}
.chip-gift:active{transform:scale(.92)}
.chip-gift.on{background:#FFF0F6;border-color:var(--pink)}
.chip-gift.waiting{animation:gift-wiggle 1.8s ease-in-out infinite}
.chip-gift.waiting::after{
  content:'';position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 2px #fff;
}
@media (prefers-reduced-motion:reduce){.chip-gift.waiting{animation:none}}
.gift-tabs{margin-top:14px}
.gift-tabs .subtab{flex:1;white-space:nowrap}

/* hediye yönetimi sayfası */
.back-link{background:none;color:var(--pink-deep);font-size:13.5px;padding:4px 2px 12px}
.admin-gate{max-width:380px;margin:4px auto 13px;text-align:center}
.admin-gate-ico{font-size:40px;line-height:1;margin-bottom:6px}
.exam-lock{padding:6px 11px;font-size:12px}
.ga-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ga-head-title{font-family:var(--font-d);font-size:18px;color:var(--pink-deep)}
.ga-head-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.ga-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:13px}
.ga-sec{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-sm);border:1.5px solid var(--line);padding:13px 14px}
.ga-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1.5px dashed var(--line)}
.ga-sec-title{font-family:var(--font-d);font-size:15px}
.ga-sec-title i{font-style:normal;font-size:12px;color:var(--ink-soft);margin-left:3px}
.ga-add-mini{background:#FFF0F5;color:var(--pink-deep);border-radius:10px;padding:6px 10px;font-size:12px}
.ga-list{list-style:none;margin:0;padding:0}
.ga-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.ga-row:last-child{border-bottom:0}
.ga-main{flex:1;min-width:0}
.ga-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-sub{font-size:11.5px;color:var(--ink-soft);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ga-sub b{color:var(--ink)}
.ga-tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--line)}
.ga-tag.ready{background:#FFF1D6;color:#8A5A12}
.ga-tag.ok{background:#E2F7EE;color:#23805C}
.ga-done{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;font-weight:700;color:var(--ink-soft);flex-shrink:0}
.ga-btn{width:32px;height:32px;border-radius:10px;background:#FFF0F5;font-size:13px;flex-shrink:0}
.ga-btn.danger{background:#FFEDF1;color:#D64257}
.ga-empty{font-size:12px;color:var(--ink-soft);padding:12px 0 2px}
@media (max-width:420px){.ga-grid{grid-template-columns:minmax(0,1fr)}}

/* ============ ROZETLER (yeni) ============ */
:root{
  --r-bronze:#D4925E;  --r-bronze-bg:linear-gradient(150deg,#FFF4EA,#F7D9BF);
  --r-silver:#A3AEC0;  --r-silver-bg:linear-gradient(150deg,#FDFEFF,#DFE5EE);
  --r-gold:#E2AE1F;    --r-gold-bg:linear-gradient(150deg,#FFFBEA,#FFE49A);
  --r-diamond:#8F9CFF; --r-diamond-bg:linear-gradient(150deg,#EEFAFF,#EAE2FF 55%,#FFE6F4);
}

/* seri uyarısı (Bugün ve Rozetler) */
.streak-warn{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;margin-bottom:13px;
  border-radius:18px;background:#FFF6E5;border:1.5px solid #FFD58A;color:#7A4D12;font-size:13px;line-height:1.45;
}
.streak-warn.late{background:#FFEDEF;border-color:#FF9EAB;color:#8A2836;animation:warn-pulse 2s ease-in-out infinite}
.streak-warn-ico{font-size:22px;line-height:1.1}
.streak-warn-txt b{font-family:var(--font-d);font-size:14px}
.warn-sub{display:inline-block;margin-top:3px;font-size:11.5px;opacity:.85}
@keyframes warn-pulse{50%{box-shadow:0 0 0 5px rgba(255,122,138,.15)}}
.chip-fire.danger{border-color:#FF9EAB;background:#FFEDEF;animation:warn-pulse 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.streak-warn.late,.chip-fire.danger{animation:none}}

/* özet: halka + sıradakiler */
/* üst satır: [halka + sıradakiler] [kazandıkların] [seri uyarısı] */
.btop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:4px;align-items:stretch}
.btop.has-warn{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr)}
.btop > *{margin:0}
.stats-badges-title{margin-top:24px}
.btop .streak-warn{flex-direction:column;justify-content:center;gap:8px;border-radius:var(--r)}
.bhero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.bhero-ring{align-self:center}
/* kazanılanlar: kendi içinde kayan karışık liste (sayfa kaymasın) */
.bhero-won{min-width:0;display:flex;flex-direction:column;gap:6px}
.bhero-title i{font-style:normal;color:var(--pink-deep);margin-left:3px}
.bwon-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;
  max-height:152px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:2px;
}
.bwon{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;text-align:left;border:1.5px solid transparent;min-width:0}
.bwon:active{transform:scale(.97)}
.bwon-ico{font-size:18px;line-height:1;flex-shrink:0}
.bwon-name{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bhero-ring .ring-num{font-size:30px}
.bhero-next{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bhero-title{font-family:var(--font-d);font-size:13px;color:var(--ink-soft)}
.bnext{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:14px;background:#FFF7FA;transition:.15s}
.bnext:active{transform:scale(.98)}
.bnext-ico{font-size:22px;line-height:1}
.bnext-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.bnext-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnext-num{font-family:var(--font-d);font-size:12.5px;color:var(--pink-deep);flex-shrink:0}

/* filtre: segment + yatay kayan grup çipleri */
.bfilters{display:flex;gap:4px;padding:4px;margin:16px 0 10px;border-radius:15px;background:#FFE7F0}
.seg{flex:1;padding:9px 6px;border-radius:12px;background:none;font-size:13px;color:var(--ink-soft);transition:.15s}
.seg.on{background:var(--card);color:var(--pink-deep);box-shadow:var(--shadow-sm)}
.bchips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bchips::-webkit-scrollbar{display:none}
.bchip{flex-shrink:0;padding:7px 12px;border-radius:99px;background:var(--card);border:1.5px solid var(--line);font-size:12.5px;white-space:nowrap;transition:.15s}
.bchip i{font-style:normal;font-size:11px;color:var(--ink-soft);margin-left:3px}
.bchip.on{background:var(--pink);border-color:var(--pink);color:#fff}
.bchip.on i{color:#FFE3EE}

/* grup kartı */
.bgroup{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:14px;margin-bottom:13px}
.bgroup-head{display:flex;justify-content:space-between;align-items:baseline}
.bgroup-title{font-family:var(--font-d);font-size:15.5px}
.bgroup-count{font-family:var(--font-d);font-size:13px;color:var(--pink-deep)}
.bgroup-bar{display:block;height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:7px 0 12px}
.bgroup-bar > i,.bt-bar > i,.bsheet-bar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FF9CC5,var(--pink),var(--lilac))}

/* rozet karosu */
.btiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.bt{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:12px 7px 10px;border-radius:17px;background:#FCF8FA;border:2px solid transparent;transition:transform .15s;
}
.bt:active{transform:scale(.96)}
.bt-ico{font-size:28px;line-height:1.1}
.bt-name{font-family:var(--font-d);font-size:12px;line-height:1.2}
.bt-desc{font-size:10px;color:var(--ink-soft);line-height:1.25}
.bt-bar{display:block;width:100%;height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.bt-num{font-family:var(--font-d);font-size:10px;color:var(--ink-soft);line-height:1}
.bt.far{opacity:.5}
.bt.far .bt-ico{font-size:20px;filter:grayscale(1);padding:4px 0}
.bt.next{background:var(--card);border-style:dashed;border-color:var(--pink-soft)}
.bt.earned::after{
  content:'';position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
}
.bt.earned.r-bronze::after{background:var(--r-bronze)}
.bt.earned.r-silver::after{background:var(--r-silver)}
.bt.earned.r-gold::after{background:var(--r-gold)}
.bt.earned.r-diamond::after{background:var(--r-diamond)}
.bt.danger{border-color:#FF9EAB;border-style:solid;background:#FFF4F5}
.bt.danger .bt-num{color:#D64257}

/* rozet detayı (alttan açılan pencere) */
.bsheet{width:min(380px,94vw)}
.bsheet-body{text-align:center;padding:6px 22px 26px}
.bsheet-rarity{font-family:var(--font-d);font-size:12px;padding:3px 11px;border-radius:99px;color:#fff}
.bsheet.r-bronze .bsheet-rarity{background:var(--r-bronze)}
.bsheet.r-silver .bsheet-rarity{background:var(--r-silver)}
.bsheet.r-gold .bsheet-rarity{background:var(--r-gold)}
.bsheet.r-diamond .bsheet-rarity{background:linear-gradient(90deg,#7FC8FF,var(--r-diamond),#C79BFF)}
.bsheet-ico{font-size:64px;line-height:1.1;margin:6px 0 4px;animation:bsheet-pop .4s cubic-bezier(.3,1.5,.5,1)}
.bsheet-ico.locked{filter:grayscale(1);opacity:.45}
@keyframes bsheet-pop{from{transform:scale(.5)}to{transform:scale(1)}}
.bsheet-name{font-family:var(--font-d);font-size:21px;color:var(--pink-deep)}
.bsheet-desc{font-size:13.5px;color:var(--ink-soft);margin-top:2px}
.bsheet-bar{display:block;height:9px;border-radius:99px;background:var(--line);overflow:hidden;margin:16px 0 7px}
.bsheet-state{font-size:13px}
.bsheet-state b{font-family:var(--font-d);color:var(--pink-deep);font-size:15px}
.bsheet-state.done{margin-top:14px;display:inline-block;padding:6px 14px;border-radius:99px;background:var(--ok);color:#fff;font-weight:700}
.bsheet-note{font-size:11.5px;color:var(--ink-soft);margin-top:6px}
.bsheet-warn{margin-top:11px;padding:8px 10px;border-radius:12px;background:#FFEDEF;color:#8A2836;font-size:12.5px;font-weight:700}

@media (max-width:1100px){
  /* üç sütun sığmaz: uyarı üstte tam genişlik, altında iki kart */
  .btop.has-warn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btop .streak-warn{grid-column:1 / -1;grid-row:1;flex-direction:row;align-items:flex-start}
}
@media (max-width:760px){
  .btop,.btop.has-warn{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .bhero{gap:12px}
  .bwon-list{max-height:118px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .btiles{grid-template-columns:repeat(3,1fr);gap:7px}
  .bt{padding:10px 4px 8px}
  .bt-name{font-size:11px}
}

/* ============ DENEMELER (sade, ortalanmış) ============ */
.xpage{max-width:1040px;margin:0 auto}
.xhead{display:flex;align-items:center;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.xstats{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border-radius:18px;overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.xstat{background:var(--card);padding:10px 8px;text-align:center;font-size:11px;color:var(--ink-soft)}
.xstat b{display:block;font-family:var(--font-d);font-size:20px;line-height:1.15;color:var(--ink)}
.xstat b.up{color:var(--ok)}
.xstat b.down{color:#D64257}
.xhead-acts{display:flex;gap:8px;flex-shrink:0}
.xlock{padding:11px 13px}
.xgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:13px}
.xgrid > .card{margin:0}

/* konu yanlışları özeti */
.wtop{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wtop li{display:grid;grid-template-columns:auto minmax(0,1fr) 70px auto;align-items:center;gap:8px;font-size:12.5px}
.wtop-dot{width:9px;height:9px;border-radius:50%}
.wtop-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtop-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.wtop-bar i{display:block;height:100%;border-radius:99px}
.wtop b{font-family:var(--font-d);color:#D64257;min-width:18px;text-align:right}

/* deneme kartları */
.xlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:11px}
.xcard{background:var(--card);border-radius:18px;padding:13px 14px;border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.xcard-top{display:flex;align-items:center;gap:10px}
.xcard-title{flex:1;min-width:0}
.xcard-name{font-family:var(--font-d);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xcard-date{font-size:11px;color:var(--ink-soft)}
.xcard-nums{display:flex;gap:12px;font-size:10px;color:var(--ink-soft);text-align:center}
.xcard-nums b{display:block;font-family:var(--font-d);font-size:17px;line-height:1.1;color:var(--ink)}
.xcard-score b{color:var(--pink-deep)}
.xcard-acts{display:flex;gap:6px}
.xbars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;margin-top:11px}
.xbar{display:flex;flex-direction:column;gap:3px;min-width:0}
.xbar-track{height:6px;border-radius:99px;background:#FFF0F5;overflow:hidden}
.xbar-track i{display:block;height:100%;border-radius:99px}
.xbar-lbl{font-size:10.5px;font-family:var(--font-d);color:var(--ink-soft);white-space:nowrap}
.xcard-topics{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:11.5px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.xcard-topics span{background:#FFF1F3;border-radius:99px;padding:2px 8px}
.xcard-topics b{color:#D64257}

/* ekleme/düzenleme drawer'ı */
.xdrawer{width:min(460px,96vw)}
.xdrawer .drawer-head{background:linear-gradient(120deg,#FFE7F0,transparent)}
.xdrawer-ico{font-size:24px}
.xdrawer .admin-gate{margin-top:30px;box-shadow:none}
.xs-head{display:grid;grid-template-columns:1fr 58px 58px;gap:7px;font-size:11px;color:var(--ink-soft);margin:14px 0 6px;padding:0 10px}
.xs-head span:not(:first-child){text-align:center}
.xs{border-radius:15px;background:color-mix(in srgb,var(--c) 14%,#fff);border:1.5px solid color-mix(in srgb,var(--c) 45%,#fff);padding:8px 10px;margin-bottom:8px}
.xs-row{display:grid;grid-template-columns:1fr 58px 58px;gap:7px;align-items:center}
.xs-name{font-family:var(--font-d);font-size:13px;color:var(--i);min-width:0}
.xs-name small{font-family:var(--font);font-size:10.5px;color:var(--ink-soft)}
.xs input,.xt input{height:36px;border-radius:11px;border:1.5px solid var(--line);background:#fff;text-align:center;
  font-size:15px;font-family:var(--font-d);outline:none;width:100%;-moz-appearance:textfield}
.xs input::-webkit-outer-spin-button,.xs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.xs input:focus{border-color:var(--pink)}
.xs-topics{margin-top:6px}
.xs-topics summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--ink-soft);padding:3px 0;list-style:none}
.xs-topics summary::-webkit-details-marker{display:none}
.xs-topics summary::after{content:' ▾'}
.xs-topics[open] summary::after{content:' ▴'}
.xs-topics summary span{font-weight:600;color:var(--ink);margin-left:4px}
.xs-topics summary span.over{color:#B7791F}
.xt-list{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:5px}
.xt{display:grid;grid-template-columns:1fr 58px 58px;gap:7px;align-items:center}
.xt-hint{font-size:11px;color:var(--ink-soft);margin:6px 0 2px}
.xs-row input:placeholder-shown{color:var(--ink-soft)}
.xs-row input::placeholder{color:#B79AAB}
.xt-name{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xt input{height:32px;font-size:14px}
.xt-empty{font-size:11.5px;color:var(--ink-soft);margin:4px 0}
.xdrawer-foot{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:11px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.xprev{flex:1;display:flex;gap:14px;font-size:10.5px;color:var(--ink-soft)}
.xprev b{display:block;font-family:var(--font-d);font-size:19px;line-height:1.1;color:var(--pink-deep)}

@media (max-width:760px){
  .xgrid{grid-template-columns:minmax(0,1fr)}
  .xlist{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .xhead{flex-direction:column;align-items:stretch}
  .xstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xhead-acts .btn-primary{flex:1}
  .xcard-nums{gap:8px}
}

/* ============ ROZET RENKLERİ VE PARLAMA ============ */
/* kazanılan rozet: zorluğa göre metalik zemin + üzerinden geçen ışık */
.bt.earned,.bwon{position:relative;overflow:hidden;isolation:isolate}
/* overflow:hidden ızgara öğesinin küçülmesine izin veriyor: kayan listede satırlar ezilmesin */
.bwon-list{grid-auto-rows:max-content}
.bwon{min-height:34px}
.bt.earned.r-bronze,.bwon.r-bronze{background:var(--r-bronze-bg);border-color:var(--r-bronze)}
.bt.earned.r-silver,.bwon.r-silver{background:var(--r-silver-bg);border-color:var(--r-silver)}
.bt.earned.r-gold,.bwon.r-gold{background:var(--r-gold-bg);border-color:var(--r-gold)}
.bt.earned.r-diamond,.bwon.r-diamond{background:var(--r-diamond-bg);border-color:var(--r-diamond)}

/* ışık çizgisi */
.bt.earned::before,.bwon::before{
  content:'';position:absolute;inset:-50%;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,var(--shine,.6)) 50%,transparent 58%);
  transform:translateX(-60%);animation:shine var(--shine-t,5s) ease-in-out infinite;
}
.r-bronze{--shine:.35;--shine-t:7s}
.r-silver{--shine:.7;--shine-t:5.5s}
.r-gold{--shine:.85;--shine-t:4.5s}
.r-diamond{--shine:.95;--shine-t:3.6s}
@keyframes shine{0%,62%{transform:translateX(-60%)}88%,100%{transform:translateX(60%)}}
/* hepsi aynı anda parlamasın */
.btiles .bt:nth-child(3n+2)::before,.bwon-list .bwon:nth-child(3n+2)::before{animation-delay:1.1s}
.btiles .bt:nth-child(3n)::before,.bwon-list .bwon:nth-child(3n)::before{animation-delay:2.3s}

/* hare: bronz yok, gümüş ince, altın sıcak, elmas renk değiştirerek nabız gibi */
.bt.earned.r-silver{box-shadow:0 3px 12px rgba(150,165,190,.28)}
.bt.earned.r-gold,.bwon.r-gold{box-shadow:0 4px 16px rgba(226,174,31,.32)}
.bt.earned.r-gold .bt-ico,.bwon.r-gold .bwon-ico{filter:drop-shadow(0 0 5px rgba(255,200,60,.65))}
.bt.earned.r-diamond,.bwon.r-diamond{animation:diamond-glow 4s ease-in-out infinite}
.bt.earned.r-diamond .bt-ico,.bwon.r-diamond .bwon-ico{filter:drop-shadow(0 0 7px rgba(140,170,255,.8))}
@keyframes diamond-glow{
  0%,100%{box-shadow:0 0 0 1px rgba(127,200,255,.35),0 4px 18px rgba(127,200,255,.45)}
  33%{box-shadow:0 0 0 1px rgba(170,140,255,.4),0 4px 22px rgba(170,140,255,.5)}
  66%{box-shadow:0 0 0 1px rgba(255,150,210,.35),0 4px 20px rgba(255,150,210,.45)}
}

/* detay penceresi: büyük simge zorluğun renginde parlar */
.bsheet.r-bronze .bsheet-ico:not(.locked){filter:drop-shadow(0 0 10px rgba(212,146,94,.55))}
.bsheet.r-silver .bsheet-ico:not(.locked){filter:drop-shadow(0 0 12px rgba(163,174,192,.75))}
.bsheet.r-gold .bsheet-ico:not(.locked){filter:drop-shadow(0 0 16px rgba(255,195,40,.85))}
.bsheet.r-diamond .bsheet-ico:not(.locked){animation:bsheet-pop .4s cubic-bezier(.3,1.5,.5,1),diamond-ico 3s ease-in-out .4s infinite}
@keyframes diamond-ico{
  0%,100%{filter:drop-shadow(0 0 14px rgba(127,200,255,.9))}
  50%{filter:drop-shadow(0 0 18px rgba(199,155,255,.95))}
}

@media (prefers-reduced-motion:reduce){
  .bt.earned::before,.bwon::before{animation:none;opacity:0}
  .bt.earned.r-diamond,.bwon.r-diamond,.bsheet.r-diamond .bsheet-ico{animation:none}
}

/* deneme konu ayarı */
.xta .xs-name{margin-bottom:6px}
.xta-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.xta-list li{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid color-mix(in srgb,var(--c) 55%,#fff);border-radius:99px;padding:3px 4px 3px 10px;font-size:12px;max-width:100%}
.xta-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xta-x{width:20px;height:20px;border-radius:50%;background:#FFEDF1;color:#D64257;font-size:10px;flex-shrink:0}
.xta-add{display:flex;gap:7px;align-items:flex-start}
.xta-add textarea{flex:1;min-height:38px;resize:vertical;font-size:13px;padding:9px 11px;font-family:inherit;font-weight:600}
.xta-add .btn-ghost{padding:10px 14px}


/* =====================================================================
   YENİ TASARIM: pano düzeni (pembe çerçeve, sol simge menüsü, beyaz panel)
   ===================================================================== */
h1,h2,h3,h4{letter-spacing:-.2px}
.petals{display:none}
.card{border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.card-title{font-weight:700;color:var(--ink);font-size:15.5px}
.sec-title{font-weight:700;letter-spacing:.3px;font-size:12.5px}
.btn-primary{background:var(--frame);box-shadow:0 8px 22px rgba(212,95,168,.28)}
.chip{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:14px}
.chip b{font-weight:800}

/* başlık: büyük kalın + ince karışık (görseldeki "Hello, Arka") */
.hello-text{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.6px;line-height:1.1}
.hello-text .wave{display:inline-block;transform-origin:70% 80%;animation:wave 2.4s ease-in-out 1}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
.hello-date{font-size:13.5px;color:var(--ink-soft);margin-top:7px;font-weight:500;white-space:normal}

/* sol menü yalnız masaüstünde */
.side{display:none}

@media (min-width:900px){
  body{background:var(--frame);background-attachment:fixed}
  .app{
    display:grid;grid-template-columns:88px minmax(0,1fr);
    height:100vh;padding:14px 14px 14px 0;
  }
  .side{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;height:100%}
  .side-logo{
    width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:27px;
    background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);margin-bottom:26px;
  }
  .side-nav,.side-foot{display:flex;flex-direction:column;gap:8px;align-items:center}
  .side-nav{flex:1;justify-content:center}
  .side button{
    position:relative;width:50px;height:50px;border-radius:16px;background:none;
    display:grid;place-items:center;transition:.18s;
  }
  .side button span{font-size:21px;filter:grayscale(1) brightness(2.2);opacity:.85;transition:.18s}
  .side button:hover{background:rgba(255,255,255,.16)}
  .side button.on{background:#fff;box-shadow:0 8px 20px rgba(90,20,70,.18)}
  .side button.on span{filter:none;opacity:1}
  .side button em{
    position:absolute;left:62px;top:50%;transform:translateY(-50%) translateX(-4px);
    background:var(--ink);color:#fff;font-style:normal;font-size:12px;font-weight:600;white-space:nowrap;
    padding:6px 10px;border-radius:9px;opacity:0;pointer-events:none;transition:.15s;z-index:60;
  }
  .side button:hover em{opacity:1;transform:translateY(-50%)}

  .panel{
    background:#fff;border-radius:32px;height:calc(100vh - 28px);overflow-y:auto;overflow-x:hidden;
    padding:30px clamp(22px,2.6vw,42px) 40px;box-shadow:0 30px 70px rgba(80,20,70,.22);
    scrollbar-width:thin;scrollbar-color:var(--pink-soft) transparent;
  }
  .topbar{position:static;background:none;backdrop-filter:none;padding:4px 0 22px}
  .topbar-in{align-items:flex-start}
  .tabbar,.chip-gear{display:none !important}
  .toast{bottom:34px}
  /* panelin içi: kartlar beyaz panelde hafif pembe zemin üstünde dursun */
  .view .card,.view .bgroup,.view .ga-sec,.view .xcard,.view .stat-box{box-shadow:var(--shadow-sm)}
}

@media (max-width:899px){
  /* telefonda çerçeve: üstte pembe şerit, altında içerik */
  .app{padding:0 12px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px)}
  .topbar{
    position:relative;margin:0 -12px 16px;padding:calc(16px + env(safe-area-inset-top)) 16px 18px;
    background:var(--frame);backdrop-filter:none;border-radius:0 0 26px 26px;color:#fff;
  }
  .topbar .hello-text{color:#fff;font-size:23px}
  .topbar .hello-date{color:rgba(255,255,255,.85);font-size:12px;margin-top:4px}
  .topbar .chip{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff}
  .topbar .chip b,.topbar .chip-fire b,.topbar .chip-count b,.topbar .chip-gift b{color:#fff}
  .topbar .chip-fire.danger{background:#fff;color:var(--ink)}
  .topbar .chip-fire.danger b{color:#D64257}
  .topbar .level-name,.topbar .level-xp{color:#fff}
  .topbar .level-bar{background:rgba(255,255,255,.25);box-shadow:none}
  .tabbar{border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(150,70,120,.10)}
  .tabbar button.on{color:var(--pink-deep);background:#FDEEF5}
}

/* sol menü çizgi simgeleri */
.side button svg{width:23px;height:23px;color:rgba(255,255,255,.88);transition:.18s}
.side button.on svg{color:var(--pink-deep)}
/* seviye çubuğu Bugün'deki XP kartına taşındı */
.level-wrap{display:none}

@media (max-width:899px){
  /* telefonda başlık tam genişlik, düğmeler altında */
  .topbar-in{flex-direction:column;align-items:stretch;gap:12px}
  .top-badges{justify-content:flex-start;flex-wrap:wrap}
  .hello-text{white-space:normal}
}

/* ============ BUGÜN PANOSU ============ */
.tdash{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:start}
.tsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 2px 14px}
.tsec-title{font-size:21px;font-weight:800;letter-spacing:-.3px}
.tsubjs{display:flex;flex-direction:column;gap:12px}

/* ders kartı: solda halka, sağda sayaçlar */
.tsubj{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  background:#FCF8FA;border:1px solid var(--line);border-radius:24px;padding:16px 18px;transition:.2s;
}
.tsubj:focus-within{background:#fff;box-shadow:0 12px 30px rgba(150,70,120,.10);border-color:color-mix(in srgb,var(--c) 70%,#fff)}
.tsubj-ring{position:relative;width:76px;height:76px;display:grid;place-items:center}
.tsubj-ring svg{position:absolute;inset:0}
.tsubj-emoji{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:23px;background:color-mix(in srgb,var(--c) 45%,#fff)}
.tsubj-name{font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-.1px;margin-bottom:9px}
.tsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tstep{display:flex;flex-direction:column;gap:4px;min-width:0}
.tstep-lbl{font-size:11px;color:var(--ink-soft);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tstep-row{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tstep-row button{width:26px;height:32px;background:none;color:var(--ink-soft);font-size:16px;flex-shrink:0}
.tstep-row button:hover{color:var(--pink-deep);background:#FDF0F6}
.tstep-row input{flex:1;min-width:0;width:100%;border:0;text-align:center;font-size:15px;font-weight:800;outline:none;background:none;-moz-appearance:textfield}
.tstep-row input::-webkit-outer-spin-button,.tstep-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tsubj-foot{display:flex;align-items:baseline;gap:12px;margin-top:10px}
.tsubj-acc{font-size:24px;font-weight:800;letter-spacing:-.5px}
.tsubj-meta{font-size:12px;color:var(--ink-soft)}
.tsubj-meta b{color:var(--ink)}

/* sağ sütun: açık pembe alt panel */
.tright{background:var(--bg);border-radius:30px;padding:18px;display:flex;flex-direction:column;gap:16px}
.tright-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px}

.tprofile{background:#fff;border-radius:24px;padding:12px 12px 16px;box-shadow:var(--shadow-sm);text-align:left;height:100%}
.tprofile-cover{height:78px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(135deg,#F6A3C7,#C98BE8 60%,#8FB5F5)}
.tprofile-cover i{position:absolute;border-radius:50%;background:rgba(255,255,255,.35)}
.tprofile-cover i:nth-child(1){width:46px;height:46px;left:8%;top:-10px}
.tprofile-cover i:nth-child(2){width:22px;height:22px;left:40%;top:40px;background:rgba(255,230,120,.7)}
.tprofile-cover i:nth-child(3){width:60px;height:60px;right:-12px;top:20px;background:rgba(120,200,255,.45)}
.tprofile-cover i:nth-child(4){width:14px;height:14px;left:68%;top:12px;background:rgba(255,255,255,.7)}
.tprofile-cover i:nth-child(5){width:30px;height:12px;border-radius:8px;left:24%;top:56px;transform:rotate(-20deg);background:rgba(255,140,190,.7)}
.tprofile-avatar{
  width:56px;height:56px;border-radius:18px;margin:-30px 0 0 12px;position:relative;
  display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--pink-deep);
  background:#fff;box-shadow:0 8px 20px rgba(150,70,120,.18);
}
.tprofile-name{font-weight:800;font-size:16px;margin:10px 0 0 4px}
.tprofile-sub{font-size:12px;color:var(--ink-soft);margin:2px 0 12px 4px}
.tprofile-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ttile{background:var(--bg);border-radius:14px;padding:9px 10px;font-size:11px;color:var(--ink-soft);display:flex;flex-direction:column;gap:1px}
.ttile span{font-size:14px}
.ttile b{font-size:20px;font-weight:800;color:var(--pink-deep);letter-spacing:-.4px}

.txp{background:#fff;border-radius:24px;padding:16px;box-shadow:var(--shadow-sm);display:flex;gap:14px;align-items:center;height:100%}
.txp-medal{width:78px;height:96px;border-radius:18px;flex-shrink:0;display:grid;place-items:center;font-size:44px;background:linear-gradient(160deg,#FFF4E2,#FDE3F0);filter:drop-shadow(0 6px 10px rgba(226,174,31,.25))}
.txp-main{flex:1;min-width:0}
.txp-val{font-size:28px;font-weight:800;color:#7A3FB0;letter-spacing:-.6px;line-height:1.1}
.txp-val small{font-size:15px}
.txp-lbl{font-size:12px;color:var(--ink-soft);margin:3px 0 8px}
.txp-bar{display:block;height:7px;border-radius:99px;background:#F4E6F0;overflow:hidden}
.txp-bar i{display:block;height:100%;border-radius:99px;background:var(--frame)}
.txp-btns{display:flex;gap:8px;margin-top:12px}
.btn-out,.btn-fill{flex:1;padding:9px 8px;border-radius:12px;font-size:12.5px;font-weight:700;transition:.15s}
.btn-out{background:#fff;border:1.5px solid #E7D2E2;color:var(--ink)}
.btn-out:hover{border-color:var(--pink)}
.btn-fill{background:#4FC98E;color:#fff;box-shadow:0 6px 16px rgba(79,201,142,.3)}

/* renkli eylem kartları */
.tacts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tacts > div{display:flex}
.tact{
  position:relative;flex:1;border-radius:24px;padding:18px 18px 20px;color:#fff;cursor:pointer;
  min-height:168px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;transition:transform .15s;
}
.tact:hover{transform:translateY(-2px)}
.tact:active{transform:scale(.98)}
.tact-goal{background:linear-gradient(150deg,#E77FE0,#B95FD8);box-shadow:0 14px 30px rgba(185,95,216,.3)}
.tact-exam{background:linear-gradient(150deg,#F9BE5B,#F29E3D);box-shadow:0 14px 30px rgba(242,158,61,.3)}
.tact-go{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.28);display:grid;place-items:center;font-size:14px}
.tact-ico{width:50px;height:50px;border-radius:15px;background:rgba(255,255,255,.28);display:grid;place-items:center;font-size:26px;margin-bottom:auto}
.tact-ring{position:relative;width:58px;height:58px;display:grid;place-items:center;margin-bottom:auto}
.tact-ring svg{position:absolute;inset:0}
.tact-ring b{font-size:13px;font-weight:800}
.tact-title{font-size:18px;font-weight:800;letter-spacing:-.2px}
.tact-desc{font-size:12.5px;opacity:.9;line-height:1.4}

.tactivity{background:#fff;border-radius:24px;padding:18px 18px 10px;box-shadow:var(--shadow-sm)}
.tactivity-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.tactivity-title{font-size:18px;font-weight:800;letter-spacing:-.3px;flex:1;min-width:150px}
.tlegend{display:flex;gap:12px;font-size:12px;color:var(--ink-soft)}
.tlegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.tactivity-range{font-size:11.5px;color:var(--ink-soft);background:var(--bg);border-radius:10px;padding:6px 10px}

@media (max-width:1180px){
  /* tek sütun: uyarı, Hedefim/son deneme, rozet-hediye, grafik, profil */
  .tdash{grid-template-columns:minmax(0,1fr)}
  .tright,.tleft{display:contents}
  #warnSlot{order:-3}
  .tacts{order:-2}
  #tHub{order:-1}
  #tActivity{order:1}
  #tProfile{order:2}
}
@media (max-width:560px){
  .tright{padding:12px;border-radius:24px}
  .tright-top,.tacts{grid-template-columns:minmax(0,1fr)}
  .tacts{grid-template-columns:1fr 1fr;gap:10px}
  .tact{min-height:150px;padding:14px}
  .tact-title{font-size:16px}
  .tsubj{grid-template-columns:minmax(0,1fr);padding:14px}
  .tsubj-ring{display:none}
  .tsteps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============ İNGİLİZCE ============ */
.esubs{margin:0 0 18px}
.wtools{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.wsearch{flex:1;min-width:200px;margin:0}
.wseg{margin:0;flex:0 1 380px}
.wstat-word{font-size:16px !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.wcard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px 15px 12px;
  box-shadow:var(--shadow-sm);overflow:hidden;transition:.15s;
}
.wcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.wcard:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(150,70,120,.10)}
.wcard.learned{background:linear-gradient(160deg,#F3FFF9,#fff 60%)}
.wcard-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.wcard-type{font-size:10.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.3px;background:color-mix(in srgb,var(--c) 35%,#fff);padding:3px 8px;border-radius:99px}
.wcard-tools{display:flex;gap:4px;opacity:.55;transition:.15s}
.wcard:hover .wcard-tools,.wcard:focus-within .wcard-tools{opacity:1}
.wbtn{width:28px;height:28px;border-radius:9px;background:#FBF1F6;font-size:12px}
.wbtn.danger{background:#FFEDF1}
.wcard-en{font-size:19px;font-weight:800;letter-spacing:-.3px;margin-top:9px;overflow-wrap:anywhere}
.wcard-tr{font-size:13.5px;color:var(--ink-soft);margin-top:1px;overflow-wrap:anywhere}
.wcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px}
.wdots{display:flex;gap:4px}
.wdots i{width:9px;height:9px;border-radius:50%;background:#F0E2EA}
.wdots i.on{background:var(--ok)}
.wcard-badge{font-size:11px;font-weight:700;color:#23805C}
.wcard-wrong{font-size:11px;font-weight:700;color:#D64257}
.wcard.editing{display:flex;flex-direction:column;gap:8px}
.wcard-acts{display:flex;gap:8px}

/* çoklu ekleme drawer'ı */
.wdrawer{width:min(620px,96vw)}
.wpaste{background:var(--bg);border-radius:16px;padding:10px 12px;margin-bottom:14px}
.wpaste summary{cursor:pointer;font-weight:700;font-size:13px;list-style:none}
.wpaste summary::-webkit-details-marker{display:none}
.wpaste textarea{margin-top:10px;font-family:inherit;font-weight:500;font-size:13px;resize:vertical}
.wpaste .btn-out{margin-top:8px;flex:none;padding:9px 16px}
.wr-head,.wr{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) 128px 30px;gap:7px;align-items:center}
.wr-head{font-size:11px;color:var(--ink-soft);margin:0 0 6px}
.wr-list{display:flex;flex-direction:column;gap:7px}
.wr{position:relative;padding:5px;border-radius:14px;border:1px solid transparent;transition:.15s}
.wr .inp{height:38px;padding:8px 10px;font-size:13.5px;margin:0}
.wr select.inp{padding:6px 6px;font-size:12px}
.wr-n{font-size:11px;color:var(--ink-soft);text-align:center;font-weight:700}
.wr-x{width:28px;height:28px;border-radius:9px;background:#FFEDF1;color:#D64257;font-size:11px}
.wr.ok{background:#F3FCF8;border-color:#CDEFE0}
.wr.dup{background:#FFF6E5;border-color:#FFD58A}
.wr-note{display:none;grid-column:2 / -1;font-size:11px;font-weight:700;color:#9A6512}
.wr.dup .wr-note{display:block}
.wr-add{margin-top:10px;width:100%;flex:none}

@media (max-width:560px){
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wcard{padding:11px 11px 10px}
  .wcard-en{font-size:16px}
  .wcard-tools{opacity:1}
  .wr-head{display:none}
  .wr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px}
  .wr-n{display:none}
  .wr select.inp{grid-column:1 / 3}
}

/* kilit, hoş geldin ve ilk açılış ekranları da çerçeve renginde */
.lock{background:var(--frame)}
.lock-card,.welcome-card{box-shadow:0 30px 70px rgba(80,20,70,.25);border-color:rgba(255,255,255,.6)}

/* ============ SAĞ ÜST: kutular (seri, LGS'ye gün, hediye) ============ */
.top-badges{gap:10px;align-items:stretch}
.top-badges .chip{
  display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:18px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:12px;line-height:1.1;
}
.hb-ico{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.hb-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.hb-txt b{font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--ink) !important}
.hb-txt small{font-size:11px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.chip-fire .hb-ico{background:#FFF0E3}
.chip-count .hb-ico{background:#F1EAFF}
.chip-gift .hb-ico{background:#FDE9F3}
.chip-fire.danger{background:#FFF1F3;border-color:#FFB3BE}
.chip-fire.danger .hb-txt b{color:#D64257 !important}
.top-badges .chip-sync,.top-badges .chip-gear{padding:0;width:56px;justify-content:center;font-size:20px}
.chip-gift.waiting::after{top:-4px;right:-4px}
@media (max-width:899px){
  .top-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
  .top-badges .chip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);box-shadow:none;padding:7px 9px 7px 7px;gap:8px}
  .top-badges .hb-ico{width:32px;height:32px;border-radius:11px;font-size:16px;background:rgba(255,255,255,.9)}
  .top-badges .hb-txt b{color:#fff !important;font-size:16px}
  .top-badges .hb-txt small{color:rgba(255,255,255,.85);font-size:10px}
  .top-badges .chip-fire.danger{background:#fff}
  .top-badges .chip-fire.danger .hb-txt b{color:#D64257 !important}
  .top-badges .chip-fire.danger .hb-txt small{color:var(--ink-soft)}
  .top-badges .chip-sync,.top-badges .chip-gear{width:auto;color:#fff}
}

/* ============ BUGÜN: ders kutuları ============ */
.tboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tbox{
  display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;cursor:pointer;
}
.tbox:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(150,70,120,.12)}
.tbox:active{transform:scale(.98)}
.tbox-ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:23px;flex-shrink:0;background:color-mix(in srgb,var(--c) 45%,#fff)}
.tbox-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tbox-name{font-weight:800;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbox-q{font-size:12px;color:var(--ink-soft)}
.tbox-q b{color:var(--i);font-size:14px}
.tbox-tags{display:flex;flex-wrap:wrap;gap:4px}
.tg{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:#F6EEF3}
.tg.ok{background:#E5F8EF;color:#23805C}
.tg.bad{background:#FFEBEE;color:#C23B52}
.tg.mute{background:#F1EEF3;color:#7E7088}
.tg.teach{background:#FFF3DF;color:#9A6512}
.tbox-none{font-size:12px;color:var(--ink-soft)}
.tbox.empty{background:#FCF9FB;border-style:dashed}
.tbox.empty .tbox-ico{filter:saturate(.7)}
.tbox-ring{position:relative;width:54px;height:54px;display:grid;place-items:center;flex-shrink:0}
.tbox-ring svg{position:absolute;inset:0}
.tbox-ring b{font-size:12px;font-weight:800;color:var(--i)}
.tbox.empty .tbox-ring b{font-size:20px;color:var(--pink)}

/* ders giriş drawer'ı */
.sdrawer .drawer-head{background:linear-gradient(120deg,color-mix(in srgb,var(--c) 55%,#fff),#fff)}
.sdrawer-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:23px;background:#fff;box-shadow:var(--shadow-sm)}
.ssw{display:flex;gap:7px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
.ssw-b{width:46px;height:46px;border-radius:14px;font-size:20px;flex-shrink:0;background:color-mix(in srgb,var(--c) 25%,#fff);border:2px solid transparent;transition:.15s}
.ssw-b.on{border-color:var(--i);background:color-mix(in srgb,var(--c) 55%,#fff);transform:translateY(-2px)}
.bsteps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bstep{border-radius:20px;padding:13px;background:#FCF8FA;border:1px solid var(--line)}
.bstep.ok{background:#F2FBF7;border-color:#D3F0E2}
.bstep.bad{background:#FFF5F6;border-color:#FADADF}
.bstep.teach{background:#FFFAF0;border-color:#F8E6C2}
.bstep-lbl{display:block;font-size:12.5px;font-weight:700;margin-bottom:9px}
.bstep-row{display:flex;align-items:center;gap:8px}
.bstep-row button{width:42px;height:44px;border-radius:13px;background:#fff;border:1px solid var(--line);font-size:20px;color:var(--ink);flex-shrink:0}
.bstep-row button:active{transform:scale(.94)}
.bstep-row input{flex:1;min-width:0;width:100%;height:44px;border-radius:13px;border:1px solid var(--line);background:#fff;text-align:center;font-size:22px;font-weight:800;outline:none;-moz-appearance:textfield}
.bstep-row input:focus{border-color:var(--pink)}
.bstep-row input::-webkit-outer-spin-button,.bstep-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bstep-quick{display:flex;gap:6px;margin-top:8px}
.bstep-quick button{flex:1;padding:6px 0;border-radius:10px;background:#fff;border:1px dashed #E5D3DF;font-size:12px;font-weight:700;color:var(--ink-soft)}

/* son deneme kartı sayıları */
.tact-nums{display:flex;gap:16px;margin:2px 0 1px}
.tact-nums span{display:flex;flex-direction:column;font-size:11px;opacity:.9}
.tact-nums b{font-size:20px;font-weight:800;letter-spacing:-.3px}
.tact{cursor:default}
.tact:hover{transform:none}

@media (max-width:560px){
  .tboxes{grid-template-columns:minmax(0,1fr)}
  .bsteps{gap:9px}
  .bstep{padding:11px}
  .bstep-row button{width:36px}
}

/* Bugün yerleşimi: solda etkinlik + dersler, sağda profil/XP + uyarı kutusu + kartlar */
.tleft{display:flex;flex-direction:column;gap:22px}
.tlessons .tsec-head{margin-top:0}
#warnSlot:empty{display:none}
.tright #warnSlot .streak-warn,#warnSlot .streak-warn{
  margin:0;border-radius:24px;padding:16px 18px;background:#fff;border:1px solid #FFE2A8;
  box-shadow:var(--shadow-sm);align-items:center;
}
#warnSlot .streak-warn .streak-warn-ico{width:44px;height:44px;border-radius:14px;background:#FFF3D6;display:grid;place-items:center;font-size:21px;flex-shrink:0}
#warnSlot .streak-warn.late{border-color:#FFB3BE}
#warnSlot .streak-warn.late .streak-warn-ico{background:#FFE7EB}

/* Bugün'de sağ üst kutular profil kartında; başlıkta tekrar etmesin */
body[data-tab="today"] .top-badges .chip-fire,
body[data-tab="today"] .top-badges .chip-count,
body[data-tab="today"] .top-badges .chip-gift{display:none !important}
.tprofile-tiles{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.ttile{border:0;text-align:left;font-family:inherit;font-weight:500;color:var(--ink-soft)}
.ttile.danger{background:#FFF1F3}
.ttile.danger b{color:#D64257}
.tgift{cursor:pointer;position:relative;transition:.15s}
.tgift:hover{background:#FCE8F2}
.tgift.waiting{animation:gift-wiggle 1.8s ease-in-out infinite}
.tgift.waiting::after{content:'';position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--pink)}
@media (prefers-reduced-motion:reduce){.tgift.waiting{animation:none}}

/* ============ BUGÜN: giriş animasyonları (yalnız ilk girişte, .anim) ============ */
@keyframes in-left{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes in-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes in-drop{0%{opacity:0;transform:translateY(-34px)}70%{opacity:1;transform:translateY(5px)}100%{transform:none}}
@keyframes in-pop{0%{opacity:0;transform:translateY(18px) scale(.9)}70%{opacity:1;transform:translateY(-3px) scale(1.02)}100%{transform:none}}
@keyframes in-flip{from{opacity:0;transform:perspective(700px) rotateX(-75deg)}to{opacity:1;transform:none}}
@keyframes in-zoom{0%{opacity:0;transform:scale(.6)}75%{opacity:1;transform:scale(1.04)}100%{transform:none}}
@keyframes in-shake{0%{opacity:0;transform:translateX(0)}25%{opacity:1;transform:translateX(-9px)}45%{transform:translateX(7px)}65%{transform:translateX(-4px)}85%{transform:translateX(2px)}100%{transform:none}}
@keyframes in-spin{from{opacity:0;transform:rotate(-200deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes in-avatar{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fill-in{from{opacity:0}to{opacity:1}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:none}}

.tdash.anim #tActivity{animation:in-left .7s cubic-bezier(.2,.8,.2,1) both}
.tdash.anim .curves path[fill="none"]{stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 1.8s .35s cubic-bezier(.4,0,.2,1) forwards}
.tdash.anim .curves path[fill^="url"]{animation:fill-in .8s 1.1s both}
.tdash.anim .curves g,.tdash.anim .curves line[stroke-dasharray],.tdash.anim .curves circle[r="5.5"]{animation:fill-in .4s 1.9s both}
.tdash.anim .tsec-head{animation:in-left .5s .15s both}
.tdash.anim .tbox{animation:in-pop .55s cubic-bezier(.2,.9,.3,1.2) both}
.tdash.anim .tbox:nth-child(1){animation-delay:.25s}
.tdash.anim .tbox:nth-child(2){animation-delay:.32s}
.tdash.anim .tbox:nth-child(3){animation-delay:.39s}
.tdash.anim .tbox:nth-child(4){animation-delay:.46s}
.tdash.anim .tbox:nth-child(5){animation-delay:.53s}
.tdash.anim .tbox:nth-child(6){animation-delay:.6s}
.tdash.anim .tbox-ring svg circle:last-child{animation:fill-in .5s .7s both}
.tdash.anim #tProfile{animation:in-drop .75s .1s cubic-bezier(.2,.9,.3,1) both}
.tdash.anim .tprofile-avatar{animation:in-avatar .5s .55s cubic-bezier(.3,1.5,.5,1) both}
.tdash.anim .tprofile-cover i{animation:in-avatar .6s both}
.tdash.anim .tprofile-cover i:nth-child(2){animation-delay:.5s}
.tdash.anim .tprofile-cover i:nth-child(3){animation-delay:.6s}
.tdash.anim .tprofile-cover i:nth-child(4){animation-delay:.7s}
.tdash.anim .tprofile-cover i:nth-child(5){animation-delay:.8s}
.tdash.anim .ttile{animation:in-pop .45s both}
.tdash.anim .ttile:nth-child(1){animation-delay:.6s}
.tdash.anim .ttile:nth-child(2){animation-delay:.68s}
.tdash.anim .ttile:nth-child(3){animation-delay:.76s}
.tdash.anim #tXp{animation:in-right .7s .18s cubic-bezier(.2,.8,.2,1) both}
.tdash.anim .txp-medal{animation:in-spin .9s .35s cubic-bezier(.2,.9,.3,1.1) both}
.tdash.anim .txp-bar i{transform-origin:left;animation:grow-x 1.1s .6s cubic-bezier(.2,.8,.2,1) both}
.tdash.anim #warnSlot{animation:in-shake .7s .45s both}
.tdash.anim #tGoal{animation:in-flip .7s .55s cubic-bezier(.2,.8,.2,1) both}
.tdash.anim .tact-exam{animation:in-zoom .6s .68s cubic-bezier(.2,.9,.3,1.2) both}
.tdash.anim .tact-ring svg circle:last-child{animation:fill-in .4s 1.1s both}

@media (prefers-reduced-motion:reduce){
  .tdash.anim *,.tdash.anim #tActivity,.tdash.anim #tProfile,.tdash.anim #tXp,.tdash.anim #warnSlot,.tdash.anim #tGoal{animation:none !important}
  .tdash.anim .curves path[fill="none"]{stroke-dasharray:none;stroke-dashoffset:0}
}

/* ============ ROZET KARTI (oyun rozeti görünümü) ============ */
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:34px 14px;padding-top:30px}
.bc{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:linear-gradient(180deg,#fff,#FBF5F9);border:1.5px solid var(--line);border-radius:22px;
  padding:58px 12px 26px;margin-top:6px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;
}
.bc:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(150,70,120,.14)}
.bc-emblem{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:84px;height:92px}
.bc-hex{
  position:absolute;inset:0;clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);
  background:linear-gradient(160deg,#CBD3E6,#9AA7C4);display:grid;place-items:center;
}
.bc-hex-in{
  width:76%;height:76%;clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);
  background:linear-gradient(160deg,#EEF2FA,#C9D2E6);display:grid;place-items:center;
}
.bc-ico{font-size:30px;filter:grayscale(1) opacity(.55)}
.bc-step{
  position:absolute;top:2px;right:-12px;min-width:26px;height:26px;padding:0 6px;border-radius:99px;
  background:#7A4FD6;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(122,79,214,.4);border:2px solid #fff;
}
.bc-crown{position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:24px;z-index:2;filter:drop-shadow(0 3px 5px rgba(226,174,31,.5))}
.bc-name{font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink);line-height:1.2}
.bc-sub{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.bc-prog{display:flex;align-items:center;gap:7px;width:100%;margin-top:6px}
.bc-bar{flex:1;height:7px;border-radius:99px;background:#EDE3EC;overflow:hidden}
.bc-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4FC9A6,#3FBF8F)}
.bc-num{font-size:11.5px;font-weight:800;color:#2E9E7A;min-width:20px;text-align:right}
.bc-desc{font-size:11px;color:var(--ink-soft);line-height:1.35;margin-top:4px}
.bc-desc b{color:#D64257}
.bc-congrats{font-size:11.5px;font-weight:700;color:#9A6512;line-height:1.35;margin-top:6px}
.bc-ribbon{
  position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:5px 14px;border-radius:9px;font-size:10.5px;font-weight:800;letter-spacing:.6px;color:#fff;
  background:linear-gradient(90deg,#8B5BE6,#6A3FD0);box-shadow:0 6px 14px rgba(106,63,208,.35);
}
.bc-ribbon.muted{background:#C9BFD9;box-shadow:none}
.bc-ribbon.done{background:linear-gradient(90deg,#F7B52C,#F08A1C);box-shadow:0 6px 14px rgba(240,138,28,.4)}

/* kazanılmış: amblem zorluk renginde parlar */
.bc.earned .bc-ico{filter:none}
.bc.earned.r-bronze .bc-hex{background:linear-gradient(160deg,#F2B680,#B86A35)}
.bc.earned.r-bronze .bc-hex-in{background:linear-gradient(160deg,#FFE8D3,#F2BE92)}
.bc.earned.r-silver .bc-hex{background:linear-gradient(160deg,#E6ECF5,#8D9AB3)}
.bc.earned.r-silver .bc-hex-in{background:linear-gradient(160deg,#FFFFFF,#D5DCE8)}
.bc.earned.r-gold .bc-hex{background:linear-gradient(160deg,#FFE27A,#D99A12)}
.bc.earned.r-gold .bc-hex-in{background:linear-gradient(160deg,#FFF7D6,#FFD86B)}
.bc.earned.r-diamond .bc-hex{background:linear-gradient(160deg,#9FE3FF,#8E7CFF 55%,#F59AD8)}
.bc.earned.r-diamond .bc-hex-in{background:linear-gradient(160deg,#F2FBFF,#C9E9FF 50%,#E6D9FF)}
.bc.earned .bc-emblem{filter:drop-shadow(0 8px 14px rgba(150,70,120,.25))}
.bc.earned.r-gold .bc-emblem{filter:drop-shadow(0 0 14px rgba(255,200,60,.55))}
.bc.earned.r-diamond .bc-emblem{animation:bc-glow 3.2s ease-in-out infinite}
@keyframes bc-glow{0%,100%{filter:drop-shadow(0 0 12px rgba(127,200,255,.7))}50%{filter:drop-shadow(0 0 18px rgba(230,140,255,.75))}}
.bc.earned{border-color:color-mix(in srgb,var(--r-silver) 50%,#fff)}
.bc.earned.r-gold{border-color:#F3D27A}
.bc.earned.r-diamond{border-color:#C7C0FF}
.bc.crown{border:2px solid #F3C34B;background:linear-gradient(180deg,#FFFDF5,#FFF5DA)}
/* sıradaki: canlı ama soluk renk, kilitli uzaklar soluk mavi-gri */
.bc.next .bc-ico{filter:grayscale(.2) opacity(.9)}
.bc.next .bc-hex{background:linear-gradient(160deg,#F7B7D2,#C98BE8)}
.bc.next .bc-hex-in{background:linear-gradient(160deg,#FFF3F8,#F6DDEB)}
.bc.far{opacity:.72}
.bc.danger{border-color:#FFB3BE;background:linear-gradient(180deg,#fff,#FFF2F4)}
.bc.danger .bc-bar i{background:linear-gradient(90deg,#F08A9B,#D64257)}
@media (prefers-reduced-motion:reduce){.bc.earned.r-diamond .bc-emblem{animation:none}}
@media (max-width:560px){
  .bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 10px}
  .bc{padding:54px 8px 24px}
  .bc-name{font-size:11.5px}
}

/* ============ BUGÜN (revize): sağ sütun profil + karolar + uyarı ============ */
.tdash{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.tright{gap:16px}
.tprofile{padding:12px 12px 14px}
.txp-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 4px 6px}
.txp-line .txp-val{font-size:24px}
.txp-line .txp-lbl{margin:0;font-size:11.5px}
.tprofile .txp-bar{margin:0 4px 12px}

.thub{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.thub-t{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  border-radius:24px;padding:16px;min-height:176px;color:#fff;overflow:hidden;transition:transform .15s;
}
.thub-t:hover{transform:translateY(-2px)}
.thub-t:active{transform:scale(.98)}
.thub-t::after{content:'';position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.14)}
.thub-t.tb{background:linear-gradient(150deg,#8E7CFF,#6A4FD6);box-shadow:0 14px 30px rgba(106,79,214,.3)}
.thub-t.tg2{background:linear-gradient(150deg,#4FD1A5,#26A884);box-shadow:0 14px 30px rgba(38,168,132,.3)}
.thub-t.waiting .thub-ico{animation:gift-wiggle 1.8s ease-in-out infinite}
.thub-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;margin-bottom:auto}
.thub-ico{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:24px}
.thub-go{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:13px}
.thub-val b{font-size:30px;font-weight:800;letter-spacing:-.6px}
.thub-val small{font-size:14px;opacity:.85;margin-left:2px}
.thub-lbl{font-size:15px;font-weight:800;margin-top:-4px}
.thub-icos{display:flex;gap:4px;margin-top:4px;position:relative;z-index:1}
.thub-icos i{font-style:normal;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:14px}
.thub-icos em{font-style:normal;font-size:11.5px;opacity:.85}
.thub-next{font-size:11.5px;opacity:.92;line-height:1.35;position:relative;z-index:1}

/* Hedefim: soru girişini açar */
.tact{font-family:inherit;text-align:left;border:0}
.tact-goal{cursor:pointer}
.tact-goal:hover,.tact-exam[data-examdetail]:hover{transform:translateY(-2px)}
.tact-exam[data-examdetail]{cursor:pointer}
.tact-subj{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tact-subj i{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.25)}

/* giriş drawer'ı: ders seçimi iki satır, adlar yazılı */
.ssw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin-bottom:14px}
.ssw-b{
  width:auto;height:auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;
  border-radius:16px;font-size:12px;background:color-mix(in srgb,var(--c) 22%,#fff);border:2px solid transparent;
}
.ssw-e{font-size:20px;line-height:1.1}
.ssw-n{font-weight:800;font-size:12px;color:var(--i)}
.ssw-q{font-size:10.5px;color:var(--ink-soft);font-weight:600}
.ssw-b.has .ssw-q{color:var(--i)}
.ssw-b.on{border-color:var(--i);background:color-mix(in srgb,var(--c) 55%,#fff);transform:none;box-shadow:0 6px 14px rgba(150,70,120,.12)}
.sname{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin:2px 2px 12px;color:var(--i)}
.sname span{font-size:20px}

/* deneme ayrıntısı drawer'ı */
.estats{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
.erows{display:flex;flex-direction:column;gap:8px}
.erow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 40%,#fff)}
.erow-ico{font-size:20px}
.erow-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.erow-name{font-weight:800;font-size:12.5px;color:var(--i)}
.erow-bar{height:6px;border-radius:99px;background:#fff;overflow:hidden}
.erow-bar i{display:block;height:100%;border-radius:99px;background:var(--i)}
.erow-tags{display:flex;gap:4px}
.erow-net{font-size:17px;font-weight:800;color:var(--i)}
.erow-net small{font-size:10.5px;color:var(--ink-soft);font-weight:600}
.esec{font-weight:800;font-size:13px;margin:16px 2px 8px}
.etopics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.etopics li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--bg);font-size:12.5px}
.etopic-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ortadaki büyük pencere (rozetler / hediyeler) */
.tmodal{width:min(960px,94vw);max-height:min(88vh,860px)}
.tmodal .modal-title small{font-size:13px;color:var(--ink-soft);margin-left:4px}
.tmodal-tabs{margin:12px 16px 0}
.tmodal .modal-body{padding:16px 20px 28px;background:var(--bg)}
.tmodal .bcards{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.tmodal .xpage{max-width:none}

@media (max-width:560px){
  .thub{gap:10px}
  .thub-t{min-height:160px;padding:14px}
  .ssw{gap:6px}
  .erow{grid-template-columns:auto minmax(0,1fr) auto;}
  .erow-tags{display:none}
  .tmodal .modal-body{padding:12px 12px 24px}
}
.tdash.anim .thub-t:nth-child(1){animation:in-right .7s .2s cubic-bezier(.2,.8,.2,1) both}
.tdash.anim .thub-t:nth-child(2){animation:in-zoom .6s .35s cubic-bezier(.2,.9,.3,1.2) both}
.tdash.anim .thub-icos i{animation:in-avatar .4s both}
.tdash.anim .thub-icos i:nth-child(1){animation-delay:.7s}
.tdash.anim .thub-icos i:nth-child(2){animation-delay:.78s}
.tdash.anim .thub-icos i:nth-child(3){animation-delay:.86s}
.tdash.anim .thub-icos i:nth-child(4){animation-delay:.94s}
.tdash.anim .thub-icos i:nth-child(5){animation-delay:1.02s}
.tdash.anim .txp-bar i{transform-origin:left;animation:grow-x 1.1s .6s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.tdash.anim .thub-t{animation:none !important}}

/* ============ RÜTBE AMBLEMİ ============ */
.rank-emblem{overflow:visible;filter:drop-shadow(0 10px 14px rgba(80,20,70,.22))}
.rank-emblem *{transform-box:fill-box}
.rk-spark{transform-origin:center;animation:rk-twinkle 2.4s ease-in-out infinite}
.rk-spark.s2{animation-delay:1.2s}
@keyframes rk-twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
/* açılışta süsler sırayla çıkar */
.tdash.anim .rank-emblem .rk-wl{transform-origin:right center;animation:rk-wing .7s .9s cubic-bezier(.2,.9,.3,1.2) both}
.tdash.anim .rank-emblem .rk-wr{transform-origin:left center;animation:rk-wing .7s .9s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes rk-wing{from{opacity:0;transform:scaleX(0) rotate(-12deg)}to{opacity:1;transform:none}}
.tdash.anim .rank-emblem .rk-al{animation:rk-al .5s 1s cubic-bezier(.2,.9,.3,1.3) both}
.tdash.anim .rank-emblem .rk-ar{animation:rk-ar .5s 1s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes rk-al{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes rk-ar{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.tdash.anim .rank-emblem .rk-spike{transform-origin:center;animation:rk-pop .45s both}
.tdash.anim .rank-emblem .rk-spikes .rk-spike:nth-child(1){animation-delay:1.05s}
.tdash.anim .rank-emblem .rk-spikes .rk-spike:nth-child(2){animation-delay:1.12s}
.tdash.anim .rank-emblem .rk-spikes .rk-spike:nth-child(3){animation-delay:1.19s}
.tdash.anim .rank-emblem .rk-spikes .rk-spike:nth-child(4){animation-delay:1.26s}
.tdash.anim .rank-emblem .rk-top{transform-origin:center;animation:rk-drop .55s 1.15s cubic-bezier(.2,.9,.3,1.4) both}
.tdash.anim .rank-emblem .rk-center{transform-origin:center;animation:rk-pop .6s .75s cubic-bezier(.3,1.5,.5,1) both}
@keyframes rk-pop{from{opacity:0;transform:scale(0) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes rk-drop{from{opacity:0;transform:translateY(-14px) scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rank-emblem *{animation:none !important}}

/* profil kartında amblem baş harfin yerinde */
.tprofile-rank{display:block;margin:-46px 0 0 6px;position:relative;width:88px;height:88px}
.tprofile-rankname{display:inline-flex;align-items:center;gap:6px;margin:6px 0 10px 4px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--bg);color:var(--pink-deep)}

.bcards{row-gap:62px;padding-top:38px}
.ssw-n{text-transform:none}
.tprofile-rank{width:104px;height:104px;margin:-56px 0 0 0}
@media (max-width:560px){.bcards{row-gap:58px}}

/* çalışma etkinliği: gün kutusu */
.tactivity{position:relative}
.tactivity svg.curves{cursor:crosshair;touch-action:pan-y}
.tguide{position:absolute;width:0;border-left:2px dashed rgba(194,66,127,.45);pointer-events:none}
.ttip{
  position:absolute;z-index:5;width:236px;pointer-events:none;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 13px;
  box-shadow:0 18px 40px rgba(90,30,80,.18);animation:tipIn .14s ease-out;
}
@keyframes tipIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ttip-head{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-bottom:8px}
.ttip-head b{color:var(--ink);font-size:13.5px}
.ttip-goal{margin-left:auto;font-size:10.5px;font-weight:700;color:#23805C;background:#E5F8EF;padding:2px 7px;border-radius:99px}
.ttip-big{display:flex;gap:14px;margin-bottom:8px}
.ttip-big span{display:flex;flex-direction:column;font-size:10.5px;color:var(--ink-soft)}
.ttip-big b{font-size:19px;font-weight:800;color:var(--pink-deep);letter-spacing:-.3px}
.ttip-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.ttip-subj{list-style:none;margin:0;padding:8px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:4px}
.ttip-subj li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:12px;padding:3px 7px;border-radius:9px;background:color-mix(in srgb,var(--c) 18%,#fff)}
.ttip-subj b{color:var(--i);font-weight:800}
.ttip-subj em{font-style:normal;font-size:10.5px;color:var(--ink-soft)}
.ttip-none{font-size:12px;color:var(--ink-soft);padding:6px 0 2px}

/* telefonda tek sütun (yukarıdaki iki sütunlu tanım bunu ezmesin) */
@media (max-width:1180px){
  .tdash{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){
  body[data-tab="today"] .top-badges{display:flex;justify-content:flex-end}
  body[data-tab="today"] .topbar-in{flex-direction:row;align-items:flex-start}
}
@media (max-width:460px){
  .tacts{grid-template-columns:minmax(0,1fr)}
  .tact{min-height:0}
  .tact-ring,.tact-ico{margin-bottom:6px}
}

/* ===================== BUGÜN v3: pano + takvim ===================== */
/* üst başlık Bugün'de yok (profil kutusu var); telefonda yalnız ayar düğmesi kalır */
@media (min-width:900px){ body[data-tab="today"] .topbar{display:none} }
@media (max-width:899px){
  body[data-tab="today"] .topbar{background:none;margin:0;padding:calc(10px + env(safe-area-inset-top)) 0 0;position:absolute;right:12px;top:0;z-index:5}
  body[data-tab="today"] .hello{display:none}
  body[data-tab="today"] .top-badges .chip{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
  body[data-tab="today"] .app{padding-top:12px}
}
.tdash2{display:flex;flex-direction:column;gap:22px}
.trow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:stretch}
.trow > div{display:flex;min-width:0}
.trow > div > *{flex:1;min-width:0}
.trow-cal{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.tactivity{display:flex;flex-direction:column}
.tactivity svg.curves{margin-top:auto}

/* öğrenci kutusu: solda profil, sağda karolar + uyarı */
.student{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-sm);padding:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.student-main{min-width:0;display:flex;flex-direction:column}
.student-main .tprofile-cover{height:86px}
.tprofile-rank{background:none;border:0;padding:0;cursor:pointer;transition:transform .2s}
.tprofile-rank:hover{transform:scale(1.06) rotate(-3deg)}
button.tprofile-rankname{border:0;cursor:pointer;font-family:inherit;align-self:flex-start;transition:.15s}
button.tprofile-rankname:hover{background:#FCE3EF}
.student-main .tprofile-tiles{margin-top:auto}
.student-side{display:flex;flex-direction:column;gap:9px;min-width:0}
.stile{display:flex;align-items:center;gap:11px;text-align:left;border-radius:18px;padding:11px 12px;color:#fff;font-family:inherit;position:relative;overflow:hidden;transition:transform .15s;flex:1}
.stile:not([disabled]):hover{transform:translateX(3px)}
.stile[disabled]{cursor:default;opacity:.75}
.stile::after{content:'';position:absolute;right:-24px;bottom:-30px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.14)}
.stile.tb{background:linear-gradient(135deg,#8E7CFF,#6A4FD6)}
.stile.tg2{background:linear-gradient(135deg,#4FD1A5,#26A884)}
.stile.te{background:linear-gradient(135deg,#F9BE5B,#F08F3B)}
.stile.waiting .stile-ico{animation:gift-wiggle 1.8s ease-in-out infinite}
.stile-ico{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:21px;flex-shrink:0}
.stile-main{display:flex;flex-direction:column;min-width:0;flex:1}
.stile-val{font-size:12px;opacity:.9}
.stile-val b{font-size:21px;font-weight:800;letter-spacing:-.4px;opacity:1}
.stile-lbl{font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stile-sub{font-size:11px;opacity:.88;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stile-icos{display:flex;gap:3px;position:relative;z-index:1}
.stile-icos i{font-style:normal;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:13px}
.student-side #warnSlot .streak-warn{padding:10px 12px;border-radius:16px;font-size:12px;gap:9px}
.student-side #warnSlot .streak-warn .streak-warn-ico{width:34px;height:34px;font-size:17px;border-radius:11px}

/* takvim */
.cal{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-sm);padding:18px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-nav{width:38px;height:38px;border-radius:12px;background:var(--bg);font-size:20px;color:var(--pink-deep)}
.cal-nav[disabled]{opacity:.35;cursor:default}
.cal-title{text-align:center;display:flex;flex-direction:column}
.cal-title small{font-size:11px;color:var(--ink-soft);font-weight:600}
.cal-title b{font-size:18px;font-weight:800}
.cal-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.cal-stats div{background:var(--bg);border-radius:14px;padding:9px 6px;text-align:center;font-size:10.5px;color:var(--ink-soft)}
.cal-stats b{display:block;font-size:17px;font-weight:800;color:var(--pink-deep)}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-week span{text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.cal-d{
  position:relative;aspect-ratio:7/6;border-radius:13px;border:1px solid var(--line);background:#fff;padding:5px 6px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;font-family:inherit;transition:transform .15s,box-shadow .15s;
}
.cal-d:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(150,70,120,.12)}
.cal-top{display:flex;justify-content:space-between;align-items:center;height:12px;font-size:9.5px;font-weight:700}
.cal-top em{font-style:normal;color:var(--ink-soft)}
.cal-top i{font-style:normal;font-size:11px}
.cal-d b{font-size:15px;font-weight:800;text-align:center;line-height:1}
.cal-bar{height:4px;border-radius:99px;background:#F3E6EE;overflow:hidden}
.cal-bar i{display:block;height:100%;border-radius:99px;background:var(--pink-deep)}
.cal-d.perfect{background:linear-gradient(150deg,#E46BA4,#B95FD8);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(185,95,216,.3)}
.cal-d.perfect .cal-bar{background:rgba(255,255,255,.35)}
.cal-d.perfect .cal-bar i{background:#fff}
.cal-d.partial{background:#FCF1F6;border-color:#F4D7E6}
.cal-d.missed{background:#F8F6F8;border-style:dashed;border-color:#E6DDE3;color:#B8A8B4}
.cal-d.today{border-color:var(--pink);color:var(--pink-deep)}
.cal-d.future{opacity:.45;cursor:not-allowed}
.cal-d.is-today::after{content:'';position:absolute;bottom:-7px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--pink-deep)}
.cal-d.sel{outline:2.5px solid var(--pink-deep);outline-offset:2px}
.cal-chain{position:absolute;top:50%;width:10px;height:6px;margin-top:-3px;background:#B95FD8;z-index:1}
.cal-chain.l{left:-9px}
.cal-chain.r{right:-9px}
.cal-legend{display:flex;gap:14px;margin-top:14px;font-size:11px;color:var(--ink-soft)}
.cal-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;vertical-align:-2px}
.cal-legend i.perfect{background:linear-gradient(150deg,#E46BA4,#B95FD8)}
.cal-legend i.partial{background:#FCF1F6;border:1px solid #F4D7E6}
.cal-legend i.missed{background:#F8F6F8;border:1px dashed #E6DDE3}

/* seçili günün hedefleri */
.dayp{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-sm);padding:18px;display:flex;flex-direction:column;gap:14px}
.dayp-head{display:flex;align-items:center;gap:11px;background:var(--bg);margin:-6px -6px 0;padding:10px 12px;border-radius:18px}
.dayp-ico{width:38px;height:38px;border-radius:12px;background:var(--frame);display:grid;place-items:center;font-size:19px}
.dayp-head div{display:flex;flex-direction:column;flex:1}
.dayp-head b{font-size:15px;font-weight:800}
.dayp-head small{font-size:12px;color:var(--ink-soft)}
.dayp-today{padding:7px 11px;border-radius:10px;background:#fff;color:var(--pink-deep);font-size:12px;border:1px solid var(--line)}
.dayp-sum{display:flex;align-items:center;gap:16px}
.dayp-ring{position:relative;width:84px;height:84px;display:grid;place-items:center;flex-shrink:0}
.dayp-ring svg{position:absolute;inset:0}
.dayp-ring b{font-size:18px;font-weight:800;color:var(--pink-deep)}
.dayp-facts{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-soft)}
.dayp-q b{font-size:20px;color:var(--ink);font-weight:800}
.dayp-star{color:#B9770A;font-weight:800}
.dayp-left b,.dayp-chain b{color:var(--pink-deep)}
.dayp-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.dayp .tbox{padding:10px;border-radius:18px;gap:10px}
.dayp .tbox-ico{width:38px;height:38px;border-radius:12px;font-size:19px}
.dayp .tbox-ring{width:46px;height:46px}
.dayp .tbox-ring b{font-size:11px}
.dayp .tbox-tags .tg{font-size:10px;padding:1px 6px}
.dayp-go{margin-top:auto}

/* rütbeler penceresi: çizgili mor zemin */
.rmodal{width:min(860px,94vw);max-height:min(90vh,820px);overflow-y:auto;padding:26px;border:0;color:#fff;
  background:repeating-linear-gradient(135deg,#5B3FD6 0 14px,#6447E0 14px 28px);box-shadow:0 30px 80px rgba(40,10,90,.45)}
.rmodal-x{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.18);color:#fff}
.rmodal-head{display:flex;align-items:center;gap:18px;background:rgba(40,20,110,.45);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:14px 18px;margin-bottom:18px}
.rmodal-cur{filter:drop-shadow(0 0 22px rgba(255,255,255,.35));animation:rcur 3s ease-in-out infinite}
@keyframes rcur{50%{transform:translateY(-4px) scale(1.03)}}
.rmodal-head small{display:block;font-size:12px;opacity:.75;font-weight:600}
.rmodal-head b{display:block;font-size:28px;font-weight:800;letter-spacing:-.5px}
.rmodal-head span{font-size:13px;opacity:.85}
.rmodal-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;margin:10px 0 6px;width:min(320px,52vw)}
.rmodal-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFE27A,#FF9AD5)}
.rmodal-head em{font-style:normal;font-size:12.5px;opacity:.9}
.rmodal-head em b{display:inline;font-size:13px}
.rmodal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:rgba(80,50,200,.35);border:2px solid rgba(255,255,255,.14);border-radius:24px;padding:12px}
.rcell{position:relative;background:#3E2C8F;border-radius:18px;padding:16px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;animation:rcell .5s var(--d) both}
@keyframes rcell{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.rcell b{font-size:15px;font-weight:800}
.rcell span{font-size:11px;opacity:.8}
.rcell.locked .rank-emblem{filter:grayscale(.85) brightness(.7)}
.rcell.locked{background:#33267A}
.rcell.cur{background:linear-gradient(160deg,#7A5CF0,#4E36C2);box-shadow:0 0 0 2px #FFE27A,0 0 30px rgba(255,226,122,.45)}
.rcell-here{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#FFE27A;color:#4A2A00;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.rcell,.rmodal-cur{animation:none}}

/* giriş animasyonları (v3) */
.tdash2.anim #tActivity{animation:in-left .7s cubic-bezier(.2,.8,.2,1) both}
.tdash2.anim .curves path[fill="none"]{stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 1.8s .35s cubic-bezier(.4,0,.2,1) forwards}
.tdash2.anim .curves path[fill^="url"]{animation:fill-in .8s 1.1s both}
.tdash2.anim .curves g,.tdash2.anim .curves line[stroke-dasharray],.tdash2.anim .curves circle[r="5.5"]{animation:fill-in .4s 1.9s both}
.tdash2.anim #tStudent{animation:in-right .7s .12s cubic-bezier(.2,.8,.2,1) both}
.tdash2.anim .stile{animation:in-right .55s cubic-bezier(.2,.9,.3,1.1) both}
.tdash2.anim .stile:nth-child(1){animation-delay:.35s}
.tdash2.anim .stile:nth-child(2){animation-delay:.45s}
.tdash2.anim .stile:nth-child(3){animation-delay:.55s}
.tdash2.anim #warnSlot{animation:in-shake .7s .7s both}
.tdash2.anim .tprofile-cover i{animation:in-avatar .6s both}
.tdash2.anim .txp-bar i{transform-origin:left;animation:grow-x 1.1s .6s cubic-bezier(.2,.8,.2,1) both}
.tdash2.anim #tCal{animation:in-pop .6s .25s both}
.tdash2.anim .cal-d{animation:in-pop .45s calc(.35s + var(--i) * 35ms) cubic-bezier(.2,.9,.3,1.2) both}
.tdash2.anim #tDay{animation:in-right .7s .4s cubic-bezier(.2,.8,.2,1) both}
.tdash2.anim .rank-emblem .rk-wl{transform-origin:right center;animation:rk-wing .7s .9s cubic-bezier(.2,.9,.3,1.2) both}
.tdash2.anim .rank-emblem .rk-wr{transform-origin:left center;animation:rk-wing .7s .9s cubic-bezier(.2,.9,.3,1.2) both}
.tdash2.anim .rank-emblem .rk-al{animation:rk-al .5s 1s cubic-bezier(.2,.9,.3,1.3) both}
.tdash2.anim .rank-emblem .rk-ar{animation:rk-ar .5s 1s cubic-bezier(.2,.9,.3,1.3) both}
.tdash2.anim .rank-emblem .rk-spikes .rk-spike{transform-origin:center;animation:rk-pop .45s 1.1s both}
.tdash2.anim .rank-emblem .rk-top{transform-origin:center;animation:rk-drop .55s 1.15s cubic-bezier(.2,.9,.3,1.4) both}
.tdash2.anim .rank-emblem .rk-center{transform-origin:center;animation:rk-pop .6s .75s cubic-bezier(.3,1.5,.5,1) both}
@media (prefers-reduced-motion:reduce){.tdash2.anim *{animation:none !important}}

@media (max-width:1180px){
  .trow,.trow-cal{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .student{grid-template-columns:minmax(0,1fr)}
  .cal{padding:14px}
  .cal-week,.cal-grid{gap:5px}
  .cal-d{padding:3px 4px;border-radius:10px}
  .cal-d b{font-size:13px}
  .cal-top{font-size:8px}
  .cal-chain{width:7px}
  .cal-chain.l{left:-6px}
  .cal-chain.r{right:-6px}
  .cal-stats b{font-size:15px}
  .rmodal{padding:16px}
  .rmodal-head{flex-direction:column;text-align:center}
  .rmodal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .dayp-boxes{grid-template-columns:minmax(0,1fr)}
  .dayp{padding:14px}
}

/* ============ ROZET ANİMASYONLARI (her rozete kendine özgü; data.js > BADGE_ANIMS) ============ */
.bc-ico[class*="ba-"]{display:inline-block;animation-duration:var(--bd,2.4s);animation-delay:var(--bdl,0s);animation-iteration-count:infinite;animation-timing-function:ease-in-out;transform-origin:50% 60%}
.ba-float{animation-name:ba-float}
.ba-spin{animation-name:ba-spin;animation-timing-function:cubic-bezier(.6,0,.4,1)}
.ba-bounce{animation-name:ba-bounce}
.ba-swing{animation-name:ba-swing;transform-origin:50% 0}
.ba-pulse{animation-name:ba-pulse}
.ba-flip{animation-name:ba-flip}
.ba-heart{animation-name:ba-heart}
.ba-jelly{animation-name:ba-jelly}
.ba-tada{animation-name:ba-tada}
.ba-wobble{animation-name:ba-wobble}
.ba-orbit{animation-name:ba-orbit}
.ba-shake{animation-name:ba-shake}
@keyframes ba-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ba-spin{0%,70%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes ba-bounce{0%,60%,100%{transform:translateY(0)}20%{transform:translateY(-8px) scaleY(1.05)}35%{transform:translateY(0) scaleY(.92)}45%{transform:translateY(-3px)}}
@keyframes ba-swing{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}75%{transform:rotate(-14deg)}}
@keyframes ba-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes ba-flip{0%,60%{transform:perspective(200px) rotateY(0)}100%{transform:perspective(200px) rotateY(360deg)}}
@keyframes ba-heart{0%,40%,100%{transform:scale(1)}10%,30%{transform:scale(1.22)}20%{transform:scale(1.05)}}
@keyframes ba-jelly{0%,100%{transform:scale(1,1)}25%{transform:scale(1.18,.85)}50%{transform:scale(.88,1.12)}75%{transform:scale(1.06,.95)}}
@keyframes ba-tada{0%,60%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.9) rotate(-6deg)}30%,50%{transform:scale(1.15) rotate(6deg)}40%{transform:scale(1.15) rotate(-6deg)}}
@keyframes ba-wobble{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-8deg)}40%{transform:translateX(3px) rotate(6deg)}60%{transform:translateX(-2px) rotate(-3deg)}80%{transform:translateX(1px) rotate(1deg)}}
@keyframes ba-orbit{0%{transform:rotate(0) translateX(3px) rotate(0)}100%{transform:rotate(360deg) translateX(3px) rotate(-360deg)}}
@keyframes ba-shake{0%,70%,100%{transform:translateX(0)}75%,85%,95%{transform:translateX(-3px)}80%,90%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.bc-ico[class*="ba-"]{animation:none}}

/* ============ ROZETLERİM PENCERESİ: renkli zemin, koyu kartlar ============ */
.bmodal{border:0;background:repeating-linear-gradient(135deg,#5B3FD6 0 14px,#6447E0 14px 28px);color:#fff;box-shadow:0 30px 80px rgba(40,10,90,.45)}
.bmodal .modal-head{border-bottom-color:rgba(255,255,255,.14)}
.bmodal .modal-title{color:#fff}
.bmodal .modal-title small{color:rgba(255,255,255,.75)}
.bmodal .drawer-x{background:rgba(255,255,255,.18);color:#fff}
.bmodal .tmodal-tabs{background:rgba(40,20,110,.45)}
.bmodal .seg{color:rgba(255,255,255,.75)}
.bmodal .seg.on{background:#fff;color:#5B3FD6}
.bmodal .modal-body{background:rgba(40,20,110,.28)}
.bmodal .bc{background:linear-gradient(180deg,#45319C,#36277F);border-color:rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(20,5,60,.35)}
.bmodal .bc:hover{box-shadow:0 16px 34px rgba(20,5,60,.5)}
.bmodal .bc-name{color:#fff}
.bmodal .bc-sub{color:rgba(255,255,255,.6)}
.bmodal .bc-desc{color:rgba(255,255,255,.72)}
.bmodal .bc-bar{background:rgba(255,255,255,.14)}
.bmodal .bc-num{color:#7DF0C4}
.bmodal .bc.far .bc-hex{background:linear-gradient(160deg,#6B78A8,#47507A)}
.bmodal .bc.far .bc-hex-in{background:linear-gradient(160deg,#8C97C2,#5D6894)}
.bmodal .bc.crown{background:linear-gradient(180deg,#4B3596,#3A2884);border:2px solid #F3C34B;box-shadow:0 0 26px rgba(243,195,75,.35)}
.bmodal .bc-congrats{color:#FFE27A}
.bmodal .bc-ribbon.muted{background:rgba(255,255,255,.2)}
.bmodal .empty{color:rgba(255,255,255,.8)}
.bmodal .bc{animation:rcell .45s both}
.bmodal .bc:nth-child(4n+2){animation-delay:.05s}.bmodal .bc:nth-child(4n+3){animation-delay:.1s}.bmodal .bc:nth-child(4n){animation-delay:.15s}

/* seviye rütbe amblemi büyük */
.tprofile-rank{width:150px;height:150px;margin:-82px 0 -6px -8px}
.student-main .tprofile-cover{height:96px}
@media (max-width:560px){
  .tmodal .bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 10px}
  .tmodal .bc{padding:52px 8px 24px}
  .tmodal .bc-congrats{font-size:10.5px}
}

/* takvim hücresinde soru hedefi; takvim ve günlük hedef paneli sabit, eşit boyda */
.cal-goal{font-size:9.5px;font-weight:800;text-align:center;line-height:1;color:var(--pink-deep);min-height:9.5px}
.cal-goal i{font-style:normal;font-weight:600;opacity:.65}
.cal-d.perfect .cal-goal{color:#fff}
.cal-d.missed .cal-goal{color:#B8A8B4}
.cal-d b{font-size:14px}
.cal-d{padding:4px 5px 5px;gap:1px}
.cal-grid{grid-template-rows:repeat(6,minmax(0,1fr))}
.trow-cal{align-items:stretch}
#tCal .cal,#tDay .dayp{height:100%}
.cal{display:flex;flex-direction:column}
.cal-grid{flex:1}
.dayp{min-height:0;overflow:hidden}
.dayp-boxes{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr))}
.dayp .tbox{min-height:0;overflow:hidden;align-items:center}
.dayp .tbox-main{overflow:hidden}
.dayp .tbox-tags{flex-wrap:nowrap;overflow:hidden}
.dayp .tbox-q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){
  #tCal .cal,#tDay .dayp{height:auto}
  .dayp-boxes{grid-template-rows:none}
}
@media (max-width:560px){
  .cal-goal{font-size:7.5px;min-height:7.5px}
  .cal-goal i{display:none}
  .cal-top em{display:none}
}
.tg{white-space:nowrap}

/* 1 haftadan eski günler: görüntülenir, düzenlenmez */
.cal-d.old{opacity:.55}
.cal-d.old.perfect{opacity:.7}
.dayp .tbox.ro{cursor:default}
.dayp .tbox.ro:hover{transform:none;box-shadow:var(--shadow-sm)}
.dayp-lock{margin-top:auto;text-align:center;padding:12px;border-radius:14px;background:var(--bg);color:var(--ink-soft);font-size:13px;font-weight:700}

/* ===================== HEDİYELER (karosel + kartlar + açılış) ===================== */
.giftsvg{overflow:visible;display:block}
.giftsvg *{transform-box:fill-box}
/* açılmış kutu: kapak yanda, kedi dışarıda */
.giftsvg.is-open .gb-lid{transform:translate(-62px,30px) rotate(-38deg);transform-origin:center}
.giftsvg.is-open .gb-cat{transform:none}
.giftsvg .gb-cat{transform:translateY(64px)}
.giftsvg:not(.is-open) .gb-paws{opacity:0}
.giftsvg.is-open .gb-wave{transform-origin:0% 100%;animation:gx-wave .9s ease-in-out infinite alternate}
.giftsvg.is-locked{filter:saturate(.7)}
/* titreyen kapalı kutu */
.tremble .giftsvg{animation:tremble 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tremble{0%,55%,100%{transform:rotate(0)}60%{transform:rotate(-7deg) scale(1.03)}65%{transform:rotate(6deg)}70%{transform:rotate(-5deg)}75%{transform:rotate(4deg) scale(1.03)}80%{transform:rotate(-2deg)}85%{transform:rotate(0)}}
.tremble .gb-lid{animation:lid-hop 1.6s ease-in-out infinite}
@keyframes lid-hop{0%,55%,100%{transform:none}62%{transform:translateY(-7px) rotate(-3deg)}72%{transform:translateY(-4px) rotate(3deg)}82%{transform:none}}
@keyframes gx-wave{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

.gpage{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.tmodal .gpage{max-width:none}

/* karosel: koyu sahne, ortadaki büyük ve parlak */
.gc{position:relative;border-radius:28px;overflow:hidden;padding:22px 10px 18px;
  background:radial-gradient(ellipse at 50% 60%,#4A2A86 0%,#24163F 55%,#170F2A 100%);box-shadow:0 20px 50px rgba(30,10,60,.35)}
.gc-glow{position:absolute;left:50%;top:48%;width:340px;height:260px;margin:-130px 0 0 -170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,60,.45),rgba(255,120,200,.15) 50%,transparent 70%);filter:blur(10px);animation:gc-glow 3s ease-in-out infinite}
@keyframes gc-glow{50%{transform:scale(1.12);opacity:.8}}
.gc-track{position:relative;height:300px}
.gc-slide{
  position:absolute;left:50%;top:0;width:210px;margin-left:-105px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#fff;
  transform:translateX(calc(var(--o) * 205px)) scale(calc(1 - (max(var(--o), -1 * var(--o)) * .2)));
  opacity:calc(1 - max(var(--o), -1 * var(--o)) * .38);filter:saturate(calc(1 - max(var(--o), -1 * var(--o)) * .5));
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;cursor:pointer;border-radius:22px;padding:10px;
}
.gc-slide:not(.center){background:rgba(255,255,255,.04)}
.gc-slide.center{z-index:2}
.gc-slide.center .gc-art{filter:drop-shadow(0 0 26px rgba(255,170,60,.55))}
.gc-slide.center.locked .gc-art{filter:drop-shadow(0 0 18px rgba(180,160,255,.35))}
.gc-title{font-weight:800;font-size:15px;line-height:1.25;max-width:190px}
.gc-sub{font-size:11.5px;opacity:.7;max-width:190px}
.gc-bar{width:150px;height:6px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.gc-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD24A,#FF8FC8)}
.gc-pill{margin-top:4px;font-size:12px;font-weight:700;padding:6px 13px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.gc-pill b{font-size:13px}
.gc-pill.go{background:linear-gradient(90deg,#FFB13B,#FF6FA8);border:0;box-shadow:0 6px 18px rgba(255,111,168,.45);animation:pill-pulse 1.4s ease-in-out infinite}
@keyframes pill-pulse{50%{transform:scale(1.06)}}
.gc-pill.done{background:rgba(79,201,142,.25)}
.gc-nav{position:absolute;top:50%;margin-top:-34px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px}
.gc-nav.l{left:12px}.gc-nav.r{right:12px}
.gc-nav[disabled]{opacity:.25;cursor:default}
.gc-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.gc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
.gc-dots i.ready{background:#FFB13B}
.gc-dots i.on{width:22px;border-radius:99px;background:#fff}

/* özet + kartlar */
.ghead{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px 16px;box-shadow:var(--shadow-sm)}
.ghead-num{font-size:14px;color:var(--ink-soft);white-space:nowrap}
.ghead-num b{font-size:24px;font-weight:800;color:var(--pink-deep)}
.ghead-num small{margin-left:6px;font-size:12px}
.ghead-bar{flex:1;height:9px;border-radius:99px;background:#F4E6F0;overflow:hidden}
.ghead-bar i{display:block;height:100%;border-radius:99px;background:var(--frame)}
.gift-tabs{margin:0}
.gks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.gk{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px 16px 12px 10px;box-shadow:var(--shadow-sm);font-family:inherit;transition:transform .15s}
.gk-art{flex-shrink:0;width:92px;height:92px}
.gk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.gk-kind{font-size:11px;font-weight:700;color:var(--ink-soft)}
.gk-title{font-size:15px;font-weight:800;color:var(--ink);line-height:1.25}
.gk-sub{font-size:12px;color:var(--ink-soft)}
.gk-sub b{color:var(--pink-deep)}
.gk-bar{height:7px;border-radius:99px;background:#F1E8F4;overflow:hidden}
.gk-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#B45CFF,#FF8FC8)}
.gk.ready{cursor:pointer;background:linear-gradient(135deg,#FFF6E6,#FFE9F4);border-color:#FFD08A;box-shadow:0 10px 26px rgba(255,160,60,.25)}
.gk.ready:hover{transform:translateY(-2px)}
.gk.ready .gk-kind{color:#C77700}
.gk.opened .gk-kind{color:#9A6512}
.gk.delivered .gk-kind{color:#23805C}

/* ===================== TAM EKRAN AÇILIŞ ===================== */
.gx{position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 55%,#6A2FB8 0%,#3A1670 45%,#1C0A38 100%);animation:gx-in .3s ease both}
.gx.out{animation:gx-out .26s ease both}
@keyframes gx-in{from{opacity:0}to{opacity:1}}
@keyframes gx-out{to{opacity:0;transform:scale(1.04)}}
.gx-rays{position:absolute;left:50%;top:55%;width:1400px;height:1400px;margin:-700px 0 0 -700px;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,120,.16) 0 10deg,transparent 10deg 22deg);
  animation:gx-rays-in .6s 1s ease forwards,gx-spin 22s linear 1s infinite}
@keyframes gx-rays-in{to{opacity:1}}
@keyframes gx-spin{to{transform:rotate(360deg)}}
.gx-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.gx-box{position:relative;z-index:2}
.gx-box .giftsvg{animation:gx-shake .95s ease-in both}
@keyframes gx-shake{
  0%{transform:scale(.4) rotate(0);opacity:0}15%{transform:scale(1) rotate(0);opacity:1}
  30%{transform:rotate(-4deg)}38%{transform:rotate(4deg)}46%{transform:rotate(-6deg) scale(1.02)}54%{transform:rotate(6deg)}
  62%{transform:rotate(-8deg) scale(1.04)}70%{transform:rotate(8deg) scale(1.05)}78%{transform:rotate(-10deg) scale(1.07)}
  86%{transform:rotate(10deg) scale(1.08)}94%{transform:rotate(-4deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
.gx-box .gb-lid{animation:gx-lid .7s .95s cubic-bezier(.2,.8,.3,1) forwards;transform-origin:center}
@keyframes gx-lid{0%{transform:none}40%{transform:translate(-30px,-90px) rotate(-60deg)}100%{transform:translate(-62px,30px) rotate(-38deg)}}
.gx-box .gb-cat{animation:gx-cat .7s 1.15s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes gx-cat{from{transform:translateY(64px)}to{transform:translateY(0)}}
.gx-box .gb-paws{opacity:0;animation:fill-in .3s 1.45s forwards}
.gx-box .gb-wave{transform-origin:0% 100%;animation:gx-wave .5s 1.6s ease-in-out infinite alternate}
.gx-box .gb-coin{animation:gx-coin 1.6s 1.7s ease-in-out infinite}
@keyframes gx-coin{50%{transform:translateY(-6px) rotate(12deg)}}
.gx-flash{position:absolute;left:50%;top:58%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#FFF5C8;opacity:0;z-index:1;
  animation:gx-flash .7s .9s ease-out forwards}
@keyframes gx-flash{0%{opacity:0;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(14)}}
.gx-stars{position:absolute;left:50%;top:58%;z-index:3;pointer-events:none}
.gx-star{position:absolute;left:0;top:0;font-size:calc(22px * var(--s));color:#FFE27A;text-shadow:0 0 12px rgba(255,210,90,.9);opacity:0;
  animation:gx-star 1.1s calc(.95s + var(--dl)) cubic-bezier(.15,.8,.3,1) forwards}
.gx-star:nth-child(3n){color:#FF9AD5;text-shadow:0 0 12px rgba(255,150,210,.9)}
.gx-star:nth-child(4n){color:#9FE3FF}
@keyframes gx-star{
  0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.3)}
  15%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(1) rotate(200deg)}}
.gx-bubble{position:relative;z-index:4;order:-1;margin-bottom:-8px;background:#fff;color:var(--ink);border-radius:22px;padding:14px 22px;text-align:center;
  font-size:14px;font-weight:600;box-shadow:0 18px 40px rgba(20,0,50,.4);max-width:min(360px,86vw);opacity:0;transform-origin:50% 100%;
  animation:gx-bubble .55s 1.75s cubic-bezier(.3,1.6,.5,1) forwards}
.gx-bubble::after{content:'';position:absolute;left:50%;bottom:-11px;margin-left:-12px;border:12px solid transparent;border-bottom:0;border-top-color:#fff}
.gx-bubble small{display:block;font-size:12px;color:var(--pink-deep);font-weight:800;margin-bottom:2px}
.gx-bubble b{display:block;font-size:22px;font-weight:800;color:#7A1FE6;letter-spacing:-.3px;margin:2px 0}
@keyframes gx-bubble{from{opacity:0;transform:scale(.3) translateY(20px)}to{opacity:1;transform:none}}
.gx-close{margin-top:22px;z-index:4;padding:13px 30px;border-radius:16px;font-size:16px;font-weight:800;color:#fff;
  background:linear-gradient(90deg,#FFB13B,#FF6FA8);box-shadow:0 12px 30px rgba(255,111,168,.45);opacity:0;animation:fill-in .4s 2.2s forwards}
@media (prefers-reduced-motion:reduce){
  .gx *, .tremble .giftsvg, .tremble .gb-lid, .gc-glow, .gc-pill.go{animation-duration:.01s !important;animation-iteration-count:1 !important}
}
@media (max-width:560px){
  .gc-track{height:270px}
  .gc-slide{width:170px;margin-left:-85px;transform:translateX(calc(var(--o) * 150px)) scale(calc(1 - (max(var(--o), -1 * var(--o)) * .25)))}
  .gc-slide .giftsvg{width:120px;height:120px}
  .gks{grid-template-columns:minmax(0,1fr)}
  .gx-box .giftsvg{width:240px;height:240px}
}
/* kapak kutunun sol yanına yaslanır, kediyi kapatmaz */
.giftsvg.is-open .gb-lid{transform:translate(-88px,62px) rotate(-62deg)}
@keyframes gx-lid{0%{transform:none}40%{transform:translate(-40px,-100px) rotate(-80deg)}100%{transform:translate(-88px,62px) rotate(-62deg)}}
.gx-rays{background:repeating-conic-gradient(from 0deg,rgba(255,210,120,.09) 0 10deg,transparent 10deg 22deg)}
.gx-box .giftsvg{width:340px;height:340px}
@media (max-width:560px){.gx-box .giftsvg{width:260px;height:260px}}

/* pencere içeriği yuvarlak köşelerde kesilmesin; yeniden çizimde açılış animasyonu tekrar etmesin */
.tmodal{overflow:hidden}
.tmodal .modal-body{padding-bottom:28px}
.calm .modal,.calm .modal-scrim{animation:none}

/* karosel: tüm slaytlar yerinde, akıcı kayar; kenarlar yumuşak solar */
.gc-track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.gc-slide{transform:translateX(calc(var(--o) * 190px)) scale(calc(1 - (min(max(var(--o), -1 * var(--o)), 3) * .2)));
  opacity:calc(1 - min(max(var(--o), -1 * var(--o)), 2.6) * .36);
  transition:transform .5s cubic-bezier(.22,.8,.2,1),opacity .5s,filter .5s}
.gc-slide.far{opacity:0;pointer-events:none}
.gc-slide:focus-visible{outline:2px solid #FFE27A;outline-offset:4px}
.gc-slide:not(.center) .gc-pill.go{animation:none}
@media (max-width:560px){
  .gc-slide{transform:translateX(calc(var(--o) * 140px)) scale(calc(1 - (min(max(var(--o), -1 * var(--o)), 3) * .25)))}
}

/* ===================== KELİME OYUNLARI ===================== */
/* lobi */
.gl-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;border-radius:28px;padding:18px 22px;color:#fff;
  background:linear-gradient(120deg,#7A4FF0 0%,#B45CFF 45%,#FF6FA8 100%);box-shadow:0 18px 40px rgba(122,79,240,.3);margin-bottom:14px}
.gl-mascot{flex-shrink:0;animation:ba-float 3s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(40,0,80,.3))}
.gl-hero-txt{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1}
.gl-hero-txt small{font-size:12px;opacity:.85;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.gl-hero-txt > b{font-size:26px;font-weight:800;letter-spacing:-.5px}
.gl-hero-txt span{font-size:13px;opacity:.95}
.gl-bubbles i{position:absolute;font-style:normal;font-weight:800;color:rgba(255,255,255,.2);animation:ba-float 4s ease-in-out infinite}
.gl-bubbles i:nth-child(1){right:6%;top:12%;font-size:46px}
.gl-bubbles i:nth-child(2){right:22%;bottom:8%;font-size:34px;animation-delay:1s}
.gl-bubbles i:nth-child(3){right:2%;bottom:14%;font-size:28px;animation-delay:2s}
.gl-set{background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px 14px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.gl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gl-lbl{font-size:11.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;min-width:52px}
.gl-chips{display:flex;gap:6px;flex-wrap:wrap}
.gl-chip{padding:7px 12px;border-radius:99px;background:var(--bg);border:1.5px solid transparent;font-size:12.5px;font-weight:700;color:var(--ink)}
.gl-chip.on{background:#fff;border-color:#B45CFF;color:#7A1FE6;box-shadow:0 4px 12px rgba(180,92,255,.2)}
.gl-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gl-game{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border-radius:26px;padding:16px;color:#fff;font-family:inherit;
  min-height:230px;transition:transform .18s,box-shadow .18s;box-shadow:0 0 0 0 transparent,0 8px 0 rgba(0,0,0,.14)}
.gl-game:not([disabled]):hover{transform:translateY(-4px)}
.gl-game:not([disabled]):active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.14)}
.gl-game.locked{filter:grayscale(.6);opacity:.7;cursor:not-allowed}
.t-violet{background:linear-gradient(150deg,#8E7CFF,#5B3FD6)}
.t-mint{background:linear-gradient(150deg,#4FD1A5,#1FA37E)}
.t-sun{background:linear-gradient(150deg,#FFC24A,#F27A3A)}
.gl-art{position:relative;width:100%;height:96px;margin-bottom:auto}
.gl-name{font-size:18px;font-weight:800;letter-spacing:-.3px}
.gl-desc{font-size:12.5px;opacity:.92;line-height:1.35}
.gl-play{margin-top:6px;padding:8px 16px;border-radius:12px;background:#fff;color:#3B2537;font-weight:800;font-size:13px;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.t-violet .gl-play{color:#5B3FD6}.t-mint .gl-play{color:#1F8A6A}.t-sun .gl-play{color:#D2601C}
/* oyun karosu çizimleri */
.gl-art > span{position:absolute;display:grid;place-items:center;font-weight:800;border-radius:12px;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.ga-a,.ga-b,.ga-c,.ga-d{width:42px;height:34px;font-size:16px}
.ga-a{left:0;top:6px;color:#FF6FA8}.ga-b{left:50px;top:0;color:#FFB13B;transform:rotate(6deg)}
.ga-c{left:12px;top:50px;color:#4FC98E;transform:rotate(-5deg)}.ga-d{left:62px;top:46px;color:#5EC2FF}
.gl-game:hover .ga-a{animation:ba-bounce 1s}.gl-game:hover .ga-d{animation:ba-bounce 1s .15s}
.ga-m1,.ga-m2{padding:6px 12px;font-size:14px;color:#1F8A6A}
.ga-m1{left:0;top:10px}.ga-m2{left:80px;top:54px;transform:rotate(-4deg)}
.ga-link{left:40px;top:38px;width:46px;height:4px;border-radius:4px;background:#FFE36B !important;transform:rotate(30deg);box-shadow:none !important}
.ga-bl{width:30px;height:38px;border-radius:50% 50% 46% 46% !important;box-shadow:none !important}
.ga-bl.b1{left:6px;top:0;background:#FF6FA8 !important;animation:ba-float 2.6s ease-in-out infinite}
.ga-bl.b2{left:40px;top:-6px;background:#5EC2FF !important;animation:ba-float 3s .4s ease-in-out infinite}
.ga-bl.b3{left:74px;top:2px;background:#B45CFF !important;animation:ba-float 2.8s .8s ease-in-out infinite}
.ga-word{left:0;top:56px;padding:6px 10px;font-size:13px;letter-spacing:2px;color:#D2601C}

/* oyun ekranı */
.gs{position:relative;border-radius:30px;padding:16px;min-height:540px;color:#fff;overflow:hidden;box-shadow:0 18px 40px rgba(60,20,100,.25)}
.gs::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.18),transparent 40%),radial-gradient(circle at 85% 90%,rgba(255,255,255,.12),transparent 40%);pointer-events:none}
.gs-bar{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.gs-quit{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.2);color:#fff;font-size:16px}
.gs-prog{position:relative;flex:1;height:16px;border-radius:99px;background:rgba(0,0,0,.18)}
.gs-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFE36B,#FFB13B);transition:width .4s;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.gs-prog span{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:20px;transition:left .4s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.gs-score{display:flex;gap:6px}
.gs-score b{padding:6px 10px;border-radius:11px;font-size:13px;background:rgba(255,255,255,.2)}
.gq{position:relative;display:flex;flex-direction:column;gap:16px;max-width:620px;margin:0 auto}
.gq-ask{display:flex;align-items:flex-end;gap:10px}
.gq-mascot{flex-shrink:0;animation:ba-float 3s ease-in-out infinite}
.gq-bubble{position:relative;flex:1;background:#fff;color:var(--ink);border-radius:22px;padding:14px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 0 rgba(0,0,0,.12)}
.gq-bubble::before{content:'';position:absolute;left:-10px;bottom:18px;border:10px solid transparent;border-right-color:#fff;border-left:0}
.gq-type{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--ink-soft);text-transform:uppercase}
.gq-word{font-size:32px;font-weight:800;letter-spacing:-.6px;color:#5B3FD6;line-height:1.15;overflow-wrap:anywhere}
.t-mint .gq-word{color:#1F8A6A}.t-sun .gq-word{color:#D2601C}
.gq-word.small{font-size:26px}
.gq-hint{font-size:13px;color:var(--ink-soft)}
.gq-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gq-opt{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:#fff;color:var(--ink);font-family:inherit;font-size:16px;font-weight:800;text-align:left;
  box-shadow:0 6px 0 rgba(0,0,0,.14);transition:transform .1s,box-shadow .1s}
.gq-opt:not([disabled]):hover{transform:translateY(-2px)}
.gq-opt:not([disabled]):active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.14)}
.gq-l{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:15px;flex-shrink:0}
.gq-opt.c0 .gq-l{background:#FF6FA8}.gq-opt.c1 .gq-l{background:#FFB13B}.gq-opt.c2 .gq-l{background:#4FC98E}.gq-opt.c3 .gq-l{background:#5EC2FF}
.gq-t{overflow-wrap:anywhere}
.gq-opt.right{background:#3FBF8F;color:#fff;animation:in-pop .4s}
.gq-opt.right .gq-l{background:rgba(255,255,255,.3)}
.gq-opt.wrong{background:#F06A7E;color:#fff;animation:ba-shake .5s}
.gq-opt.wrong .gq-l{background:rgba(255,255,255,.3)}
.gq-opt.dim{opacity:.5}
.mascot{overflow:visible}

/* eşleştirme */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match-col{display:flex;flex-direction:column;gap:10px}
.match-card{padding:14px 12px;border-radius:16px;background:#fff;color:var(--ink);font-family:inherit;font-size:15px;font-weight:800;border:3px solid transparent;
  box-shadow:0 6px 0 rgba(0,0,0,.14);transition:transform .1s,border-color .15s;overflow-wrap:anywhere}
.match-card:not([disabled]):hover{transform:translateY(-2px)}
.match-card.sel{border-color:#FFE36B;transform:translateY(-3px) scale(1.03)}
.match-card.done{background:rgba(255,255,255,.25);color:#fff;box-shadow:none;animation:in-pop .4s}
.match-card.miss{background:#F06A7E;color:#fff;animation:ba-shake .5s}

/* balon patlatma */
.hm-sky{position:relative;height:190px;display:flex;flex-direction:column;align-items:center}
.hm-balloons{width:260px;height:156px;overflow:visible}
.hm-balloons .bl{animation:bl-sway 3s ease-in-out infinite;animation-delay:calc(var(--bi) * .25s);transform-origin:50% 100%;transform-box:view-box}
@keyframes bl-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.hm-balloons .bl-pop{animation:bl-pop .5s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes bl-pop{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(2.2) rotate(40deg)}}
.hm-cat{margin-top:-46px;animation:ba-float 2.4s ease-in-out infinite}
.hm-sky.low .hm-cat{animation:ba-shake 1s infinite}
.hm-cat.fell{animation:hm-fall .8s ease-in forwards}
@keyframes hm-fall{to{transform:translateY(30px) rotate(20deg)}}
.hm-clue-box{background:#fff;color:var(--ink);border-radius:20px;padding:12px 16px;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;gap:2px}
.hm-clue{font-size:24px;font-weight:800;color:#D2601C;letter-spacing:-.3px}
.hm-word{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.hm-slot,.hm-fixed{display:grid;place-items:center;width:36px;height:44px;border-radius:12px;background:rgba(255,255,255,.22);border-bottom:4px solid rgba(255,255,255,.55);
  font-style:normal;font-size:22px;font-weight:800;color:#fff}
.hm-slot.on{background:#fff;color:#D2601C;border-bottom-color:#FFB13B;animation:in-pop .35s}
.hm-space{width:14px}
.hm-keys{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.hm-key{height:44px;border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;font-weight:800;font-size:16px;box-shadow:0 4px 0 rgba(0,0,0,.14)}
.hm-key:not([disabled]):active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.14)}
.hm-key.hit{background:#3FBF8F;color:#fff;box-shadow:none}
.hm-key.miss{background:rgba(0,0,0,.18);color:rgba(255,255,255,.5);box-shadow:none}

/* alttan çıkan geri bildirim */
.gsheet{position:relative;display:flex;align-items:center;gap:14px;margin:18px auto 0;max-width:620px;padding:14px 16px;border-radius:20px;
  background:#E8FFF4;color:#1F7A58;box-shadow:0 8px 0 rgba(0,0,0,.12);animation:gsheet-in .35s cubic-bezier(.2,1.2,.4,1)}
.gsheet.no{background:#FFEFF1;color:#B43246}
@keyframes gsheet-in{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.gsheet-msg{flex:1;display:flex;flex-direction:column;gap:2px}
.gsheet-msg b{font-size:18px;font-weight:800}
.gsheet-msg span{font-size:13px}
.gsheet-msg em{font-style:normal;font-weight:800}
.gsheet-go{padding:12px 20px;border-radius:14px;background:#3FBF8F;color:#fff;font-weight:800;font-size:15px;box-shadow:0 4px 0 #2A9A70}
.gsheet.no .gsheet-go{background:#F06A7E;box-shadow:0 4px 0 #C94A5E}
.gsheet-go:active{transform:translateY(3px);box-shadow:none}

/* sonuç */
.gr{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:10px 0 6px}
.gr-stars{display:flex;gap:6px;align-items:flex-end}
.gr-stars span{font-size:52px;color:rgba(0,0,0,.2);line-height:1}
.gr-stars span:nth-child(2){font-size:66px}
.gr-stars span.on{color:#FFE36B;text-shadow:0 0 18px rgba(255,210,90,.8);animation:in-avatar .5s calc(var(--n) * .25s) cubic-bezier(.3,1.6,.5,1) both}
.gr-mascot{animation:ba-bounce 1.6s ease-in-out infinite}
.gr-title{font-size:26px;font-weight:800;letter-spacing:-.4px}
.gr-stats{display:flex;gap:10px}
.gr-stats div{background:#fff;color:var(--ink-soft);border-radius:16px;padding:10px 18px;font-size:12px;box-shadow:0 5px 0 rgba(0,0,0,.12)}
.gr-stats b{display:block;font-size:24px;font-weight:800;color:var(--ink)}
.gr-stats .ok b{color:#2A9A70}.gr-stats .no b{color:#D64257}
.gr-btns{display:flex;gap:10px;margin-top:6px}
.gr-again,.gr-back{padding:13px 20px;border-radius:15px;font-weight:800;font-size:15px}
.gr-again{background:#FFE36B;color:#5B3A00;box-shadow:0 5px 0 #D8A81C}
.gr-back{background:rgba(255,255,255,.22);color:#fff}
@media (prefers-reduced-motion:reduce){.gs *,.gl-hero *{animation:none !important}}
@media (max-width:760px){.gl-games{grid-template-columns:minmax(0,1fr)}.gl-game{min-height:180px}}
@media (max-width:560px){
  .gs{padding:12px;border-radius:24px}
  .gq-opts{grid-template-columns:minmax(0,1fr)}
  .gq-word{font-size:26px}
  .gq-mascot .mascot{width:64px;height:64px}
  .hm-keys{grid-template-columns:repeat(7,minmax(0,1fr))}
  .gl-hero{padding:14px}
  .gl-hero-txt > b{font-size:21px}
  .gsheet{flex-direction:column;align-items:stretch;text-align:center}
}

/* ============ TAKVİM: büyük yıldız + dökülen yıldızlar, çok fazla yapılınca alev ============ */
.cal-d.perfect{overflow:visible}
.cal-star{position:absolute;top:-9px;right:-7px;width:26px;height:26px;z-index:3;pointer-events:none}
.cal-star b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;line-height:1;color:#FFE36B;
  text-shadow:0 0 8px rgba(255,210,70,.95),0 2px 0 #E0A21C;animation:star-glow 2.4s ease-in-out infinite;animation-delay:var(--sd)}
@keyframes star-glow{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(12deg)}}
.cal-star i{position:absolute;left:50%;top:60%;font-style:normal;font-size:9px;color:#FFF3A8;opacity:0;text-shadow:0 0 6px rgba(255,220,90,.9);
  animation:star-fall 2.2s ease-in infinite;animation-delay:calc(var(--sd) + .3s)}
.cal-star i:nth-of-type(2){animation-delay:calc(var(--sd) + 1s);font-size:7px;--x:-14px}
.cal-star i:nth-of-type(3){animation-delay:calc(var(--sd) + 1.6s);--x:-6px}
@keyframes star-fall{
  0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(var(--x,-10px),34px) scale(1) rotate(160deg)}}

/* katmanlı gerçekçi alev (sol üst köşe) */
.flame{position:absolute;left:-6px;top:-14px;width:22px;height:30px;z-index:3;pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,120,0,.7))}
.flame i{position:absolute;bottom:0;left:50%;border-radius:50% 0 50% 50%;transform-origin:50% 100%;
  animation:flicker 1.1s ease-in-out infinite alternate;mix-blend-mode:screen}
.flame i:nth-child(1){width:20px;height:20px;margin-left:-10px;background:radial-gradient(circle at 60% 40%,#FF2A00 10%,#FF5A00 45%,rgba(255,60,0,0) 75%);
  transform:translateX(0) rotate(-45deg);animation-duration:1.3s}
.flame i:nth-child(2){width:15px;height:15px;margin-left:-7.5px;bottom:2px;background:radial-gradient(circle at 60% 40%,#FF9A00 15%,#FFB000 50%,rgba(255,150,0,0) 78%);
  transform:rotate(-45deg);animation-duration:.9s;animation-delay:.2s}
.flame i:nth-child(3){width:10px;height:10px;margin-left:-5px;bottom:3px;background:radial-gradient(circle at 55% 45%,#FFFDE0 10%,#FFE76A 50%,rgba(255,230,100,0) 80%);
  transform:rotate(-45deg);animation-duration:.7s;animation-delay:.1s}
.flame i:nth-child(4){width:7px;height:7px;margin-left:-3.5px;bottom:4px;background:radial-gradient(circle,#fff 20%,#FFF6C0 60%,rgba(255,255,255,0) 85%);
  transform:rotate(-45deg);animation-duration:.6s}
.flame.f3{width:28px;height:40px;left:-9px;top:-22px}
.flame.f3 i:nth-child(1){width:28px;height:28px;margin-left:-14px}
.flame.f3 i:nth-child(2){width:21px;height:21px;margin-left:-10.5px}
.flame.f3 i:nth-child(3){width:14px;height:14px;margin-left:-7px}
.flame.f3 i:nth-child(4){width:9px;height:9px;margin-left:-4.5px}
@keyframes flicker{
  0%{transform:rotate(-45deg) scale(1) translateY(0);opacity:.95}
  30%{transform:rotate(-40deg) scale(1.08,.94)}
  60%{transform:rotate(-50deg) scale(.94,1.1) translateY(-1px);opacity:1}
  100%{transform:rotate(-44deg) scale(1.05) translateY(-2px);opacity:.88}}
/* alevli günün kartı da hafif sıcak parlar */
.cal-d.perfect:has(.flame){box-shadow:0 6px 14px rgba(185,95,216,.3),0 0 16px rgba(255,130,40,.35)}
@media (prefers-reduced-motion:reduce){.cal-star b,.cal-star i,.flame i{animation:none}.cal-star i{display:none}}
@media (max-width:560px){
  .cal-star{width:18px;height:18px;top:-7px;right:-5px}
  .cal-star b{font-size:17px}
  .flame{transform:scale(.75);transform-origin:0 100%}
}
/* alev v2: uzun damla katmanlar + kıvılcım */
.flame{width:24px;height:34px;left:-8px;top:-20px;filter:drop-shadow(0 0 6px rgba(255,110,0,.75)) drop-shadow(0 0 2px rgba(255,200,0,.6))}
.flame i{mix-blend-mode:normal;border-radius:50% 0 50% 50%;animation-name:flicker2}
.flame i:nth-child(1){width:18px;height:18px;margin-left:-9px;background:linear-gradient(-45deg,#FF3D00 15%,#FF6A00 55%,#FF9A1F);opacity:.95}
.flame i:nth-child(2){width:13px;height:13px;margin-left:-6.5px;bottom:1px;background:linear-gradient(-45deg,#FF8A00 10%,#FFB300 60%,#FFD23F)}
.flame i:nth-child(3){width:8px;height:8px;margin-left:-4px;bottom:2px;background:linear-gradient(-45deg,#FFD23F,#FFF3A0)}
.flame i:nth-child(4){width:5px;height:5px;margin-left:-2.5px;bottom:2px;background:#FFFDF0}
@keyframes flicker2{
  0%{transform:scaleY(1.55) rotate(-45deg) scale(1)}
  25%{transform:scaleY(1.7) rotate(-41deg) scale(.95,1.04) translateY(-1px)}
  50%{transform:scaleY(1.45) rotate(-49deg) scale(1.05)}
  75%{transform:scaleY(1.75) rotate(-43deg) scale(.97)}
  100%{transform:scaleY(1.6) rotate(-47deg) scale(1.02) translateY(-1px)}}
.flame em{position:absolute;bottom:14px;left:50%;width:3px;height:3px;border-radius:50%;background:#FFD23F;box-shadow:0 0 4px #FF8A00;opacity:0;
  animation:ember 1.4s ease-out infinite}
.flame em:nth-of-type(2){animation-delay:.6s;--ex:5px}
.flame em:nth-of-type(3){animation-delay:1s;--ex:-6px}
@keyframes ember{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--ex,-4px),-22px) scale(.4)}}
.flame.f3{width:30px;height:46px;left:-11px;top:-30px}
.flame.f3 i:nth-child(1){width:26px;height:26px;margin-left:-13px}
.flame.f3 i:nth-child(2){width:19px;height:19px;margin-left:-9.5px}
.flame.f3 i:nth-child(3){width:12px;height:12px;margin-left:-6px}
.flame.f3 i:nth-child(4){width:7px;height:7px;margin-left:-3.5px}
.flame.f3 em{bottom:22px}
@media (prefers-reduced-motion:reduce){.flame em{display:none}}
/* alev hücrenin sol üstünde, yıldız sağ üstünde; komşu güne taşmazlar */
.cal-star{right:2px;top:-11px}
.flame{left:2px;top:-22px}
.flame.f3{left:0;top:-32px}
@media (max-width:560px){.cal-star{right:0;top:-8px}.flame{left:0}}

/* ============ KOYU OYUN SAHNESİ (Rozetler sayfası, İstatistik rozet bölümü) ============ */
.bdark .bc{background:linear-gradient(180deg,#45319C,#36277F);border-color:rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(20,5,60,.35)}
.bdark .bc:hover{box-shadow:0 16px 34px rgba(20,5,60,.5)}
.bdark .bc-name{color:#fff}
.bdark .bc-sub{color:rgba(255,255,255,.6)}
.bdark .bc-desc{color:rgba(255,255,255,.72)}
.bdark .bc-bar{background:rgba(255,255,255,.14)}
.bdark .bc-num{color:#7DF0C4}
.bdark .bc.far .bc-hex{background:linear-gradient(160deg,#6B78A8,#47507A)}
.bdark .bc.far .bc-hex-in{background:linear-gradient(160deg,#8C97C2,#5D6894)}
.bdark .bc.crown{background:linear-gradient(180deg,#4B3596,#3A2884);border:2px solid #F3C34B;box-shadow:0 0 26px rgba(243,195,75,.35)}
.bdark .bc-congrats{color:#FFE27A}
.bdark .bc-ribbon.muted{background:rgba(255,255,255,.2)}
.bdark .bc{animation:rcell .45s both}
.bdark .bc:nth-child(4n+2){animation-delay:.05s}
.bdark .bc:nth-child(4n+3){animation-delay:.1s}
.bdark .bc:nth-child(4n){animation-delay:.15s}
.bdark{--ink:#fff;--ink-soft:rgba(255,255,255,.72);--line:rgba(255,255,255,.14);--bg:rgba(255,255,255,.08);--card:rgba(255,255,255,.08);
  color:#fff;border-radius:30px;padding:20px;background:repeating-linear-gradient(135deg,#5B3FD6 0 14px,#6447E0 14px 28px);box-shadow:0 20px 50px rgba(60,20,140,.3)}
.bdark .card,.bdark .bgroup{background:rgba(30,15,90,.42);border-color:rgba(255,255,255,.14);box-shadow:none;color:#fff}
.bdark .ring-num{color:#FFE36B}
.bdark .bnext{background:rgba(255,255,255,.08)}
.bdark .bnext-num,.bdark .bgroup-count,.bdark .bhero-title i{color:#FFE36B}
.bdark .bfilters{background:rgba(30,15,90,.42)}
.bdark .seg{color:rgba(255,255,255,.75)}
.bdark .seg.on{background:#fff;color:#5B3FD6}
.bdark .bchip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:#fff}
.bdark .bchip i{color:rgba(255,255,255,.7)}
.bdark .bchip.on{background:#FFE36B;border-color:#FFE36B;color:#4A2A00}
.bdark .bchip.on i{color:#7A5200}
.bdark .bgroup-bar{background:rgba(255,255,255,.14)}
.bdark .hint{color:rgba(255,255,255,.7)}
.bdark #warnSlot .streak-warn,.bdark .streak-warn{color:#7A4D12}
.bdark .bwon{color:var(--ink)}
.bdark .bwon-name{color:#3B2537}
.bpage{margin-top:2px}

/* ============ İSTATİSTİK ============ */
.spage{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.sks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sk{display:flex;align-items:center;gap:14px;padding:16px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.sk::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;opacity:.5}
.sk.pink::after{background:#FFE3EF}.sk.red::after{background:#FFE6E9}.sk.green::after{background:#E1F8EE}
.sk.violet::after{background:#EEE7FF}.sk.blue::after{background:#E2F2FF}.sk.orange::after{background:#FFF0DD}
.sk-ic{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1}
.sk.pink .sk-ic{background:#FFF0F6}.sk.red .sk-ic{background:#FFF1F3}.sk.green .sk-ic{background:#ECFBF4}
.sk.violet .sk-ic{background:#F4EFFF}.sk.blue .sk-ic{background:#EDF7FF}.sk.orange .sk-ic{background:#FFF6EA}
.sk-ic .pic{animation:ba-float 3.2s ease-in-out infinite}
.sk:nth-child(2) .pic{animation-delay:.4s}.sk:nth-child(3) .pic{animation-delay:.8s}.sk:nth-child(4) .pic{animation-delay:1.2s}.sk:nth-child(5) .pic{animation-delay:1.6s}.sk:nth-child(6) .pic{animation-delay:2s}
.sk-main{display:flex;flex-direction:column;position:relative;z-index:1;min-width:0}
.sk-main b{font-size:28px;font-weight:800;letter-spacing:-.6px;line-height:1.05}
.sk-main > span{font-size:13px;color:var(--ink-soft);font-weight:600}
.sk-main em{font-style:normal;font-size:11.5px;color:var(--ink-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfocus{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:22px;background:linear-gradient(120deg,#FFF0F4,#F5EDFF);border:1.5px dashed #F2B8CF}
.sfocus b{font-size:15px;color:var(--pink-deep)}
.sfocus p{margin:3px 0 0;font-size:13px;color:var(--ink-soft)}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sgrid.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-sm);padding:16px 18px;min-width:0}
.sp.span2{grid-column:span 2}
.sp-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sp-head h3{font-size:16px;font-weight:800}
.sp-ic{width:40px;height:40px;border-radius:13px;background:var(--bg);display:grid;place-items:center}
.sp-note{font-size:12.5px;color:var(--ink-soft);margin:8px 0 0}
.sp-note b{color:var(--pink-deep)}
.sp-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:30px}
.sp-empty b{font-size:18px}.sp-empty span{color:var(--ink-soft)}
.ssub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ssub li{display:grid;grid-template-columns:auto minmax(0,1fr) 64px 60px;gap:12px;align-items:center;padding:8px 10px;border-radius:16px;background:color-mix(in srgb,var(--c) 14%,#fff)}
.ssub-ico{width:36px;height:36px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:19px}
.ssub-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.ssub-name{font-size:12.5px;font-weight:800;color:var(--i)}
.ssub-bar{height:7px;border-radius:99px;background:#fff;overflow:hidden}
.ssub-bar i{display:block;height:100%;border-radius:99px;background:var(--i)}
.ssub-num{display:flex;flex-direction:column;font-size:10.5px;color:var(--ink-soft);text-align:right}
.ssub-num b{font-size:16px;font-weight:800;color:var(--ink)}
.sdonut{display:grid;place-items:center;padding:4px 0 8px}
.smini{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.smini span{display:flex;flex-direction:column;font-size:11.5px;color:var(--ink-soft)}
.smini b{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.sbar{display:block;height:9px;border-radius:99px;background:#F4E6F0;overflow:hidden;margin-bottom:10px}
.sbar i{display:block;height:100%;border-radius:99px;background:var(--frame)}
/* rozet sahnesi */
.sb-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sb-ic .pic{animation:ba-swing 3s ease-in-out infinite;transform-origin:50% 0}
.sb-title{display:flex;flex-direction:column}
.sb-title small{font-size:12px;opacity:.8;font-weight:700}
.sb-title b{font-size:32px;font-weight:800;letter-spacing:-.6px}
.sb-title b i{font-style:normal;font-size:16px;opacity:.7}
.sb-rar{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.sb-rar span{display:flex;flex-direction:column;align-items:center;padding:8px 12px;border-radius:14px;background:rgba(30,15,90,.42);font-weight:800;font-size:16px;min-width:64px}
.sb-rar small{font-size:10.5px;font-weight:600;opacity:.75}
.sb-all{padding:10px 16px;border-radius:13px;background:#FFE36B;color:#4A2A00;font-weight:800;box-shadow:0 4px 0 #D8A81C}
.sb-sec{font-weight:800;font-size:14px;margin:18px 2px 0}
.sb-row{padding-top:44px}
.sb-empty{opacity:.8}
@media (max-width:1100px){.sks{grid-template-columns:repeat(2,minmax(0,1fr))}.sgrid.s3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .sks{grid-template-columns:minmax(0,1fr)}
  .sgrid,.sgrid.s3{grid-template-columns:minmax(0,1fr)}
  .sp.span2{grid-column:auto}
  .ssub li{grid-template-columns:auto minmax(0,1fr) 54px 48px;gap:8px}
  .bdark{padding:14px;border-radius:24px}
}

/* ============ TAKVİM: ardışık tam günler arasında hareketli örgülü ip ============ */
.cal-chain{width:18px;height:6px;margin-top:-3px;border-radius:4px;z-index:2;background:
  repeating-linear-gradient(60deg,#F6C77A 0 3px,#C9873A 3px 5px,#8E5A22 5px 6px);
  background-size:12px 6px;box-shadow:0 2px 3px rgba(80,40,10,.35),inset 0 1px 0 rgba(255,255,255,.4);
  animation:rope-twist 1.2s linear infinite,rope-sway 2.4s ease-in-out infinite;transform-origin:50% 0}
.cal-chain.l{left:-13px}
.cal-chain.r{right:-14px}
@keyframes rope-twist{to{background-position:12px 0}}
@keyframes rope-sway{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(1.5px) rotate(4deg)}50%{transform:translateY(2.5px)}75%{transform:translateY(1.5px) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.cal-chain{animation:none}}
@media (max-width:560px){.cal-chain{width:12px;height:5px}.cal-chain.l{left:-9px}.cal-chain.r{right:-9px}}
.cal-chain{width:22px;height:8px;margin-top:-4px;border-radius:5px;background-size:14px 8px}
.cal-chain.r{right:-16px}
@keyframes rope-twist{to{background-position:14px 0}}
/* yıldız günün kutusunun içinde, sağ üstte */
.cal-star{top:4px;right:4px;width:20px;height:20px}
.cal-star b{font-size:19px}
.cal-star i{top:55%}
@media (max-width:560px){.cal-star{top:2px;right:2px;width:14px;height:14px}.cal-star b{font-size:13px}}