/* ============================================================
   Genel Rozet (Badge) Tasarımı - Yumuşak Hap (Pill) Stili
   ============================================================ */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  background: var(--card-hover, rgba(92, 124, 250, 0.1)) !important;
  color: var(--primary, #5c7cfa) !important;
  border: 1px solid rgba(92, 124, 250, 0.22) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.badge-reward {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #D97706 !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}

[data-mode="dark"] .badge-reward {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #FBBF24 !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

.badge.status-completed, .chapter-status-badge.status-completed {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.badge.status-in-progress, .chapter-status-badge.status-in-progress {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #2563EB !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.badge.status-current, .chapter-status-badge.status-current {
  background: rgba(92, 124, 250, 0.14) !important;
  color: var(--primary, #5c7cfa) !important;
  border-color: rgba(92, 124, 250, 0.35) !important;
}

/* ============================================================
   A1 English 🌈 Rengarenk tema
   ============================================================ */
:root {
  /* Renkler & Yüzeyler */
  --primary: #5C7CFA;
  --primary-d: #4263EB;
  --primary-soft: rgba(92, 124, 250, 0.14);
  --surface: #FFFFFF;
  --background: #F6F4FF;
  --text: #1E293B;
  --text-muted: #555E6D;
  --border: #ECEAF7;

  /* Anlamlı Durum Renkleri (Başarı=Yeşil, Uyarı=Sarı, Hata=Kırmızı) */
  --success: #2F9E44;
  --success-d: #237032;
  --warning: #D97706;
  --warning-d: #B45309;
  --danger: #E03131;
  --danger-d: #C92A2A;

  /* Kategori Renkleri (Uygulama genelinde sabit ve kurallı) */
  --cat-kelime: #8B5CF6;
  --cat-gramer: #2563EB;
  --cat-mantik: #D97706;
  --cat-rekabet: #EAB308;
  --cat-ai: #0D9488;
  --cat-tekrar: #EC4899;

  /* Lokomotif Dil Mantığı Rol Renkleri */
  --role-subject: #E11D48;
  --role-verb: #D97706;
  --role-object: #059669;
  --role-with: #0284C7;
  --role-place: #2563EB;
  --role-time: #7C3AED;

  /* Boşluk Ölçeği */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Köşe Yuvarlaklığı */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 9999px;

  /* Gölgeler (2 Seviye + 3D Buton Gölgesi) */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-btn: 0 4px 0;

  /* Geriye Dönük Uyumluluk Değişkenleri */
  --bg: var(--background);
  --card: var(--surface);
  --card-bg: var(--surface);
  --card-hover: rgba(92, 124, 250, 0.08);
  --muted: var(--text-muted);
  --line: var(--border);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-md);
  --green: var(--success);
  --green-d: var(--success-d);
  --red: var(--danger);
  --red-d: var(--danger-d);
  --purple: var(--cat-kelime);
  --purple-d: #7C3AED;
  --rainbow: linear-gradient(90deg, #FF6B6B, #FF922B, #FCC419, #51CF66, #339AF0, #845EF7, #F06595);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; /* Minimum 15px gövde yazısı (WCAG AA) */
  line-height: 1.6;
  background: var(--background);
  color: var(--text);
  min-height: 100vh;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior-y: auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
input, textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}
a { color: var(--primary-d); }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: 1.85rem; }
p { line-height: 1.6; margin: 0 0 .75em; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; } /* Minimum 13px alt açıklama */
.center { text-align: center; }
.hidden { display: none !important; }

/* Arka plan baloncukları */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blobs span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; animation: float 18s ease-in-out infinite; }
.bg-blobs span:nth-child(1) { width: 420px; height: 420px; background: #EDE9FE; top: -120px; right: -80px; }
.bg-blobs span:nth-child(2) { width: 380px; height: 380px; background: #C5F6FA; bottom: -120px; left: 10%; animation-delay: -6s; }
.bg-blobs span:nth-child(3) { width: 340px; height: 340px; background: #E5DBFF; top: 40%; right: 20%; animation-delay: -12s; }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px) scale(1.08); } }

/* ---------- Mobil Üst Başlık (Header) ---------- */
.mobile-header { display: none; }

/* ---------- Yerleşim ---------- */
#app { display: flex; min-height: 100vh; width: 100%; }
.sidebar {
  width: 240px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px);
  border-right: 2px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 6px;
}
.desktop-nav { display: flex; flex-direction: column; height: 100%; gap: 6px; width: 100%; }
.desktop-nav .nav-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav { display: none; }

.logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.logo-icon { font-size: 2rem; }
.logo-text { font-weight: 900; font-size: 1.35rem; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
  color: var(--text); text-decoration: none; font-weight: 700; transition: all .15s ease; border: 2px solid transparent;
  background: none; cursor: pointer; font-family: inherit;
}
.nav-link:hover { background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff)); }
.nav-link.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}
.nav-link.active .nav-icon { transform: scale(1.08); }
.nav-icon { font-size: 1.35rem; width: 28px; height: 28px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.nav-foot { margin-top: auto; display: flex; gap: 8px; padding: 10px; }
.mini-stat { flex: 1; background: #FFF4E6; border-radius: 12px; padding: 8px; text-align: center; font-weight: 900; }
.mini-stat:last-child { background: #FFF9DB; }

/* ---------- Menü Bottom Sheet ---------- */
.menu-sheet-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.72) !important; z-index: 9999 !important;
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: fadeIn .2s; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}
.menu-sheet {
  background: var(--card-bg, #ffffff) !important; border-radius: 28px 28px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 16px));
  max-height: 85vh; overflow-y: auto; animation: slideSheet .28s cubic-bezier(.2, 1, .3, 1);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.35) !important; position: relative; z-index: 10000 !important;
}
@keyframes slideSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
.menu-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 2px solid var(--line); margin-bottom: 14px;
}
.msh-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 900; }
.msh-icon { font-size: 1.5rem; }
.close-sheet-btn { font-size: 1.3rem; padding: 6px 10px; }
.menu-sheet-grid { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: #FBFAFF;
  border: 2px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--text);
  transition: transform .1s, background .15s;
}
.menu-item:active { transform: scale(.98); background: #F1EEFF; }
.menu-item.active { background: #EDF2FF; border-color: #BAC8FF; }
.menu-icon {
  font-size: 1.8rem; width: 48px; height: 48px; border-radius: 14px; background: #fff;
  border: 2px solid var(--line); display: grid; place-items: center; flex-shrink: 0;
}
.menu-info { flex: 1; }
.menu-info b { font-size: 1.05rem; display: block; margin-bottom: 2px; }
.menu-info p { margin: 0; line-height: 1.3; }
.menu-arr { color: var(--muted); font-weight: 900; font-size: 1.2rem; }

#view { flex: 1; min-width: 0; }
.page { max-width: 1040px; margin: 0 auto; padding: 32px 28px 60px; animation: fadeUp .35s ease; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.page-head p { margin: 0; }
.back { text-decoration: none; font-weight: 800; font-size: .9rem; display: inline-block; margin-bottom: 6px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.focus-mode .sidebar { display: none; }

/* ---------- Kartlar ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; border: 2px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 { margin-bottom: 18px; }

.stat-card { border-radius: var(--radius); padding: 18px 20px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.stat-card::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .18); right: -30px; top: -30px; }
.sc-icon { font-size: 1.6rem; }
.sc-val { font-size: 2rem; font-weight: 900; line-height: 1.1; }
.sc-lbl { font-weight: 700; opacity: .92; font-size: .9rem; }
.grad-1 { background: linear-gradient(135deg, var(--cat-mantik), color-mix(in srgb, var(--cat-mantik) 75%, #ff4b4b)); }
.grad-2 { background: linear-gradient(135deg, var(--cat-rekabet), color-mix(in srgb, var(--cat-rekabet) 75%, #f97316)); }
.grad-3 { background: linear-gradient(135deg, var(--cat-kelime), color-mix(in srgb, var(--cat-kelime) 75%, #3b82f6)); }
.grad-4 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--primary-d))); }

/* Dil Mantığı & Lokomotif Stilleri */
.logic-tabs-bar {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 18px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.logic-tabs-bar::-webkit-scrollbar { display: none; }
.logic-tab-pill {
  padding: 10px 18px; border-radius: 99px; border: 2px solid var(--line);
  background: var(--card-bg, #fff); color: var(--text); font-family: inherit;
  font-weight: 800; font-size: 0.88rem; cursor: pointer; white-space: nowrap;
  transition: all .15s ease;
}
.logic-tab-pill:hover { border-color: var(--primary); }
.logic-tab-pill.active {
  background: var(--primary) !important; color: #FFFFFF !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Lokomotif Cümle Simülatörü */
.loco-simulator-card {
  padding: 24px; border-radius: var(--radius); margin-bottom: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff)), var(--card-bg, #fff));
  border: 2px solid var(--line);
}
.loco-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.badge-loco {
  background: #6366F1; color: #fff; font-weight: 800; font-size: 0.72rem; padding: 4px 10px; border-radius: 99px; display: inline-block;
}
.loco-nav-btns { display: flex; gap: 6px; }
.loco-sel-btn {
  padding: 6px 14px; border-radius: 99px; border: 1.5px solid var(--line);
  background: var(--card-bg, #fff); color: var(--text); font-family: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer;
  transition: .15s;
}
.loco-sel-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.loco-box {
  background: var(--card-bg, #fff); border-radius: 18px; border: 2px solid var(--line); padding: 18px;
}
.loco-tr-row {
  display: flex; align-items: center; gap: 10px; font-size: 1.05rem; padding-bottom: 14px; border-bottom: 1px dashed var(--line); margin-bottom: 16px; flex-wrap: wrap;
}
.loco-tr-label { font-weight: 800; color: var(--muted); }
.loco-tr-text { font-weight: 800; color: var(--text); font-style: italic; }
.loco-train-track {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 0 16px; align-items: stretch; justify-content: center;
}
.loco-wagon-wrapper {
  display: flex; align-items: center; gap: 10px;
}
.loco-wagon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c, var(--primary)) 12%, var(--card-bg, #fff));
  border: 2px solid var(--c, var(--primary)); border-radius: 16px;
  padding: 12px 18px; min-width: 125px; text-align: center;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c, var(--primary)) 15%, transparent);
  transition: transform .15s ease;
}
.loco-wagon:hover {
  transform: translateY(-2px);
}
.wagon-tag { font-size: 0.72rem; font-weight: 800; color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
.wagon-en { font-size: 1.25rem; font-weight: 900; color: var(--c, var(--primary)); word-break: break-word; }
.wagon-tr { font-size: 0.8rem; font-weight: 700; color: var(--text); opacity: 0.85; margin-top: 3px; }
.wagon-connector {
  font-size: 1.15rem; font-weight: 900; color: var(--muted); opacity: 0.6;
}
@media (max-width: 640px) {
  .wagon-connector { display: none; }
  .loco-wagon { min-width: 100px; padding: 10px 12px; }
}
.loco-result-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg, #fff));
  border-radius: 14px; padding: 12px 16px; margin: 16px 0 12px; flex-wrap: wrap;
}
.loco-result-text { font-size: 1.1rem; color: var(--text); }
.loco-en-full { font-weight: 900; color: var(--primary); }
.loco-tip { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

/* Dil Mantığı Kartları */
.logic-grid { display: flex; flex-direction: column; gap: 20px; }
.logic-card { border-left: 8px solid var(--c); padding: 24px; background: var(--card-bg, #fff); color: var(--text); }
.logic-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.logic-emoji { font-size: 2.8rem; }
.logic-header h2 { margin: 0; font-size: 1.5rem; }
.logic-summary {
  background: color-mix(in srgb, var(--primary) 8%, var(--card-bg, #fff));
  border-radius: 14px; padding: 14px 18px; border: 1px dashed var(--line);
  font-size: 1.02rem; color: var(--text);
}
.logic-box {
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff));
  border-left: 4px solid var(--primary); padding: 14px 18px;
  border-radius: 12px; margin: 14px 0; font-size: 1.02rem; color: var(--text);
}
.phrase-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.phrase-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: color-mix(in srgb, var(--card-bg, #fff) 85%, var(--bg));
  border-radius: 16px; border: 1.5px solid var(--line); color: var(--text);
  transition: transform .15s, border-color .15s;
}
.phrase-row:hover { border-color: var(--primary); transform: translateY(-2px); }
.phrase-texts { flex: 1; }
.phrase-en { font-size: 1.15rem; color: var(--primary-d); }
.phrase-tr { font-weight: 700; margin: 2px 0; color: var(--text); }
.phrase-tip { color: var(--muted); }
.trap-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.trap-box {
  background: color-mix(in srgb, #FF6B6B 8%, var(--card-bg, #fff));
  border: 2px solid color-mix(in srgb, #FF6B6B 25%, var(--line));
  border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.trap-wrong { color: #FA5252; font-weight: 800; font-size: 1.05rem; }
.trap-right {
  color: #40C057; font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.trap-badge-wrong {
  background: #FA5252; color: #fff; font-size: 0.7rem; font-weight: 900;
  padding: 2px 8px; border-radius: 6px; margin-right: 6px; display: inline-block;
}
.trap-badge-right {
  background: #40C057; color: #fff; font-size: 0.7rem; font-weight: 900;
  padding: 2px 8px; border-radius: 6px; margin-right: 6px; display: inline-block;
}
.trap-why { line-height: 1.45; color: var(--muted); font-weight: 600; font-size: 0.9rem; }

/* Rekabet Banner */
.rivalry-card { background: linear-gradient(135deg, #FFF9DB, #FFF3BF); border-color: #FFE066; margin-bottom: 18px; padding: 14px 20px; }
.rivalry-head { display: flex; align-items: center; gap: 14px; }
.rivalry-avatar { font-size: 2.2rem; }
.rivalry-info { flex: 1; }
.rivalry-text { font-size: 1.05rem; font-weight: 800; color: #E67700; }

/* Canlı Lig Stilleri */
.cloud-league-card {
  background: linear-gradient(135deg, #F4FCE3, #EBFBEE);
  border: 2px solid #8CE99A;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.cl-head { display: flex; align-items: center; gap: 14px; }
.cl-icon { font-size: 2.2rem; }
.cl-info b { font-size: 1.15rem; color: #2B8A3E; display: block; }
.cl-info p { margin: 4px 0 0; }

.live-promo-card {
  background: linear-gradient(135deg, #EDF2FF, #F3F0FF);
  border: 2px solid #BAC8FF;
  padding: 20px;
  margin-bottom: 18px;
}
.badge-live {
  background: #E03131;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.05em;
  display: inline-block;
}
.live-pill {
  background: #40C057;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.empty-friends-box {
  background: color-mix(in srgb, var(--card-bg, #fff) 80%, var(--bg));
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
}

/* Liderlik Tablosu & Otomatik Senkronizasyon */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 800; border: 1.5px solid transparent;
}
.status-pill.online {
  background: color-mix(in srgb, #40C057 15%, var(--card-bg, #fff));
  color: #2F9E44; border-color: color-mix(in srgb, #40C057 35%, transparent);
}
.status-pill.offline {
  background: color-mix(in srgb, #FCC419 18%, var(--card-bg, #fff));
  color: #D97706; border-color: color-mix(in srgb, #FCC419 35%, transparent);
}
.status-pill.syncing {
  background: color-mix(in srgb, #339AF0 15%, var(--card-bg, #fff));
  color: #1971C2; border-color: color-mix(in srgb, #339AF0 35%, transparent);
}
.status-pill.synced {
  background: color-mix(in srgb, #40C057 15%, var(--card-bg, #fff));
  color: #2F9E44; border-color: color-mix(in srgb, #40C057 35%, transparent);
}
.status-pill.error {
  background: color-mix(in srgb, #FA5252 15%, var(--card-bg, #fff));
  color: #E03131; border-color: color-mix(in srgb, #FA5252 35%, transparent);
}

.metric-info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  cursor: pointer;
  color: #fff;
  transition: transform 0.15s, background 0.15s;
  padding: 0;
  line-height: 1;
}
.metric-info-btn:hover {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.4);
}

.sync-status-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.badge-room {
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff));
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary); font-weight: 800; font-size: 0.85rem; padding: 6px 14px;
  border-radius: 99px; display: inline-flex; align-items: center; gap: 6px;
}

.leaderboard-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lb-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--card-bg, #fff) 85%, var(--bg));
  border: 2px solid var(--line); transition: .15s;
  color: var(--text);
}
.lb-row.is-me {
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff));
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 18%, transparent);
}
.lb-rank {
  width: 26px; font-size: 1.25rem; font-weight: 900; text-align: center; flex-shrink: 0;
}
.lb-avatar {
  width: 32px; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lb-details {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.lb-name {
  font-size: 1rem; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.lb-uname {
  font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1;
}
.tag-me {
  background: var(--primary); color: #fff !important; font-size: 0.68rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; flex-shrink: 0; line-height: 1.3;
}
.lb-sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem;
}
.lb-xp {
  font-size: 1.2rem; font-weight: 900; color: var(--primary); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: auto; padding-left: 6px;
}
.lb-xp span { font-size: .78rem; color: var(--muted); font-weight: 700; margin-left: 2px; }
.badge-rank {
  background: #FCC419; color: #1A1D20 !important; font-weight: 900; padding: 4px 12px; border-radius: 99px; font-size: .9rem;
}
.divider { border: 0; border-top: 2px dashed var(--line); margin: 20px 0; }

/* ---------- İnteraktif Yoldaş Hero Kartı ---------- */
.companion-hero-card {
  display: flex; align-items: center; gap: 18px;
  background: color-mix(in srgb, var(--primary) 9%, var(--card-bg, #fff));
  border: 2px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: 24px; padding: 16px 20px; margin-bottom: 20px;
  position: relative; overflow: visible;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}
.companion-avatar-wrap {
  position: relative; cursor: pointer; user-select: none; flex-shrink: 0;
}
.companion-avatar-icon {
  font-size: 3.2rem; line-height: 1;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}
.companion-avatar-wrap:hover .companion-avatar-icon {
  transform: scale(1.15) rotate(6deg);
}
.companion-avatar-icon.cheer {
  animation: mascotCheer 0.6s ease;
}
@keyframes mascotCheer {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.28) rotate(-10deg); }
  50% { transform: scale(1.2) rotate(10deg); }
  75% { transform: scale(1.25) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.companion-status-dot {
  position: absolute; bottom: 2px; right: 2px; width: 13px; height: 13px;
  background: #10B981; border: 2.5px solid var(--card-bg, #fff); border-radius: 50%;
}
.companion-speech-bubble {
  flex: 1; background: var(--card-bg, #fff); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 12px 16px; position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.companion-speech-bubble::before {
  content: ''; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-right: 9px solid var(--card-bg, #fff); z-index: 2;
}
.companion-speech-bubble::after {
  content: ''; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  border-right: 10px solid var(--line); z-index: 1;
}
.companion-bubble-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.companion-name-badge {
  font-weight: 800; font-size: 0.88rem; color: var(--primary);
}
.companion-speech-text {
  font-size: 0.98rem; font-weight: 700; color: var(--text); line-height: 1.4;
}
.companion-bubble-hint {
  font-size: 0.72rem; color: var(--muted); margin-top: 4px;
}
.companion-switch-btn {
  flex-shrink: 0; align-self: center;
}
@media (max-width: 640px) {
  .companion-hero-card { flex-direction: column; align-items: stretch; gap: 12px; }
  .companion-avatar-wrap { align-self: center; }
  .companion-speech-bubble::before, .companion-speech-bubble::after { display: none; }
  .companion-switch-btn { align-self: flex-end; }
}

/* ---------- Modern Metrik Şeridi ---------- */
.metrics-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px;
}
.metric-pill {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-bg, #fff); border: 2px solid var(--line);
  border-radius: 18px; padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: transform .15s ease, border-color .15s ease;
}
.metric-pill:hover {
  transform: translateY(-2px); border-color: var(--primary);
}
.mp-icon { font-size: 1.8rem; line-height: 1; }
.mp-content { min-width: 0; }
.mp-val { font-size: 1.25rem; font-weight: 900; color: var(--text); line-height: 1.2; }
.mp-unit { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.mp-lbl {
  font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .metrics-strip { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Birleşik Görev & İlerleme Kartı (Mission Card) ---------- */
.mission-card {
  border-radius: 24px; border: 2px solid var(--line);
  background: var(--card-bg, #fff); padding: 22px 24px; margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.mission-top-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.mission-badge {
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff));
  color: var(--primary); font-weight: 900; font-size: 0.78rem; letter-spacing: 0.5px;
  padding: 5px 12px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.mission-level-badge {
  font-weight: 800; font-size: 0.88rem; color: var(--muted);
}
.mission-goal-bar-wrap { margin-top: 4px; }
.mission-goal-info {
  display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; margin-bottom: 8px;
}
.mgi-title b { color: var(--primary); }
.mission-divider { border-top: 1.5px dashed var(--line); margin: 18px 0; }
.mission-unit-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.mission-unit-left {
  display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1;
}
.mission-unit-avatar {
  font-size: 2.6rem; width: 68px; height: 68px; flex-shrink: 0; border-radius: 20px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, var(--primary)) 15%, var(--card-bg, #fff));
  border: 2px solid color-mix(in srgb, var(--c, var(--primary)) 30%, transparent);
}
.mission-unit-text { min-width: 0; }
.mission-step-tag {
  font-size: 0.75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px;
}
.mission-unit-name {
  margin: 2px 0 4px; font-size: 1.35rem; font-weight: 900; color: var(--text);
}
.mission-unit-desc { font-size: 0.88rem; color: var(--muted); }
.mission-unit-btns {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap;
}
.mission-play-btn {
  font-weight: 800; padding: 12px 22px; font-size: 1rem;
}
@media (max-width: 680px) {
  .mission-unit-row { flex-direction: column; align-items: stretch; }
  .mission-unit-btns { justify-content: stretch; }
  .mission-unit-btns a { flex: 1; text-align: center; }
}

/* Seviye kartı */
.level-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.level-label { font-size: 1.6rem; font-weight: 900; background: linear-gradient(90deg, #845EF7, #F06595); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ring {
  --p: 0; width: 86px; height: 86px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(#845EF7 calc(var(--p) * 1%), #EEE9FF 0); display: grid; place-items: center;
}
.ring span { width: 68px; height: 68px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 900; }
.daily-goal { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-weight: 800; font-size: .9rem; color: var(--muted); }
.daily-goal .progress { flex: 1; }

/* İlerleme çubuğu */
.progress { height: 14px; background: #EEEAFB; border-radius: 99px; overflow: hidden; flex: 1; }
.progress.thick { height: 18px; }
.progress .bar { height: 100%; border-radius: 99px; background: var(--accent, var(--primary)); transition: width .45s cubic-bezier(.3, 1.4, .5, 1); position: relative; }
.progress .bar::after { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .35); }
.bar.rainbow { background: var(--rainbow); }

/* Aksiyon kartları */
.action-card { display: flex; gap: 18px; align-items: center; border-left: 8px solid var(--c); }
.ac-emoji { font-size: 2.6rem; width: 72px; height: 72px; flex-shrink: 0; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, white); }
.ac-body h3 { margin: 2px 0 10px; }
.ac-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.wotd { border-top: 6px solid var(--c); }
.wotd-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.wotd-emoji { font-size: 3rem; }
.wotd-en { font-size: 1.6rem; font-weight: 900; }
.wotd-row .speak-btn { margin-left: auto; }
.ai-teaser { background: linear-gradient(135deg, #F3F0FF, #FFF0F6); }
.ai-teaser h3 { margin-top: 4px; }

/* ---------- Butonlar (3 Standart Oyunsu Stil) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 800; font-size: 15px; padding: 11px 20px; border-radius: var(--radius-md);
  border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .08s, filter .15s, box-shadow .1s;
  user-select: none; white-space: nowrap; line-height: 1.3;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none !important; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:hover:not(:disabled) { filter: brightness(1.05); }
.btn-big { padding: 14px 28px; font-size: 16px; border-radius: 16px; }
.btn.sm { padding: 6px 14px; font-size: 13px; border-radius: 10px; }

/* 1. Ana Buton (Ekranda tek; dolgu, --primary, kalın oyunsu alt gölge) */
.btn-primary {
  background: var(--primary);
  color: #FFFFFF !important;
  border-color: var(--primary);
  box-shadow: 0 4px 0 var(--primary-d);
}

/* 2. İkincil Buton (Çerçeveli, yüzey arka planı) */
.btn-secondary, .btn-ghost {
  background: var(--surface);
  color: var(--text) !important;
  border-color: var(--border);
  box-shadow: 0 4px 0 var(--border);
}
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

/* 3. Tehlikeli Buton (Sadece sil / sıfırla) */
.btn-danger, .btn-red {
  background: var(--danger);
  color: #FFFFFF !important;
  border-color: var(--danger);
  box-shadow: 0 4px 0 var(--danger-d);
}

/* Eski renk sınıfları için uyumluluk */
.btn-green { background: var(--success); color: #fff; box-shadow: 0 4px 0 var(--success-d); border-color: var(--success); }
.btn-purple { background: var(--cat-kelime); color: #fff; box-shadow: 0 4px 0 #7C3AED; border-color: var(--cat-kelime); }

.speak-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.35rem;
  background: linear-gradient(135deg, #4DABF7, #5C7CFA); box-shadow: 0 4px 0 #3B5BDB; transition: transform .08s; flex-shrink: 0;
}
.speak-btn:active { transform: translateY(3px); box-shadow: none; }
.speak-btn.big { width: 84px; height: 84px; font-size: 2.2rem; }
.speak-btn.slow { background: linear-gradient(135deg, #63E6BE, #20C997); box-shadow: 0 4px 0 #0CA678; }
.speak-btn.sm { width: 36px; height: 36px; font-size: 1rem; box-shadow: 0 3px 0 #3B5BDB; }
.listen-audio-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0; }

/* ---------- Telaffuz & Mikrofon Yeniden Tasarımı ---------- */
.speak-hero-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.speak-hero-card {
  background: var(--card-bg, #fff);
  border: 2px solid var(--line);
  border-radius: 24px;
  padding: 22px 20px;
  text-align: center;
  margin: 16px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.speak-target-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}
.target-word {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.2;
}
.speak-tr-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 18px;
}
.voice-action-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1.5px dashed var(--line);
}
.mic-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #FF6B6B, #FA5252);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(250, 82, 82, 0.3), 0 3px 0 #C92A2A;
  transition: transform .1s, box-shadow .15s, background .2s;
  user-select: none;
}
.mic-pill-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #C92A2A;
}
.mic-pill-btn.listening {
  background: linear-gradient(135deg, #10B981, #059669);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4), 0 3px 0 #047857;
  animation: micPulse 1.2s infinite;
}
.mic-pill-icon {
  font-size: 1.45rem;
  line-height: 1;
}
.voice-status-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
}
.heard-text-box {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  min-height: 24px;
}
.speak-alt-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.speak-type-fallback {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  text-align: left;
}

/* Geriye Dönük Uyumluluk */
.voice-center { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 20px 0; }
.mic-btn {
  width: 80px; height: 80px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #FF6B6B, #FA5252); color: #fff;
  box-shadow: 0 6px 20px rgba(250, 82, 82, .3), 0 3px 0 #C92A2A;
  position: relative; transition: .15s; display: grid; place-items: center;
}
.mic-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #C92A2A; }
.mic-btn.listening { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 6px 20px rgba(16, 185, 129, .4), 0 3px 0 #047857; animation: micPulse 1.2s infinite; }
.mic-icon { font-size: 2.2rem; }
@keyframes micPulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
.speak-target { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 6px 0; }
.voice-status { font-weight: 800; font-size: .95rem; }
.heard-text { font-size: 1.1rem; font-weight: 900; color: var(--text); min-height: 28px; }

/* ---------- Yazma Alıştırması Uyarı ve İpucu Stilleri ---------- */
.type-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.hint-btn {
  background: color-mix(in srgb, #FCC419 18%, var(--card-bg, #fff));
  border: 1.5px solid color-mix(in srgb, #FCC419 50%, transparent);
  color: #D97706;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .1s, background .15s;
}
.hint-btn:active {
  transform: translateY(2px);
}
.hint-box {
  background: color-mix(in srgb, #FCC419 12%, var(--card-bg, #fff));
  border: 1.5px dashed #FCC419;
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.4;
  animation: popIn .2s ease;
}
.type-warn-msg {
  background: color-mix(in srgb, #FA5252 12%, var(--card-bg, #fff));
  border: 1.5px solid color-mix(in srgb, #FA5252 40%, transparent);
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #E03131;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  animation: shake .4s ease;
}
@keyframes popIn {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Formlar */
.lbl { display: block; font-weight: 800; margin: 12px 0 6px; }
.text-input, .type-input {
  width: 100%; font-family: inherit; font-size: 1.05rem; font-weight: 700; padding: 13px 16px;
  border: 2px solid var(--line); border-radius: 14px; outline: none; background: #FBFAFF; color: var(--text); transition: .15s;
}
.text-input:focus, .type-input:focus { border-color: #91A7FF; background: #fff; box-shadow: 0 0 0 4px #EDF2FF; }
.type-row { display: flex; gap: 10px; align-items: stretch; margin: 12px 0; }
.type-row .btn { flex-shrink: 0; }
input[type=range] { width: 100%; accent-color: var(--primary); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 14px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.row-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.shake { animation: shake .4s; border-color: var(--red) !important; }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }

/* Etiketler */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.tag {
  display: inline-block; padding: 7px 13px; border-radius: 99px; font-weight: 800; font-size: .88rem; text-decoration: none;
  background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 80%, black);
  border: 2px solid color-mix(in srgb, var(--c) 30%, white); cursor: pointer; font-family: inherit;
}
button.tag:hover, a.tag:hover { background: color-mix(in srgb, var(--c) 24%, white); }

/* ---------- Karşılama ---------- */
.onboard { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; text-align: center; }
.onboard-hero { font-size: 6rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.rainbow-text { font-size: 3.2rem; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 1.2rem; font-weight: 700; color: var(--muted); margin-top: 0; }
.onboard-card { width: 100%; max-width: 440px; text-align: left; }
.onboard-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

/* ---------- Öğrenme yolu ---------- */
.path { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 10px 0 40px; }
.path-row { display: flex; align-items: center; gap: 16px; transform: translateX(var(--x)); }
.node {
  width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer; position: relative;
  background: var(--c); box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 70%, black), 0 10px 22px color-mix(in srgb, var(--c) 40%, transparent);
  transition: transform .1s; flex-shrink: 0;
}
.node:hover { transform: scale(1.06); }
.node:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 70%, black); }
.node-emoji { font-size: 2.3rem; }
.node.locked { background: #DEE2E6; box-shadow: 0 7px 0 #ADB5BD; }
.node.locked .node-emoji { filter: grayscale(1); opacity: .7; font-size: 1.8rem; }
.node.done::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 4px solid #FCC419; }
.node-star { position: absolute; top: -10px; right: -8px; font-size: 1.5rem; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.node.current { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.node-label { display: flex; flex-direction: column; background: #fff; padding: 8px 14px; border-radius: 14px; box-shadow: var(--shadow); min-width: 170px; border: 2px solid var(--line); }
.node-label span { font-size: .8rem; color: var(--muted); font-weight: 700; }

/* ---------- Aşama / Milestone Ayırıcıları (Pedagojik Yol Aşamaları) ---------- */
.path-stage-divider {
  width: calc(100% - 24px);
  max-width: 440px;
  margin: 28px auto 14px;
  background: var(--card-bg, #fff);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  box-sizing: border-box;
}
.psd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.psd-tag {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 4px 10px;
  border-radius: 9999px;
}
.psd-guide {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--line) 40%, transparent);
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid var(--line);
}
.psd-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  margin: 2px 0 0;
  line-height: 1.3;
}
.psd-sub {
  font-size: 0.83rem;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.72) !important; display: grid; place-items: center; z-index: 9999 !important; padding: 20px; animation: fadeIn .2s; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
.modal { background: var(--card-bg, #ffffff) !important; border-radius: 26px; padding: 26px; width: 100%; max-width: 440px; animation: popIn .25s cubic-bezier(.3, 1.5, .5, 1); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important; position: relative; z-index: 10000 !important; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } }
.modal-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.modal-head h2 { margin: 0; }
.modal-emoji { font-size: 2.6rem; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--primary)) 18%, var(--surface)); border: 2px solid color-mix(in srgb, var(--c, var(--primary)) 35%, var(--border)); flex-shrink: 0; }
.modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.modal-stats div { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1.5px solid var(--border); border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.modal-stats b { font-size: 1.3rem; color: var(--text); }
.modal-stats span { font-size: .8rem; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Ders ---------- */
.lesson { max-width: 760px; margin: 0 auto; padding: 24px 22px 180px; min-height: 100vh; }
.lesson-top { display: flex; align-items: center; gap: 16px; }
.lesson-top .progress { height: 18px; }
.lesson-count { font-weight: 900; color: var(--muted); min-width: 48px; text-align: right; }
.lesson-title { font-weight: 800; color: var(--muted); margin: 14px 0 0; }
.icon-btn { border: none; background: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 10px; }
.icon-btn:hover { background: #EEE; }
.q-area { margin-top: 24px; }
.q-area.pop { animation: fadeUp .3s ease; }
.q-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; justify-content: center; text-align: center; flex-direction: column; }
.q-emoji { font-size: 4.5rem; line-height: 1; animation: popIn .4s cubic-bezier(.3, 1.5, .5, 1); }
.q-prompt { font-size: 1.55rem; font-weight: 900; }
.q-sub { font-size: 1.1rem; font-weight: 700; color: var(--muted); margin-top: 8px; }
.en-word { color: var(--accent); }
.blank { display: inline-block; min-width: 60px; border-bottom: 4px solid var(--accent); color: transparent; }

.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.option {
  font-family: inherit; font-size: 1.12rem; font-weight: 800; color: var(--text); background: var(--card-bg, #fff); text-align: left;
  border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 16px; padding: 16px 18px; cursor: pointer;
  transition: transform .08s, background .15s, border-color .15s; display: flex; align-items: center; gap: 12px;
}
.option:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff)); border-color: var(--primary); }
.option:active:not(:disabled) { transform: translateY(2px); }
.option .key { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-size: .8rem; color: var(--muted); flex-shrink: 0; }
.option.correct { background: #EBFBEE; border-color: var(--green); color: var(--green-d); animation: popIn .3s; }
.option.wrong { background: #FFF5F5; border-color: var(--red); color: var(--red-d); animation: shake .4s; }
.option.selected { background: color-mix(in srgb, var(--primary) 18%, var(--card-bg, #fff)); border-color: var(--primary); }
.option.matched { background: #EBFBEE; border-color: #8CE99A; color: #8CE99A; cursor: default; transform: scale(.97); }
.option:disabled { cursor: default; }

.match { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.match .option { justify-content: center; text-align: center; }

.type-input { font-size: 1.3rem; text-align: center; }
.type-input.ok { border-color: var(--green); background: #EBFBEE; }
.type-input.bad { border-color: var(--red); background: #FFF5F5; }
.hint-btn { border: none; background: none; color: var(--muted); font-family: inherit; font-weight: 800; cursor: pointer; display: block; margin: 0 auto; }

.order-answer {
  min-height: 70px; border-bottom: 3px dashed var(--line); border-top: 3px dashed var(--line); padding: 12px 0; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; align-items: center;
}
.order-answer.ok { border-color: var(--green); background: #F4FCF5; }
.order-answer.bad { border-color: var(--red); background: #FFF8F8; }
.order-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 56px; margin-bottom: 24px; }
.chip {
  font-family: inherit; font-weight: 800; font-size: 1.1rem; padding: 10px 16px; border-radius: 14px; cursor: pointer;
  background: var(--card-bg, #fff); border: 2px solid var(--line); border-bottom-width: 5px; color: var(--text); animation: popIn .2s;
}
.chip:hover { border-color: var(--primary); }

/* Geri bildirim paneli */
.feedback { position: fixed; left: 0; right: 0; bottom: 0; transform: translateY(110%); transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); z-index: 20; }
.feedback.show { transform: none; }
.feedback.ok { background: #D3F9D8; border-top: 3px solid #8CE99A; }
.feedback.bad { background: #FFE3E3; border-top: 3px solid #FFA8A8; }
.feedback.neutral { background: #FFF9DB; border-top: 3px solid #FFD43B; }
.fb-inner { max-width: 760px; margin: 0 auto; padding: 20px 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fb-title { font-size: 1.5rem; font-weight: 900; }
.ok .fb-title { color: var(--green-d); }
.bad .fb-title { color: var(--red-d); }
.neutral .fb-title { color: #E67700; }
.fb-correct { font-weight: 700; color: var(--red-d); margin-top: 2px; }
.fb-explain { font-weight: 700; margin-top: 6px; color: #495057; }

/* Ders sonu */
.lesson-end { max-width: 620px; margin: 0 auto; padding: 50px 22px; text-align: center; animation: fadeUp .4s; }
.end-emoji { font-size: 6rem; animation: bounce 1.6s infinite; }
.end-msg { font-size: 1.1rem; font-weight: 700; }
.end-stats { display: flex; gap: 12px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.stat-pill { border: 3px solid var(--c); border-radius: 18px; overflow: hidden; min-width: 120px; background: #fff; }
.stat-pill span { display: block; background: var(--c); color: #fff; font-weight: 900; padding: 4px; font-size: .85rem; }
.stat-pill b { display: block; font-size: 1.6rem; padding: 10px; }
.end-wrong { text-align: left; }
.wrong-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 2px solid var(--line); }
.wrong-row:last-child { border-bottom: none; }
.wrong-row b { color: var(--green-d); white-space: nowrap; }
.end-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Kelime kartları ---------- */
/* ---------- Kelime kartları ---------- */
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.unit-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border-radius: var(--radius);
  background: var(--card-bg, #fff); text-decoration: none; color: var(--text); border: 2px solid var(--line); border-bottom: 6px solid var(--c);
  transition: transform .15s, border-color .15s; box-shadow: var(--shadow);
}
.unit-tile:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--c); }
.unit-tile b { color: var(--text) !important; font-size: 1.05rem; }
.unit-tile span.muted { color: var(--muted) !important; }
.ut-emoji { font-size: 2.6rem; }
.flash-wrap { perspective: 1200px; display: flex; justify-content: center; margin: 8px 0 16px; width: 100%; }
.flash {
  width: 100%; max-width: 440px; height: clamp(210px, 38vh, 290px);
  position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); cursor: pointer;
}
.flash.flipped { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; border-radius: 28px; backface-visibility: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; box-shadow: 0 14px 30px color-mix(in srgb, var(--c) 35%, transparent);
  padding: 16px; box-sizing: border-box; text-align: center;
}
.flash-face.front { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #845EF7)); color: #fff; }
.flash-face.front .muted { color: rgba(255, 255, 255, .8); }
.flash-face.back { background: var(--card-bg, #fff); color: var(--text); transform: rotateY(180deg); border: 4px solid var(--c); }
.flash-emoji { font-size: clamp(3.2rem, 9vh, 5rem); line-height: 1.1; }
.flash-en { font-size: clamp(1.6rem, 5.5vw, 2.3rem); font-weight: 900; }
.flash-tr { font-size: clamp(1.4rem, 5vw, 2.1rem); font-weight: 900; color: var(--c); }
.small-en { font-size: 1.1rem; color: var(--muted); }
.flash-ctrl { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 22px; }
.flash-count { font-weight: 900; color: var(--muted); min-width: 90px; text-align: center; }
.word-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; justify-content: center; }
.word-chip { font-family: inherit; font-size: .95rem; border: 2px solid var(--line); background: var(--card-bg, #fff); color: var(--text); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.word-chip span { color: var(--muted); }
.word-chip:hover { border-color: var(--c); }

/* ---------- Gramer ---------- */
.grammar-card { border-top: 8px solid var(--c); font-size: 1.05rem; }
.g-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); }
.g-table th { background: color-mix(in srgb, var(--c, #5C7CFA) 18%, var(--card-bg, white)); padding: 10px 12px; text-align: left; font-weight: 900; color: var(--text); }
.g-table td { padding: 10px 12px; border-top: 2px solid var(--line); color: var(--text); }
.g-table tr:nth-child(odd) td { background: color-mix(in srgb, var(--card-bg, #fff) 88%, var(--bg)); }
.g-table b { color: color-mix(in srgb, var(--c, #5C7CFA) 85%, black); }
.example { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 2px solid var(--line); }
.example:last-child { border-bottom: none; }

/* ---------- İlerleme ---------- */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 20px; }
.chart-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.chart-bar { width: 100%; max-width: 44px; min-height: 6px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #845EF7, #5C7CFA); position: relative; transition: height .5s; }
.chart-bar span { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-size: .75rem; font-weight: 900; color: var(--muted); }
.chart-lbl { font-size: .8rem; font-weight: 800; color: var(--muted); }
.unit-bars { display: flex; flex-direction: column; gap: 10px; }
.ub-row { display: grid; grid-template-columns: 230px 1fr 52px; align-items: center; gap: 12px; font-weight: 700; }
.ub-row.locked { opacity: .45; }
.ub-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-val { text-align: right; font-weight: 900; }

/* ---------- AI ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  font-family: inherit; font-weight: 800; font-size: 0.95rem; padding: 11px 20px; border-radius: 99px; cursor: pointer;
  border: 2px solid var(--line); background: var(--card-bg, #fff); color: var(--text);
  transition: all .15s ease;
}
.tab:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff));
}
.tab.active {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}
.setup-card { background: var(--card-bg, #fff); border: 2px solid var(--line); color: var(--text); }
.steps li { margin-bottom: 8px; font-weight: 600; line-height: 1.5; }

/* AI Durum Kartı & Rozeti */
.ai-status-card {
  margin-bottom: 16px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--success, #10b981) 6%, var(--card-bg, #fff));
  border: 1.5px solid color-mix(in srgb, var(--success, #10b981) 30%, var(--line, var(--border, #e2e8f0)));
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.05);
}
.ai-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--success, #10b981) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #10b981) 35%, transparent);
  color: var(--success, #10b981);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}
.ai-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success, #10b981);
  box-shadow: 0 0 8px var(--success, #10b981);
  display: inline-block;
  flex-shrink: 0;
  animation: ai-pulse 2s infinite ease-in-out;
}
@keyframes ai-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
}
.ai-key-chip {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--line, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 600;
}
.ai-report { margin-top: 14px; }
.ai-report h4 { font-size: 1.15rem; margin: 18px 0 6px; color: var(--purple-d); }
.ai-report ul { padding-left: 22px; margin: 6px 0; }
.ai-report li { margin-bottom: 6px; line-height: 1.5; }
.ai-report p { margin: 6px 0; }
.loader { display: flex; align-items: center; gap: 12px; padding: 20px 0; font-weight: 800; color: var(--muted); }
.dots { display: flex; gap: 5px; }
.dots span, .typing span { width: 10px; height: 10px; border-radius: 50%; background: #AE3EC9; animation: dot 1s infinite; }
.dots span:nth-child(2), .typing span:nth-child(2) { animation-delay: .15s; background: #5C7CFA; }
.dots span:nth-child(3), .typing span:nth-child(3) { animation-delay: .3s; background: #20C997; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-7px); opacity: 1; } }
.error-box { background: #FFF5F5; border: 2px solid #FFC9C9; color: var(--red-d); border-radius: 14px; padding: 12px 16px; font-weight: 700; margin: 12px 0; }

.chat-card { display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 460px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.chat-head .btn { margin-left: auto; }
.chat-avatar { font-size: 1.8rem; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #FFE066, #FF922B); display: grid; place-items: center; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.chat-empty { margin: auto; line-height: 1.8; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; animation: fadeUp .25s; }
.msg.user { align-self: flex-end; }
.bubble { padding: 10px 16px; border-radius: 20px; font-weight: 600; line-height: 1.45; }
.bubble p { margin: 4px 0; }
.msg.user .bubble { background: linear-gradient(135deg, #5C7CFA, #845EF7); color: #fff; border-bottom-right-radius: 6px; }
.msg.model .bubble { background: #F3F0FF; border-bottom-left-radius: 6px; }
.typing { display: flex; gap: 5px; padding: 16px 18px; }
.chat-input { display: flex; gap: 10px; padding-top: 10px; }
.chat-card .tag-list { margin: 6px 0; }

/* Toast (En üstte, modal veya klavye arkasında kalmaz) */
.toast {
  position: fixed; left: 50%; top: 24px; transform: translate(-50%, -20px); opacity: 0; transition: .3s; z-index: 999999 !important;
  background: #1e293b; color: #fff; padding: 12px 22px; border-radius: 14px; font-weight: 800; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, 0.15); max-width: 90vw; text-align: center; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.text-input.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
  animation: inputShake 0.3s ease;
}
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* Yeni sürüm bandı (sw.js güncellemesi) */
.sw-update-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 110; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px); padding: 10px 12px 10px 18px;
  background: var(--card); color: var(--text);
  border: 2px solid var(--primary); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-weight: 700;
}
@media (max-width: 860px) {
  /* Mobil alt gezinme çubuğunun üstünde dursun */
  .sw-update-banner { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Hareket azaltma tercihi: animasyon ve geçişleri neredeyse kapat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Klavye ile gezinmede odak her zaman görünsün */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.empty { text-align: center; padding: 50px 24px; }
.empty-emoji { font-size: 4rem; }

/* ---------- Masaüstü vs Mobil Görünürlük Kontrolleri ---------- */
@media (min-width: 861px) {
  .mobile-header { display: none !important; }
  .mobile-nav { display: none !important; }
  .menu-sheet-overlay { display: none !important; }
}

/* ---------- Mobil & Tablet Tasarımı ---------- */
@media (max-width: 860px) {
  /* Üst Başlık (Header) */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 35;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid var(--line);
    box-shadow: 0 2px 10px rgba(92, 124, 250, 0.05);
  }
  .mh-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .mh-logo { font-size: 1.55rem; line-height: 1; }
  .mh-title {
    font-weight: 900;
    font-size: 1.25rem;
    background: var(--rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .mh-stats {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 99px;
    font-weight: 900;
    font-size: 0.85rem;
    background: #FFF4E6;
    color: #D9480F;
    text-decoration: none;
    border: 1.5px solid #FFE8CC;
    transition: transform .08s;
  }
  .mh-badge.xp {
    background: #FFF9DB;
    color: #E67700;
    border-color: #FFF3BF;
  }
  .mh-badge:active { transform: scale(0.95); }
  .mh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #F1EEFF;
    color: var(--text);
    text-decoration: none;
    font-size: 1.15rem;
    border: 1.5px solid #E5DBFF;
    transition: transform 0.08s;
  }
  .mh-btn:active { transform: scale(0.92); }

  /* Alt Bar (Sidebar yerine Mobil Nav Bar) */
  .desktop-nav { display: none !important; }
  .sidebar {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 40;
    display: block;
    padding: 0;
    margin: 0;
    border-right: none;
    border-top: 2px solid var(--line);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -4px 20px rgba(92, 124, 250, 0.08);
  }
  .mobile-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 8px));
    width: 100%;
  }
  .mobile-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: 0.72rem;
    font-weight: 800;
    flex: 1;
    max-width: 78px;
    min-width: 0;
    text-align: center;
    border-radius: 14px;
    color: var(--muted);
    border: 2px solid transparent;
    transition: all 0.15s ease;
    touch-action: manipulation;
  }
  .mobile-nav .nav-link:active {
    transform: scale(0.94);
  }
  .mobile-nav .nav-link.active {
    color: #FFFFFF !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  .mobile-nav .nav-icon {
    font-size: 1.35rem;
    width: auto;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .mobile-nav .nav-label {
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* Sayfa Yerleşimi */
  .page {
    padding: 18px 16px calc(86px + env(safe-area-inset-bottom, 16px));
    max-width: 100%;
    box-sizing: border-box;
  }
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 18px;
  }
  
  /* Mobil Tipografi İyileştirmeleri */
  h1, .page-head h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
  }
  h2 {
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
  }
  h3 {
    font-size: 1.05rem !important;
  }
  .page-head p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }
  .world-title {
    font-size: 1.15rem !important;
  }
  .world-card p {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }
  .node-label b {
    font-size: 0.88rem !important;
  }
  .node-label span {
    font-size: 0.72rem !important;
  }


  /* Kartlar */
  .card {
    padding: 16px 14px;
    border-radius: 18px;
    margin-bottom: 14px;
  }
  .lb-row {
    padding: 10px 10px;
    gap: 8px;
  }
  .lb-rank {
    width: 22px;
    font-size: 1.1rem;
  }
  .lb-avatar {
    width: 28px;
    font-size: 1.35rem;
  }
  .lb-uname {
    font-size: 0.95rem;
  }
  .lb-sub {
    font-size: 0.72rem;
  }
  .lb-xp {
    font-size: 1.1rem;
  }
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
  }
  .stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px;
  }
  .stats-row .stat-card {
    padding: 12px 8px;
    border-radius: 16px;
    text-align: center;
  }
  .stats-row .sc-icon { font-size: 1.3rem; }
  .stats-row .sc-val { font-size: 1.35rem; }
  .stats-row .sc-lbl { font-size: 0.68rem; line-height: 1.2; }

  /* Öğrenme Yolu (Path) */
  .path {
    padding: 10px 0 calc(30px + env(safe-area-inset-bottom, 10px));
    width: 100%;
    overflow-x: hidden;
  }
  .path-row {
    transform: translateX(calc(var(--x) * .22));
    max-width: 100%;
    justify-content: center;
    gap: 12px;
  }
  .node {
    width: 74px;
    height: 74px;
  }
  .node-emoji { font-size: 2rem; }
  .node-label {
    min-width: 120px;
    max-width: calc(100vw - 120px);
    padding: 7px 12px;
    font-size: 0.88rem;
  }

  /* Kelime Kartları Izgarası */
  .unit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .unit-tile {
    padding: 16px 10px;
    border-radius: 18px;
  }
  .ut-emoji { font-size: 2.2rem; }
  .unit-tile b { font-size: 0.95rem; text-align: center; }

  /* Gramer & Tablolar */
  .grammar-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px;
  }
  .g-table {
    font-size: 0.9rem;
    min-width: 280px;
  }
  .g-table th, .g-table td {
    padding: 8px 10px;
  }

  /* Ders & Sorular */
  .lesson {
    padding: 16px 14px calc(140px + env(safe-area-inset-bottom, 20px));
    min-height: calc(100vh - 40px);
  }
  .q-prompt { font-size: 1.25rem; }
  .q-emoji { font-size: 3.5rem; }
  .options {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .option {
    padding: 14px 16px;
    font-size: 1.05rem;
    border-radius: 14px;
  }
  .match {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .match .option {
    padding: 12px 6px;
    font-size: 0.9rem;
    min-height: 52px;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
  }
  .order-answer {
    min-height: 56px;
    padding: 8px 6px;
    gap: 6px;
    margin-bottom: 18px;
  }
  .order-bank {
    gap: 6px;
    margin-bottom: 18px;
  }
  .chip {
    padding: 8px 12px;
    font-size: 0.98rem;
  }
  .speak-btn.big {
    width: 72px;
    height: 72px;
    font-size: 1.9rem;
  }
  .mic-btn {
    width: 80px;
    height: 80px;
  }
  .target-word { font-size: 1.85rem; }

  /* Geri Bildirim Paneli */
  .feedback {
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }
  .fb-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 8px));
    gap: 12px;
  }
  .fb-title { font-size: 1.35rem; }
  .feedback .btn {
    width: 100%;
    padding: 13px 20px;
    font-size: 1.05rem;
  }

  /* Form & Butonlar */
  .type-row {
    flex-direction: column;
    gap: 10px;
  }
  .type-row .btn { width: 100%; }

  /* Modal */
  .modal {
    width: 92%;
    max-width: 380px;
    padding: 20px 18px;
    border-radius: 24px;
    max-height: 85vh;
    overflow-y: auto;
  }
  .modal-stats { gap: 6px; }
  .modal-stats div { padding: 8px 6px; }
  .modal-stats b { font-size: 1.15rem; }

  /* İlerleme Çubuğu Satırları */
  .ub-row {
    grid-template-columns: 1fr 60px 42px;
    gap: 8px;
    font-size: 0.88rem;
  }
  .ub-name { min-width: 0; }

  /* Sohbet & AI */
  .chat-card {
    height: clamp(320px, calc(100dvh - 170px), 640px);
    min-height: 320px;
  }
  .msg { max-width: 90%; }
  .rainbow-text { font-size: 2.4rem; }

  /* Odaklanma Modu (Ders sırasında başlık ve menü gizleme) */
  body.focus-mode .mobile-header,
  body.focus-mode .sidebar {
    display: none !important;
  }
}

/* ============================================================
   v2.0: 5 Renk Teması, Tasarım Sistemi & Yardımcı Sınıflar
   ============================================================ */

/* 5 Tema Değişkenleri & Kategori Renkleri */
[data-theme="cyber"] {
  --primary: #6366F1;
  --primary-d: #4F46E5;
  --primary-soft: rgba(99, 102, 241, 0.16);
  --background: #0B0F19;
  --surface: #161F33;
  --text: #F8FAFC;
  --text-muted: #94A3B8;
  --border: #28354D;
  --cat-kelime: #A855F7;
  --cat-gramer: #3B82F6;
  --cat-mantik: #F59E0B;
  --cat-rekabet: #EAB308;
  --cat-ai: #06B6D4;
  --cat-tekrar: #EC4899;
}
[data-theme="midnight"] {
  --primary: #10B981;
  --primary-d: #059669;
  --primary-soft: rgba(16, 185, 129, 0.16);
  --background: #0A0C10;
  --surface: #141A24;
  --text: #F0FDF4;
  --text-muted: #8B9BAE;
  --border: #222D3E;
  --cat-kelime: #8B5CF6;
  --cat-gramer: #0EA5E9;
  --cat-mantik: #F59E0B;
  --cat-rekabet: #FBBF24;
  --cat-ai: #10B981;
  --cat-tekrar: #F43F5E;
}
[data-theme="nordic"] {
  --primary: #3B8B67;
  --primary-d: #28684C;
  --primary-soft: rgba(59, 139, 103, 0.14);
  --background: #F4F7F5;
  --surface: #FFFFFF;
  --text: #1E2D24;
  --text-muted: #52695C;
  --border: #DCE5E0;
  --cat-kelime: #7C3AED;
  --cat-gramer: #2563EB;
  --cat-mantik: #D97706;
  --cat-rekabet: #CA8A04;
  --cat-ai: #0D9488;
  --cat-tekrar: #DB2777;
}
[data-theme="sunset"] {
  --primary: #F97316;
  --primary-d: #C2410C;
  --primary-soft: rgba(249, 115, 22, 0.14);
  --background: #FFF8F4;
  --surface: #FFFFFF;
  --text: #2C1810;
  --text-muted: #7C5848;
  --border: #F2DFD5;
  --cat-kelime: #8B5CF6;
  --cat-gramer: #2563EB;
  --cat-mantik: #EA580C;
  --cat-rekabet: #D97706;
  --cat-ai: #059669;
  --cat-tekrar: #E11D48;
}
[data-theme="ocean"] {
  --primary: #0EA5E9;
  --primary-d: #0284C7;
  --primary-soft: rgba(14, 165, 233, 0.14);
  --background: #F0F9FF;
  --surface: #FFFFFF;
  --text: #0C2738;
  --text-muted: #426883;
  --border: #D2E8F7;
  --cat-kelime: #8B5CF6;
  --cat-gramer: #0284C7;
  --cat-mantik: #D97706;
  --cat-rekabet: #EAB308;
  --cat-ai: #0D9488;
  --cat-tekrar: #E11D48;
}

/* Lucide İkon Stilleri */
.lucide-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 2.2px;
}
.nav-link .lucide-icon {
  width: 22px;
  height: 22px;
}

/* Tasarım Sistemi Yardımcı (Utility) Sınıfları */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; min-width: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.w-full { width: 100%; }
.pos-relative { position: relative; }
.pointer { cursor: pointer; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.bold { font-weight: 800; }
.text-highlight { font-size: 1.2rem; font-weight: 800; color: var(--primary); }

[data-theme] .card { background: var(--card-bg, #fff); color: var(--text); border-color: var(--line); }
[data-theme] .modal { background: var(--card-bg, #fff); color: var(--text); }
[data-theme] .node-label { background: var(--card-bg, #fff); color: var(--text); border-color: var(--line); }
[data-theme] .sidebar { background: var(--card-bg, rgba(255, 255, 255, .85)); border-color: var(--line); }
[data-theme] .nav-link:not(.active) { color: var(--text); }
[data-theme] .nav-link:not(.active):hover { background: color-mix(in srgb, var(--primary) 15%, var(--card-bg)); }
[data-theme] .nav-link.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme] .mini-stat { background: color-mix(in srgb, var(--primary) 14%, var(--card-bg)); color: var(--text); }
[data-theme] .btn-ghost { background: var(--card-bg, #fff); color: var(--text); border-color: var(--line); box-shadow: 0 4px 0 var(--line); }
[data-theme] .text-input { background: color-mix(in srgb, var(--card-bg) 80%, var(--bg)); color: var(--text); border-color: var(--line); }
[data-theme] .desktop-nav, [data-theme] .mobile-header, [data-theme] .mobile-nav { border-color: var(--line); }

/* Koyu Mod (Dark Mode / Cyber & Midnight) Kusursuz Kontrast Kuralları */
[data-mode="dark"] {
  color-scheme: dark;
}
[data-mode="dark"] body {
  background: var(--bg);
  color: var(--text);
}
[data-mode="dark"] .sidebar {
  background: color-mix(in srgb, var(--card-bg) 95%, transparent) !important;
  backdrop-filter: blur(16px);
  border-color: var(--line) !important;
}
[data-mode="dark"] .mobile-header,
[data-mode="dark"] .mobile-nav {
  background: color-mix(in srgb, var(--card-bg) 95%, transparent) !important;
  backdrop-filter: blur(16px);
  border-color: var(--line) !important;
}
[data-mode="dark"] .card {
  background: var(--card-bg) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
[data-mode="dark"] .modal {
  background: var(--card-bg) !important;
  border: 1px solid var(--line);
  color: var(--text) !important;
}
[data-mode="dark"] .modal-stats div {
  background: color-mix(in srgb, var(--bg, #0B0F19) 70%, var(--card-bg, #161F33)) !important;
  border: 1px solid var(--line) !important;
}
[data-mode="dark"] .modal-stats b {
  color: #FFFFFF !important;
}
[data-mode="dark"] .modal-stats span {
  color: var(--muted) !important;
}
[data-mode="dark"] .modal-emoji {
  background: color-mix(in srgb, var(--c, var(--primary)) 25%, var(--card-bg)) !important;
  border: 2px solid color-mix(in srgb, var(--c, var(--primary)) 50%, var(--line)) !important;
}
[data-mode="dark"] .menu-sheet {
  background: var(--card-bg) !important;
  border-top: 1px solid var(--line);
  color: var(--text) !important;
}
[data-mode="dark"] .menu-item {
  background: color-mix(in srgb, var(--card-bg) 80%, var(--bg)) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
[data-mode="dark"] .menu-icon {
  background: var(--card-bg) !important;
  border-color: var(--line) !important;
}
[data-mode="dark"] .text-input {
  background: color-mix(in srgb, var(--card-bg) 70%, var(--bg)) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
[data-mode="dark"] .btn-ghost {
  background: color-mix(in srgb, var(--card-bg) 85%, var(--bg)) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 0 var(--line);
}
[data-mode="dark"] .action-card {
  background: color-mix(in srgb, var(--c, var(--primary)) 12%, var(--card-bg)) !important;
  border-color: color-mix(in srgb, var(--c, var(--primary)) 30%, var(--line)) !important;
}
[data-mode="dark"] .rivalry-card {
  background: color-mix(in srgb, #FFD43B 12%, var(--card-bg)) !important;
  border-color: color-mix(in srgb, #FFD43B 30%, var(--line)) !important;
  color: var(--text) !important;
}
[data-mode="dark"] .bg-blobs span:nth-child(1) { background: #4F46E5; opacity: 0.15; }
[data-mode="dark"] .bg-blobs span:nth-child(2) { background: #06B6D4; opacity: 0.12; }
[data-mode="dark"] .bg-blobs span:nth-child(3) { background: #8B5CF6; opacity: 0.15; }

/* Koyu Modda İlerleme Çubuğu Zemin Rengi (Bembeyaz zemin parlamasını engeller) */
[data-mode="dark"] .progress {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Koyu Modda Kelime Kartları & AI Sekmeleri Kesin Kontrast Kuralları */
[data-mode="dark"] .unit-tile,
[data-theme="cyber"] .unit-tile,
[data-theme="midnight"] .unit-tile {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
[data-mode="dark"] .unit-tile b,
[data-theme="cyber"] .unit-tile b,
[data-theme="midnight"] .unit-tile b {
  color: #FFFFFF !important;
}
[data-mode="dark"] .unit-tile .muted,
[data-theme="cyber"] .unit-tile .muted,
[data-theme="midnight"] .unit-tile .muted {
  color: var(--muted) !important;
}

[data-mode="dark"] .tab:not(.active),
[data-theme="cyber"] .tab:not(.active),
[data-theme="midnight"] .tab:not(.active) {
  background: color-mix(in srgb, var(--card-bg) 85%, var(--bg)) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-mode="dark"] .tab.active,
[data-theme="cyber"] .tab.active,
[data-theme="midnight"] .tab.active {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

[data-mode="dark"] .option,
[data-theme="cyber"] .option,
[data-theme="midnight"] .option {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-mode="dark"] .chip,
[data-theme="cyber"] .chip,
[data-theme="midnight"] .chip {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-mode="dark"] .setup-card,
[data-theme="cyber"] .setup-card,
[data-theme="midnight"] .setup-card {
  background: var(--card-bg) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
[data-mode="dark"] .msg.model .bubble,
[data-theme="cyber"] .msg.model .bubble,
[data-theme="midnight"] .msg.model .bubble {
  background: color-mix(in srgb, var(--primary) 16%, var(--card-bg)) !important;
  color: var(--text) !important;
}

/* Misafir Modu Uyarı / Kaydet Barı */
.guest-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card-bg, #fff));
  border: 2px solid var(--accent); border-radius: 16px; padding: 12px 16px; margin-bottom: 16px;
}
.gb-title { font-weight: 800; font-size: 0.95rem; }
.gb-sub { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

/* Yoldaş Hayvan (Mascot) Izgarası */
.mascot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 14px 0;
}
.mascot-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 10px; border-radius: 18px; border: 2px solid var(--line);
  background: var(--card-bg, #fff); cursor: pointer; transition: .15s;
}
.mascot-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.mascot-card.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff)); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.mascot-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 6px; }
.mascot-name { font-weight: 900; font-size: 1rem; }
.mascot-animal { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.mascot-motto { font-size: 0.72rem; color: var(--muted); margin-top: 6px; line-height: 1.3; }

/* Renk Paleti (Theme) Izgarası */
.theme-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0;
}
.theme-card {
  padding: 14px; border-radius: 18px; border: 2px solid var(--line);
  background: var(--card-bg, #fff); cursor: pointer; transition: .15s;
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.theme-card.active { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.theme-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.theme-name { font-weight: 900; font-size: 0.95rem; }
.theme-dots { display: flex; gap: 5px; }
.theme-dots span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
.theme-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.3; }

/* Candy Crush Seviye & Boss Testi */
.world-card {
  border-radius: 22px; padding: 18px 20px; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, #fff), var(--card-bg, #fff));
  border: 2px solid var(--line);
}
.world-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.world-badge { font-size: 2rem; }
.world-title { font-size: 1.2rem; font-weight: 900; }
.boss-banner {
  margin-top: 24px; padding: 22px; border-radius: 22px; text-align: center;
  background: linear-gradient(135deg, #FFD43B, #FCC419); color: #2B2D42;
  box-shadow: 0 10px 24px rgba(252, 196, 25, .35); border: 3px solid #FAB005;
}
.boss-banner.locked { opacity: 0.7; filter: grayscale(0.85); background: #DEE2E6; border-color: #CED4DA; box-shadow: none; color: #495057; }
.boss-emoji { font-size: 3.5rem; animation: bounce 1.8s infinite; }
.boss-banner.locked .boss-emoji { animation: none; }
.boss-title { font-size: 1.4rem; font-weight: 900; margin: 4px 0; }
.boss-sub { font-size: 0.9rem; font-weight: 700; opacity: 0.9; margin-bottom: 14px; }

/* Modernleştirilmiş Çalışma Kartları */
.flash-modern-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px;
}
.flash-pill-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 99px;
  font-family: inherit; font-weight: 900; font-size: 0.95rem; border: 2px solid var(--line);
  background: var(--card-bg, #fff); color: var(--text); cursor: pointer; transition: .15s;
}
.flash-pill-btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card-bg, #fff)); }
.flash-indicator { font-weight: 900; font-size: 1rem; color: var(--muted); min-width: 80px; text-align: center; }

/* ============================================================
   Shimeji Ekran Dostu (Fındık Sincap - Masaüstü / Ekran Evcil Hayvanı)
   ============================================================ */
.shimeji-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 940;
  overflow: hidden;
}

.shimeji-pet {
  position: absolute;
  bottom: 10px;
  left: 72%;
  width: 92px;
  height: 92px;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none !important;
  will-change: left, bottom;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

.shimeji-pet.dragging {
  cursor: grabbing;
  transition: none !important;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.32));
}

/* Maskotun üzerindeki küçük gizle butonu (sürükleme alanının dışında, sağ üst köşe) */
.shimeji-hide-btn {
  position: absolute;
  top: -20px;
  right: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 30, 40, 0.62);
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 4;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Dokunma alanı sprite'ın üstüne taşmasın: sürükleme alanını bozmamak için küçük tutuldu */
.shimeji-hide-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
}
.shimeji-hide-btn:hover,
.shimeji-hide-btn:focus-visible {
  background: rgba(220, 38, 38, 0.9);
}
.shimeji-pet.dragging .shimeji-hide-btn,
.shimeji-bubble.visible ~ .shimeji-hide-btn {
  display: none;
}

/* Maskot gizliyken görünen geri getir butonu */
.shimeji-restore-btn {
  display: none;
  position: fixed;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--border, #ddd);
  border-radius: 50%;
  background: var(--card, #fff);
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 940;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  touch-action: manipulation;
}
.shimeji-restore-btn.visible {
  display: block;
}
body.onboarding-mode .shimeji-restore-btn {
  display: none !important;
}
@media (min-width: 769px) {
  .shimeji-restore-btn {
    bottom: 20px;
    right: 20px;
  }
}

.shimeji-sprite-wrap svg,
.shimeji-sprite-wrap svg * {
  pointer-events: none;
}

.shimeji-sprite-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center bottom;
  transition: transform 0.18s ease;
  touch-action: none !important;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.shimeji-pet.face-left .shimeji-sprite-wrap {
  transform: scaleX(-1);
}

.shimeji-pet.face-right .shimeji-sprite-wrap {
  transform: scaleX(1);
}

/* Doğal Yürüme Animasyonu (Adım atan patiler + sallanan kuyruk + yumuşak yaylanma) */
.shimeji-pet.state-walk .squirrel-stage-svg,
.shimeji-pet.state-walk .cat-stage-svg,
.shimeji-pet.state-walk .panda-stage-svg {
  animation: shimejiWalkStride 0.48s infinite ease-in-out;
}
.shimeji-pet.state-walk .sq-foot-l {
  animation: sqFootStepL 0.48s infinite ease-in-out;
  transform-origin: center;
}
.shimeji-pet.state-walk .sq-foot-r {
  animation: sqFootStepR 0.48s infinite ease-in-out;
  transform-origin: center;
}
.shimeji-pet.state-walk .sq-tail,
.shimeji-pet.state-idle .sq-tail {
  animation: sqTailSway 1.6s infinite ease-in-out;
  transform-origin: 76px 86px;
}

/* Dururken nefes alma ve kuyruk sallama */
.shimeji-pet.state-idle .squirrel-stage-svg,
.shimeji-pet.state-idle .cat-stage-svg,
.shimeji-pet.state-idle .panda-stage-svg {
  animation: shimejiIdleBreathe 2.6s infinite ease-in-out;
}

/* Palamut kemirme (Munch) */
.shimeji-pet.state-munch .squirrel-stage-svg,
.shimeji-pet.state-munch .cat-stage-svg,
.shimeji-pet.state-munch .panda-stage-svg {
  animation: shimejiMunch 0.36s infinite ease-in-out;
}

/* Sevinç zıplaması / Takla */
.shimeji-pet.state-jump .squirrel-stage-svg,
.shimeji-pet.state-jump .cat-stage-svg,
.shimeji-pet.state-jump .panda-stage-svg {
  animation: shimejiCheerJump 0.65s ease-out;
}

/* Doğru Cevap: Minik Efsane Zafer Dansı (Dance) */
.shimeji-pet.state-dance .squirrel-stage-svg,
.shimeji-pet.state-dance .cat-stage-svg,
.shimeji-pet.state-dance .panda-stage-svg {
  animation: shimejiVictoryDance 0.55s infinite ease-in-out;
}

/* Yanlış Cevap: Üzülme ve Moral Verme (Sad) */
.shimeji-pet.state-sad .squirrel-stage-svg,
.shimeji-pet.state-sad .cat-stage-svg,
.shimeji-pet.state-sad .panda-stage-svg {
  animation: shimejiSadDroop 1.1s infinite ease-in-out;
}

/* Fareyle tutulduğunda havada çırpınma */
.shimeji-pet.dragging .squirrel-stage-svg,
.shimeji-pet.dragging .cat-stage-svg,
.shimeji-pet.dragging .panda-stage-svg {
  animation: shimejiDangle 0.35s infinite ease-in-out;
}

/* Uyku modu */
.shimeji-pet.state-sleep {
  opacity: 0.88;
}
.shimeji-pet.state-sleep .squirrel-stage-svg,
.shimeji-pet.state-sleep .cat-stage-svg,
.shimeji-pet.state-sleep .panda-stage-svg {
  animation: shimejiSleepPulse 3s infinite ease-in-out;
}

@keyframes shimejiWalkStride {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3.5px) rotate(1.2deg); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-3.5px) rotate(-1.2deg); }
}

@keyframes sqFootStepL {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-5px) translateX(2px); }
  50% { transform: translateY(0) translateX(0); }
}

@keyframes sqFootStepR {
  0%, 50%, 100% { transform: translateY(0) translateX(0); }
  75% { transform: translateY(-5px) translateX(2px); }
}

@keyframes sqTailSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}

@keyframes shimejiIdleBreathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-2px) scaleY(1.03); }
}

@keyframes shimejiMunch {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.05, 0.96) rotate(2deg); }
}

@keyframes shimejiCheerJump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-24px) scale(1.08) rotate(-6deg); }
  65% { transform: translateY(-14px) scale(1.04) rotate(6deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes shimejiVictoryDance {
  0% { transform: translateY(0) rotate(-10deg) scale(1.04); }
  25% { transform: translateY(-14px) rotate(0deg) scale(1.1, 0.95); }
  50% { transform: translateY(0) rotate(10deg) scale(1.04); }
  75% { transform: translateY(-12px) rotate(0deg) scale(1.08, 0.96); }
  100% { transform: translateY(0) rotate(-10deg) scale(1.04); }
}

@keyframes shimejiSadDroop {
  0%, 100% { transform: translateY(3px) scale(0.95, 0.92) rotate(-4deg); }
  50% { transform: translateY(5px) scale(0.93, 0.90) rotate(3deg); }
}

@keyframes shimejiDangle {
  0%, 100% { transform: rotate(-8deg) translateY(-4px); }
  50% { transform: rotate(8deg) translateY(-2px); }
}

@keyframes shimejiSleepPulse {
  0%, 100% { transform: scale(0.92) rotate(-5deg); }
  50% { transform: scale(0.96) rotate(-3deg); }
}

/* Minik Efsaneler (Little Legends) Yıldız & Seviye Rozeti (Tooltip Destekli) */
.shimeji-legend-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  color: #FACC15;
  border: 1px solid rgba(250, 204, 21, 0.65);
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none !important;
  cursor: help;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.3px;
  z-index: 5;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.shimeji-legend-badge:hover,
.shimeji-legend-badge:focus-visible {
  transform: translateX(-50%) scale(1.06);
  border-color: #FACC15;
  outline: none;
}

.shimeji-legend-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.shimeji-legend-badge:hover::after,
.shimeji-legend-badge:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Baş Üstü Duygu Efekti (Dans Notaları / Üzüntü Damlası / Kalp) */
.shimeji-emote-fx {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.05rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  z-index: 4;
}

.shimeji-emote-fx.active {
  opacity: 1;
  animation: shimejiEmoteFloat 1.1s infinite ease-in-out;
}

@keyframes shimejiEmoteFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-8px) scale(1.14); }
}

/* Shimeji Konuşma Baloncuğu (Koyu Tema & Mor Vurgu, İnce Zarif Çerçeve, Konuşma Kuyruğu) */
.shimeji-bubble {
  position: absolute;
  bottom: 106px;
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.96);
  width: 288px;
  max-width: calc(100vw - 32px);
  background: color-mix(in srgb, var(--card, #151c2c) 96%, #0f172a);
  color: var(--text, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--primary, #7c3aed) 42%, rgba(255, 255, 255, 0.12));
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 42px rgba(2, 6, 23, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  font-size: 0.85rem;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 950;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.18s;
}

.shimeji-bubble.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Baloncuktan Maskota İşaret Eden Konuşma Kuyruğu (Tail) */
.shimeji-bubble-tail {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 13px;
  height: 13px;
  background: color-mix(in srgb, var(--card, #151c2c) 96%, #0f172a);
  border-right: 1px solid color-mix(in srgb, var(--primary, #7c3aed) 42%, rgba(255, 255, 255, 0.12));
  border-bottom: 1px solid color-mix(in srgb, var(--primary, #7c3aed) 42%, rgba(255, 255, 255, 0.12));
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.shimeji-bubble.mood-dance {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 20px 42px rgba(16, 185, 129, 0.22);
}
.shimeji-bubble.mood-dance .shimeji-bubble-tail {
  border-color: rgba(16, 185, 129, 0.6);
}

.shimeji-bubble.mood-sad {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 20px 42px rgba(245, 158, 11, 0.22);
}
.shimeji-bubble.mood-sad .shimeji-bubble-tail {
  border-color: rgba(245, 158, 11, 0.6);
}

/* Ekranın üst kenarında gezinirken balon aşağıya doğru açılsın ve kuyruk yukarı baksın */
.shimeji-pet.near-top .shimeji-bubble {
  bottom: auto;
  top: 90px;
}
.shimeji-pet.near-top .shimeji-bubble-tail {
  bottom: auto;
  top: -7px;
  transform: translateX(-50%) rotate(225deg);
}

/* Ekranın sol veya sağ kenarına yaklaştığında balon taşmasın */
.shimeji-pet.near-left .shimeji-bubble {
  left: 0;
  transform: translateY(6px) scale(0.96);
}
.shimeji-pet.near-left .shimeji-bubble.visible {
  transform: translateY(0) scale(1);
}
.shimeji-pet.near-left .shimeji-bubble-tail {
  left: 38px;
}

.shimeji-pet.near-right .shimeji-bubble {
  left: auto;
  right: 0;
  transform: translateY(6px) scale(0.96);
}
.shimeji-pet.near-right .shimeji-bubble.visible {
  transform: translateY(0) scale(1);
}
.shimeji-pet.near-right .shimeji-bubble-tail {
  left: auto;
  right: 32px;
  transform: rotate(45deg);
}

/* Kişisel Selamlama Satırı + Gizli/Hover Türkçe Çeviri */
.shimeji-greet-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 36px;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 6px;
}

.shimeji-greet-wrap:focus-visible {
  outline: 2px solid var(--primary, #7c3aed);
  outline-offset: 2px;
}

.shimeji-greet-en {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text, #f8fafc);
  letter-spacing: -0.01em;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
  padding-bottom: 1px;
}

.shimeji-greet-tr {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}

.shimeji-greet-wrap:hover .shimeji-greet-tr,
.shimeji-greet-wrap:focus-visible .shimeji-greet-tr,
.shimeji-greet-wrap.tr-open .shimeji-greet-tr {
  max-height: 28px;
  opacity: 0.9;
  margin-top: 3px;
}

/* 44x44px Erişilebilir Kapatma (X) Butonu */
.shimeji-bubble-close {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.shimeji-bubble-close:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text, #f8fafc);
}

.shimeji-bubble-close:focus-visible {
  outline: 2px solid var(--primary, #7c3aed);
  outline-offset: -2px;
}

/* Mesaj Gövdesi & İnce Günlük Hedef İlerleme Çubuğu */
.shimeji-msg-text {
  color: var(--text, #f1f5f9);
  font-size: 0.84rem;
  line-height: 1.48;
  margin-bottom: 10px;
}

.shimeji-goal-wrap {
  margin-bottom: 14px;
}

.shimeji-goal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--muted, #94a3b8);
  margin-bottom: 5px;
}

.shimeji-goal-track {
  width: 100%;
  height: 5px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 99px;
  overflow: hidden;
}

.shimeji-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #7c3aed), #a855f7);
  border-radius: 99px;
  transition: width 0.35s ease;
}

/* Eylem Hiyerarşisi: 1 Tam Genişlikte Mor Birincil Buton + 1 İkincil Buton */
.shimeji-primary-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.shimeji-cta-primary {
  flex: 1.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--primary, #7c3aed);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary, #7c3aed) 40%, transparent);
  transition: background 0.15s ease, transform 0.15s ease;
}

.shimeji-cta-primary:hover {
  background: var(--primary-d, #6d28d9);
  transform: translateY(-1px);
}

.shimeji-cta-secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary, #7c3aed) 38%, rgba(148, 163, 184, 0.25));
  background: color-mix(in srgb, var(--primary, #7c3aed) 12%, transparent);
  color: var(--text, #f8fafc);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.shimeji-cta-secondary:hover {
  background: color-mix(in srgb, var(--primary, #7c3aed) 22%, transparent);
  border-color: var(--primary, #7c3aed);
}

.shimeji-cta-primary:focus-visible,
.shimeji-cta-secondary:focus-visible,
.shimeji-icon-btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

/* Alt Sıra: Minimal Vektörel İkon-Butonlar + Tooltip */
.shimeji-icon-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.shimeji-icon-btn {
  position: relative;
  flex: 1;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted, #cbd5e1);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.shimeji-icon-btn:hover {
  background: color-mix(in srgb, var(--primary, #7c3aed) 18%, transparent);
  color: var(--text, #ffffff);
  border-color: color-mix(in srgb, var(--primary, #7c3aed) 45%, transparent);
}

.shimeji-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shimeji-icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 30;
}

.shimeji-icon-btn:hover::after,
.shimeji-icon-btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hareket Azaltma (prefers-reduced-motion) Desteği */
@media (prefers-reduced-motion: reduce) {
  .shimeji-bubble,
  .shimeji-pet,
  .shimeji-pet .squirrel-stage-svg,
  .shimeji-pet .sq-foot-l,
  .shimeji-pet .sq-foot-r,
  .shimeji-pet .sq-tail,
  .shimeji-emote-fx.active {
    animation: none !important;
    transition: opacity 0.1s linear !important;
  }
}

@media (max-width: 768px) {
  /* Mobilde kartların arkasında kalmaması ve rahatça dolaşabilmesi için optimize edildi */
  .shimeji-stage {
    z-index: 940;
    pointer-events: none;
  }
  .shimeji-pet {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    width: 48px !important;
    height: 48px !important;
    touch-action: none !important;
    pointer-events: auto;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22));
  }
  .shimeji-sprite-wrap::before {
    content: "";
    position: absolute;
    inset: -6px;
    min-width: 56px;
    min-height: 56px;
    pointer-events: auto;
  }
  .shimeji-legend-badge {
    font-size: 0.62rem !important;
    pointer-events: none !important;
    padding: 2px 5px !important;
    bottom: -13px !important;
    border-radius: 6px !important;
  }
  .shimeji-bubble {
    width: 250px !important;
    max-width: calc(100vw - 28px) !important;
    font-size: 0.8rem !important;
    padding: 9px 12px !important;
  }
  .shimeji-msg-text {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
  .shimeji-cta-primary,
  .shimeji-cta-secondary {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
  }
  .shimeji-icon-btn {
    width: 28px !important;
    height: 28px !important;
  }
  .shimeji-icon-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================================
   Lokomotif Cümle Dizimi & Vagon Stilleri (Order Exercises)
   ============================================================ */
.loco-order-track {
  position: relative;
  border-radius: 14px;
  background: var(--card-subtle, rgba(255, 255, 255, 0.04));
  border: 2px dashed rgba(108, 92, 231, 0.35);
  padding: 14px 16px 16px;
  margin-bottom: 16px;
  transition: all 0.25s ease;
}

.loco-order-track::before {
  content: "🚂 Raylar & Vagon Dizilimi (Özne ➔ Fiil ➔ Tümleç)";
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted, #94a3b8);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.train-depart {
  animation: trainDepartAnim 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes trainDepartAnim {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(15px); }
  100% { transform: translateX(120%); opacity: 0; }
}

.wagon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  position: relative;
}

.wagon-chip:hover {
  transform: translateY(-2px);
}

/* Lokomotif (Özne) */
.wagon-loco {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

.wagon-loco::before {
  content: "🚂";
  font-size: 0.9rem;
}

/* 1. Vagon (Fiil) */
.wagon-verb {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  border: 1px solid #4338ca !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.wagon-verb::before {
  content: "🚃";
  font-size: 0.9rem;
}

/* 30 Saniyelik Türk Beyni vs İngilizce Mantığı Ders Açılış Kartı */
.lesson-logic-card {
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(32, 201, 151, 0.08));
  border: 1px solid rgba(108, 92, 231, 0.25);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.lesson-logic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.lesson-logic-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--primary, #6c5ce7);
}

.lesson-logic-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--primary, #6c5ce7);
  color: #ffffff;
}

.lesson-logic-body {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text, #f8fafc);
}

/* Türk Tuzağı Rozeti ve Rapor Kartı */
.trap-badge {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-weight: 700;
}

.trap-report-card {
  border-left: 4px solid var(--cat-mantik, #f59e0b) !important;
}

.trap-stat-row {
  background: rgba(148, 163, 184, 0.08);
  border-left: 4px solid var(--primary, #6366f1);
  border-radius: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  transition: transform 0.15s ease, background 0.15s ease;
}

[data-mode="dark"] .trap-stat-row {
  background: color-mix(in srgb, var(--card-bg, #161f33) 80%, var(--bg, #0b0f19)) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-left: 4px solid var(--primary, #6366f1) !important;
}

.trap-stat-row:hover {
  transform: translateX(3px);
}

.trap-stat-name {
  color: var(--text, #0f172a);
  font-weight: 800;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-mode="dark"] .trap-stat-name {
  color: #f8fafc !important;
}

.trap-stat-tip {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.48;
  color: var(--text-muted, var(--muted, #64748b));
}

[data-mode="dark"] .trap-stat-tip {
  color: #cbd5e1 !important;
}

.trap-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

[data-mode="dark"] .trap-count-pill {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

/* ============================================================
   Genel Kurs Tamamlama Özeti (Course Progress Summary)
   ============================================================ */
.course-progress-summary {
  background: rgba(148, 163, 184, 0.08);
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
}

[data-mode="dark"] .course-progress-summary {
  background: color-mix(in srgb, var(--card-bg, #161f33) 80%, var(--bg, #0b0f19)) !important;
  border-color: var(--line, rgba(255, 255, 255, 0.08)) !important;
}

.cps-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.cps-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cps-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.cps-heading {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text, #0f172a);
}

[data-mode="dark"] .cps-heading {
  color: #f8fafc !important;
}

.cps-sub {
  font-size: 0.76rem;
  margin-top: 1px;
}

.cps-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.9rem;
  background: none !important;
  color: var(--primary, #6366f1);
}

[data-mode="dark"] .cps-badge {
  color: #c7d2fe !important;
}

.cps-progress {
  height: 12px !important;
  background: rgba(148, 163, 184, 0.16) !important;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px !important;
}

[data-mode="dark"] .cps-progress {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cps-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted, var(--muted, #64748b));
}

[data-mode="dark"] .cps-foot {
  color: #94a3b8 !important;
}

[data-mode="dark"] .cps-foot b {
  color: #f8fafc !important;
}








/* Kedi Yün Yumağı Oynama & Panda Bambu Kemirme Animasyonları */
.shimeji-pet.state-walk .cat-yarn-hold {
  animation: yarnRoll 0.48s infinite ease-in-out;
  transform-origin: 54px 85px;
}
.shimeji-pet.state-dance .cat-yarn-hold,
.shimeji-pet.state-munch .cat-yarn-hold {
  animation: yarnPlay 0.38s infinite ease-in-out;
  transform-origin: 54px 85px;
}
@keyframes yarnRoll {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-2px); }
}
@keyframes yarnPlay {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-3px) rotate(-6deg); }
}

.shimeji-pet.state-walk .panda-bamboo-hold {
  animation: bambooSway 0.48s infinite ease-in-out;
  transform-origin: 61px 81px;
}
.shimeji-pet.state-dance .panda-bamboo-hold,
.shimeji-pet.state-munch .panda-bamboo-hold {
  animation: bambooChew 0.35s infinite ease-in-out;
  transform-origin: 61px 81px;
}
@keyframes bambooSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-2px); }
}
@keyframes bambooChew {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-4px); }
}

[data-mode="dark"] .type-input {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
[data-mode="dark"] .type-input:focus {
  border-color: #91A7FF !important;
  background: var(--card) !important;
  box-shadow: 0 0 0 4px rgba(145, 167, 255, 0.25) !important;
}
[data-mode="dark"] .type-input.ok {
  border-color: var(--green) !important;
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6EE7B7 !important;
}
[data-mode="dark"] .type-input.bad {
  border-color: var(--red) !important;
  background: rgba(239, 68, 68, 0.18) !important;
  color: #FCA5A5 !important;
}

/* ============================================================
   Oyun & Mühendislik Modülleri Stilleri (Lokomotif, Tuzak, Hayatta Kalma)
   ============================================================ */
.rail-scene {
  position: relative;
  min-height: 130px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
}
.track-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  height: 6px;
  background: #64748B;
  border-radius: 4px;
  z-index: 1;
}
.track-ties {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 16px;
  background: repeating-linear-gradient(90deg, #94A3B8 0, #94A3B8 6px, transparent 6px, transparent 20px);
  z-index: 0;
}
.train-assembly-dock {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 22px;
}
.loco-engine-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.8rem;
  line-height: 1;
  position: relative;
  flex-shrink: 0;
}
.engine-smoke {
  font-size: 1.2rem;
  position: absolute;
  top: -16px;
  left: 2px;
  transition: transform 0.3s ease;
}
.coupled-wagons-list {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 60px;
}
.rail-empty-hint {
  padding: 14px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
}
.coupled-wagon-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  animation: wagonCouplePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes wagonCouplePop {
  0% { transform: scale(0.6) translateX(-20px); opacity: 0; }
  100% { transform: scale(1) translateX(0); opacity: 1; }
}
.coupler-joint {
  font-size: 0.9rem;
  color: #64748B;
}
.wagon-mini-body {
  background: var(--wagon-c, #3B82F6);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wmb-role {
  font-size: 0.62rem;
  font-weight: 800;
  opacity: 0.9;
  letter-spacing: 0.5px;
}
.wmb-text {
  font-size: 1.05rem;
}
.depot-wagons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.wagon-item-btn {
  background: var(--card);
  border: 2px solid var(--wagon-c, var(--primary));
  border-radius: 12px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.wagon-item-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
  background: color-mix(in srgb, var(--wagon-c) 10%, var(--card));
}
.wagon-item-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.wagon-role-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--wagon-c);
  display: block;
  margin-bottom: 2px;
}
.wagon-text {
  font-size: 1.1rem;
  color: var(--text);
}
.derail-shake {
  animation: derailShakeAnim 0.5s ease;
}
@keyframes derailShakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px) rotate(-1deg); }
  40%, 80% { transform: translateX(8px) rotate(1deg); }
}
.train-departure-anim {
  animation: trainDeparture 2.4s ease forwards;
}
@keyframes trainDeparture {
  0% { transform: translateX(0); }
  30% { transform: translateX(20px); }
  100% { transform: translateX(600px); opacity: 0; }
}
.trap-word-token:hover {
  transform: scale(1.06);
  border-color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}
.quest-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ---------- Onboarding İzolasyonu (Tam Ekran Karşılama) ---------- */
body.onboarding-mode {
  overflow-x: hidden;
}
body.onboarding-mode .mobile-header,
body.onboarding-mode #nav,
body.onboarding-mode .desktop-nav,
body.onboarding-mode .mobile-nav,
body.onboarding-mode .shimeji-stage {
  display: none !important;
}
body.onboarding-mode .app-layout {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
body.onboarding-mode .main-content {
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.onboard-isolated-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 48px;
  box-sizing: border-box;
  width: 100%;
}
.onboard-isolated-card {
  width: 100%;
  max-width: 520px;
  background: var(--card-bg, #ffffff);
  border: 1.5px solid var(--border);
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  text-align: left;
  animation: popIn 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
.onboard-brand-header {
  text-align: center;
  margin-bottom: 24px;
}
.onboard-hero-bubble {
  font-size: 3.8rem;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
  animation: bounce 2s infinite ease-in-out;
}
.onboard-brand-title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.onboard-tagline {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.4;
}
.onboard-field-group {
  margin-top: 18px;
}
.onboard-primary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.onboard-auth-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
}
.onboard-auth-actions .btn {
  flex: 1;
  font-size: 0.85rem;
  padding: 11px 12px;
}
@media (max-width: 768px) {
  .onboard-isolated-card {
    padding: 22px 18px;
    border-radius: 24px;
  }
  .onboard-brand-title {
    font-size: 2.1rem;
  }
  .onboard-hero-bubble {
    font-size: 3.2rem;
  }
  .onboard-auth-actions {
    flex-direction: column;
  }
}


/* Chapter Status & Progress Labels */
.chapter-detail-panel {
  display: block !important;
}
.chapter-status-label {
  display: inline-flex !important;
  align-items: center;
  font-weight: 800;
  text-transform: capitalize;
}
.chapter-status-badge.status-completed, .badge.status-completed {
  background: #2b8a3e !important;
  color: #fff !important;
}
.chapter-status-badge.status-in-progress, .badge.status-in-progress {
  background: #f59f00 !important;
  color: #fff !important;
}
.chapter-status-badge.status-current, .badge.status-current {
  background: var(--primary, #5c7cfa) !important;
  color: #fff !important;
}
.chapter-status-badge.status-locked, .badge.status-locked {
  background: var(--card-hover, #e9ecef) !important;
  color: var(--muted, #495057) !important;
}
b.chapter-status-label.status-completed { color: #2b8a3e !important; }
b.chapter-status-label.status-in-progress { color: #e67700 !important; }
b.chapter-status-label.status-current { color: var(--primary, #5c7cfa) !important; }
b.chapter-status-label.status-locked { color: var(--muted, #868e96) !important; }


/* ============================================================
   Mobil UX, Kart ve Tipografi Güçlendirmeleri (v2.9.29)
   ============================================================ */
@media (max-width: 860px) {
  /* iOS otomatik yakınlaşmasını engelle ve rahat tıklama sağla */
  .text-input, input[type="text"], input[type="password"], input[type="number"], select, textarea {
    font-size: 16px !important;
    min-height: 44px;
    border-radius: 12px;
  }

  /* Mobil buton dokunmatik yükseklikleri */
  .btn:not(.sm) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
  }

  /* Mobil kart ve arayüz oranları */
  .card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  }

  /* Dil mantığı lokomotif vagonları ve mobil kaydırma */
  .loco-train-row, .loco-order-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .loco-train-row::-webkit-scrollbar, .loco-order-track::-webkit-scrollbar {
    display: none;
  }

  /* Mobil başlık ve metin hiyerarşisi */
  .page h1 { font-size: 1.4rem !important; line-height: 1.25 !important; }
  .page h2 { font-size: 1.2rem !important; line-height: 1.3 !important; }
  .page h3 { font-size: 1.05rem !important; }
  .page p { font-size: 0.88rem !important; line-height: 1.45 !important; }
  
  /* Ünite yolundaki baloncuklar */
  .node-label {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
}


/* ============================================================
   PatiLingo Pro Modal, AI Kotası & Global Error Boundary (v2.9.32)
   ============================================================ */
.ai-quota-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  font-size: 0.85rem;
}
.ai-quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  background: rgba(92, 124, 250, 0.14);
  color: var(--primary);
}
.ai-quota-badge.pro {
  background: linear-gradient(135deg, #F59E0B, #EC4899);
  color: #fff;
}
.ai-quota-badge.locked {
  background: rgba(224, 49, 49, 0.15);
  color: var(--danger);
}
.pro-modal-wrap {
  text-align: center;
  padding: 4px 2px;
}
.pro-crown-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-size: 2.2rem;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(236, 72, 153, 0.2));
  border: 2px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
}
.pro-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
  text-align: left;
}
.pro-plan-card {
  position: relative;
  padding: 14px 12px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pro-plan-card.selected {
  border-color: #F59E0B;
  background: color-mix(in srgb, #F59E0B 10%, var(--card));
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.18);
}
.pro-plan-tag {
  position: absolute;
  top: -10px;
  right: 10px;
  background: linear-gradient(90deg, #F59E0B, #EC4899);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}
.pro-feature-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
}
.pro-feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.global-error-banner {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: min(92vw, 420px);
  background: #1E293B;
  color: #F8FAFC;
  border: 1.5px solid #F59E0B;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
}


/* ============================================================
   Mobil Ekran Düzeni, Kompakt Tipografi ve Taşma Düzeltmeleri (v2.9.33)
   ============================================================ */
@media (max-width: 768px) {
  .page {
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 12px)) !important;
  }
  .page-head {
    margin-bottom: 10px !important;
    gap: 4px !important;
  }
  .page-head h1, .page h1 {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }
  .page-head p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  .page h2 {
    font-size: 1.02rem !important;
    line-height: 1.28 !important;
  }
  .page h3 {
    font-size: 0.95rem !important;
    line-height: 1.28 !important;
  }
  .card {
    padding: 12px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }

  /* Misafir banner ve yoldaş kartı mobilde çok yer kaplamasın */
  .guest-banner {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
  }
  .guest-banner .gb-title {
    font-size: 0.88rem !important;
  }
  .guest-banner .gb-sub {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }
  #mascotHeroCard {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
  }

  /* 4'lü Metrik Şeridi: Mobilde alt alta 4 dev kart yerine 2x2 kompakt ızgara! */
  .metrics-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .metric-pill {
    padding: 9px 10px !important;
    border-radius: 13px !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .metric-pill .mp-icon {
    font-size: 1.25rem !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  .metric-pill .mp-val {
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
  }
  .metric-pill .mp-unit {
    font-size: 0.72rem !important;
  }
  .metric-pill .mp-lbl {
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Günün Kelimesi (quantum computing vb.) devasa taşmasın */
  .wotd-row {
    gap: 10px !important;
    align-items: center !important;
  }
  .wotd-emoji {
    font-size: 2rem !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .wotd-en {
    font-size: 1.12rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  /* Kart içi butonların sağdan dışarı taşmasını engelle */
  .card .btn {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  /* Kurs ilerleme kartı iç kutusu daha derli toplu */
  .course-progress-summary {
    padding: 10px 12px !important;
    margin-bottom: 0 !important;
  }
  .cps-heading {
    font-size: 0.86rem !important;
  }
  .cps-sub {
    font-size: 0.72rem !important;
  }

  /* Shimeji gizle (X) butonu mobilde maskotun kulağına yakın dursun, kartların ortasında uçmasın */
  .shimeji-hide-btn {
    top: -8px !important;
    right: -6px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    line-height: 18px !important;
  }
}

@media (max-width: 768px) {
  /* Genel kart ve başlık küçültmeleri */
  .game-hub-card {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  .game-hub-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .game-hub-item {
    padding: 10px 12px !important;
  }
  .loco-target-card, .loco-rail-card, .loco-depot-card {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
  }
  .mission-unit-row {
    padding: 8px !important;
    gap: 8px !important;
  }
  .mission-unit-avatar {
    font-size: 1.8rem !important;
    width: 40px !important;
    height: 40px !important;
  }
  .mission-unit-name {
    font-size: 0.98rem !important;
  }
  .mission-unit-desc {
    font-size: 0.78rem !important;
  }
  .course-progress-card {
    padding: 10px 12px !important;
  }
}

/* ============================================================
   Minimalist & Ferah Ana Sayfa Tasarımı (v2.9.35)
   ============================================================ */
.home-page-clean {
  max-width: 600px;
  margin: 0 auto;
  padding: 14px 16px 88px;
}
.home-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.home-hero-title {
  margin: 0;
  font-size: 1.25rem !important;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.home-hero-sub {
  margin: 2px 0 0;
  font-size: 0.8rem !important;
}
.home-hero-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.home-focus-card {
  padding: 18px 18px 16px !important;
  border-radius: 20px !important;
  margin-bottom: 14px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.hfc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.hfc-title {
  margin: 0 0 4px;
  font-size: 1.2rem !important;
  font-weight: 900;
}
.hfc-desc {
  margin: 0 0 14px;
  font-size: 0.85rem !important;
  line-height: 1.4;
}
.hfc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.hfc-play-btn {
  flex: 1;
  padding: 12px 18px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-align: center;
  justify-content: center;
}
.hfc-goal-wrap {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.hfc-goal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 0.76rem;
}
.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.home-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px !important;
  border-radius: 16px !important;
  margin: 0 !important;
  text-decoration: none;
  color: var(--text);
  border: 1.5px solid var(--border) !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.home-quick-card:active {
  transform: scale(0.96);
}
.hqc-icon {
  font-size: 1.6rem;
  margin-bottom: 4px;
  line-height: 1;
}
.hqc-info b {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 1px;
}
.hqc-info span {
  font-size: 0.68rem;
  display: block;
}
.home-wotd-clean {
  padding: 12px 14px !important;
  border-radius: 16px !important;
  margin: 0 !important;
  border: 1.5px solid var(--border) !important;
}
.hwc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.hwc-body {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hwc-emoji {
  font-size: 1.8rem;
  line-height: 1;
}
.hwc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hwc-en {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.hwc-tr {
  font-size: 0.82rem;
}

@media (max-width: 480px) {
  .home-page-clean {
    padding: 10px 10px 84px;
  }
  .hfc-title {
    font-size: 1.1rem !important;
  }
  .hfc-actions .btn {
    padding: 10px 12px !important;
    font-size: 0.86rem !important;
  }
  .home-quick-grid {
    gap: 6px;
  }
  .home-quick-card {
    padding: 10px 6px !important;
  }
  .hqc-icon {
    font-size: 1.35rem;
  }
  .hqc-info b {
    font-size: 0.76rem;
  }
}

/* ============================================================
   Play Store PWA / TWA Native Mobil Standartları (v2.9.36)
   ============================================================ */

/* 1. Misafir Uyarı Banner'ı */
.guest-warning-banner {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.guest-warning-banner .gwb-text {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.guest-warning-banner .gwb-btn {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* 2. Mobil Sürükleme ve Dikey Kaydırma (Overscroll) İptali */
.shimeji-sprite-wrap,
#shimejiMascot,
.loco-wagon-wrapper,
.loco-wagon,
.coupled-wagon-chip,
.wagon-item-btn,
#depotWagonsGrid,
#coupledWagonsList,
.rail-scene-container {
  touch-action: none !important;
}

/* 3. Safe Area Çentik ve Alt Navigasyon Uyumu */
.bottom-nav,
.mobile-nav,
.menu-sheet,
.bottom-sheet {
  padding-bottom: env(safe-area-inset-bottom, 16px) !important;
}

/* Genişletilmiş Mobil Maskot Dokunma Alanı (48px görsel boyutu bozmadan 72px rahat dokunma) */
.shimeji-pet::after {
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: auto;
  z-index: 1;
}
.shimeji-sprite-wrap {
  position: relative;
  z-index: 2;
}
.shimeji-hide-btn {
  z-index: 10;
}