* { user-select: none; -webkit-user-select: none; }
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ══ TOKENS ══════════════════════════════════════════ */
:root {
  --purple:   #6C3CE1; --purple-l: #8B5CF6; --purple-d: #5429C4;
  --orange:   #F59E0B; --green: #10B981; --green-d: #059669;
  --blue:     #3B82F6; --red: #EF4444; --coin: #FBBF24;
  --bg:       #1A1040; --bg2: #231459; --bg3: #2D1B6E;
  --card:     #2A1952; --card2: #341F66;
  --text:     #F3F0FF; --text2: #A89BC2; --text3: #6B5F8A;
  --bdr:      rgba(255,255,255,0.1);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-f:999px;
  --shd-p:0 4px 18px rgba(108,60,225,0.45);
  --shd-g:0 4px 14px rgba(16,185,129,0.35);
  /* Theme accent — JS tarafından override edilir */
  --theme-accent: #8B5CF6;
}

/* ══ RESET ══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-y:scroll}
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--text); min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  background:#0D0B1E; /* Her zaman koyu zemin */
}
/* Tema hero overlay — sadece üstte görünür, aşağı doğru solar */
.theme-hero-overlay {
  position:fixed; top:0; left:0; right:0; height:420px;
  z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, black 20%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 20%, transparent 100%);
  transition:background .5s ease;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none}
input,textarea{font-family:inherit;outline:none}
img{display:block;max-width:100%}

/* ══ LAYOUT ══════════════════════════════════════════ */
.app-root {
  max-width:560px; margin:0 auto;
  min-height:100dvh; display:flex; flex-direction:column;
  position:relative;
}
/* Ders ekranı — scroll yok, sabit yükseklik */
.page {
  max-width:560px; margin:0 auto;
  height:100dvh; display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}
/* Sayfa içeriği her zaman ortalı ve sınırlı */
.content-wrap {
  max-width:560px; margin:0 auto; width:100%;
  padding-bottom:80px;
}
.px{padding-left:18px;padding-right:18px}
.pb-nav{padding-bottom:72px}

/* ══ DESKTOP TOP NAV ══════════════════════════════════ */
.desktop-nav {
  display:none;
  position:sticky; top:0; z-index:200;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:0 24px;
  max-width:100%; /* tam ekran genişliği */
}
.desktop-nav-inner {
  max-width:860px; margin:0 auto;
  display:flex; align-items:center; gap:8px; height:56px;
}
.desktop-logo {
  display:flex; align-items:center; gap:9px;
  font-size:17px; font-weight:900; color:#fff;
  text-decoration:none; flex-shrink:0; margin-right:8px;
}
.desktop-logo img {
  width:30px; height:30px; border-radius:8px; object-fit:cover;
}
.desktop-links { display:flex; align-items:center; gap:2px; flex:1; }
.desktop-link {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-f);
  font-size:13px; font-weight:700; color:rgba(255,255,255,0.55);
  cursor:pointer; transition:all .15s; text-decoration:none; white-space:nowrap;
}
.desktop-link:hover  { background:rgba(255,255,255,0.1); color:#fff; }
.desktop-link.active { background:rgba(255,255,255,0.15); color:#fff; }
.desktop-link .dl-ico { font-size:16px; }
.nav-logo-link { color: #fff; }
.desktop-stats { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }

/* ══ MOBILE BOTTOM NAV ══════════════════════════════ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));
  display:flex;
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:4px 0; cursor:pointer; transition:transform .12s;
}
.nav-item:active { transform:scale(0.85); }
.nav-icon  { font-size:21px; line-height:1; filter:grayscale(1) brightness(0.4); transition:filter .2s; }
.nav-label { font-size:10px; font-weight:700; color:var(--text3); letter-spacing:0.3px; }
.nav-item.active .nav-icon  { filter:none; }
.nav-item.active .nav-label { color:#fff; }

/* ══ RESPONSIVE ══════════════════════════════════════ */
@media (max-width:639px) {
  .desktop-nav { display:none !important; }
  .bottom-nav  { display:flex; }
  .hide-mobile { display:none !important; }
}
@media (min-width:640px) {
  .desktop-nav { display:block; }
  .bottom-nav  { display:none !important; }
  .app-root    { max-width:600px; }
  .page        { max-width:600px; }
  .hide-desktop{ display:none !important; }
}

/* ══ BUTTONS ══════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:var(--r-f);font-weight:800;font-size:15px;cursor:pointer;transition:all .15s;border:none;font-family:inherit;white-space:nowrap}
.btn:active{transform:scale(0.96)}.btn:disabled{opacity:0.4;pointer-events:none}
.btn-purple{background:linear-gradient(135deg,var(--purple),var(--purple-l));color:#fff;box-shadow:var(--shd-p)}
.btn-green{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;box-shadow:var(--shd-g)}
.btn-orange{background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff}
.btn-ghost{background:rgba(255,255,255,0.08);color:var(--text);border:1.5px solid var(--bdr)}
.btn-red{background:var(--red);color:#fff}
.btn-full{width:100%}.btn-lg{padding:14px 26px;font-size:16px}.btn-sm{padding:7px 15px;font-size:13px}

/* ══ CHIPS ════════════════════════════════════════════ */
.xp-chip{display:flex;align-items:center;gap:5px;background:rgba(245,158,11,0.14);border:1px solid rgba(245,158,11,0.28);border-radius:var(--r-f);padding:5px 11px;font-size:13px;font-weight:800;color:var(--orange)}
.coin-chip{display:flex;align-items:center;gap:5px;background:rgba(251,191,36,0.10);border:1px solid rgba(251,191,36,0.22);border-radius:var(--r-f);padding:5px 11px;font-size:13px;font-weight:800;color:var(--coin)}

/* ══ CARD ═════════════════════════════════════════════ */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:16px}
.card-glass{background:rgba(255,255,255,0.06);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-lg);padding:20px}

/* ══ INPUT ════════════════════════════════════════════ */
.input{width:100%;padding:12px 14px;background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.15);border-radius:var(--r-md);color:var(--text);font-size:15px;font-weight:600;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px rgba(139,92,246,0.18)}
.input::placeholder{color:var(--text3);font-weight:500}
.input-label{font-size:11px;font-weight:800;color:var(--text2);letter-spacing:0.5px;text-transform:uppercase;display:block;margin-bottom:6px}
.form-group{margin-bottom:12px}

/* ══ PROGRESS BAR ═════════════════════════════════════ */
.prog-wrap{height:7px;background:rgba(255,255,255,0.1);border-radius:var(--r-f);overflow:hidden}
.prog-fill{height:100%;border-radius:var(--r-f);background:linear-gradient(90deg,var(--purple),var(--purple-l));transition:width .45s cubic-bezier(.4,0,.2,1)}
.prog-fill.green{background:linear-gradient(90deg,var(--green),#34D399)}
.prog-fill.gold{background:linear-gradient(90deg,var(--orange),var(--coin))}

/* ══ LESSON HEADER ════════════════════════════════════ */
.lesson-header{background:rgba(0,0,0,0.3);backdrop-filter:blur(12px);border-bottom:1px solid var(--bdr);padding:calc(env(safe-area-inset-top,0px)+10px) 16px 10px;flex-shrink:0}
.lh-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.back-btn{width:32px;height:32px;border-radius:var(--r-sm);background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text2);cursor:pointer;flex-shrink:0}
.back-btn:active{background:rgba(255,255,255,0.18)}
.q-counter{font-size:12px;font-weight:800;color:var(--text2);white-space:nowrap;flex-shrink:0}

/* ══ MASCOT ROW ═══════════════════════════════════════ */
.mascot-row{display:flex;align-items:flex-end;gap:10px;padding:10px 16px;background:rgba(0,0,0,0.2);backdrop-filter:blur(8px);border-bottom:1px solid var(--bdr);flex-shrink:0}
.mascot-mini{font-size:42px;line-height:1;flex-shrink:0}
.mascot-speech{flex:1;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--text);line-height:1.5;min-height:52px;max-height:70px;overflow:hidden}

/* SRS */
.srs-banner{background:rgba(245,158,11,0.1);border-bottom:1px solid rgba(245,158,11,0.15);padding:6px 16px;font-size:12px;font-weight:700;color:var(--orange);flex-shrink:0;display:none}
.srs-banner.show{display:block}

/* ══ QUESTION AREA ════════════════════════════════════ */
.q-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.q-area::-webkit-scrollbar{display:none}

/* ══ OPTIONS ══════════════════════════════════════════ */
.opts-wrap{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,0.07);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,0.12);border-radius:var(--r-lg);padding:13px 14px;cursor:pointer;transition:all .15s;width:100%;text-align:left;font-family:inherit;font-size:14px;font-weight:700;color:var(--text);min-height:50px}
.opt:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.12)}
.opt:active{transform:scale(0.98)}
.opt[disabled]{pointer-events:none}
.opt.correct{background:rgba(16,185,129,0.2);border-color:var(--green)}
.opt.wrong{background:rgba(239,68,68,0.15);border-color:var(--red)}
.opt-key{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;color:var(--text2)}
.opt.correct .opt-key{background:var(--green);color:#fff}
.opt.wrong   .opt-key{background:var(--red);color:#fff}
.opt-text{flex:1;line-height:1.35}

/* Type badge */
.type-badge{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-f);padding:4px 11px;font-size:12px;font-weight:800;flex-shrink:0;align-self:flex-start}
.type-street{background:rgba(16,185,129,0.15);color:#6EE7B7}
.type-pronun{background:rgba(245,158,11,0.15);color:var(--orange)}
.type-grammar{background:rgba(139,92,246,0.15);color:var(--purple-l)}
.type-vocab{background:rgba(59,130,246,0.15);color:var(--blue)}
.type-culture{background:rgba(236,72,153,0.15);color:#F9A8D4}
.type-dialog{background:rgba(16,185,129,0.12);color:#6EE7B7}

/* IPA */
.ipa-box{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,0.2);border:1px solid var(--bdr);border-radius:var(--r-md);padding:10px 13px}
.ipa-text{font-size:19px;font-weight:700;color:var(--purple-l);letter-spacing:2px;flex:1}
.ipa-hint{font-size:11px;color:var(--text3);margin-top:3px}
.ipa-speak{width:36px;height:36px;border-radius:var(--r-sm);background:var(--purple);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;flex-shrink:0}
.ipa-speak:active{transform:scale(0.9)}

/* ══ FEEDBACK PANEL ═══════════════════════════════════ */
.feedback-panel{flex-shrink:0;border-top:1px solid var(--bdr)}
.feedback-inner{padding:13px 16px 6px;display:none}
.feedback-inner.show{display:block}
.feedback-inner.ok{background:rgba(16,185,129,0.08)}
.feedback-inner.err{background:rgba(239,68,68,0.08)}
.fb-title{font-size:14px;font-weight:900;margin-bottom:4px}
.feedback-inner.ok .fb-title{color:#6EE7B7}
.feedback-inner.err .fb-title{color:#FCA5A5}
.fb-street{margin-top:8px;background:rgba(108,60,225,0.15);border-left:3px solid var(--purple-l);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:7px 11px;font-size:12px;font-weight:700;color:var(--purple-l);line-height:1.5}
.next-row{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,0.2);flex-shrink:0}

/* ══ WIN SCREEN ═══════════════════════════════════════ */
.win-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;flex-direction:column;text-align:center}
.win-mascot{font-size:80px;margin-bottom:6px;animation:bounce .5s ease 3,float 2.5s 1.8s ease-in-out infinite}
.win-vehicle{font-size:40px;margin-bottom:14px;animation:vehicleGo 2s .5s ease both;display:inline-block}
@keyframes vehicleGo{0%{transform:translateX(-30px);opacity:0}20%{opacity:1}80%{transform:translateX(10px)}100%{transform:translateX(70px);opacity:0}}
.win-stars{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.win-star{font-size:28px}
.win-star.off{filter:grayscale(1) opacity(.22)}
@keyframes starPop{0%{transform:scale(0)rotate(-20deg);opacity:0}60%{transform:scale(1.3)rotate(5deg)}100%{transform:scale(1);opacity:1}}
.win-star:nth-child(1){animation:starPop .4s .1s both}
.win-star:nth-child(2){animation:starPop .4s .3s both}
.win-star:nth-child(3){animation:starPop .4s .5s both}
.win-title{font-size:26px;font-weight:900;color:#fff;margin-bottom:5px}
.win-sub{font-size:13px;color:rgba(255,255,255,0.6);margin-bottom:20px}
.win-stats{display:flex;gap:10px;justify-content:center;margin-bottom:20px}
.win-stat{background:rgba(255,255,255,0.1);border-radius:var(--r-lg);padding:12px 16px;text-align:center;min-width:76px}
.win-stat b{display:block;font-size:21px;font-weight:900;color:#fff}
.win-stat span{font-size:10px;color:rgba(255,255,255,0.45);font-weight:700;margin-top:1px;display:block}
.win-medals{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.22);border-radius:var(--r-md);padding:9px 13px;margin-bottom:14px;font-size:12px;font-weight:700;color:var(--orange)}

/* ══ HOME PATH ═══════════════════════════════════════ */
.path-node{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;position:relative;transition:transform .15s;flex-shrink:0;border:3px solid transparent}
.path-node:active{transform:scale(0.90)}
.node-done{background:linear-gradient(135deg,var(--green),var(--green-d));border-color:rgba(255,255,255,0.3);box-shadow:0 4px 14px rgba(16,185,129,0.4)}
.node-curr{background:linear-gradient(135deg,var(--purple),var(--purple-l));border-color:rgba(255,255,255,0.5);box-shadow:0 0 0 5px rgba(108,60,225,0.22),0 4px 18px rgba(108,60,225,0.4);animation:nodePulse 2s ease-in-out infinite}
.node-lock{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.08);opacity:0.38;cursor:not-allowed}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 5px rgba(108,60,225,0.22),0 4px 18px rgba(108,60,225,0.4)}50%{box-shadow:0 0 0 10px rgba(108,60,225,0.09),0 4px 18px rgba(108,60,225,0.4)}}
.sec-dot{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;transition:all .25s;flex-shrink:0;cursor:default}
.sec-dot.done{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,0.4);cursor:pointer}
.sec-dot.done:hover{transform:scale(1.18)}
.sec-dot.curr{background:var(--orange);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,0.4);cursor:pointer;animation:dp 1.8s ease-in-out infinite}
.sec-dot.lock{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.2);border:1.5px solid rgba(255,255,255,0.1)}
@keyframes dp{0%,100%{box-shadow:0 2px 8px rgba(245,158,11,.4)}50%{box-shadow:0 2px 14px rgba(245,158,11,.7)}}
.tag-curr{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:var(--r-f);padding:3px 10px;font-size:10px;font-weight:800;color:#fff;margin-top:5px;cursor:pointer;transition:all .15s}
.tag-curr:hover{background:rgba(255,255,255,0.2)}
.tag-done{font-size:10px;color:rgba(16,185,129,0.9);font-weight:700;margin-top:4px}
.lv-badge{background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);color:#fff;font-size:12px;font-weight:800;padding:5px 13px;border-radius:var(--r-f);white-space:nowrap;border:1px solid rgba(255,255,255,0.2)}
.lv-line{flex:1;height:1px;background:rgba(255,255,255,0.1)}
.lv-prog{font-size:11px;color:rgba(255,255,255,0.45);font-weight:700;white-space:nowrap}
.locked-lv{border:2px dashed rgba(255,255,255,0.1);border-radius:15px;padding:16px;text-align:center;margin-bottom:10px;opacity:.5}

/* ══ SHOP ═════════════════════════════════════════════ */
.shop-card{border-radius:var(--r-lg);overflow:hidden;border:2px solid rgba(255,255,255,0.1);cursor:pointer;transition:all .2s;background:rgba(255,255,255,0.06);backdrop-filter:blur(8px)}
.shop-card:active{transform:scale(0.97)}
.shop-card.owned{border-color:var(--purple-l)}
.shop-card.act-th{border-color:var(--orange);box-shadow:0 0 0 2px rgba(245,158,11,0.2)}
.shop-thumb{height:64px;display:flex;align-items:center;justify-content:center;font-size:28px}
.shop-body{padding:10px 12px}
.shop-name{font-size:14px;font-weight:800;margin-bottom:5px}
.shop-lbl{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:var(--r-sm);font-size:12px;font-weight:800;margin-top:6px}
.sl-active{background:rgba(245,158,11,0.2);color:var(--orange)}
.sl-owned{background:rgba(139,92,246,0.2);color:var(--purple-l)}
.sl-buy{background:var(--purple);color:#fff}
.sl-lock{background:rgba(255,255,255,0.06);color:var(--text3)}

/* ══ STATS ════════════════════════════════════════════ */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-box{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-md);padding:12px 8px;text-align:center}
.stat-val{font-size:20px;font-weight:900}
.stat-lbl{font-size:10px;color:var(--text2);font-weight:700;margin-top:2px}

/* ══ MEDALS ═══════════════════════════════════════════ */
.medal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.medal-card{background:rgba(255,255,255,0.07);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,0.1);border-radius:var(--r-md);padding:14px;text-align:center}
.medal-card.earned{border-color:rgba(245,158,11,0.4);background:rgba(245,158,11,0.08)}
.medal-card.locked{opacity:0.35}
.medal-icon{font-size:28px;margin-bottom:6px}
.medal-name{font-size:13px;font-weight:800;margin-bottom:3px}
.medal-desc{font-size:11px;color:var(--text2);line-height:1.4}
.medal-xp{font-size:11px;font-weight:700;color:var(--orange);margin-top:4px}
.medal-date{font-size:10px;color:var(--green);font-weight:700;margin-top:2px}

/* ══ SETTINGS ROW ═════════════════════════════════════ */
.settings-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.07);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-md);padding:13px 15px;margin-bottom:8px}

/* ══ STREAK DOTS ══════════════════════════════════════ */
.streak-dot{width:11px;height:11px;border-radius:3px;background:rgba(255,255,255,0.1);display:inline-block}
.streak-dot.on{background:var(--green)}.streak-dot.today{background:var(--orange)}

/* ══ SECTION TITLE ════════════════════════════════════ */
.sec-title{font-size:11px;font-weight:800;color:rgba(255,255,255,0.45);letter-spacing:0.6px;text-transform:uppercase;margin-bottom:10px}

/* ══ DIVIDER ══════════════════════════════════════════ */
.divider{display:flex;align-items:center;gap:10px;color:var(--text3);font-size:12px;font-weight:600;margin:10px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--bdr)}

/* ══ MODAL ════════════════════════════════════════════ */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-bg.open{opacity:1;pointer-events:all}
.modal-box{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-xl);padding:26px 22px;width:100%;max-width:400px;transform:scale(0.92);transition:transform .2s}
.modal-bg.open .modal-box{transform:scale(1)}

/* ══ TOAST ════════════════════════════════════════════ */
.toast-c{position:fixed;top:14px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none;max-width:280px}
.toast{background:rgba(0,0,0,0.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-md);padding:10px 13px;font-size:13px;font-weight:700;box-shadow:0 4px 20px rgba(0,0,0,.4);animation:toastIn .3s ease}
.toast.ok{border-left:3px solid var(--green)}.toast.err{border-left:3px solid var(--red)}.toast.info{border-left:3px solid var(--purple-l)}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}

/* ══ ANIMATIONS ═══════════════════════════════════════ */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bounce{0%,100%{transform:translateY(0)scale(1)}40%{transform:translateY(-14px)scale(1.06)}70%{transform:translateY(-5px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ptc{0%{transform:translateY(0)rotate(0);opacity:1}100%{transform:translateY(-100px)rotate(360deg);opacity:0}}
.anim-float{animation:float 2.6s ease-in-out infinite}
.fadeUp{animation:fadeUp .32s ease both}
.ptc{position:fixed;pointer-events:none;font-size:18px;z-index:9998;animation:ptc 1.1s ease both}
.sr-y{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sr-y::-webkit-scrollbar{display:none}


/* ═══════════════════════════════════════════════════════════════
   KLASİK TEMA — Tüm sayfalarda geçerli, tek kaynak (app.css)
   Diğer sayfalardaki body.klasik bloklarına gerek yok.
   ═══════════════════════════════════════════════════════════════ */

/* Zemin */
body.klasik { background: linear-gradient(135deg,#f0fdf8 0%,#d1fae5 30%,#a7f3d0 60%,#6ee7b7 100%) !important; }
body.klasik, body.klasik * { hyphens: none; -webkit-hyphens: none; }

/* Desktop nav */
body.klasik .desktop-nav       { background: rgba(255,255,255,.82) !important; backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,120,80,.15) !important; }
body.klasik .desktop-link      { color: #1a5c42 !important; }
body.klasik .desktop-link:hover{ background: rgba(0,120,80,.08) !important; color: #0d6b4a !important; }
body.klasik .desktop-link.active{ background: rgba(13,158,110,.15) !important; color: #0d7a54 !important; }
body.klasik .nav-logo-link     { color: #1a3a2e !important; }

/* Mobil nav */
body.klasik .bottom-nav { background: rgba(255,255,255,.88) !important; border-top: 1px solid rgba(0,120,80,.12) !important; }
body.klasik .nav-item   { color: #4a8c70 !important; }
body.klasik .nav-item.active .nav-icon,
body.klasik .nav-item.active .nav-label { color: #0d7a54 !important; }

/* Chiplar */
body.klasik .xp-chip   { background: rgba(13,158,110,.15) !important; color: #0d6b4a !important; border-color: rgba(13,158,110,.3) !important; }
body.klasik .coin-chip  { background: rgba(245,158,11,.15) !important; color: #b45309 !important; border-color: rgba(245,158,11,.3) !important; }

/* Genel metin renkleri */
body.klasik h1, body.klasik h2, body.klasik h3, body.klasik h4,
body.klasik .sec-title, body.klasik .stat-val, body.klasik .stat-lbl,
body.klasik .page-hdr-title, body.klasik .page-hdr-level,
body.klasik .unit-name, body.klasik .unit-sub,
body.klasik .lv-badge, body.klasik .lv-prog { color: #1a3a2e !important; }
body.klasik .lv-prog   { color: #4a8c70 !important; }

/* Kartlar & paneller */
body.klasik .card-glass   { background: rgba(255,255,255,.78) !important; border-color: rgba(0,120,80,.15) !important; color: #1a3a2e !important; }
body.klasik .modal-box    { background: rgba(255,255,255,.95) !important; border-color: rgba(0,120,80,.15) !important; }
body.klasik .modal-box h3 { color: #1a3a2e !important; }
body.klasik .modal-bg     { background: rgba(0,0,0,.3); }
body.klasik .stat-box     { background: rgba(255,255,255,.65) !important; border-color: rgba(0,120,80,.12) !important; }
body.klasik .settings-row { background: rgba(255,255,255,.55) !important; border-color: rgba(0,120,80,.12) !important; color: #1a3a2e !important; }
body.klasik .settings-row span { color: #1a3a2e !important; }

/* Inputlar */
body.klasik .input, body.klasik input, body.klasik select, body.klasik textarea {
  background: rgba(255,255,255,.88) !important; color: #1a3a2e !important; border-color: rgba(0,120,80,.25) !important; }
body.klasik .input::placeholder, body.klasik input::placeholder { color: rgba(0,80,50,.4) !important; }
body.klasik .input-label { color: #0d7a54 !important; }

/* Butonlar */
body.klasik .btn-purple { background: linear-gradient(135deg,#0d9e6e,#0dd68b) !important; color: #fff !important; }
body.klasik .btn-ghost  { background: rgba(255,255,255,.62) !important; border-color: rgba(0,120,80,.2) !important; color: #0d6b4a !important; }
body.klasik .cust-btn   { background: rgba(255,255,255,.65) !important; border-color: rgba(0,120,80,.2) !important; color: #0d7a54 !important; }
body.klasik #btn-close-cust { background: rgba(0,120,80,.1) !important; color: #0d7a54 !important; border: none; }

/* Tab (login sayfası) */
body.klasik .tab-row          { background: rgba(0,0,0,.06) !important; }
body.klasik .tab              { color: rgba(0,80,50,.5) !important; }
body.klasik .tab.active       { background: rgba(13,158,110,.85) !important; color: #fff !important; }

/* Mesajlar */
body.klasik .msg.ok  { background: rgba(16,185,129,.1) !important; color: #0d6b4a !important; border-color: rgba(16,185,129,.3) !important; }
body.klasik .msg.err { background: rgba(239,68,68,.08) !important; color: #dc2626 !important; }
body.klasik .beta-info { background: rgba(255,255,255,.62) !important; color: #4a8c70 !important; border-color: rgba(0,120,80,.2) !important; }
body.klasik .beta-info strong { color: #0d7a54 !important; }
body.klasik .beta-tag  { background: rgba(13,158,110,.15) !important; border-color: rgba(13,158,110,.4) !important; color: #0d7a54 !important; }
body.klasik .logo-txt  { color: #1a3a2e !important; }
body.klasik .logo-sub  { color: #4a8c70 !important; }
body.klasik .lnk       { color: #0d7a54 !important; }
body.klasik .foot      { color: #4a8c70 !important; }

/* Harita / path */
body.klasik .path-node  { background: rgba(13,158,110,.15); border: 2px solid #0d9e6e; color: #0d7a54; }
body.klasik .node-curr  { background: #0d9e6e !important; color: #fff !important; }
body.klasik .node-done  { background: #10B981 !important; color: #fff !important; }
body.klasik .node-lock  { background: rgba(0,0,0,.08) !important; border-color: rgba(0,0,0,.1) !important; color: rgba(0,0,0,.25) !important; }
body.klasik .path-line  { background: rgba(0,120,80,.12); }
body.klasik .vline      { background: rgba(0,120,80,.2); }
body.klasik .lv-sep .lv-line { background: rgba(0,100,70,.18); }
body.klasik .mascot-bubble { background: rgba(255,255,255,.85) !important; color: #1a3a2e !important; border-color: rgba(0,120,80,.2) !important; }

/* Section dots */
body.klasik .sec-dot            { background: #d4ede4; border-color: #10B981; color: #0d7a54; }
body.klasik .sec-dot.done       { background: #10B981 !important; color: #fff !important; }
body.klasik .sec-dot.curr       { background: #f59e0b !important; color: #fff !important; border-color: #f59e0b !important; }
body.klasik .sec-dot.lock       { background: rgba(0,0,0,.07) !important; border-color: rgba(0,0,0,.1) !important; color: rgba(0,0,0,.2) !important; }
body.klasik .tag-curr           { background: #0d9e6e !important; color: #fff !important; border-color: #0d9e6e !important; }
body.klasik .tag-done           { background: #d4ede4; color: #0d7a54; }

/* Kilitli seviyeler */
body.klasik .locked-lv          { border-color: rgba(0,120,80,.2) !important; opacity: .6; }
body.klasik .lv-locked-title    { color: rgba(0,60,40,.55) !important; }
body.klasik .lv-locked-sub      { color: rgba(0,60,40,.38) !important; }

/* Tema/maskot seçici pills */
body.klasik .pills-label   { color: #0d7a54 !important; }
body.klasik .pick-pill     { color: #1a3a2e !important; background: rgba(0,120,80,.06) !important; border-color: rgba(0,120,80,.15) !important; }
body.klasik .pick-pill .plbl { color: #4a8c70 !important; }
body.klasik .pick-pill.active{ border-color: #0d9e6e !important; background: rgba(13,158,110,.14) !important; color: #0d6b4a !important; }

/* Grid kart görünümü */
body.klasik .grid-card      { background: rgba(255,255,255,.9) !important; }
body.klasik .grid-unit-num  { color: #0d9e6e !important; }
body.klasik .grid-unit-name { color: #1a3a2e !important; }
body.klasik .grid-unit-desc { color: #4a8c70 !important; }
body.klasik .grid-dot       { background: #e2f5ed; border-color: #10B981; color: #0d7a54; }
body.klasik .grid-dot.done  { background: #10B981 !important; color: #fff !important; }
body.klasik .grid-dot.active{ background: #f59e0b !important; color: #fff !important; border-color: #f59e0b !important; }
body.klasik .grid-dot.lock  { background: #f0f0f0 !important; border-color: #d0d0d0 !important; color: #aaa !important; }
body.klasik .grid-done-badge{ background: #10B981 !important; color: #fff !important; }

/* Profil sayfası */
body.klasik .streak-dot     { background: rgba(0,120,80,.1); }
body.klasik .streak-dot.on  { background: #10B981; }
body.klasik .streak-dot.today{ background: #f59e0b; }
body.klasik .avatar         { background: rgba(13,158,110,.18) !important; color: #0d7a54; }
body.klasik .cover-bg       { opacity: .55; }

/* Mağaza kartları */
body.klasik .shop-card      { background: rgba(255,255,255,.75) !important; border-color: rgba(0,120,80,.15) !important; }
body.klasik .shop-card.owned{ border-color: #0d9e6e !important; }
body.klasik .masc-card      { background: rgba(255,255,255,.75) !important; border-color: rgba(0,120,80,.15) !important; }
body.klasik .masc-card.owned{ border-color: #0d9e6e !important; }
body.klasik .coin-bar       { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.2) !important; }

/* ── ÖDÜLLER (points.html) klasik tema ─────────────────── */
body.klasik .xp-hero          { background: rgba(13,158,110,.1) !important; border-color: rgba(13,158,110,.2) !important; }
body.klasik .xp-big           { background: linear-gradient(135deg,#0d9e6e,#0dd68b) !important; -webkit-background-clip: text; background-clip: text; color: transparent !important; }
body.klasik .xp-mini-val      { color: #1a3a2e !important; }
body.klasik .xp-mini-lbl      { color: #4a8c70 !important; }
body.klasik .medal-card        { background: rgba(255,255,255,.7) !important; border-color: rgba(0,120,80,.12) !important; }
body.klasik .medal-card .medal-name { color: #1a3a2e !important; }
body.klasik .medal-card .medal-desc { color: #4a8c70 !important; }
body.klasik .medal-card.earned { background: rgba(255,255,255,.85) !important; border-color: rgba(245,158,11,.35) !important; }
body.klasik .medal-card.locked { opacity: .45; }

/* ── MAĞAZA (shop.html) klasik tema ────────────────────── */
body.klasik .shop-card        { background: rgba(255,255,255,.75) !important; border-color: rgba(0,120,80,.15) !important; }
body.klasik .shop-card.owned  { border-color: #10B981 !important; }
body.klasik .shop-card.act-th { border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245,158,11,.18) !important; }
body.klasik .shop-lbl         { color: #1a3a2e !important; }
body.klasik .sl-active        { background: rgba(245,158,11,.15) !important; color: #b45309 !important; }
body.klasik .sl-owned         { background: rgba(13,158,110,.12) !important; color: #0d6b4a !important; }
body.klasik .sl-buy           { background: linear-gradient(135deg,#0d9e6e,#0dd68b) !important; color: #fff !important; }
body.klasik .sl-lock          { background: rgba(0,0,0,.07) !important; color: rgba(0,0,0,.35) !important; }
body.klasik .masc-card        { background: rgba(255,255,255,.75) !important; border-color: rgba(0,120,80,.15) !important; }
body.klasik .masc-card.owned  { border-color: #10B981 !important; }
body.klasik .masc-card.active-m{ border-color: #f59e0b !important; }
body.klasik .coin-bar         { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.2) !important; }
/* Inline color fixes via CSS var override */
body.klasik .sec-title        { color: #0d6b4a !important; }

/* ── DERS SAYFASI DESKTOP ─────────────────────────────── */
/* Tablet/Desktop: daha geniş alan */
@media(min-width:640px){
  .lpage{max-width:820px !important}
}
@media(min-width:900px){
  .lpage{max-width:960px !important}
}

/* ── ÖDÜLLER & MAĞAZA — Klasik tema metin/renk düzeltmeleri ── */
body.klasik .sec-title        { color: #0a5c3a !important; opacity: 1 !important; }
body.klasik .medal-card .medal-name { color: #1a3a2e !important; font-weight: 800; }
body.klasik .medal-card .medal-desc { color: #4a6a5a !important; }
body.klasik .medal-card       { background: rgba(255,255,255,.92) !important; box-shadow: 0 1px 8px rgba(0,80,50,.08); }
body.klasik .medal-card.earned .medal-xp { color: #0d7a54 !important; }
/* Shop kart metinler */
body.klasik .shop-card .shop-name   { color: #1a3a2e !important; font-weight: 800; }
body.klasik .shop-card .shop-nodes  { color: #4a6a5a !important; }
body.klasik .shop-card              { box-shadow: 0 1px 8px rgba(0,80,50,.1); }
/* Genel sayfa başlık */
body.klasik .page-title,
body.klasik .xp-mini-lbl           { color: #0a5c3a !important; opacity: 1 !important; }
body.klasik .xp-big-val            { color: #0d9e6e !important; }
/* XP hero card */
body.klasik .xp-hero               { background: rgba(255,255,255,.9) !important; }

/* sec-dot: tüm temalarda tutarlı görünüm */
.sec-dot{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;cursor:pointer;border:2px solid transparent;background:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
.sec-dot.done{background:#10B981 !important;border-color:#10B981 !important;color:#fff !important}
.sec-dot.curr{background:#f59e0b !important;border-color:#f59e0b !important;color:#fff !important}
.sec-dot.lock{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.1) !important;color:rgba(255,255,255,.2) !important;cursor:default}
/* Klasik tema sec-dot */
body.klasik .sec-dot{background:rgba(0,120,80,.1);border-color:rgba(0,120,80,.2);color:#0d6b4a}
body.klasik .sec-dot.done{background:#10B981 !important;border-color:#10B981 !important;color:#fff !important}
body.klasik .sec-dot.curr{background:#f59e0b !important;border-color:#f59e0b !important;color:#fff !important}
body.klasik .sec-dot.lock{background:rgba(0,0,0,.06) !important;border-color:rgba(0,0,0,.1) !important;color:rgba(0,0,0,.2) !important;cursor:default}

/* ── KLASİK TEMA: Tüm sayfalardaki görünmez yazılar ── */
/* Sayfa başlıkları (Mağaza, İstatistikler vb.) */
body.klasik [style*="font-weight:900"],
body.klasik [style*="font-weight: 900"] { color: #1a3a2e !important; }

/* sec-title (MADALYALAR, MACERA TEMALARI, PROFİL vb.) */
body.klasik .sec-title { color: #0d6b4a !important; opacity: 1 !important; letter-spacing: 0.5px; }

/* Profil adı, kullanıcı metinleri */
body.klasik #p-name,
body.klasik .p-name  { color: #1a3a2e !important; }

/* Stats - xp-hero içindeki metinler */
body.klasik .xp-hero .xp-big,
body.klasik .xp-hero h2      { color: #0d7a54 !important; }

/* Desktop nav logo */
body.klasik .nav-logo-link   { color: #1a3a2e !important; }

/* Genel h2, h3 */
body.klasik h2,
body.klasik h3               { color: #1a3a2e !important; }

/* profile page inline style başlık */
body.klasik #p-name          { color: #1a3a2e !important; font-weight: 900; }

/* ── NAVBAR LAYOUT STABİLİZASYONU ── */
.xp-chip { min-width: 58px; text-align:center; }
.coin-chip { min-width: 54px; text-align:center; }
#lang-toggle { min-width: 68px; display:flex; gap:4px; align-items:center; flex-shrink:0; }
#lang-toggle button { width:34px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#lang-toggle img { display:block; }
.desktop-nav-inner { min-height: 52px; align-items:center; }
.desktop-nav-inner > div:last-child { flex-shrink:0; }

.nav-logo-link img{width:28px;height:28px;border-radius:7px;flex-shrink:0}

.xp-chip{min-width:62px;text-align:right}.coin-chip{min-width:58px;text-align:right}
#lang-toggle{min-width:70px;flex-shrink:0}
#lang-toggle button{flex-shrink:0}