/* Mobil-öncelikli temel stil. Önce dar ekran kuralları yazılır,
   masaüstü genişletmeleri en altta min-width media query'leriyle eklenir. */

* {
  box-sizing: border-box;
}

/* ===== RETRO TEMA =====
   Krem "kâğıt" zemin, koyu mürekkep kenarlık + sert (blur'suz) gölge, doygun
   "sticker" renkleri, yuvarlak retro yazı tipi (Baloo 2 -- Türkçe dahil tüm dillerin harflerini tam destekliyor). Tüm bileşenler bu
   token'lara bağlı; kategori/sticker renklerinde yazı HER İKİ temada da koyu
   mürekkep (--sticker-ink), koyu mod sadece zemin/kart/kenarlığı değiştirir. */
:root {
  --sticker-ink: #2b2240;
  --ink: #2b2240;
  --brand: #2fcf95;
  --brand-dark: #1fb383;
  --brand-fg: #0b7a50;
  --accent: #ffc83d;
  --text: #2b2240;
  --muted: #6b617f;
  --border: #2b2240;
  --bg-soft: #f8e6b8;
  --surface: #fff3d6;
  --card: #fffaf0;
  --dots: rgba(43, 34, 64, 0.09);
  --danger: #ff5b3d;
  --danger-fg: #c93a1e;
  --success: #1fa874;
  --feedback-correct-bg: #b8f0cf;
  --feedback-wrong-bg: #ffc4b3;

  --cat-teal-bg: #86e0c3;   --cat-teal-fg: var(--sticker-ink);
  --cat-blue-bg: #8fcff5;   --cat-blue-fg: var(--sticker-ink);
  --cat-amber-bg: #ffd25e;  --cat-amber-fg: var(--sticker-ink);
  --cat-purple-bg: #c8b5ff; --cat-purple-fg: var(--sticker-ink);
  --cat-coral-bg: #ffa386;  --cat-coral-fg: var(--sticker-ink);
  --cat-pink-bg: #ffadc9;   --cat-pink-fg: var(--sticker-ink);
  --cat-gray-bg: #e6dcc4;   --cat-gray-fg: var(--sticker-ink);

  --page-bg: #efd9a6;
  --gutter: 16px;
  --shadow-card: 3px 3px 0 var(--ink);
  --chip-overlay-bg: rgba(255, 255, 255, 0.55);
}

/* Koyu mod: sistem temasını takip eder (data-theme="light" ise ezilir);
   [data-theme="dark"] elle seçileni her koşulda zorlar. İKİ blok senkron tutulmalı. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #05030d;
    --text: #f6ebd0;
    --muted: #b3a8d0;
    --border: #05030d;
    --bg-soft: #2f2556;
    --surface: #181230;
    --card: #261e46;
    --dots: rgba(255, 255, 255, 0.05);
    --brand-fg: #5de8b0;
    --danger-fg: #ff8a6e;
    --page-bg: #0c0820;
  }
}

:root[data-theme="dark"] {
  --ink: #05030d;
  --text: #f6ebd0;
  --muted: #b3a8d0;
  --border: #05030d;
  --bg-soft: #2f2556;
  --surface: #181230;
  --card: #261e46;
  --dots: rgba(255, 255, 255, 0.05);
  --brand-fg: #5de8b0;
  --danger-fg: #ff8a6e;
  --page-bg: #0c0820;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Kısa sayfalarda scrollbar olmayıp uzun sayfalarda çıkması, sayfalar
     arası geçişte içeriğin (ve sabit header'ın) birkaç piksel kayıp
     "zıplamasına" sebep oluyordu -- scrollbar alanı her zaman ayrılır. */
  scrollbar-gutter: stable;
  /* Sadece masaüstünde (body max-width'e ulaşınca) app "çerçevesinin"
     dışında görünen zemin -- mobilde body zaten tam genişlik olduğu için
     hiç görünmez. */
  background: var(--page-bg);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 0 84px;
  color: var(--text);
  /* Header + content + footer aynı beyaz zemini paylaşıyor -- ayrı bir
     "kart" gibi durmasın, gerçek bir mobil app gibi tek parça hissettirsin.
     Her bölüm kendi iç boşluğunu (--gutter) kendisi veriyor, body artık yatay
     padding taşımıyor. */
  background: var(--surface);
  line-height: 1.5;
  font-size: 16px;
}

a {
  color: var(--brand-fg);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* --- Header / nav (mobil app-tarzı sabit üst bar) --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--brand-fg);
  white-space: nowrap;
}

.brand-mark {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}

.brand-word {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-select {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  max-width: 92px;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--brand-fg);
  text-decoration: none;
  font-size: 18px;
}

/* --- Dil menüsü (header, <details> ile JS'siz açılır panel -- eskiden
   native <select> kutusuydu, o bir web form kontrolü gibi durup app hissini
   bozuyordu; artık user-menu ile aynı ikon-buton + açılır panel deseni) --- */

.lang-menu {
  position: relative;
}

.lang-menu-btn {
  cursor: pointer;
  list-style: none;
  border: none;
}

.lang-menu-btn::-webkit-details-marker {
  display: none;
}

.lang-menu-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 30;
}

.lang-menu-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 8px;
}

.lang-menu-dropdown a:hover {
  background: var(--bg-soft);
}

.lang-menu-dropdown a.is-active {
  color: var(--brand-fg);
  font-weight: 700;
}

/* --- Kullanıcı menüsü (avatar + açılır panel, <details> ile JS'siz) --- */

.user-menu {
  position: relative;
}

.user-avatar-btn {
  display: flex;
  cursor: pointer;
  list-style: none;
}

.user-avatar-btn::-webkit-details-marker {
  display: none;
}

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.user-menu-name {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px;
}

.user-menu-stats {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.user-menu-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  padding: 8px 4px;
  border-radius: 8px;
}

.user-menu-dropdown a:hover {
  background: var(--bg-soft);
}

/* --- XP / seviye ilerleme kartı (header menüsü, profil, herkese açık profil) --- */

.xp-card {
  margin-bottom: 10px;
}

.xp-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.xp-level-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--cat-purple-fg);
}

.xp-value {
  color: var(--muted);
  font-size: 12px;
}

/* --- Ana Sayfa (home.php) --- */

.home-greeting-card {
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.home-greeting-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.home-greeting-name {
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}

.quick-play-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(10, 122, 74, 0.25);
  transition: transform 0.1s ease;
}

.quick-play-btn:active {
  transform: scale(0.98);
}

.quick-play-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.quick-play-title {
  font-size: 16px;
  font-weight: 700;
}

.quick-play-desc {
  font-size: 13px;
  opacity: 0.9;
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 12px;
}

/* İkon-only "tümünü gör" butonu -- eskiden metin+ok linkiydi ("Tümünü Gör →"),
   bu bir web hyperlink kalıbı; native app'lerde bölüm başlıklarının yanında
   genelde sadece bir ok ikonu durur. */
.section-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--brand-fg);
  text-decoration: none;
  font-size: 16px;
  flex-shrink: 0;
}

/* --- Günlük Görev --- */

.daily-task-card {
  display: block;
  background: var(--cat-amber-bg);
  color: var(--cat-amber-fg);
  border-radius: 16px;
  padding: 14px 16px;
  text-decoration: none;
  margin-bottom: 20px;
}

.daily-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.daily-task-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
}

.daily-task-desc {
  font-size: 12px;
  margin: 0 0 8px;
  opacity: 0.9;
}

.daily-task-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cat-teal-bg);
  color: var(--cat-teal-fg);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 14px;
}

/* --- Ayarlar (settings.php) --- */

.settings-section {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 10px;
}

.settings-logout-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--danger-fg);
  text-decoration: none;
  font-weight: 700;
}

.settings-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

/* --- Görünüm (Açık/Koyu/Sistem) seçici (settings.php) --- */

.theme-option-row {
  display: flex;
  gap: 8px;
}

.theme-option-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  color: var(--muted);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.theme-option-btn i {
  font-size: 18px;
}

.theme-option-btn.is-active {
  border-color: var(--brand);
  color: var(--brand-fg);
}

/* --- Admin dashboard (admin.php) --- */

.admin-quick-links {
  margin-bottom: 16px;
}

.admin-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

/* --- Yakında (leaderboard.php) --- */

.coming-soon-block {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}

.coming-soon-block i {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}

/* --- Kategori detay ekranı (category_detail.php) --- */

.cat-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 16px;
}

.cat-detail-header > i {
  font-size: 30px;
}

.cat-detail-fav-form {
  margin: 0;
}

.cat-detail-fav-btn {
  background: var(--chip-overlay-bg);
  color: inherit;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0;
  cursor: pointer;
}

/* Sadece ikon glifini değiştirmek (outline -> filled) küçük boyutta neredeyse
   fark edilmiyordu -- aktif durumda arkaplan/renk de değişiyor, göz ardı
   edilemeyecek bir kontrast farkı yaratıyor. */
.cat-detail-fav-btn.is-active {
  background: #f4b400;
  color: #4a3200;
}

.cat-detail-header h2 {
  flex: 1;
  margin: 0;
}

/* --- Seviye (zorluk) seçici -- category_detail.php --- */

.difficulty-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.difficulty-btn {
  flex: 1;
  background: var(--bg-soft);
  color: var(--text);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.difficulty-btn.is-active {
  background: var(--cat-teal-bg);
  color: var(--cat-teal-fg);
  border-color: var(--brand);
}

.mode-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
}

.mode-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mode-card:has(input:checked) {
  border-color: var(--ink);
}

.mode-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.mode-card.cat-teal .mode-icon   { background: var(--cat-teal-bg);   color: var(--cat-teal-fg); }
.mode-card.cat-blue .mode-icon   { background: var(--cat-blue-bg);   color: var(--cat-blue-fg); }
.mode-card.cat-coral .mode-icon  { background: var(--cat-coral-bg);  color: var(--cat-coral-fg); }

.mode-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mode-name {
  font-weight: 700;
  font-size: 14px;
}

.mode-desc {
  font-size: 12px;
  color: var(--sticker-ink);
  opacity: 0.75;
}

.mode-check-icon {
  font-size: 20px;
  color: var(--sticker-ink);
}

.mode-card:has(input:checked) .mode-check-icon {
  color: var(--sticker-ink);
}

.quiz-start-full {
  width: 100%;
}

/* --- Sıralama (leaderboard.php) --- */

.leaderboard-my-rank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 14px;
}

.leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.leaderboard-list li {
  border-bottom: 1px solid var(--border);
}

.leaderboard-list li.is-me {
  background: var(--cat-teal-bg);
  border-radius: 10px;
  border-bottom-color: transparent;
}

.leaderboard-row-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  text-decoration: none;
  color: inherit;
}

.leaderboard-rank {
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.leaderboard-rank.badge {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.leaderboard-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-xp {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-fg);
  flex-shrink: 0;
}

main {
  flex: 1;
  display: block;
  width: 100%;
  background: var(--surface);
  padding: 18px var(--gutter) 24px;
  margin: 0;
}

/* --- Alt sekme çubuğu (mobil app tarzı, position:fixed) --- */

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 800px;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 2px;
  border-radius: 10px;
}

.bottom-nav a i {
  font-size: 20px;
}

.bottom-nav a.active {
  color: var(--brand-fg);
}

.site-footer {
  margin-top: 24px;
}

/* --- Lists (kategori/soru) --- */

ul.category-list,
ul.question-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.category-list li,
ul.question-list li {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  background: var(--bg-soft);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 12px;
  margin: 2px 6px 2px 0;
}

.correct {
  color: var(--brand-fg);
  font-weight: bold;
  margin: 4px 0;
}

.distractor {
  color: var(--muted);
  margin: 2px 0;
}

a.action {
  font-size: 13px;
  display: inline-block;
  padding: 6px 0;
}

.muted-note {
  color: var(--muted);
  font-size: 13px;
}

/* --- Formlar --- */

form.stacked-form {
  max-width: 400px;
}

form.stacked-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
}

form.stacked-form label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

button,
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 13px 22px;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

button:hover,
.btn:hover {
  background: var(--brand-dark);
}

form.stacked-form button[type="submit"] {
  width: 100%;
}

.btn-skip {
  background: var(--bg-soft);
  color: var(--muted);
}

.btn-skip:hover {
  background: var(--border);
}

.error-text {
  color: var(--danger-fg);
}

.success-text {
  color: var(--brand-fg);
}

/* --- Kategori karoları (kompakt) --- */

/* 15 kategori hep görünsün diye küçük karolar: mobilde 3 sütun x 5 satır,
   masaüstü çerçevesinde 5 x 3. İkon + başlık yan yana, altta soru sayısı,
   sağ altta yuvarlak "oyna" butonu (kategoriyi karışık/Hızlı Mod başlatır);
   karoya dokunmak ise seviye/mod seçimi olan kategori sayfasını açar. */
.cat-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cat-tile {
  position: relative;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s ease;
}

.cat-tile:active {
  transform: scale(0.97);
}

.cat-tile-main {
  display: block;
  padding: 9px 8px 40px 9px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.cat-tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.cat-tile-icon {
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
}

.cat-tile-name {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-tile-count {
  position: absolute;
  left: 9px;
  bottom: 12px;
  font-size: 11px;
  opacity: 0.85;
}

.cat-tile-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cat-tile-play:active {
  transform: scale(0.9);
}

@media (max-width: 339px) {
  .cat-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cat-teal   { background: var(--cat-teal-bg);   color: var(--cat-teal-fg); }
.cat-blue   { background: var(--cat-blue-bg);   color: var(--cat-blue-fg); }
.cat-amber  { background: var(--cat-amber-bg);  color: var(--cat-amber-fg); }
.cat-purple { background: var(--cat-purple-bg); color: var(--cat-purple-fg); }
.cat-coral  { background: var(--cat-coral-bg);  color: var(--cat-coral-fg); }
.cat-pink   { background: var(--cat-pink-bg);   color: var(--cat-pink-fg); }
.cat-gray   { background: var(--cat-gray-bg);   color: var(--cat-gray-fg); }

.badge.c-badge-teal   { background: var(--cat-teal-bg);   color: var(--cat-teal-fg); }
.badge.c-badge-purple { background: var(--cat-purple-bg); color: var(--cat-purple-fg); }

/* --- Quiz üst bar: kapat + bildir --- */

.quiz-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.quiz-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--muted);
  border: none;
  text-decoration: none;
  font-size: 17px;
  cursor: pointer;
}

.flag-dialog {
  border: none;
  border-radius: 16px;
  padding: 18px;
  max-width: 320px;
  width: 90%;
}

.flag-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.flag-dialog-title {
  font-weight: 700;
  margin: 0 0 12px;
}

.flag-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flag-reason-btn {
  background: var(--bg-soft);
  color: var(--text);
  border: none;
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.flag-reason-btn:hover {
  background: var(--border);
}

/* Vazgeç, seçeneklerle aynı gri dolgulu görünümü kullanıyordu -- ikisi
   neredeyse ayırt edilemiyordu. Düz metin + üstte ince bir ayraç ile net bir
   şekilde "seçenek değil, iptal" olduğu belli oluyor. */
.flag-cancel-btn {
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.flag-cancel-btn:hover {
  color: var(--text);
}

/* --- Quiz süre göstergesi (süreli modlar) --- */

.quiz-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.quiz-timer.is-urgent {
  background: var(--cat-coral-bg);
  color: var(--danger-fg);
}

/* --- Quiz ilerleme çubuğu --- */

.quiz-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}

.quiz-progress-track {
  flex: 1;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
}

/* Soru + rozetleri kendi kartında -- önceden sayfa zemininde "yüzen" düz
   metindi, oyun hissi için kendi yüzeyi/gölgesi olan ayrı bir blok oldu. */
.quiz-question-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}

.quiz-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.quiz-xp-pill {
  margin-left: auto;
  font-weight: 700;
}

.quiz-question-text {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
}

/* --- Quiz cevap seçenekleri --- */

.answer-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease;
}

.answer-option:active {
  transform: scale(0.98);
}

.answer-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  margin-bottom: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 16px;
  font-weight: 600;
}

.answer-result.is-correct,
.answer-option.is-correct {
  background: var(--feedback-correct-bg);
  border-color: var(--success);
}

.answer-result.is-wrong,
.answer-option.is-wrong {
  background: var(--feedback-wrong-bg);
  border-color: var(--danger);
}

/* Anlık geri bildirimde seçilmeyen/yanlış olmayan şıklar sönükleştirilir --
   göz doğru/yanlış olana gitsin diye. */
.answer-option.is-dimmed {
  opacity: 0.55;
}

/* Cevap kilitlendikten sonra (bkz. quiz.php'deki JS) hiçbir şık tıklanamaz --
   zaten disabled olan radio'lara ek, dokunmatik cihazlarda da "hover/basılı"
   görünümü kaybolsun diye. */
#quiz-answer-form.is-locked .answer-option {
  cursor: default;
  pointer-events: none;
}

/* JS devredeyken şıkka tıklamak tek başına cevabı gönderiyor (bkz. quiz.php) --
   bu durumda görünür radio noktası kafa karıştırıcı oluyor ("seçildi ama
   onaylanmadı" izlenimi veriyor), bu yüzden gizleniyor. JS çalışmıyorsa bu
   class hiç eklenmez, radio normal şekilde görünür kalır. */
form.is-instant input[name="selected"] {
  display: none;
}

.opt-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.answer-result.is-correct .opt-marker,
.answer-option.is-correct .opt-marker {
  background: var(--success);
  color: #fff;
}

.answer-result.is-wrong .opt-marker,
.answer-option.is-wrong .opt-marker {
  background: var(--danger);
  color: #fff;
}

/* --- Veri tabloları (admin istatistik) --- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 20px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

/* --- İstatistik kartları --- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.stat-card {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 14px;
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.stat-card .stat-value {
  font-size: 22px;
  font-weight: 700;
}

/* Bir sayfada baş rol oynamayan, sadece bağlam veren istatistik satırları
   için (örn. kategori detay ekranı) daha küçük bir varyant. */
.stat-grid-compact .stat-card {
  padding: 10px 12px;
}

.stat-grid-compact .stat-value {
  font-size: 17px;
}

/* --- Avatar --- */

.avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.avatar-circle {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.avatar-placeholder {
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
}

/* --- Bildirim zili (header) + bildirim listesi (Faz 6) --- */

.notif-bell-btn {
  position: relative;
}

.notif-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.notif-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.notif-page-title {
  font-size: 20px;
  margin: 0;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg-soft);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
}

.notif-item.is-unread {
  background: var(--cat-teal-bg);
}

.notif-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.notif-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-item-title {
  font-weight: 600;
  font-size: 14px;
}

.notif-item-text {
  font-size: 13px;
  color: var(--muted);
}

.notif-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* --- Splash (onboarding + dil seçimi ortak üst bölümü) --- */

.splash-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding: 52px 20px 72px;
  border-radius: 0 0 36px 36px;
  background: linear-gradient(160deg, #0d8a55 0%, #075a37 60%, #04402a 100%);
}

.splash-hero::before,
.splash-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.splash-hero::before {
  width: 220px;
  height: 220px;
  right: -70px;
  top: -80px;
}

.splash-hero::after {
  width: 160px;
  height: 160px;
  left: -60px;
  bottom: -70px;
}

.splash-mark {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
}

.splash-title {
  position: relative;
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.splash-sub {
  position: relative;
  margin: 8px auto 0;
  max-width: 300px;
  font-size: 15px;
  opacity: 0.92;
}

/* --- Dil seçim ekranı (select_language.php) --- */

body:has(main.lang-screen),
body:has(main.onboarding-page) {
  padding-bottom: 0;
}

main.lang-screen,
main.onboarding-page {
  padding: 0;
  min-height: 100vh;
}

.lang-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -40px;
  padding: 0 var(--gutter) 28px;
}

.lang-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.1s ease;
}

.lang-card:active {
  transform: scale(0.98);
}

.lang-card.is-suggested {
  border-color: var(--brand);
}

.lang-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.lang-card-name {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
}

.lang-card-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cat-teal-bg);
  color: var(--cat-teal-fg);
}

.lang-card > .ti-chevron-right {
  color: var(--muted);
  font-size: 18px;
}

/* --- Giriş öncesi tanıtım ekranı --- */

.onboarding-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gutter) 32px;
  margin-top: -36px;
  position: relative;
}

.onboarding-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.onboarding-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  text-align: left;
}

.onboarding-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--cat-teal-bg);
  color: var(--cat-teal-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.onboarding-feature-text strong {
  display: block;
  font-size: 15px;
}

.onboarding-feature-text span {
  font-size: 13px;
  color: var(--muted);
}

.onboarding-cta {
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
  padding: 16px;
  border: none;
  border-radius: 18px;
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  display: block;
  box-shadow: 0 6px 18px rgba(10, 122, 74, 0.35);
}

.onboarding-cta:active {
  transform: scale(0.98);
}

/* --- SEO sayfaları (/{dil}/..., bkz. seo_category.php / seo_test.php) --- */

.seo-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.seo-breadcrumb a {
  color: var(--brand-fg);
  text-decoration: none;
}

.seo-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 14px;
}

.seo-hero-icon {
  font-size: 34px;
  flex-shrink: 0;
}

.seo-h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.seo-hero-sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.9;
}

.seo-h2 {
  font-size: 18px;
  margin: 22px 0 10px;
}

.seo-h3 {
  font-size: 15px;
  margin: 16px 0 8px;
}

.seo-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border-radius: 16px;
  padding: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(10, 122, 74, 0.25);
  margin: 14px 0;
}

.seo-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.seo-test-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
}

.seo-test-link span {
  font-size: 12px;
  color: var(--muted);
}

.seo-questions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.seo-q {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.seo-q-num {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-fg);
}

.seo-q-title {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.4;
}

.seo-options {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.seo-options li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
}

.seo-answer summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand-fg);
}

.seo-answer p {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--feedback-correct-bg);
}

.seo-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  margin-top: 8px;
}

.seo-pager a {
  text-decoration: none;
  font-weight: 700;
}

.seo-home-block {
  margin-top: 26px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.seo-home-block .seo-h2,
.seo-home-block .seo-h3 {
  color: var(--text);
}

.seo-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.seo-link-list a {
  font-size: 13px;
}

/* ===== RETRO TEMA: bileşen kuralları (token'ların üstüne biner) ===== */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--surface);
  background-image: radial-gradient(var(--dots) 1.3px, transparent 1.4px);
  background-size: 18px 18px;
}

main {
  background: transparent;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-header {
  background: var(--surface);
  border-bottom: 3px solid var(--ink);
}

.brand-link {
  color: var(--text);
}

.brand-mark {
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  box-shadow: 2px 2px 0 var(--ink);
}

.header-icon-btn,
.quiz-icon-btn {
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.header-icon-btn:active,
.quiz-icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

.user-menu-dropdown,
.lang-menu-dropdown,
.flag-dialog {
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

/* --- Kart benzeri yüzeyler: kalın mürekkep kenarlık + sert gölge --- */
.home-greeting-card,
.stat-card,
.settings-section,
.answer-option,
.answer-result,
.quiz-question-card,
.seo-q,
.seo-test-link,
.lang-card,
.onboarding-feature,
.notif-item,
.admin-quick-link,
.leaderboard-my-rank {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.cat-tile,
.daily-task-card,
.mode-card,
.seo-hero,
.cat-detail-header,
.splash-mark {
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-card);
}

.cat-tile:active,
.answer-option:active,
.lang-card:active,
.mode-card:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.notif-item.is-unread {
  background: var(--cat-teal-bg);
  color: var(--sticker-ink);
}

/* --- Düğmeler --- */
button,
.btn,
.onboarding-cta,
.seo-play {
  background: var(--brand);
  color: var(--sticker-ink);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

button:hover,
.btn:hover {
  background: var(--brand-dark);
}

button:active,
.btn:active,
.onboarding-cta:active,
.seo-play:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.btn-skip {
  background: var(--card);
  color: var(--text);
}

.btn-skip:hover {
  background: var(--bg-soft);
}

.quick-play-btn {
  background: var(--brand);
  color: var(--sticker-ink);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
}

.quick-play-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.quick-play-icon {
  background: var(--sticker-ink);
  color: var(--accent);
}

.quick-play-title {
  font-weight: 700;
}

.cat-tile-play {
  background: var(--brand);
  color: var(--sticker-ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.cat-detail-fav-btn {
  border: 2px solid var(--ink);
  background: var(--chip-overlay-bg);
  box-shadow: none;
}

.cat-detail-fav-btn.is-active {
  background: var(--accent);
  color: var(--sticker-ink);
}

.difficulty-btn,
.theme-option-btn {
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.difficulty-btn.is-active,
.theme-option-btn.is-active {
  background: var(--accent);
  color: var(--sticker-ink);
  border-color: var(--ink);
}

.flag-reason-btn {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--ink);
}

/* --- Rozetler / ilerleme --- */
.badge {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
}

.quiz-progress-track {
  height: 14px;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}

.quiz-progress-fill {
  background: repeating-linear-gradient(45deg, var(--brand) 0 9px, #62e2b0 9px 18px);
  border-radius: 999px;
}

.quiz-timer {
  background: var(--card);
  border: 2px solid var(--ink);
}

.quiz-timer.is-urgent {
  background: var(--cat-coral-bg);
  color: var(--sticker-ink);
}

/* --- Quiz cevapları --- */
.opt-marker {
  background: var(--bg-soft);
  color: var(--text);
  border: 2px solid var(--ink);
}

.answer-result.is-correct,
.answer-option.is-correct {
  background: var(--feedback-correct-bg);
  border-color: var(--ink);
  color: var(--sticker-ink);
}

.answer-result.is-wrong,
.answer-option.is-wrong {
  background: var(--feedback-wrong-bg);
  border-color: var(--ink);
  color: var(--sticker-ink);
}

.answer-result.is-correct .opt-marker,
.answer-option.is-correct .opt-marker {
  background: var(--success);
  color: var(--sticker-ink);
}

.answer-result.is-wrong .opt-marker,
.answer-option.is-wrong .opt-marker {
  background: var(--danger);
  color: var(--sticker-ink);
}

.seo-answer p {
  color: var(--sticker-ink);
  border: 2px solid var(--ink);
}

/* --- Alt gezinme çubuğu --- */
.bottom-nav {
  background: var(--surface);
  border-top: 3px solid var(--ink);
}

.bottom-nav a {
  border: 2.5px solid transparent;
  border-radius: 14px;
  font-weight: 600;
}

.bottom-nav a.active {
  background: var(--accent);
  color: var(--sticker-ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

/* --- Form alanları --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
}

/* --- Karşılama / dil seçimi / onboarding --- */
.splash-hero {
  background: repeating-conic-gradient(from 0deg at 50% 112%, #2fcf95 0deg 9deg, #25c18a 9deg 18deg);
  border-bottom: 3px solid var(--ink);
  color: var(--sticker-ink);
}

.splash-hero::before {
  background: var(--accent);
  border: 3px solid var(--ink);
  width: 96px;
  height: 96px;
  right: -22px;
  top: 26px;
}

.splash-hero::after {
  background: #ffadc9;
  border: 3px solid var(--ink);
  width: 70px;
  height: 70px;
  left: -18px;
  bottom: 48px;
}

.splash-mark {
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--ink);
}

.splash-title {
  color: #fff;
  /* text-stroke değişken fontun üst üste binen konturlarını gösteriyordu;
     dış çizgi 8 yönlü gölgeyle veriliyor */
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
}

.splash-sub {
  color: var(--sticker-ink);
  font-weight: 600;
  opacity: 1;
}

.lang-card.is-suggested {
  background: var(--cat-amber-bg);
  color: var(--sticker-ink);
  border-color: var(--ink);
}

.lang-card.is-suggested .lang-card-name {
  color: var(--sticker-ink);
}

.lang-badge {
  border: 2px solid var(--ink);
}

.lang-card-tag {
  background: var(--sticker-ink);
  color: var(--accent);
}

.onboarding-feature-icon {
  border: 2px solid var(--ink);
}

.onboarding-cta {
  border-radius: 18px;
}

.avatar-placeholder,
.avatar-circle {
  border: 2px solid var(--ink);
}

.seo-home-block {
  border-top: 3px dashed var(--ink);
}

/* --- Bayraklar --- */
.flag {
  display: block;
  box-sizing: border-box;
  width: 26px;
  height: 17px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.flag-btn {
  width: 24px;
  height: 16px;
  border-width: 1.5px;
}

.flag-lg {
  width: 42px;
  height: 28px;
  border-width: 2.5px;
  border-radius: 6px;
}

.lang-menu-dropdown a {
  gap: 10px;
}

.lang-menu-name {
  flex: 1;
}

/* Seçili oyun modu: kartın etrafında hardal halka */
.mode-card:has(input:checked) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- Akordiyon (Ücretsiz testler) --- */
.seo-accordion {
  margin-top: 18px;
}

.seo-accordion > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 13px 16px;
  font-size: 18px;
  font-weight: 700;
}

.seo-accordion > summary::-webkit-details-marker {
  display: none;
}

.seo-accordion > summary > span:first-child {
  flex: 1;
}

.seo-accordion > summary::after {
  content: "▾";
  font-size: 18px;
  transition: transform 0.15s ease;
}

.seo-accordion[open] > summary::after {
  transform: rotate(180deg);
}

.seo-accordion-count {
  background: var(--accent);
  color: var(--sticker-ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 10px;
  font-size: 14px;
}

.seo-accordion .seo-test-grid {
  margin-top: 12px;
}

/* --- Giriş / Kayıt ekranı --- */
body:has(.auth-screen) {
  padding-bottom: 0;
}

body:has(.auth-screen) main {
  padding: 0;
  min-height: 100vh;
}

.auth-hero {
  padding: 34px 20px 70px;
}

.auth-hero .splash-mark {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.auth-hero .splash-title {
  font-size: 34px;
}

.auth-back {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
  text-decoration: none;
  font-size: 18px;
}

.auth-card {
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  max-width: 460px;
  margin: -38px auto 28px;
  padding: 16px;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--ink);
}

.auth-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--bg-soft);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  color: var(--text);
  border: 2px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
}

.auth-tab:hover {
  background: transparent;
}

.auth-tab.is-active {
  background: var(--accent);
  color: var(--sticker-ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.auth-tab:active {
  transform: none;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form[hidden] {
  display: none;
}

.auth-field {
  display: block;
  margin: 0;
}

.auth-label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 700;
}

.auth-input {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--ink);
}

.auth-input:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.auth-input > .ti {
  position: absolute;
  left: 13px;
  font-size: 19px;
  color: var(--muted);
  pointer-events: none;
}

.auth-input input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 44px 12px 42px;
  background: transparent;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  font-size: 16px;
  outline: none;
}

.auth-eye {
  position: absolute;
  right: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--muted);
  border: 0;
  box-shadow: none;
  font-size: 19px;
}

.auth-eye:hover {
  background: transparent;
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
  padding: 14px;
  font-size: 17px;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--feedback-wrong-bg);
  color: var(--sticker-ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

.auth-alert.is-success {
  background: var(--feedback-correct-bg);
  margin-bottom: 12px;
}

/* --- Admin paneli --- */
.admin-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-nav-back {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
  text-decoration: none;
  font-size: 18px;
}

.admin-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.admin-nav-link.is-active {
  background: var(--accent);
  color: var(--sticker-ink);
}

.admin-nav-badge,
.admin-tab-count {
  min-width: 20px;
  padding: 0 6px;
  text-align: center;
  background: var(--danger);
  color: var(--sticker-ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
}

.admin-tab-count {
  background: var(--bg-soft);
  color: var(--text);
}

.stat-grid-mini {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.stat-grid-mini .stat-card {
  padding: 8px 12px;
  border-radius: 14px;
}

.stat-grid-mini .stat-label {
  margin: 0;
  font-size: 11px;
}

.stat-grid-mini .stat-value {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.admin-card {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.admin-card-title {
  margin: 0 0 10px;
  font-size: 18px;
}

.admin-card .data-table {
  margin-bottom: 0;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.admin-actions button {
  font-size: 14px;
  padding: 10px 14px;
}

.admin-actions button:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-soft);
  color: var(--text);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.admin-tab.is-active {
  background: var(--accent);
  color: var(--sticker-ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.admin-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--feedback-correct-bg);
  color: var(--sticker-ink);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  font-weight: 700;
}

.admin-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.admin-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-weight: 700;
}

/* --- Hesap silme / yasal sayfalar / hakkımızda --- */
.danger-box {
  background: var(--feedback-wrong-bg);
  color: var(--sticker-ink);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.danger-box .settings-section-title {
  color: var(--sticker-ink);
}

.danger-box p:last-child {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.btn-danger,
.btn-danger:hover {
  background: var(--danger);
  color: var(--sticker-ink);
}

.btn-danger:hover {
  filter: brightness(0.95);
}

form.stacked-form button.btn-danger {
  width: auto;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-fg);
}

.legal-title {
  font-size: 24px;
  margin: 0 0 4px;
}

.legal-doc {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 6px 18px 14px;
  margin: 12px 0 16px;
  line-height: 1.6;
}

.legal-doc h2 {
  font-size: 17px;
  margin: 16px 0 4px;
}

.legal-doc p {
  margin: 0;
}

.about-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.about-mark {
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  flex-shrink: 0;
}

.about-hero-sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-weight: 600;
}

.admin-card p {
  margin: 0 0 8px;
}

/* --- Çok satırlı metin alanı (form) --- */
textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  margin-top: 6px;
  padding: 12px;
  background: var(--card);
  color: var(--text);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}

textarea:focus,
input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* --- Sıralama: "ben" satırı nane sticker; yazılar koyu mürekkep olmalı --- */
.leaderboard-list li.is-me {
  color: var(--sticker-ink);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-card);
  margin: 6px 0;
}

.leaderboard-list li.is-me .leaderboard-name,
.leaderboard-list li.is-me .leaderboard-xp,
.leaderboard-list li.is-me .leaderboard-rank {
  color: var(--sticker-ink);
}

/* --- Masaüstü genişletmeleri --- */

@media (min-width: 700px) {
  :root {
    --gutter: 20px;
  }

  body {
    max-width: 800px;
    padding: 0 0 40px;
    /* Masaüstünde app "çerçevesi" tarayıcı zemininden ayrılsın diye hafif
       bir gölge -- mobilde tam ekran olduğu için gölgeye gerek yok. */
    box-shadow: 0 0 0 3px var(--ink);
  }

  form.stacked-form button[type="submit"] {
    width: auto;
  }

  .cat-tile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .cat-tile-main {
    padding: 12px 12px 46px;
  }

  .cat-tile-name {
    font-size: 14px;
  }

  .cat-tile-icon {
    font-size: 26px;
  }

  .cat-tile-count {
    left: 12px;
    bottom: 15px;
    font-size: 12px;
  }

  .seo-test-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat-grid-mini {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cat-tile-play {
    right: 10px;
    bottom: 10px;
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
}

/* --- Test listesi alt grupları (çok test olan kategoriler) --- */
.seo-subgroup {
  margin: 8px 0 0;
}

.seo-subgroup > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 4px;
  list-style: none;
}

.seo-subgroup > summary::-webkit-details-marker {
  display: none;
}

.seo-subgroup > summary::before {
  content: "▸ ";
}

.seo-subgroup[open] > summary::before {
  content: "▾ ";
}

/* --- Profil ekranları (kendi profilim + herkese açık profil) --- */
body:has(.profile-screen) main {
  padding: 0 0 24px;
}

.profile-hero {
  padding: 26px 20px 64px;
}

.profile-avatar {
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--accent);
  color: var(--sticker-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 40px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 28px;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink);
}

.profile-handle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 12px;
  background: var(--accent);
  color: var(--sticker-ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--ink);
}

.profile-body {
  position: relative;
  width: calc(100% - 2 * var(--gutter));
  max-width: 560px;
  margin: -36px auto 0;
}

.profile-level-card {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px 16px;
}

.profile-level-card .xp-card {
  margin: 0;
}

.profile-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.profile-tile {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 6px;
  text-align: center;
  color: var(--text);
}

.profile-tile .ti {
  font-size: 20px;
  display: block;
  margin-bottom: 2px;
}

.profile-tile strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.profile-tile span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.profile-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  font-size: 17px;
}

.profile-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 8px 12px;
  margin-bottom: 8px;
}

.profile-cat-row .profile-cat-icon {
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sticker-ink);
  flex-shrink: 0;
}

.profile-cat-row .profile-cat-name {
  flex: 1;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-cat-row .profile-cat-meta {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.profile-edit {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-top: 18px;
}

.profile-edit > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-edit > summary::-webkit-details-marker {
  display: none;
}

.profile-edit > form {
  padding: 0 16px 16px;
}

.profile-level-card .xp-level-label,
.profile-level-card .xp-value {
  color: var(--text);
}

.profile-edit-btn {
  left: auto;
  right: 16px;
}

/* Dar telefonlarda (360px) uzun diller ("25 questions") oynat butonunun altına
   taşıyordu: etiket gizlenir (ekran okuyucuya açık kalır), ikon + sayı kalır. */
.cat-tile-count .ti {
  display: none;
}

@media (max-width: 399px) {
  .cat-tile-count .ti {
    display: inline;
    vertical-align: -1px;
  }

  .cat-tile-count-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}