@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/Fredoka-Variable.ttf") format("truetype");
  font-style: normal; font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/Nunito-Variable.ttf") format("truetype");
  font-style: normal; font-weight: 200 1000; font-display: swap;
}

:root {
  --bg: #f2f3fe;
  --card: #ffffff;
  --ink: #2f2b6d;
  --ink-2: #4a4878;
  --body: #6f6d92;
  --muted: #9a98b6;
  --line: #eeedf9;
  --purple: #7c5cf0;
  --purple-d: #6a48e6;
  --purple-soft: #f2eeff;
  --green: #62bd86;
  --green-soft: #e9f6ee;
  --amber: #f5b544;
  --amber-soft: #fff5e2;
  --blue: #5b9fd8;
  --blue-soft: #e8f2fd;
  --teal: #4fb8c9;
  --teal-soft: #e5f5f8;
  --pink: #e888b4;
  --pink-soft: #fdeaf3;
  --red: #ef6b6b;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 6px 20px rgba(88, 74, 160, .07);
  --shadow-lift: 0 10px 28px rgba(88, 74, 160, .12);
}

* { box-sizing: border-box; scrollbar-color: #cfcbe6 transparent; scrollbar-width: thin; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink-2);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background:
    radial-gradient(60% 45% at 12% 6%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(50% 40% at 92% 2%, rgba(226,222,255,.75), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
h1 { font-size: 26px; line-height: 1.18; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0; }
small { display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.muted { color: var(--muted); font-size: 12px; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 14px; border-radius: 10px; background: white; }

/* ============ GİRİŞ KODU KAPISI ============ */
/* Kapı yalnızca kilitliyken görünür. Uygulama display:none yerine visibility:hidden ile
   gizlenir; böylece harita ve küre ölçülerini doğru hesaplamaya devam eder. */
.access-gate { display: none; }
.gate-locked .access-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  background: linear-gradient(160deg, #eef0ff, #e6f3fb);
  overflow: auto;
}
/* Odak kaba programla veriliyor, klavyeyle gezilmiyor: halkasi gorunmesin. */
.access-gate:focus { outline: none; }
.gate-locked .app { visibility: hidden; }
.gate-card {
  width: min(420px, 100%);
  max-height: calc(100dvh - 40px); overflow-y: auto;
  display: grid; gap: 8px;
  padding: 28px 26px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 18px 44px rgba(70, 60, 140, .18);
  text-align: left;
}
/* Tanıtım görseli: kartın üst kenarına taşar, köşeleri kartla aynı yuvarlaklıkta. */
.gate-hero {
  margin: -28px -26px 6px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--purple-soft);
}
.gate-hero img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: cover; }
.gate-kicker { color: var(--purple); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; }
.gate-card h1 { margin-bottom: 6px; font-size: 23px; line-height: 1.25; }
@media (max-width: 400px) {
  .gate-card { padding: 22px 18px; }
  .gate-hero { margin: -22px -18px 6px; }
  .gate-card h1 { font-size: 21px; }
}
.gate-text { margin-bottom: 8px; color: var(--body); font-size: 12.5px; line-height: 1.55; }
/* Mobil uygulama tanıtım listesi. */
.gate-perks { display: grid; gap: 9px; margin: 2px 0 4px; }
.gate-perks li {
  display: flex; gap: 10px; align-items: center;
  color: var(--ink-2); font-size: 13px; font-weight: 700; line-height: 1.3;
}
.gate-perks svg {
  flex: none; width: 28px; height: 28px; padding: 6px;
  border-radius: 9px;
  background: var(--purple-soft); color: var(--purple);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.gate-slogan { color: var(--purple-d); font-size: 12px; font-weight: 700; text-align: center; }
/* İki düğme eşit paylaşır; sığmadıkları anda alt alta iner. */
.gate-actions { display: grid; gap: 10px; margin-top: 10px; }
/* Google Play rozeti. Beyaz zemin: basılabilirliği kalın alt kenar, gölge ve
   basınca çöken hareket anlatır — renkli logo da tek başına dikkat çeker. */
.gate-store {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 18px;
  border: 1.5px solid #ded6ff;
  border-bottom-width: 3.5px;
  border-radius: 14px;
  background: #fff; color: var(--ink);
  box-shadow: 0 6px 16px rgba(88, 74, 160, .12);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.gate-store:hover { border-color: var(--purple); box-shadow: 0 9px 20px rgba(112, 71, 231, .18); }
.gate-store:active { transform: translateY(2px); box-shadow: none; }
.gate-store svg { flex: none; width: 27px; height: 27px; }
.gate-store span { display: grid; text-align: left; }
.gate-store small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.gate-store b { font-size: 15.5px; font-weight: 800; letter-spacing: .01em; }
/* Haritaya devam: nötr ton, rozetin önüne geçmesin ama düğme olduğu belli olsun. */
.gate-skip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: transparent; color: var(--body);
  font-size: 12.5px; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s;
}
.gate-skip:hover { border-color: #ded6ff; background: var(--purple-soft); color: var(--purple-d); }
.gate-skip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ SHELL ============ */
.app {
  display: grid;
  grid-template-columns: 222px minmax(0, 1fr);
  grid-template-rows: 74px minmax(0, 1fr);
  gap: 12px 14px;
  height: 100vh;
  padding: 14px 16px;
}
.topbar { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 14px; min-width: 0; }
.main { grid-column: 2; grid-row: 2; min-width: 0; overflow: auto; padding-right: 2px; }
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { border-radius: 6px; background: #d8d5ec; }

.card {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

/* ---- brand ---- */
.brand {
  flex: 0 0 222px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; }
.brand-mark svg { width: 40px; height: 40px; }
.brand strong { font-family: "Fredoka", sans-serif; font-size: 21px; font-weight: 600; color: var(--ink); }

/* ---- topbar stats ---- */
.topbar-stats { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.stat-card {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.stat { display: flex; align-items: center; gap: 10px; }
.stat-sep { width: 1px; height: 30px; background: var(--line); }
.stat-glyph { width: 30px; height: 30px; flex: 0 0 30px; }
.stat-card small { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; }
.stat-card b { display: block; margin-top: 1px; font-family: "Fredoka", sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.level-card { flex: 1 1 260px; min-width: 220px; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; }
.level-top { display: flex; align-items: center; gap: 7px; }
.level-pin { width: 15px; height: 15px; fill: none; stroke: var(--purple); stroke-width: 1.8; }
.level-top b { font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.level-top small { margin-left: auto; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
.coin-card b { font-size: 18px; }
.track { height: 7px; overflow: hidden; border-radius: 99px; background: #eae7f8; }
.track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9a7cf7, #7c5cf0); transition: width .4s ease; }

.round-button {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.round-button svg { width: 20px; height: 20px; fill: none; stroke: var(--purple); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.round-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.round-button.sm { width: 30px; height: 30px; flex-basis: 30px; box-shadow: none; background: var(--purple-soft); }
.round-button.sm svg { width: 15px; height: 15px; }
#sound-toggle.muted svg .sound-wave { opacity: .2; }

.profile-card {
  height: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 8px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.profile-card img { width: 40px; height: 40px; border-radius: 50%; }
.profile-card small { color: var(--muted); font-size: 10.5px; }
.profile-card b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.profile-chevron { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- sidebar ---- */
.sidebar {
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column;
  padding: 12px 11px 11px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: auto;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: background .16s;
}
.nav-item:hover { background: #f8f7fe; }
.nav-item.active { background: var(--purple-soft); }
.nav-tile {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 11px;
}
.nav-tile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t-home { color: #fff; background: linear-gradient(150deg, #a48cf8, #7c5cf0); }
.t-home svg { fill: currentColor; stroke: none; }
.t-blue { color: #5b9fd8; background: var(--blue-soft); }
.t-teal { color: #3fa7bb; background: var(--teal-soft); }
.t-green { color: #58b37c; background: var(--green-soft); }
.t-purple { color: #7c5cf0; background: var(--purple-soft); }
.t-amber { color: #e2a13a; background: var(--amber-soft); }
.t-pink { color: #dd7aa8; background: var(--pink-soft); }
.t-gold { color: #d9a13c; background: #fdf3dd; }
.t-violet { color: #8a6ef2; background: #f0ecff; }
.nav-text { min-width: 0; flex: 1; }
.nav-text b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.nav-text small { color: var(--muted); font-size: 9.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item.active .nav-text b { color: var(--purple-d); }
.nav-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 8px;
  color: #7a72ab;
  background: #f3f2fb;
  font-size: 9.5px;
  font-weight: 800;
}
.nav-badge.new { color: var(--purple-d); background: var(--purple-soft); }

.sidebar-foot { margin-top: auto; padding-top: 8px; }
.mascot-block { position: relative; }
.mascot-img { display: block; width: 100%; height: auto; }
.mascot-bubble {
  position: absolute; right: 0; top: 26%;
  max-width: 104px;
  padding: 8px 10px;
  border-radius: 12px 12px 12px 3px;
  color: #6f6a9c;
  background: #f4f1ff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
}
.level-widget { padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #dcecc8, #cfe4b6); }
.level-widget-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: #fff; }
.level-chip {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: #fff; background: linear-gradient(150deg, #9a7cf7, #7245e6);
  font-family: "Fredoka", sans-serif; font-size: 14px; font-weight: 600;
}
.level-widget-card > div { flex: 1; min-width: 0; }
.level-widget-card small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.level-widget-card b { display: block; margin: 1px 0 5px; font-size: 11px; font-weight: 800; color: var(--ink); }
.level-widget-card .track { height: 6px; }
.text-button { display: block; width: 100%; margin-top: 8px; padding: 4px; border: 0; background: none; color: var(--muted); font-size: 10px; }
.text-button:hover { color: var(--purple); }

/* ============ PAGE LAYOUT ============ */
.page { animation: rise .22s ease; }
@keyframes rise { from { transform: translateY(7px); } }
.page-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.col-main { display: grid; gap: 14px; min-width: 0; }
.col-rail { display: grid; gap: 14px; }
.card-kicker { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.eyebrow { display: inline-block; padding: 5px 11px; border-radius: 9px; color: var(--purple-d); background: var(--purple-soft); font-size: 9.5px; font-weight: 800; letter-spacing: .09em; }
.link { border: 0; background: none; color: var(--purple); font-size: 10.5px; font-weight: 800; padding: 0; }
.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.hello { color: var(--purple); font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.title-with-icon { display: flex; align-items: center; gap: 12px; }
.title-icon { width: 30px; height: 30px; fill: none; stroke: var(--amber); stroke-width: 1.6; }
.cloud-pill {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  color: var(--body);
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
.cloud { position: relative; width: 26px; height: 11px; flex: 0 0 26px; border-radius: 20px; background: #dcefff; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 2px; border-radius: 50%; background: inherit; }
.cloud::before { left: 3px; width: 11px; height: 11px; }
.cloud::after { right: 3px; width: 14px; height: 15px; }

/* buttons */
.primary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 0; border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, #8b6bf5, #7047e7);
  box-shadow: 0 6px 14px rgba(112, 71, 231, .25);
  font-size: 12.5px; font-weight: 800;
  transition: transform .15s, box-shadow .15s;
}
.primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(112, 71, 231, .3); }
.primary-button:disabled { opacity: .45; cursor: default; }
.primary-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ghost-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid #ded6ff; border-radius: 12px;
  color: var(--purple-d); background: #fff;
  font-size: 12px; font-weight: 800;
  transition: background .15s;
}
.ghost-button:hover { background: var(--purple-soft); }
.ghost-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.block { width: 100%; }

/* ============ MAP ============ */
.map-frame, .map-stage, .quiz-map { position: relative; border-radius: 18px; background: linear-gradient(180deg, #b9e6fb, #9ed9f6); overflow: hidden; }
.map-frame { padding: 12px; }
.map-chip {
  position: absolute; left: 14px; top: 14px; z-index: 4;
  padding: 6px 11px;
  border-radius: 10px;
  color: var(--ink); background: rgba(255,255,255,.94);
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  box-shadow: 0 3px 8px rgba(60,110,150,.12);
}
.map-chip.static { position: static; display: inline-block; margin-bottom: 10px; box-shadow: none; background: #eef6fd; }
.mini-map { width: 100%; aspect-ratio: 1000 / 470; }
.mini-map.tall { aspect-ratio: 1000 / 560; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #b9e6fb, #9ed9f6); }
.mini-map svg { display: block; width: 100%; height: 100%; }
.map-stage { min-height: 380px; }
/* Haritanın kendi kaydırma hareketi yok; dokunmayı tümden engellemek telefonda
   sayfayı kilitlerdi. Dikey kaydırmaya izin verilir, yakınlaştırma düğmelerle yapılır. */
#turkey-map { display: block; width: 100%; height: auto; min-height: 380px; touch-action: pan-y; }
.sea-labels text { fill: #4a94c6; fill-opacity: .8; font-size: 9px; font-weight: 900; letter-spacing: .08em; }

.province, .mini-province { fill: #fdf6e6; stroke: #ded6c2; stroke-width: .7; transition: fill .18s; }
/* Quiz sorusu bir göl, maden ya da sınır kapısıysa konumu mini haritada bu işaretle gösterilir. */
.mini-pin-ring { fill: rgba(168, 140, 247, .28); stroke: var(--purple); stroke-width: 2; animation: pin-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mini-pin-core { fill: var(--purple); }
@keyframes pin-pulse { 50% { transform: scale(1.25); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .mini-pin-ring { animation: none; } }
.province { cursor: pointer; }
.province:hover { fill: #fff0cd; stroke: #c9b78d; }
.province.solved, .mini-province.solved { fill: #b9e3c6; stroke: #86c49c; }
.province.hint { fill: #cdbcff; stroke: var(--purple); filter: url(#glow); }
.province.wrong { animation: shake .5s; }
.province:focus, .province:focus-visible { outline: none; stroke: var(--purple); stroke-width: 2; }
.answer-marker:focus, .answer-marker:focus-visible { outline: none; }
.answer-marker:focus .marker-ring { stroke: var(--purple); stroke-width: 3; }
#turkey-map:focus, #turkey-map :focus { outline: none; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.province-label, .answer-marker text { fill: #3b3776; stroke: #fdf6e6; stroke-width: 2.4; paint-order: stroke; font-size: 8px; font-weight: 900; opacity: 0; transition: opacity .2s; }
.show-labels .province-label, .province-label.solved-label, .show-labels .answer-marker text { opacity: 1; }
.answer-marker { cursor: pointer; }
.answer-marker .marker-ring { fill: #fff; stroke: var(--purple); stroke-width: 2; }
.answer-marker .marker-core { fill: var(--purple); }
.answer-marker.solved .marker-ring { stroke: var(--green); }
.answer-marker.solved .marker-core { fill: var(--green); }
.answer-marker.hint .marker-ring { stroke: #ffb43f; filter: url(#glow); }

/* Göller ve akarsular gerçek geometrileriyle çizilir; nokta işaretinin yerini şekil alır. */
.marker-hit { fill: transparent; }
.answer-marker .marker-area { fill: #a9dcf3; stroke: #4e9dc6; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .18s, stroke .18s; }
.answer-marker .marker-line { fill: none; stroke: #59aad6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .18s, stroke-width .18s; }
.answer-marker .marker-peak { fill: #e0c9a8; stroke: #a3805a; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .18s, stroke .18s; }
.answer-marker .marker-snow { fill: none; stroke: #fffaf0; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.answer-marker:hover .marker-area { fill: #7ccbee; stroke: var(--purple); }
.answer-marker:hover .marker-line { stroke: var(--purple); stroke-width: 2.6; }
.answer-marker:hover .marker-peak { fill: #f0dcbe; stroke: var(--purple); }
.answer-marker.solved .marker-area { fill: #62c8ec; stroke: var(--green); stroke-width: 1.6; }
.answer-marker.solved .marker-line { stroke: #2f9fd0; stroke-width: 2.4; }
.answer-marker.solved .marker-peak { fill: #c9a97f; stroke: var(--green); stroke-width: 1.6; }
.answer-marker.correct .marker-area, .answer-marker.correct .marker-peak { fill: var(--green); stroke: #2f8f5f; }
.answer-marker.correct .marker-line { stroke: var(--green); stroke-width: 3.4; }
.answer-marker.wrong .marker-area, .answer-marker.wrong .marker-peak { fill: #ff9d9d; stroke: #e05555; animation: shake .5s; }
.answer-marker.wrong .marker-line { stroke: #e05555; stroke-width: 3; animation: shake .5s; }
.answer-marker.hint .marker-area, .answer-marker.hint .marker-peak { stroke: #ffb43f; stroke-width: 2.4; filter: url(#glow); }
.answer-marker.hint .marker-line { stroke: #ffb43f; stroke-width: 3.4; filter: url(#glow); }
.answer-marker:focus .marker-area, .answer-marker:focus-visible .marker-area,
.answer-marker:focus .marker-peak, .answer-marker:focus-visible .marker-peak { stroke: var(--purple); stroke-width: 2.6; }
.answer-marker:focus .marker-line, .answer-marker:focus-visible .marker-line { stroke: var(--purple); stroke-width: 3.4; }
/* ---------------- dünya küresi ---------------- */
.globe-stage { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #eef6ff, #dceeff); }
#globe { display: block; width: 100%; max-width: 620px; height: auto; touch-action: none; cursor: grab; }
#globe:active { cursor: grabbing; }
#globe:focus, #globe:focus-visible { outline: none; }
#globe-rim { stroke: #4e9dc6; stroke-width: 2; }
.globe-graticule { fill: none; stroke: #ffffff; stroke-opacity: .45; stroke-width: 1; }
.globe-country { fill: #fdf6e6; stroke: #d8cdb4; stroke-width: .8; transition: fill .18s; }
.globe-country.home { fill: #ffd9a8; stroke: #d79f5c; }
.globe-country.target { fill: #f3ecd6; }
.globe-country.solved { fill: #b9e3c6; stroke: #86c49c; }
/* Ülke adları arka plan bilgisidir: soru işaretçilerinden daha sönük ve incedir.
   Kara dolgusuyla aynı renkteki dış hat, yazıyı sınır çizgilerinin üzerinde okunur tutar. */
.globe-country-label { fill: #6f6790; stroke: #fdf6e6; stroke-width: 2.4; paint-order: stroke; font-weight: 800; letter-spacing: .1px; pointer-events: none; }
.globe-country-label.home { fill: #a2560d; stroke: #ffd9a8; font-weight: 900; }
.globe-country-label.solved { fill: #2f8f5f; stroke: #b9e3c6; }
.globe-line { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.globe-line.parallel { stroke: #ff8f5e; }
.globe-line.meridian { stroke: #9d7bf5; }
.globe-line.faint { stroke-opacity: .28; stroke-width: 1.4; }
.globe-line.solved { stroke: var(--green); }
.globe-line.correct { stroke: var(--green); stroke-width: 4; filter: url(#globe-glow); }
.globe-line.wrong { stroke: #e05555; animation: shake .5s; }
.globe-line.hint { stroke: #ffb43f; stroke-width: 4; filter: url(#globe-glow); }
.globe-marker { cursor: pointer; }
.globe-marker .globe-marker-ring { fill: #fff; stroke: var(--purple); stroke-width: 2.2; }
.globe-marker .globe-marker-core { fill: var(--purple); }
.globe-marker:hover .globe-marker-ring { fill: #efe9ff; }
.globe-marker.solved .globe-marker-ring { stroke: var(--green); }
.globe-marker.solved .globe-marker-core { fill: var(--green); }
.globe-marker.correct .globe-marker-ring { fill: var(--green); stroke: #2f8f5f; filter: url(#globe-glow); }
.globe-marker.correct .globe-marker-core { fill: #fff; }
.globe-marker.wrong .globe-marker-ring { fill: #ff9d9d; stroke: #e05555; animation: shake .5s; }
.globe-marker.hint .globe-marker-ring { stroke: #ffb43f; stroke-width: 3.2; filter: url(#globe-glow); }
.globe-marker text { fill: #2f2b6d; stroke: #fdf6e6; stroke-width: 2.6; paint-order: stroke; font-size: 11px; font-weight: 900; opacity: 0; transition: opacity .2s; pointer-events: none; }
#globe.show-labels .globe-marker text, .globe-marker.solved text { opacity: 1; }
.globe-line-label { fill: #b5541f; stroke: #fff; stroke-width: 3; paint-order: stroke; font-size: 11px; font-weight: 900; opacity: 0; transition: opacity .2s; pointer-events: none; }
.globe-line-label.solved { fill: #2f8f5f; opacity: 1; }
#globe.show-labels .globe-line-label { opacity: 1; }

.map-legend { display: flex; align-items: center; gap: 14px; color: var(--body); font-size: 10.5px; font-weight: 700; }
.map-legend.floating { position: absolute; left: 14px; bottom: 14px; z-index: 4; padding: 7px 13px; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(60,110,150,.12); }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.green { background: #7ec99a; }
.dot.purple { background: var(--purple); }
.status-text { color: var(--purple-d); font-weight: 800; letter-spacing: .05em; font-size: 9.5px; }
.map-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 8px 10px 2px; }
.map-foot .map-legend { padding: 7px 13px; border-radius: 12px; background: rgba(255,255,255,.94); }
.map-tooltip {
  position: absolute; z-index: 8; padding: 5px 10px; border-radius: 8px;
  color: #fff; background: rgba(47,43,109,.92); font-size: 11px; font-weight: 700;
  pointer-events: none; opacity: 0; transform: translate(-50%, -130%); transition: opacity .12s;
}
.map-tooltip.visible { opacity: 1; }

/* ============ HOME ============ */
.hero-card h1 { font-size: 28px; }
.home-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-row .card { display: flex; flex-direction: column; gap: 9px; }
.journey-img { width: 100%; border-radius: 12px; }
.journey-line { display: flex; align-items: baseline; justify-content: space-between; }
.journey-line b { font-size: 13px; color: var(--ink); }
.journey-line span { color: var(--purple); font-size: 12px; font-weight: 800; }
.home-row .primary-button { margin-top: auto; }
.badge-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.badge-mini { text-align: center; }
.badge-mini img { width: 100%; border-radius: 12px; }
.badge-mini.locked img { filter: grayscale(1) opacity(.45); }
.badge-mini b { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink); }
.badge-mini small { color: var(--muted); font-size: 9px; line-height: 1.3; }
.suggest-list { display: grid; gap: 8px; }
.suggest-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 13px; background: #f9f8ff; }
.suggest-list .s-tile { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; }
.suggest-list .s-tile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.suggest-list b { display: block; font-size: 11.5px; color: var(--ink); }
.suggest-list small { color: var(--muted); font-size: 10px; }
.suggest-list .go { width: 28px; height: 28px; flex: 0 0 28px; margin-left: auto; display: grid; place-items: center; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(150deg, #9a7cf7, #7245e6); }
.suggest-list .go svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }

.pill-count { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 9px; color: var(--purple-d); background: var(--purple-soft); font-size: 10px; font-weight: 800; }
.pill-count svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.quest-card { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(150deg, #e9f4ff, #eae6ff); }
.quest-card img { width: 88px; height: auto; align-self: center; border-radius: 12px; }
.quest-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.quest-card b { font-family: "Fredoka", sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); }
.quest-card small { color: var(--body); font-size: 11px; }
.quest-card .primary-button { margin-top: 6px; }
.quest-card.small img { width: 66px; }

.streak-head { display: flex; align-items: center; gap: 12px; }
.streak-glyph { width: 40px; height: 40px; flex: 0 0 40px; }
.streak-head b { display: block; font-family: "Fredoka", sans-serif; font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1; }
.streak-head small { color: var(--muted); font-size: 11px; }
.streak-head.big .streak-glyph { width: 52px; height: 52px; flex-basis: 52px; }
.week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; text-align: center; }
.week-row i { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; background: #efedf9; color: #fff; font-style: normal; font-size: 13px; }
.week-row .on i { background: var(--green); }
.week-row small { margin-top: 4px; color: var(--muted); font-size: 9.5px; font-weight: 700; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.quick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--body); font-size: 9.5px; font-weight: 700; text-align: center; transition: border-color .15s, transform .15s; }
.quick:hover { border-color: #d9d1ff; transform: translateY(-2px); }
.q-tile { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }
.q-tile svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.invite-card { display: flex; align-items: center; gap: 8px; background: linear-gradient(150deg, #f4efff, #eef2ff); }
.invite-card h3 { color: var(--purple-d); }
.invite-card p { margin: 4px 0 10px; color: var(--body); font-size: 11px; }
.invite-card img { width: 108px; align-self: flex-end; }

/* ============ STUDY ============ */
.study-cols { grid-template-columns: minmax(0, 1fr) 316px; }
.study-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.study-head h1 { margin-top: 8px; }
.study-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--body); font-size: 11px; font-weight: 700; }
.switch input { display: none; }
.switch span { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #e7e4f4; transition: background .18s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #c2bcda; transition: transform .18s, background .18s; }
.switch input:checked + span { background: #d7c9ff; }
.switch input:checked + span::after { background: var(--purple); transform: translateX(14px); }
.zoom-group { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; }
.zoom-group button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; }
.zoom-group button:hover { background: var(--purple-soft); }
.zoom-group svg { width: 15px; height: 15px; fill: none; stroke: var(--body); stroke-width: 2; stroke-linecap: round; }
.zoom-group span { min-width: 34px; color: var(--body); font-size: 10.5px; font-weight: 800; text-align: center; }

.mode-chips, .chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  color: var(--body); background: #fff;
  font-size: 11.5px; font-weight: 800;
  transition: color .15s, background .15s, border-color .15s;
}
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chip span { color: var(--muted); font-size: 9.5px; }
.chip:hover { border-color: #ded6ff; background: #faf8ff; }
.chip.active { color: #fff; border-color: transparent; background: linear-gradient(180deg, #8b6bf5, #7047e7); }
.chip.active span { color: rgba(255,255,255,.75); }

.task-card { display: flex; flex-direction: column; gap: 10px; }
.task-card h2 { font-size: 30px; letter-spacing: -.02em; }
.round-progress { display: flex; align-items: center; gap: 10px; color: var(--body); font-size: 11px; font-weight: 800; }
.round-progress .track { flex: 1; height: 6px; }
.puzzle-piece {
  position: relative;
  padding: 14px 10px 10px;
  border: 1.5px dashed #ded6ff; border-radius: 16px;
  background: #faf8ff;
  /* Dokunarak sürüklerken tarayıcı sayfayı kaydırmaya başlamamalı; yoksa hareket
     pointercancel ile kesilir ve parça hiç sürüklenemez. */
  touch-action: none;
  transition: border-color .15s, background .15s;
}
.puzzle-piece:hover { border-color: var(--purple); background: #f4efff; }
.puzzle-piece:disabled { opacity: .55; cursor: default; }
#piece-preview { display: block; width: 100%; height: 150px; overflow: visible; }
#piece-preview path { fill: var(--mode-accent, #8b6bf5); stroke: #fff; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 5px 6px rgba(90,64,180,.22)); }
#piece-preview .piece-symbol { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 5; stroke-linecap: round; filter: none; }
#piece-preview circle { fill: var(--mode-accent, #8b6bf5); }
.puzzle-piece small { margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.drag-ghost { position: fixed; z-index: 60; padding: 7px 13px; border-radius: 11px; color: #fff; background: var(--purple); font-size: 12px; font-weight: 800; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.drag-ghost.visible { opacity: 1; }
.drag-ghost.over-map { background: var(--green); }

.feedback-card { display: none; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: var(--green-soft); }
.feedback-card.visible { display: flex; }
.feedback-card.error { background: #fdeced; }
.feedback-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 15px; font-weight: 800; }
.feedback-card.error .feedback-icon { background: var(--red); }
.feedback-card b { font-size: 12px; color: var(--ink); }
.feedback-card p { color: var(--body); font-size: 10.5px; }
.fact-card { display: none; padding: 11px 13px; border-radius: 13px; background: var(--amber-soft); }
.fact-card.visible { display: block; }
.fact-card span { color: #c68a1c; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.fact-card p { margin-top: 4px; color: #7a6a4a; font-size: 11px; line-height: 1.45; }
.task-actions { display: grid; gap: 8px; margin-top: auto; }
#next-button { display: none; }
#next-button.visible { display: inline-flex; }
.accuracy { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.accuracy b { color: var(--purple-d); font-size: 13px; }
.task-card > .track { height: 5px; }

/* ============ REGIONS ============ */
.region-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.region-node { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; text-align: center; }
.region-node img { width: 74px; height: 74px; border-radius: 50%; border: 3px solid transparent; transition: border-color .18s, transform .18s; }
.region-node.active img { border-color: var(--purple); transform: scale(1.05); }
.region-node.locked img { filter: grayscale(.75) opacity(.6); }
.region-node i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #c9c5df; font-style: normal; font-size: 11px; font-weight: 800; }
.region-node.done i, .region-node.active i { background: var(--purple); }
.region-node b { font-size: 11px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.region-detail-row { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; }
.region-detail-row .card:first-child { display: flex; flex-direction: column; }
.detail-kicker { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.info-box { margin-top: 10px; padding: 11px 13px; border-radius: 13px; background: #f9f8ff; }
.info-box p { color: var(--body); font-size: 11.5px; line-height: 1.5; }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.fact-grid div { padding: 9px 10px; border-radius: 12px; background: #f6f4ff; }
.fact-grid small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.fact-grid b { display: block; margin-top: 3px; font-size: 13px; color: var(--ink); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-list a, .chip-list span { padding: 5px 11px; border-radius: 9px; color: var(--body); background: #f4f3fb; font-size: 11px; font-weight: 700; }
.chip-list a:hover { color: var(--purple-d); background: var(--purple-soft); }
.progress-row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 6px; color: var(--body); font-size: 11.5px; font-weight: 700; }
.progress-row b { color: var(--purple); font-size: 15px; }
.mini-list { display: grid; gap: 7px; margin-top: 12px; }
.mini-list li { display: flex; align-items: center; gap: 9px; color: var(--body); font-size: 11.5px; font-weight: 700; }
.mini-list li b { margin-left: auto; color: var(--ink); }
.mini-list svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chest-card { display: flex; align-items: center; gap: 10px; background: linear-gradient(150deg, #fff6e5, #fdf0ff); }
.chest-card img { width: 110px; }
.chest-card .track { margin-top: 8px; height: 6px; }
.chest-card small { margin-top: 5px; }

/* ============ PROVINCE DETAIL ============ */
.detail-card { padding: 20px 22px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--body); font-size: 11.5px; font-weight: 800; }
.back-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.detail-title { display: flex; align-items: center; gap: 12px; margin: 12px 0 3px; }
.detail-title h1 { font-size: 38px; }
.fav-toggle { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--purple-soft); }
.fav-toggle svg { width: 19px; height: 19px; fill: none; stroke: var(--purple); stroke-width: 1.8; }
.fav-toggle.on svg { fill: var(--purple); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 16px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; }
.detail-hero { border-radius: 16px; overflow: hidden; }
.detail-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spec-list { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #fbfaff; }
.spec-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.spec-list .s-ico { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 8px; }
.spec-list .s-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.spec-list span { color: var(--body); font-weight: 700; }
.spec-list b { margin-left: auto; color: var(--ink); font-weight: 800; }
.detail-map { padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #b9e6fb, #9ed9f6); }
.detail-map h3 { margin-bottom: 8px; font-size: 13px; }
.detail-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.places-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.places-row figure { margin: 0; text-align: center; }
.places-row img { width: 100%; border-radius: 12px; }
.places-row figcaption { margin-top: 5px; color: var(--body); font-size: 10px; font-weight: 700; }
.didyouknow { background: linear-gradient(150deg, #f3efff, #eaf3ff); }
.detail-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.big-action { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border: 0; border-radius: 16px; text-align: left; }
.big-action svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.big-action b { display: block; font-family: "Fredoka", sans-serif; font-size: 16px; font-weight: 600; }
.big-action small { font-size: 10.5px; opacity: .8; }
.big-action.purple { color: #fff; background: linear-gradient(180deg, #8b6bf5, #7047e7); }
.big-action.white { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.big-action.green { color: #fff; background: linear-gradient(180deg, #79c896, #5faf7c); }

/* ============ QUIZ ============ */
.quiz-meters { display: flex; gap: 10px; }
.meter { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 16px; background: #fbfaff; border: 1px solid var(--line); }
.meter svg { width: 24px; height: 24px; fill: none; stroke: var(--purple); stroke-width: 1.7; }
.meter b { display: block; font-family: "Fredoka", sans-serif; font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1; }
.meter small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.quiz-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; }
.quiz-map { padding: 12px; }
.hint-pill { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 0; border-radius: 12px; color: var(--body); background: rgba(255,255,255,.94); font-size: 10.5px; font-weight: 700; }
.hint-pill svg { width: 14px; height: 14px; fill: none; stroke: var(--amber); stroke-width: 1.8; }
.hint-pill:disabled { opacity: .45; cursor: default; }
.quiz-question { margin-bottom: 12px; font-family: "Fredoka", sans-serif; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.quiz-options { display: grid; gap: 9px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; text-align: left;
  transition: border-color .15s, background .15s, transform .15s;
}
.quiz-option:hover:not(:disabled) { border-color: #ded6ff; transform: translateX(2px); }
.quiz-option i { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 10px; background: #f3f2fb; color: var(--body); font-style: normal; font-size: 13px; font-weight: 800; }
.quiz-option b { font-size: 15px; font-weight: 800; color: var(--ink); }
.quiz-option.correct { border-color: #a8dcbc; background: var(--green-soft); }
.quiz-option.correct i { color: #fff; background: var(--green); }
.quiz-option.wrong { border-color: #f5c0c0; background: #fdeced; }
.quiz-option.wrong i { color: #fff; background: var(--red); }
.quiz-result { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 18px; border-radius: 16px; background: var(--green-soft); }
.quiz-result[hidden] { display: none; }
.quiz-result.bad { background: #fdeced; }
.result-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.quiz-result.bad .result-icon { background: var(--red); }
.result-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.quiz-result b { font-family: "Fredoka", sans-serif; font-size: 18px; color: #3f8a5f; }
.quiz-result.bad b { color: #c04c4c; }
.quiz-result p { color: var(--body); font-size: 11.5px; }
.result-rewards { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.reward { padding: 7px 12px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; }
.reward.gold { background: linear-gradient(180deg, #ffe6a8, #ffd679); color: #8a6516; }
.result-rewards .primary-button { padding: 8px 16px; font-size: 12px; }
.quiz-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.quiz-steps > span:first-child { color: var(--body); font-size: 11px; font-weight: 800; margin-right: 4px; }
.step { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f1effb; color: var(--muted); font-size: 11px; font-weight: 800; }
.step.done { color: #fff; background: var(--green); }
.step.now { color: #fff; background: var(--purple); }
.cheer-card { display: flex; align-items: center; gap: 8px; background: linear-gradient(150deg, #f6f1ff, #eef4ff); }
.cheer-card h3 { color: var(--purple-d); }
.cheer-card p { margin-top: 5px; color: var(--body); font-size: 11px; }
.cheer-card img { width: 96px; flex: 0 0 96px; align-self: flex-end; }
.cheer-card > div { flex: 1; min-width: 0; }
.invite-card > div, .chest-card > div, .goal-box > div:first-child { flex: 1; min-width: 0; }
.invite-card img, .chest-card img { flex: 0 0 auto; }
.difficulty { display: grid; gap: 8px; margin-top: 10px; }
.difficulty button { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: left; }
.difficulty button.active { border-color: #cfc3ff; background: #faf8ff; }
.difficulty b { display: block; font-size: 12.5px; color: var(--ink); }
.difficulty small { color: var(--muted); font-size: 10px; }
.face { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; }
.face.easy { background: var(--green-soft); color: #4e9a6f; }
.face.normal { background: var(--purple-soft); color: var(--purple); }
.face.hard { background: #fdeced; color: var(--red); }

/* ============ BADGES ============ */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; }
.kpi svg { width: 32px; height: 32px; flex: 0 0 32px; }
.kpi small { color: var(--muted); font-size: 10px; font-weight: 700; }
.kpi b { display: block; font-family: "Fredoka", sans-serif; font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.kpi .note { color: var(--muted); font-size: 9.5px; }
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.badge-item { padding: 14px 12px; border-radius: 16px; background: var(--green-soft); text-align: center; }
.badge-item.locked { background: #f7f6fc; }
.badge-item img { width: 92px; }
.badge-item.locked img { filter: grayscale(1) opacity(.5); }
.badge-item b { display: block; margin-top: 7px; font-size: 13px; color: var(--ink); }
.badge-item p { margin-top: 3px; color: var(--body); font-size: 10.5px; line-height: 1.35; }
.badge-item .track { height: 6px; margin-top: 9px; }
.badge-item .meta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.badge-item .meta svg { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.next-badge { text-align: center; }
.next-badge img { width: 118px; }
.next-badge b { display: block; margin-top: 8px; font-family: "Fredoka", sans-serif; font-size: 17px; color: var(--ink); }
.next-badge p { margin-top: 3px; color: var(--body); font-size: 11px; }
.next-badge .track { margin-top: 10px; }
.next-badge .count { margin-top: 6px; color: var(--purple); font-size: 11px; font-weight: 800; }
.shelf { display: block; width: 100%; border-radius: 14px; }
.note { margin-top: 9px; padding: 9px 11px; border-radius: 11px; background: var(--amber-soft); color: #8a6d3a; font-size: 10.5px; font-weight: 700; }

/* ============ PROFILE ============ */
.profile-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
.profile-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 16px; text-align: center; }
.profile-box img { width: 108px; height: 108px; border-radius: 50%; background: #eef2fb; }
.profile-box > b { margin-top: 6px; font-family: "Fredoka", sans-serif; font-size: 19px; font-weight: 600; color: var(--ink); }
.level-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; color: var(--ink); font-size: 12px; font-weight: 800; }
.profile-box .track { width: 100%; }
.profile-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.profile-mini > div { display: flex; align-items: center; gap: 8px; text-align: left; }
.profile-mini svg { width: 24px; height: 24px; flex: 0 0 24px; }
.profile-mini small { color: var(--muted); font-size: 9.5px; }
.profile-mini b { font-size: 13px; color: var(--ink); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; }
.stat-tile { padding: 14px 15px; border: 1px solid var(--line); border-radius: 16px; }
.stat-tile small { color: var(--body); font-size: 11px; font-weight: 700; }
.stat-tile b { display: block; margin-top: 6px; font-family: "Fredoka", sans-serif; font-size: 26px; font-weight: 600; color: var(--purple); }
.stat-tile .sub { margin-top: 8px; color: var(--muted); font-size: 10px; }
.stat-tile .track { height: 6px; margin-top: 8px; }
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
.cat { padding: 12px 10px; border-radius: 16px; text-align: center; }
.cat img { width: 46px; height: 46px; border-radius: 12px; }
.cat-ico { width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 12px; }
.cat-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cat b { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink); }
.ring { position: relative; width: 54px; height: 54px; margin: 8px auto 0; }
.ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ring .bg { stroke: rgba(255,255,255,.75); }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--ink); }
.cat small { margin-top: 5px; color: var(--body); font-size: 10px; font-weight: 700; }
.goal-box { display: flex; gap: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(150deg, #fff6e6, #fdeff5); }
.goal-box > div { flex: 1; min-width: 0; }
.goal-box b { display: block; margin: 4px 0 9px; font-size: 13px; color: var(--ink); }
.goal-box img { width: 74px; align-self: flex-end; }
.goal-box .track { height: 6px; }
.goal-box small { color: var(--muted); font-size: 10px; }
.goal-box > div > small:first-child { color: var(--body); font-size: 10.5px; font-weight: 800; }
.fav-row { display: flex; align-items: center; gap: 11px; margin-top: 10px; }
.fav-row img { width: 54px; height: 54px; border-radius: 14px; }
.fav-row b { display: block; font-family: "Fredoka", sans-serif; font-size: 16px; color: var(--ink); }
.fav-row small { color: var(--body); font-size: 10.5px; }

/* ============ FLASHCARDS ============ */
.flash-wrap { display: flex; align-items: center; gap: 14px; }
.flash-nav {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff;
  transition: border-color .15s, transform .15s;
}
.flash-nav:hover { border-color: #ded6ff; transform: scale(1.06); }
.flash-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--purple); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flashcard { flex: 1; min-width: 0; height: 330px; perspective: 1400px; cursor: pointer; }
.flash-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4, .1, .2, 1); }
.flashcard.flipped .flash-inner { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 26px;
  border-radius: 22px;
  backface-visibility: hidden;
  overflow: hidden;
  text-align: center;
}
.flash-face.front { background: linear-gradient(150deg, #f3efff, #e9f1ff); border: 1.5px solid #e2dbfa; }
.flash-face.back { transform: rotateY(180deg); background: linear-gradient(150deg, #fffaf0, #fff4e4); border: 1.5px solid #f2e5cd; justify-content: flex-start; }
.flash-deck-tag { padding: 5px 12px; border-radius: 9px; color: var(--purple-d); background: rgba(255,255,255,.8); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; }
.flash-face h2 { font-size: 32px; line-height: 1.15; }
.flash-face .hint { color: var(--muted); font-size: 11.5px; }
.flash-shape { width: 150px; height: 108px; }
.flash-shape path { fill: #a58ff2; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 5px 7px rgba(90,64,180,.2)); }
.flash-face.back h3 { margin-bottom: 4px; font-size: 21px; }
.flash-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.flash-meta span { padding: 5px 11px; border-radius: 9px; color: #7a6a4a; background: rgba(255,255,255,.85); font-size: 10.5px; font-weight: 800; }
.flash-note { max-width: 520px; color: #6c6489; font-size: 13.5px; line-height: 1.6; }
.flash-state { position: absolute; right: 16px; top: 16px; padding: 5px 11px; border-radius: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; }
.flash-state.known { color: #3f8a5f; background: var(--green-soft); }
.flash-state.review { color: #c07a2a; background: var(--amber-soft); }
.flash-actions { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; margin-top: 16px; }
.ghost-button.known { color: #4e9a6f; border-color: #b6dfc6; }
.ghost-button.known:hover { background: var(--green-soft); }
.ghost-button.again { color: #c07a2a; border-color: #f0dcb4; }
.ghost-button.again:hover { background: var(--amber-soft); }
.flash-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--body); font-size: 11.5px; font-weight: 800; }
.flash-progress .track { flex: 1; height: 6px; }
.deck-stats { display: grid; gap: 8px; margin-top: 10px; }
.deck-stats div { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: #f9f8ff; font-size: 11.5px; font-weight: 700; color: var(--body); }
.deck-stats i { width: 10px; height: 10px; border-radius: 50%; font-style: normal; }
.deck-stats i.ok { background: var(--green); }
.deck-stats i.rv { background: var(--amber); }
.deck-stats i.nw { background: #d3cfe8; }
.deck-stats b { margin-left: auto; color: var(--ink); }
.review-actions { display: grid; gap: 8px; margin-top: 12px; }
.tip-card { display: flex; align-items: center; gap: 8px; background: linear-gradient(150deg, #f6f1ff, #eef4ff); }
.tip-card > div { flex: 1; min-width: 0; }
.tip-card h3 { color: var(--purple-d); }
.tip-card p { margin-top: 6px; color: var(--body); font-size: 11.5px; line-height: 1.55; }
.tip-card img { width: 88px; flex: 0 0 88px; align-self: flex-end; }
.deck-empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 13px; }

/* ============ TEKRAR & YANLIŞLARIM ============ */
.review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 14px; }
.review-stats .kpi svg { fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Genel .note kuralı amber bir etiket çiziyor; buradaki notlar cümle olduğu için düz metin kalmalı. */
.review-stats .kpi .note { margin-top: 2px; padding: 0; background: none; font-weight: 600; }
.review-list { display: grid; gap: 9px; margin-top: 14px; }
.review-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; }
/* Bugün tekrar zamanı gelen satırlar listede ilk bakışta ayırt edilmeli. */
.review-row.due { border-color: #e7ddff; background: var(--purple-soft); }
.review-box {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border-radius: 10px; background: #f1effb; color: var(--purple-d);
  font-size: 12px; font-weight: 800;
}
.review-row.due .review-box { color: #fff; background: var(--purple); }
.review-text { display: grid; gap: 2px; min-width: 0; }
.review-text b { font-size: 13.5px; color: var(--ink); }
.review-text small { color: var(--muted); font-size: 10.5px; }
.review-wrong { margin-left: auto; color: var(--body); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.ghost-button.sm { padding: 7px 14px; font-size: 11.5px; }
.review-empty { padding: 22px 4px; color: var(--muted); font-size: 12.5px; text-align: center; }
@media (max-width: 1250px) { .review-stats { grid-template-columns: 1fr; } }

/* ============ ACTIVITIES ============ */
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.activity { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; }
.activity .a-tile { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; }
.activity .a-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.activity b { font-size: 14px; color: var(--ink); }
.activity p { color: var(--body); font-size: 11.5px; line-height: 1.5; }
.activity .ghost-button { margin-top: auto; }

/* ============ MISC ============ */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 70;
  padding: 11px 20px; border-radius: 13px;
  color: #fff; background: rgba(47,43,109,.95);
  font-size: 12.5px; font-weight: 800;
  transform: translate(-50%, 18px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.confetti-layer { position: fixed; inset: 0; z-index: 65; overflow: hidden; pointer-events: none; }
.confetti-layer i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: fall 1.5s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: 0; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1500px) {
  .page-cols, .study-cols { grid-template-columns: minmax(0, 1fr) 286px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail-map { grid-column: 1 / -1; }
}
@media (max-width: 1250px) {
  /* Dar ekranda tek sütuna inildiği için ızgaraya gerek kalmıyor. Üstelik ızgarada
     kalmak zararlı: "auto" satır yüksekliği, sarmalayan bir flex kapsayıcısını
     max-content genişlikte ölçer; üst çubuk o genişlikte tek satıra sığıp 74px
     hesaplanır, gerçek genişlikte ise sarıp taşar ve menünün altında kalırdı. */
  .app { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
  .topbar, .sidebar, .main { grid-column: auto; grid-row: auto; }
  .brand { flex-basis: 190px; }
  /* Izgara hücresi varsayılan olarak içeriği kadar genişler; min-width olmadan yatay
     kaydırma yerine sayfanın tamamı taşardı. */
  .sidebar { grid-column: 1; grid-row: 2; min-width: 0; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; }
  .nav { flex-direction: row; }
  .nav-item { flex: 0 0 auto; flex-direction: column; min-width: 96px; padding: 8px; text-align: center; }
  .nav-text small, .nav-badge, .sidebar-foot { display: none; }
  .main { grid-column: 1; grid-row: 3; overflow: visible; }
  .page-cols, .study-cols, .region-detail-row, .quiz-body { grid-template-columns: minmax(0, 1fr); }
  .home-row, .kpi-row, .badge-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-row, .detail-grid, .detail-bottom, .detail-actions { grid-template-columns: minmax(0, 1fr); }
  .region-track { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
}
@media (max-width: 820px) {
  .app { padding: 10px; }
  .topbar { flex-wrap: wrap; height: auto; }
  .brand { flex-basis: 100%; height: 60px; }
  .topbar-stats { flex-wrap: wrap; }
  /* Üst çubuk sarınca kartlardaki height:100% her kartı kapsayıcının tamamı kadar
     uzatıp alt alta yığıyordu; dar ekranda içerik yüksekliği kullanılır. */
  .stat-card, .profile-card { height: auto; padding: 12px 16px; }
  .level-card { flex-basis: 100%; padding: 10px 16px; }
  .hero-head, .study-head { flex-direction: column; }
  .study-head > div:first-child { width: 100%; }
  .cloud-pill { align-self: stretch; }
  .home-row, .kpi-row, .badge-grid, .stat-grid, .quick-grid, .region-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge-strip, .places-row, .fact-grid, .detail-bottom, .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 14px 15px; }
  h1 { font-size: 22px; }
  .task-card h2 { font-size: 25px; overflow-wrap: anywhere; }
  /* Harita 2:1 oranında; dar ekranda 380px'lik taban yüksekliği boş mavi alan bırakıyordu. */
  .map-stage, #turkey-map { min-height: 300px; }
}

/* ---- telefon ---- */
@media (max-width: 560px) {
  .app { padding: 8px; gap: 10px; }
  .card { padding: 13px 14px; }

  /* Üst çubuk alt alta beş karta bölününce ekranın yarısını yiyordu; telefonda
     iki karta bir satır düşecek şekilde sıkıştırılır. */
  .brand { height: 52px; padding: 0 14px; }
  .brand-mark, .brand-mark svg { width: 32px; height: 32px; }
  .brand strong { font-size: 18px; }
  .topbar { gap: 8px; }
  .topbar-stats { gap: 8px; }
  .stat-card { flex: 1 1 0; min-width: 0; padding: 9px 11px; gap: 8px; }
  .stat-card .stat { min-width: 0; }
  .stat-glyph { width: 24px; height: 24px; flex-basis: 24px; }
  .stat-card b { font-size: 15px; }
  .stat-card small { letter-spacing: .04em; }
  .level-card { flex: 1 1 100%; }
  .profile-card { flex: 1 1 0; min-width: 0; padding: 7px 10px; }
  .round-button { width: 40px; height: 40px; flex-basis: 40px; }
  h1 { font-size: 20px; }
  .task-card h2 { font-size: 22px; }
  /* Uzun metinli kartlar tek sütuna iner; görsel ve sayı döşemeleri iki sütunda okunur kalır. */
  .home-row, .kpi-row, .detail-bottom { grid-template-columns: minmax(0, 1fr); }
  .badge-grid, .stat-grid, .badge-strip, .places-row, .fact-grid, .cat-grid, .region-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-stage, #turkey-map { min-height: 240px; }
  .globe-stage { min-height: 320px; }

  /* Dokunma hedefleri parmakla vurulabilecek boyuta çıkar. */
  .chip { padding: 10px 14px; font-size: 12px; }
  .quiz-option { padding: 12px 13px; }
  .zoom-group button { width: 36px; height: 36px; }
  .zoom-group svg { width: 17px; height: 17px; }
  .nav-item { min-width: 72px; padding: 6px 5px; gap: 4px; }
  .nav-tile { width: 28px; height: 28px; flex-basis: 28px; }
  .nav-tile svg { width: 17px; height: 17px; }
  .sidebar { padding: 8px; }
  .review-row { flex-wrap: wrap; }
  .review-wrong { margin-left: 0; }
  .review-row .ghost-button { margin-left: auto; }

  /* 9–10px'lik yazılar telefonda okunmuyor. */
  .map-chip, .puzzle-piece small, .stat-card small, .kpi small, .kpi .note,
  .chip span, .review-text small, .muted { font-size: 11px; }
  .sea-labels text { font-size: 12px; }
}