/* ==========================================================================
   KlavyeUstam - Tema ve Renk Paletleri (Design Tokens)
   ========================================================================== */

:root {
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --surface-hover: rgba(255, 255, 255, 0.08);

  /* Güçlü Koyu Tema Varsayılanları (Asla siyah/silik yazı kalmaması için koruma katmanı) */
  --bg-primary: #0a0a0f;
  --bg-secondary: #13131c;
  --bg-card: rgba(24, 24, 37, 0.95);
  --bg-card-hover: rgba(33, 33, 50, 0.98);
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #cbd5e1;
  --char-untyped: #cbd5e1;
  --char-current-untyped: #ffffff;
  --correct-color: #ffffff;
  --incorrect-color: #ff3366;
  --extra-color: #ef4444;
  --missed-color: #7f1d1d;
  --accent-primary: #8b5cf6;
  --accent-secondary: #06b6d4;
  --accent-glow: rgba(139, 92, 246, 0.45);
  --key-bg: #1e1e2d;
  --key-border: #2d2d42;
  --key-active: #8b5cf6;
  --key-text: #ffffff;
  --caret-color: #a855f7;
}

/* ==========================================================================
   🌙 KOYU TEMALAR (DARK PALETTES) - Kristal Netlik & Ultra Yüksek Kontrast
   ========================================================================== */

/* 1. OBSIDIAN GECE (Koyu Mor & Neon Ametist - Varsayılan Koyu Tema) */
body.theme-obsidian {
  --bg-primary: #0a0a0f;
  --bg-secondary: #13131c;
  --bg-card: rgba(24, 24, 37, 0.95);
  --bg-card-hover: rgba(33, 33, 50, 0.98);
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #cbd5e1;        /* Açık slate gri — karanlıkta pürüzsüz ve ultra net */
  --char-untyped: #cbd5e1;
  --char-current-untyped: #ffffff;
  --accent-primary: #8b5cf6;
  --accent-secondary: #06b6d4;
  --accent-glow: rgba(139, 92, 246, 0.45);
  --correct-color: #ffffff;
  --incorrect-color: #ff3366;
  --extra-color: #ef4444;
  --missed-color: #7f1d1d;
  --key-bg: #1e1e2d;
  --key-border: #2d2d42;
  --key-active: #8b5cf6;
  --key-text: #ffffff;
  --caret-color: #a855f7;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --surface-hover: rgba(255, 255, 255, 0.08);
}

/* 2. CYBERPUNK 2077 (Grafit & Neon Sarı & Camgöbeği) */
body.theme-cyberpunk {
  --bg-primary: #0b0c10;
  --bg-secondary: #161b22;
  --bg-card: rgba(22, 27, 34, 0.95);
  --bg-card-hover: rgba(33, 40, 50, 0.98);
  --text-primary: #fcee0a;
  --text-secondary: #66fcf1;
  --text-muted: #cbd5e1;        /* Net, parlak açık gri */
  --char-untyped: #cbd5e1;
  --char-current-untyped: #fcee0a;
  --accent-primary: #fcee0a;
  --accent-secondary: #00f0ff;
  --accent-glow: rgba(252, 238, 10, 0.45);
  --correct-color: #fcee0a;
  --incorrect-color: #ff0055;
  --extra-color: #ff0055;
  --missed-color: #80002b;
  --key-bg: #151c24;
  --key-border: #2c3a4a;
  --key-active: #fcee0a;
  --key-text: #fcee0a;
  --caret-color: #fcee0a;
  --border-subtle: rgba(252, 238, 10, 0.2);
  --surface-hover: rgba(252, 238, 10, 0.1);
}

/* 3. TOKYO NIGHT (Gece Mavisi & Pastel Lavanta) */
body.theme-tokyo {
  --bg-primary: #1a1b26;
  --bg-secondary: #24283b;
  --bg-card: rgba(36, 40, 59, 0.95);
  --bg-card-hover: rgba(48, 54, 79, 0.98);
  --text-primary: #ffffff;
  --text-secondary: #93c5fd;
  --text-muted: #cbd5e1;        /* Tokyo açık ton — gece mavisinde pürüzsüz netlik */
  --char-untyped: #cbd5e1;
  --char-current-untyped: #ffffff;
  --accent-primary: #bb9af7;
  --accent-secondary: #7dcfff;
  --accent-glow: rgba(187, 154, 247, 0.45);
  --correct-color: #ffffff;
  --incorrect-color: #f7768e;
  --extra-color: #db4b4b;
  --missed-color: #782a2a;
  --key-bg: #292e42;
  --key-border: #3b4261;
  --key-active: #bb9af7;
  --key-text: #ffffff;
  --caret-color: #7dcfff;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --surface-hover: rgba(255, 255, 255, 0.08);
}

/* 4. NORDİK BUZ (Arktik Kutup Mavisi & Soğuk Gri) */
body.theme-nord {
  --bg-primary: #2e3440;
  --bg-secondary: #3b4252;
  --bg-card: rgba(59, 66, 82, 0.95);
  --bg-card-hover: rgba(76, 86, 106, 0.98);
  --text-primary: #ffffff;
  --text-secondary: #88c0d0;
  --text-muted: #e5e9f0;        /* Nord Snow Storm beyaz-gri — mükemmel netlik */
  --char-untyped: #e5e9f0;
  --char-current-untyped: #ffffff;
  --accent-primary: #88c0d0;
  --accent-secondary: #81a1c1;
  --accent-glow: rgba(136, 192, 208, 0.4);
  --correct-color: #ffffff;
  --incorrect-color: #bf616a;
  --extra-color: #d08770;
  --missed-color: #5e3034;
  --key-bg: #434c5e;
  --key-border: #4c566a;
  --key-active: #88c0d0;
  --key-text: #ffffff;
  --caret-color: #88c0d0;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --surface-hover: rgba(255, 255, 255, 0.08);
}

/* 5. MATRIX GREEN (Terminal Hacker Siyah & Fosfor Yeşili) */
body.theme-matrix {
  --bg-primary: #040805;
  --bg-secondary: #0a140d;
  --bg-card: rgba(10, 20, 13, 0.96);
  --bg-card-hover: rgba(16, 32, 21, 0.98);
  --text-primary: #00ff66;
  --text-secondary: #39ff14;
  --text-muted: #86efac;        /* Parlak nane yeşili — karanlık ekranda tam okunur */
  --char-untyped: #86efac;
  --char-current-untyped: #00ff66;
  --accent-primary: #00ff66;
  --accent-secondary: #39ff14;
  --accent-glow: rgba(0, 255, 102, 0.45);
  --correct-color: #ffffff;
  --incorrect-color: #ff3333;
  --extra-color: #ff5555;
  --missed-color: #660000;
  --key-bg: #0d1a11;
  --key-border: #00ff6644;
  --key-active: #00ff66;
  --key-text: #00ff66;
  --caret-color: #00ff66;
  --border-subtle: rgba(0, 255, 102, 0.22);
  --surface-hover: rgba(0, 255, 102, 0.1);
}

/* 6. GÜN BATIMI / SUNSET (Sıcak Mercan & Turuncu Gece) */
body.theme-sunset {
  --bg-primary: #180e1c;
  --bg-secondary: #27142d;
  --bg-card: rgba(39, 20, 45, 0.95);
  --bg-card-hover: rgba(58, 30, 67, 0.98);
  --text-primary: #fef08a;
  --text-secondary: #f97316;
  --text-muted: #fbcfe8;        /* Açık parlak pastel mercan-pembe — kusursuz netlik */
  --char-untyped: #fbcfe8;
  --char-current-untyped: #fef08a;
  --accent-primary: #f43f5e;
  --accent-secondary: #fb923c;
  --accent-glow: rgba(244, 63, 94, 0.45);
  --correct-color: #ffffff;
  --incorrect-color: #ff4d6d;
  --extra-color: #ff2a55;
  --missed-color: #7f1d1d;
  --key-bg: #351c3d;
  --key-border: #4d2859;
  --key-active: #f43f5e;
  --key-text: #fde047;
  --caret-color: #fb923c;
  --border-subtle: rgba(244, 63, 94, 0.22);
  --surface-hover: rgba(244, 63, 94, 0.1);
}

/* 7. ZÜMRÜT YEŞİLİ / EMERALD (Derin Orman & Canlı Nane) */
body.theme-emerald {
  --bg-primary: #061e14;
  --bg-secondary: #0d2f21;
  --bg-card: rgba(13, 47, 33, 0.95);
  --bg-card-hover: rgba(19, 68, 48, 0.98);
  --text-primary: #ffffff;
  --text-secondary: #34d399;
  --text-muted: #a7f3d0;        /* Parlak nane yeşili — orman zemininde kristal netlik */
  --char-untyped: #a7f3d0;
  --char-current-untyped: #ffffff;
  --accent-primary: #10b981;
  --accent-secondary: #f59e0b;
  --accent-glow: rgba(16, 185, 129, 0.45);
  --correct-color: #ffffff;
  --incorrect-color: #f87171;
  --extra-color: #ef4444;
  --missed-color: #7f1d1d;
  --key-bg: #133a29;
  --key-border: #1e523b;
  --key-active: #10b981;
  --key-text: #a7f3d0;
  --caret-color: #10b981;
  --border-subtle: rgba(16, 185, 129, 0.22);
  --surface-hover: rgba(16, 185, 129, 0.1);
}

/* 8. DRAKULA MORU (Gece Moru & Neon Pembe) */
body.theme-dracula {
  --bg-primary: #21222c;
  --bg-secondary: #282a36;
  --bg-card: rgba(40, 42, 54, 0.95);
  --bg-card-hover: rgba(54, 57, 73, 0.98);
  --text-primary: #ffffff;
  --text-secondary: #8be9fd;
  --text-muted: #e2e8f0;        /* Açık parlak gri-lavanta */
  --char-untyped: #e2e8f0;
  --char-current-untyped: #ffffff;
  --accent-primary: #ff79c6;
  --accent-secondary: #50fa7b;
  --accent-glow: rgba(255, 121, 198, 0.45);
  --correct-color: #ffffff;
  --incorrect-color: #ff5555;
  --extra-color: #ff5555;
  --missed-color: #bd93f9;
  --key-bg: #2d303e;
  --key-border: #44475a;
  --key-active: #ff79c6;
  --key-text: #ffffff;
  --caret-color: #ff79c6;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --surface-hover: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   ☀️ AYDINLIK TEMALAR (LIGHT PALETTES) - Tertemiz, Ferah ve Kusursuz Okunabilirlik
   ========================================================================== */

/* 1. KLASİK AYDINLIK (Klasik Slate Beyazı & Lacivert & Mor Vurgu) */
body.theme-light {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --text-primary: #0f172a;        /* Ultra keskin koyu lacivert */
  --text-secondary: #475569;
  --text-muted: #64748b;          /* Zemin üzerinde net ve belirgin gri */
  --char-untyped: #64748b;
  --char-current-untyped: #0f172a;
  --accent-primary: #6366f1;
  --accent-secondary: #0ea5e9;
  --accent-glow: rgba(99, 102, 241, 0.2);
  --correct-color: #0f172a;      /* Keskin ve pürüzsüz yazı rengi */
  --incorrect-color: #dc2626;
  --extra-color: #ef4444;
  --missed-color: #fca5a5;
  --key-bg: #ffffff;
  --key-border: #cbd5e1;
  --key-active: #6366f1;
  --key-text: #0f172a;
  --caret-color: #6366f1;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --surface-hover: rgba(0, 0, 0, 0.04);
}

/* 2. KAĞIT BEYAZI (Sıcak Kitap Kağıdı & Espresso Antrasit) */
body.theme-paper {
  --bg-primary: #fbf9f5;
  --bg-secondary: #f3efe6;
  --bg-card: #ffffff;
  --bg-card-hover: #faf7f2;
  --text-primary: #1c1917;        /* Sıcak derin espresso antrasit */
  --text-secondary: #57534e;
  --text-muted: #78716c;          /* Kağıt üzerinde net ayrışan gri */
  --char-untyped: #78716c;
  --char-current-untyped: #1c1917;
  --accent-primary: #4f46e5;
  --accent-secondary: #d97706;
  --accent-glow: rgba(79, 70, 229, 0.2);
  --correct-color: #1c1917;
  --incorrect-color: #dc2626;
  --extra-color: #ef4444;
  --missed-color: #fca5a5;
  --key-bg: #ffffff;
  --key-border: #e7e5e4;
  --key-active: #4f46e5;
  --key-text: #1c1917;
  --caret-color: #4f46e5;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --surface-hover: rgba(0, 0, 0, 0.04);
}

/* 3. AYDINLIK SAFİR (Ferah Gökyüzü / Deniz Mavisi & Lacivert) */
body.theme-ocean {
  --bg-primary: #f0f9ff;
  --bg-secondary: #e0f2fe;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f9ff;
  --text-primary: #0c4a6e;        /* Derin deniz laciverti */
  --text-secondary: #0369a1;
  --text-muted: #0369a1;
  --char-untyped: #0369a1;
  --char-current-untyped: #0c4a6e;
  --accent-primary: #0284c7;
  --accent-secondary: #06b6d4;
  --accent-glow: rgba(2, 132, 199, 0.2);
  --correct-color: #0c4a6e;
  --incorrect-color: #dc2626;
  --extra-color: #ef4444;
  --missed-color: #fca5a5;
  --key-bg: #ffffff;
  --key-border: #bae6fd;
  --key-active: #0284c7;
  --key-text: #0c4a6e;
  --caret-color: #0284c7;
  --border-subtle: rgba(2, 132, 199, 0.12);
  --surface-hover: rgba(2, 132, 199, 0.05);
}

/* 4. PASTEL RÜYA (Açık Lavanta & Derin Mürdüm) */
body.theme-pastel {
  --bg-primary: #faf5ff;
  --bg-secondary: #f3e8ff;
  --bg-card: #ffffff;
  --bg-card-hover: #faf5ff;
  --text-primary: #3b0764;        /* Derin asil mürdüm */
  --text-secondary: #6b21a8;
  --text-muted: #7e22ce;
  --char-untyped: #7e22ce;
  --char-current-untyped: #3b0764;
  --accent-primary: #9333ea;
  --accent-secondary: #db2777;
  --accent-glow: rgba(147, 51, 234, 0.2);
  --correct-color: #3b0764;
  --incorrect-color: #dc2626;
  --extra-color: #ef4444;
  --missed-color: #fca5a5;
  --key-bg: #ffffff;
  --key-border: #e9d5ff;
  --key-active: #9333ea;
  --key-text: #3b0764;
  --caret-color: #9333ea;
  --border-subtle: rgba(147, 51, 234, 0.12);
  --surface-hover: rgba(147, 51, 234, 0.05);
}


/* ==========================================================================
   GENEL AYDINLIK MOD STİLLERİ (Light Themes Global Adjustments)
   ========================================================================== */

body.theme-light,
body.theme-paper,
body.theme-ocean,
body.theme-pastel {
  color: var(--text-primary);
}

body.theme-light::before,
body.theme-paper::before,
body.theme-ocean::before,
body.theme-pastel::before {
  opacity: 0.12;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
}

/* Aydınlık temalarda kart gölgeleri ve temiz sınırları */
body.theme-light .stat-card,
body.theme-paper .stat-card,
body.theme-ocean .stat-card,
body.theme-pastel .stat-card,
body.theme-light .typing-area-box,
body.theme-paper .typing-area-box,
body.theme-ocean .typing-area-box,
body.theme-pastel .typing-area-box,
body.theme-light .result-panel,
body.theme-paper .result-panel,
body.theme-ocean .result-panel,
body.theme-pastel .result-panel,
body.theme-light .discover-card,
body.theme-paper .discover-card,
body.theme-ocean .discover-card,
body.theme-pastel .discover-card,
body.theme-light .modal-dialog,
body.theme-paper .modal-dialog,
body.theme-ocean .modal-dialog,
body.theme-pastel .modal-dialog,
body.theme-light .results-modal-dialog,
body.theme-paper .results-modal-dialog,
body.theme-ocean .results-modal-dialog,
body.theme-pastel .results-modal-dialog,
body.theme-light .custom-text-modal-dialog,
body.theme-paper .custom-text-modal-dialog,
body.theme-ocean .custom-text-modal-dialog,
body.theme-pastel .custom-text-modal-dialog,
body.theme-light .settings-group,
body.theme-paper .settings-group,
body.theme-ocean .settings-group,
body.theme-pastel .settings-group {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.theme-light .nav-tabs,
body.theme-paper .nav-tabs,
body.theme-ocean .nav-tabs,
body.theme-pastel .nav-tabs {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

body.theme-light .nav-tab-btn:hover,
body.theme-paper .nav-tab-btn:hover,
body.theme-ocean .nav-tab-btn:hover,
body.theme-pastel .nav-tab-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

body.theme-light .nav-dropdown-menu,
body.theme-paper .nav-dropdown-menu,
body.theme-ocean .nav-dropdown-menu,
body.theme-pastel .nav-dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

body.theme-light .nav-dropdown-item:hover,
body.theme-paper .nav-dropdown-item:hover,
body.theme-ocean .nav-dropdown-item:hover,
body.theme-pastel .nav-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.04);
}

body.theme-light .action-icon-btn,
body.theme-paper .action-icon-btn,
body.theme-ocean .action-icon-btn,
body.theme-pastel .action-icon-btn {
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

body.theme-light .mode-btn.active,
body.theme-paper .mode-btn.active,
body.theme-ocean .mode-btn.active,
body.theme-pastel .mode-btn.active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent-primary);
}

body.theme-light .mode-divider,
body.theme-paper .mode-divider,
body.theme-ocean .mode-divider,
body.theme-pastel .mode-divider {
  background: rgba(0, 0, 0, 0.1);
}

body.theme-light .btn-secondary,
body.theme-paper .btn-secondary,
body.theme-ocean .btn-secondary,
body.theme-pastel .btn-secondary {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

body.theme-light .btn-secondary:hover,
body.theme-paper .btn-secondary:hover,
body.theme-ocean .btn-secondary:hover,
body.theme-pastel .btn-secondary:hover {
  background: #f1f5f9;
  border-color: var(--accent-primary);
}

body.theme-light .theme-card,
body.theme-paper .theme-card,
body.theme-ocean .theme-card,
body.theme-pastel .theme-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.theme-light .theme-card:hover,
body.theme-paper .theme-card:hover,
body.theme-ocean .theme-card:hover,
body.theme-pastel .theme-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.theme-light .app-footer,
body.theme-paper .app-footer,
body.theme-ocean .app-footer,
body.theme-pastel .app-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Yumuşak tema geçiş animasyonu */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   İmleç Animasyon Stilleri (Caret Styles)
   ========================================================================== */

/* Kayan Akıcı İmleç */
body.caret-smooth #typingCaret {
  transition: left 0.08s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.12s ease;
  width: 3px;
  background-color: var(--caret-color);
  box-shadow: 0 0 8px var(--caret-color);
}

/* Lazer Işıltılı İmleç */
body.caret-laser #typingCaret {
  transition: left 0.06s ease-out, top 0.1s ease;
  width: 3.5px;
  background-color: var(--caret-color);
  box-shadow: 0 0 14px var(--caret-color), 0 0 24px var(--accent-secondary);
}

/* Yanıp Sönen Çizgi (Pulse) */
body.caret-pulse #typingCaret {
  transition: left 0.09s ease;
  width: 2.5px;
  background-color: var(--caret-color);
  animation: caretPulseAnim 0.85s infinite ease-in-out;
}

@keyframes caretPulseAnim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Terminal Blok İmleç */
body.caret-block #typingCaret {
  transition: left 0.05s ease;
  width: 14px;
  background-color: var(--caret-color);
  opacity: 0.55;
  border-radius: 2px;
}

/* Altı Çizili İmleç */
body.caret-underline #typingCaret {
  transition: left 0.08s ease;
  width: 14px;
  height: 3px !important;
  top: auto !important;
  bottom: 0;
  background-color: var(--caret-color);
  box-shadow: 0 0 6px var(--caret-color);
}