/* ==========================================================================
   aahaber.com - Modern Glassmorphic Dashboard News Theme
   Design System & Styling Tokens (Kavisli / Rounded Edges Edition)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Brand Primary Palettes (Purple / Violet) */
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;

  /* Accent Gradients */
  --sidebar-gradient: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 45%, #6d28d9 100%);
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  --hot-gradient: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  --card-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
  
  /* Backgrounds & Neutrals (Light Mode) */
  --bg-page: #ebeaf7; /* Dış kavisli arka plan */
  --bg-app: #f6f7fb;
  --bg-card: #ffffff;
  --bg-card-subtle: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.78);
  --bg-glass-card: rgba(255, 255, 255, 0.68);
  --border-glass: rgba(255, 255, 255, 0.85);
  --border-subtle: rgba(148, 163, 184, 0.16);
  --border-card: #e8ecf4;

  /* Typography Colors */
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-white: #ffffff;

  /* UI Status */
  --status-green: #10b981;
  --status-red: #ef4444;
  --status-amber: #f59e0b;
  --status-blue: #3b82f6;

  /* Shadows */
  --shadow-subtle: 0 4px 20px -2px rgba(100, 116, 139, 0.06);
  --shadow-card: 0 10px 30px -8px rgba(124, 58, 237, 0.08);
  --shadow-card-hover: 0 20px 38px -10px rgba(124, 58, 237, 0.18);
  --shadow-glass: 0 8px 32px 0 rgba(142, 81, 243, 0.12);
  --shadow-sidebar: 4px 0 25px rgba(109, 40, 217, 0.18);
  --shadow-window: 0 25px 70px -15px rgba(109, 40, 217, 0.22);

  /* Radius (Belirgin Kavisler) */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* Transitions */
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;

  /* Aliases for Modules & Plug-ins (Light Mode) */
  --accent-primary: var(--primary-600);
  --accent-hover: var(--primary-700);
  --border-color: var(--border-card);
  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --bg-primary: var(--bg-card);
  --bg-hover: var(--bg-card-subtle);
  --bg-input: var(--bg-card);
  --shadow-sm: var(--shadow-subtle);
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --bg-page: #040711;
  --bg-app: #0c1220;
  --bg-card: #131b2e;
  --bg-card-subtle: #19233a;
  --bg-glass: rgba(19, 27, 46, 0.85);
  --bg-glass-card: rgba(25, 35, 58, 0.75);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: #1e293b;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-light: #64748b;

  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 20px 38px -10px rgba(124, 58, 237, 0.32);
  --shadow-window: 0 25px 70px -15px rgba(0, 0, 0, 0.7);

  /* Aliases for Modules & Plug-ins (Dark Mode) */
  --accent-primary: var(--primary-500);
  --accent-hover: var(--primary-600);
  --border-color: var(--border-card);
  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --bg-primary: var(--bg-card);
  --bg-hover: var(--bg-card-subtle);
  --bg-input: var(--bg-card-subtle);
  --shadow-sm: var(--shadow-subtle);
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #ede9fe; /* 1mm boşlukta kavisin kusursuz görünmesi için zarif zemin */
  color: var(--text-main);
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Sayfa bütünü değil, yalnızca sağ içerik kayar */
  display: flex;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.5;
}

[data-theme="dark"] body {
  background-color: #050814;
  background-image: 
    radial-gradient(ellipse 450px 550px at 0% 15%, rgba(124, 58, 237, 0.18), transparent 70%),
    radial-gradient(ellipse 400px 500px at 0% 85%, rgba(79, 70, 229, 0.15), transparent 70%),
    radial-gradient(ellipse 600px 400px at 100% 0%, rgba(147, 51, 234, 0.10), transparent 70%);
  background-attachment: fixed;
}

/* ==========================================================================
   APP CONTAINER (Tam Ekran Dashboard Çerçevesi)
   ========================================================================== */
.app-container {
  display: flex;
  height: 100vh;
  width: 100%;
  max-width: 100%;
  background: var(--bg-app);
  background-image: 
    radial-gradient(ellipse 450px 550px at 0% 15%, rgba(139, 92, 246, 0.08), transparent 70%),
    radial-gradient(ellipse 400px 500px at 0% 85%, rgba(167, 139, 250, 0.07), transparent 70%);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: none;
  position: relative;
}

[data-theme="dark"] .app-container {
  background-image: 
    radial-gradient(ellipse 450px 550px at 0% 15%, rgba(124, 58, 237, 0.15), transparent 70%),
    radial-gradient(ellipse 400px 500px at 0% 85%, rgba(79, 70, 229, 0.12), transparent 70%);
}

/* ==========================================================================
   LEFT SIDEBAR (Sabit Kalan, Köşeleri Kavisli Aydınlık Kristal Cam Menü)
   ========================================================================== */
.sidebar {
  width: 250px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 246, 255, 0.72) 50%, rgba(241, 235, 255, 0.80) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-top: 1.5px solid rgba(255, 255, 255, 0.98);
  border-left: 1.5px solid rgba(255, 255, 255, 0.92);
  color: var(--text-main);
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 12px); /* 1mm üst ve alt payı */
  margin: 6px 0 6px 6px;      /* 1mm (yaklaşık 5-6px) boşluk: sol, üst ve alt */
  border-radius: 32px 16px 16px 32px; /* SOL ÜST VE SOL ALT KÖŞEYE BELİRGİN KAVİS! */
  flex-shrink: 0;             /* Asla oynamaz, SABİTTİR */
  z-index: 50;
  box-shadow: 0 20px 45px rgba(109, 40, 217, 0.08), inset 0 1px 1.5px rgba(255, 255, 255, 0.95), 0 0 35px rgba(139, 92, 246, 0.06);
  overflow-y: auto;
  transition: var(--transition-smooth);
}

/* Brand Logo (Sol Üst: aahaber.com) */
.brand-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 4px 6px;
  text-decoration: none;
  color: #0f172a;
}

.brand-badge {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-md); /* Kavisli logo rozeti */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.5px;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
}

.brand-badge .live-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border: 2px solid #ffffff;
  border-radius: 50%;
  animation: pulseLive 2s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #0f172a;
}

.brand-title span {
  color: #7c3aed;
}

.brand-subtitle {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Sidebar Menu List */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 2px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: var(--radius-full);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.45);
}

.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin: 10px 8px 3px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: var(--radius-md); /* 18px Kavisli Butonlar */
  color: #334155;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
}

.nav-item svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: #64748b;
  transition: var(--transition);
}

.nav-item:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.16);
  color: #6d28d9;
  transform: translateX(3px);
}

.nav-item:hover svg {
  stroke: #6d28d9;
}

.nav-item.active {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px -4px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

.nav-item.active svg {
  stroke: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.nav-badge {
  display: none !important;
}

/* Sidebar Alt Bölüm: Son Dakika Butonu */
.sidebar-bottom-action {
  margin-top: auto;
  padding-top: 8px;
}

.btn-sondakika-bottom {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: #6d28d9;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
  cursor: pointer;
  background: rgba(139, 92, 246, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, 0.24);
  border-top: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 15px rgba(109, 40, 217, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  user-select: none;
}

.btn-sondakika-bottom svg {
  stroke: #7c3aed;
  transition: var(--transition);
}

.btn-sondakika-bottom:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.38);
  transform: translateY(-1px);
}

.btn-sondakika-bottom:hover svg {
  stroke: #ffffff;
}

.btn-sondakika-bottom.active {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.45);
}

.btn-sondakika-bottom.active svg {
  stroke: #ffffff;
}

/* ==========================================================================
   DARK MODE GLASS SIDEBAR (Karanlık Mod Kavisli Cam Menü)
   ========================================================================== */
[data-theme="dark"] .sidebar {
  background: linear-gradient(165deg, rgba(20, 26, 45, 0.72) 0%, rgba(15, 23, 42, 0.65) 50%, rgba(10, 15, 30, 0.82) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 0 40px rgba(124, 58, 237, 0.12);
}

/* Brand Logo (Dark Glass) */
[data-theme="dark"] .brand-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35) 0%, rgba(124, 58, 237, 0.2) 100%);
  border: 1.5px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

[data-theme="dark"] .brand-badge .live-dot {
  border-color: #0f172a;
}

[data-theme="dark"] .brand-title {
  color: #f8fafc;
}

[data-theme="dark"] .brand-title span {
  color: #fde047;
}

[data-theme="dark"] .brand-subtitle {
  color: rgba(203, 213, 225, 0.65);
}

/* Nav Item List (Dark Glass) */
[data-theme="dark"] .nav-section-title {
  color: rgba(148, 163, 184, 0.55);
}

[data-theme="dark"] .nav-item {
  color: rgba(226, 232, 240, 0.78);
  border: 1px solid transparent;
}

[data-theme="dark"] .nav-item svg {
  stroke: rgba(203, 213, 225, 0.72);
}

[data-theme="dark"] .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: translateX(3px);
}

[data-theme="dark"] .nav-item:hover svg {
  stroke: #ffffff;
}

/* Active Nav Item - Sleek Glass Neon Highlight */
[data-theme="dark"] .nav-item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(124, 58, 237, 0.55) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(167, 139, 250, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: 0 8px 24px -4px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

[data-theme="dark"] .nav-item.active svg {
  stroke: #ffffff;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6));
}

/* Scrollbar (Dark Glass) */
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.4);
}

/* Bottom Action Button (Dark Glass) */
[data-theme="dark"] .btn-sondakika-bottom {
  background: rgba(139, 92, 246, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(167, 139, 250, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .btn-sondakika-bottom svg {
  stroke: #c4b5fd;
}

[data-theme="dark"] .btn-sondakika-bottom:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.38) 0%, rgba(124, 58, 237, 0.58) 100%);
  border-color: rgba(167, 139, 250, 0.6);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.45);
}

[data-theme="dark"] .btn-sondakika-bottom:hover svg,
[data-theme="dark"] .btn-sondakika-bottom.active svg {
  stroke: #ffffff;
}

[data-theme="dark"] .btn-sondakika-bottom.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.45) 0%, rgba(124, 58, 237, 0.65) 100%);
  border-color: rgba(167, 139, 250, 0.65);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.45);
}

/* ==========================================================================
   MAIN CONTENT AREA (Aşağı Kayan Sağ Taraf)
   ========================================================================== */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow-y: auto; /* Sayfa aşağı kaydıkça SAĞ TARAF KAYAR */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.main-wrapper::-webkit-scrollbar {
  width: 7px;
}

.main-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.main-wrapper::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: var(--radius-full);
}

.main-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--primary-400);
}

/* ==========================================================================
   TOP HEADER (Glassmorphic Bar with Search & Quick Buttons - Kavisli Glass)
   ========================================================================== */
.top-header {
  position: sticky;
  top: 6px;
  z-index: 40;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid var(--border-glass);
  border-radius: 18px; /* KAVİSLİ GLASS KÖŞELER */
  margin: 6px 16px 0 10px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
}

/* Search Input Box */
.header-search-wrap {
  position: relative;
  flex: 1;
  max-width: 520px;
}

.header-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); /* Tam Kavisli Arama Çubuğu */
  padding: 6px 32px 6px 36px;
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
  font-family: inherit;
}

.header-search-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.search-icon-left {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  width: 15px;
  height: 15px;
}

.search-shortcut-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
  pointer-events: none;
}

/* Quick Action Buttons (Üstte Belirlediğiniz Butonlar) */
.header-quick-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.header-quick-buttons::-webkit-scrollbar {
  display: none;
}

.quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); /* Kavisli Pill Buton */
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
}

.quick-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

[data-theme="dark"] .quick-btn:hover {
  background: var(--primary-900);
  border-color: var(--primary-600);
  color: var(--primary-200);
}

.quick-btn.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
}

.quick-btn .btn-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-green);
}

.quick-btn .btn-indicator.red {
  background: var(--status-red);
  animation: pulseLive 1.5s infinite;
}

/* Header User Actions (Sağ Taraf) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.icon-btn svg {
  width: 15px;
  height: 15px;
}

.icon-btn:hover {
  color: var(--primary-600);
  border-color: var(--primary-300);
  background: var(--primary-50);
}

[data-theme="dark"] .icon-btn:hover {
  background: var(--primary-900);
  border-color: var(--primary-700);
  color: #fff;
}

.icon-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: var(--status-red);
  border-radius: 50%;
  border: 1.5px solid var(--bg-card);
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); /* Kavisli Profil Hapı */
  cursor: pointer;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
}

.user-profile-badge:hover {
  border-color: var(--primary-300);
}

.avatar-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sidebar-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

/* ==========================================================================
   BREAKING NEWS TICKER (Son Dakika Bandı - Kavisli)
   ========================================================================== */
.ticker-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg); /* 24px Kavisli Son Dakika Bandı */
  margin: 12px 16px 0 10px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  box-shadow: var(--shadow-subtle);
}

.ticker-badge {
  background: var(--hot-gradient);
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ticker-content {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-text {
  display: inline-block;
  color: var(--text-main);
  font-weight: 600;
  animation: tickerSlide 25s linear infinite;
  cursor: pointer;
}

.ticker-text:hover {
  animation-play-state: paused;
  color: var(--primary-600);
}

@keyframes tickerSlide {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ==========================================================================
   CONTENT CONTAINER & DASHBOARD GRID
   ========================================================================== */
.content-body {
  padding: 10px 16px 36px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Dashboard Row: Headlines (Left 2 cols) & Live Widgets (Right 1 col) */
.dashboard-grid-top {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: 24px;
}

/* Headline Hero Card (Manşet - 32px Kavisli) */
.hero-headline-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl); /* 30px Kavis */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.hero-headline-card:hover {
  border-color: var(--primary-400);
}

.hero-headline-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.hero-headline-card:hover .hero-headline-bg {
  opacity: 0.95;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.5) 45%, rgba(15, 23, 42, 0.95) 100%);
}

.hero-content {
  position: relative;
  z-index: 10;
  padding: 32px;
  color: #ffffff;
}

.hero-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.category-tag {
  background: var(--primary-600);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-tag.economy { background: #059669; }
.category-tag.tech { background: #0284c7; }
.category-tag.sport { background: #ea580c; }

.hero-source-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.hero-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  margin-bottom: 18px;
  max-width: 90%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* Right Widgets Column */
.widgets-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Market Finance Widget (Canlı Piyasalar - 28px Kavisli) */
.market-widget-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl); /* 30px Kavis */
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.widget-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
}

.widget-badge-live {
  font-size: 10px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.12);
  color: var(--status-green);
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

.market-items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.market-item {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); /* 18px Kavisli Kutu */
  padding: 14px;
  transition: var(--transition);
}

.market-item:hover {
  border-color: var(--primary-300);
}

.market-name {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.market-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
}

.market-change {
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.market-change.up { color: var(--status-green); }
.market-change.down { color: var(--status-red); }

/* AI Assistant & Weather Widget (28px Kavisli) */
.weather-ai-card {
  background: var(--sidebar-gradient);
  border-radius: var(--radius-xl); /* 30px Kavis */
  padding: 22px;
  color: #ffffff;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.weather-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.weather-temp {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.weather-city {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.weather-condition {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.ai-search-promo {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md); /* 18px Kavis */
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.ai-promo-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-promo-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

/* ==========================================================================
   NEWS CARDS GRID (MSN TR Stili - Belirgin Kavisli Kartlar)
   ========================================================================== */
.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 6px;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary-600);
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-full); /* Kavisli Kapsül */
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-subtle);
}

.filter-tab {
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.filter-tab.active {
  background: var(--primary-600);
  color: #ffffff;
}

.filter-tab:hover:not(.active) {
  color: var(--text-main);
  background: var(--bg-card-subtle);
}

/* ==========================================================================
   MSN TR TARZI HABER KOLAJI & SLİDER IZGARASI
   ========================================================================== */
.msn-collage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
  margin-bottom: 30px;
}

@media (max-width: 1560px) {
  .msn-collage-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  .msn-collage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .msn-collage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .msn-collage-grid {
    grid-template-columns: 1fr;
  }
}

/* Genel MSN Kartı */
.msn-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-subtle);
  transition: border-color 0.2s ease;
  cursor: pointer;
  position: relative;
}

.msn-card:hover {
  border-color: var(--primary-400);
}

.msn-card.span-2 {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .msn-card.span-2 {
    grid-column: span 1;
  }
}

/* ==========================================================================
   HABERLER SAYFASI PAGINATION & DAHA FAZLA HABER OKU
   ========================================================================== */
.haberler-pagination-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 36px 0 64px;
  position: relative;
  width: 100%;
}

.haberler-scroll-sentinel {
  height: 20px;
  width: 100%;
  pointer-events: none;
}

.haberler-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 9999px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-subtle);
  animation: fadeInNews 0.25s ease-out;
}

.haberler-loading-spinner .spinner-icon {
  animation: spinNews 0.85s linear infinite;
  color: var(--primary-600);
}

@keyframes spinNews {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fadeInNews {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-load-more-news {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  padding: 15px 36px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  user-select: none;
}

.btn-load-more-news:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.45);
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.btn-load-more-news:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-load-more-news.loading {
  opacity: 0.8;
  cursor: wait;
}

.haberler-end-message {
  padding: 16px 28px;
  background: var(--bg-card-subtle);
  border: 1px dashed var(--border-card);
  border-radius: 9999px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 1. SOL ÜSTTE SLİDER KARTI (KaNews / 2. Resim Formatında) */
.msn-slider-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  min-height: 380px;
}

@media (max-width: 640px) {
  .msn-slider-card {
    grid-column: span 1;
    min-height: 320px;
  }
}

.slider-track {
  width: 100%;
  flex: 1;
  min-height: 325px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #0f172a;
}

@media (max-width: 640px) {
  .slider-track {
    min-height: 270px;
  }
}

.slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.slide-item.active {
  opacity: 1;
  pointer-events: auto;
  transition: none !important;
}

.slide-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.45) 45%, rgba(15, 23, 42, 0.95) 100%);
}

.slide-content {
  position: relative;
  z-index: 10;
  padding: 22px 24px;
  color: #ffffff;
}

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

.slide-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-transform: uppercase;
}

.slide-source-pill {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.slide-title {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.28;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .slide-title {
    font-size: 18px;
  }
}

/* KaNews Tarzı Alt Navigasyon Barı: Sol Ok - Ortada Dotlar - Sağ Ok */
.slider-bottom-bar {
  height: 52px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 20;
}

.slider-bar-arrow {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
  padding: 0;
}

.slider-bar-arrow:hover {
  color: #dc2626;
  background: var(--bg-card-subtle);
}

.slider-dots-center {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 6px;
  margin: 0 4px;
}

.slider-dots-center::-webkit-scrollbar {
  display: none;
}

.slider-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 26px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  flex-shrink: 0;
  user-select: none;
  text-decoration: none;
}

/* Sayı butonlarında expanded after gerekmez */
.slider-dot::after {
  display: none;
}

[data-theme="dark"] .slider-dot {
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}

.slider-dot:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}

[data-theme="dark"] .slider-dot:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.45);
}

.slider-dot.active {
  width: auto !important;
  min-width: 25px;
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.38);
  transform: scale(1.05);
}

[data-theme="dark"] .slider-dot.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

/* Standart MSN Haber Kartı */
.msn-news-img-wrap {
  width: 100%;
  height: 175px;
  overflow: hidden;
  position: relative;
  background: var(--bg-card-subtle);
}

.msn-news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.msn-card:hover .msn-news-img {
  opacity: 0.95;
}

.msn-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.msn-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.msn-source-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.msn-source-info span:not(.source-logo-mini) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msn-news-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3. ÖNE ÇIKAN HABERLER LİSTE KARTI */
.msn-trending-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trending-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 14px;
}

.trending-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trending-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.trending-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.trending-item-source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.trending-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
}

/* 4. OYUNLAR KARTI (3x3 grid) */
.msn-games-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.games-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.game-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  position: relative;
}

.game-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.games-footer-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
  text-align: right;
  display: block;
}

/* 5. VİDEO / FRAGMAN KARTI (2 Sütun Kaplar) */
.msn-video-card {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .msn-video-card {
    grid-column: span 1;
  }
}

.msn-video-card .msn-news-img-wrap {
  height: 220px;
}

.video-play-btn-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* 6. HAVA DURUMU KARTI */
.msn-weather-card {
  background: linear-gradient(135deg, #0e1e3e 0%, #172d5c 100%);
  color: #ffffff;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.weather-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}

.weather-temp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}

.weather-temp-big {
  font-size: 38px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.weather-forecast-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.weather-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.weather-forecast-link {
  margin-top: 12px;
  padding: 6px;
  text-align: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

/* 7. CANLI SKORLAR / MAÇ KARTI */
.msn-scores-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.score-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card-subtle);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.score-row-item:last-child {
  margin-bottom: 0;
}

.team-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.team-badge-circle {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
}

/* 8. YATAY 2 SÜTUNLUK HABER KARTI */
.msn-card.horizontal-card {
  grid-column: span 2;
  flex-direction: row;
}

.msn-card.horizontal-card .msn-news-img-wrap {
  width: 44%;
  height: auto;
  min-height: 190px;
}

.msn-card.horizontal-card .msn-card-body {
  width: 56%;
}

@media (max-width: 640px) {
  .msn-card.horizontal-card {
    grid-column: span 1;
    flex-direction: column;
  }
  .msn-card.horizontal-card .msn-news-img-wrap,
  .msn-card.horizontal-card .msn-card-body {
    width: 100%;
  }
}

/* 9. FOTOĞRAF ÜZERİNE YAZILI KAPLAMA KARTI (Overlay Card - Resim 2 & 4 Referansı) */
.msn-card.overlay-card {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0f172a;
  overflow: hidden;
}

.msn-card.overlay-card .overlay-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.msn-card.overlay-card:hover .overlay-bg-img {
  opacity: 0.92;
}

.msn-card.overlay-card .overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.45) 40%, rgba(15, 23, 42, 0.95) 100%);
  z-index: 2;
}

.msn-card.overlay-card .overlay-content {
  position: relative;
  z-index: 5;
  padding: 20px 22px;
  color: #ffffff;
}

.msn-card.overlay-card .overlay-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.msn-card.overlay-card .overlay-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.32;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.msn-card.overlay-card.span-2 .overlay-title {
  font-size: 21px;
  -webkit-line-clamp: 2;
}

/* 10. ÖNERİLEN VİDEOLAR RAF/CAROUSEL (Resim 3 Referansı) */
.recommended-videos-shelf {
  grid-column: 1 / -1;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: var(--shadow-subtle);
  margin: 8px 0;
}

.shelf-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.shelf-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.shelf-title svg {
  color: #ef4444;
}

.shelf-more-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.shelf-scroll-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

.shelf-scroll-track::-webkit-scrollbar {
  height: 6px;
}

.shelf-scroll-track::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 9999px;
}

.shelf-video-card {
  flex: 0 0 200px;
  max-width: 200px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.15s ease;
}

.shelf-video-card:hover {
  border-color: var(--primary-400);
}

.shelf-video-thumb-wrap {
  width: 100%;
  height: 110px;
  position: relative;
  overflow: hidden;
  background: #0f172a;
}

.shelf-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.shelf-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
}

.shelf-video-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.shelf-video-source {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.shelf-video-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* News Cards Grid */
.news-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl); /* 30px Kavisli Haber Kartı */
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.news-card:hover {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-card);
}

.news-card-img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Üst kavisler */
}

.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.news-card:hover .news-card-img {
  opacity: 0.95;
}

.news-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
}

.source-pill {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.news-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: var(--transition);
}

.news-card:hover .news-card-title {
  color: var(--primary-600);
}

.news-card-excerpt {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  font-size: 12px;
  color: var(--text-light);
}

.reading-time {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   SEARXNG LIVE WEB SEARCH RESULTS SECTION (30px Kavisli)
   ========================================================================== */
.searx-results-section {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-xl); /* 30px Kavis */
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.searx-results-section.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.searx-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.searx-title-wrap h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.searx-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--status-green);
}

.btn-close-search {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
}

.searx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.searx-item-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); /* 18px Kavis */
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.searx-item-card:hover {
  border-color: var(--primary-400);
  background: var(--bg-card);
}

.searx-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-700);
}

.searx-item-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 6px;
}

.searx-item-snippet {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

.searx-item-link {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   FULL ARTICLE READER MODAL (Glassmorphic Pop-up - 36px Kavisli)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.article-modal {
  background: var(--bg-card);
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  border-radius: var(--radius-2xl); /* 36px Kavisli Pop-up */
  border: 1.5px solid var(--border-glass);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.open .article-modal {
  transform: translateY(0) scale(1);
}

.modal-header-bar {
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.modal-source-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-close-modal {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition);
}

.btn-close-modal:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}

.modal-scroll-body {
  padding: 30px;
  overflow-y: auto;
  line-height: 1.7;
}

.modal-article-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: var(--radius-lg); /* 24px Kavisli Resim */
  margin-bottom: 24px;
}

.modal-article-title {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 14px;
}

.ai-summary-box {
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md); /* 18px Kavis */
  padding: 16px 20px;
  margin-bottom: 24px;
}

[data-theme="dark"] .ai-summary-box {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.3);
}

.ai-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-700);
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
}

[data-theme="dark"] .ai-summary-badge {
  color: var(--primary-300);
}

.ai-summary-text {
  font-size: 14px;
  color: var(--text-main);
  font-weight: 500;
}

.modal-article-text {
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 30px;
}

.modal-footer-attribution {
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-original-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--sidebar-gradient);
  color: #fff;
  border-radius: var(--radius-full); /* Kavisli Buton */
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.btn-original-source:hover {
  opacity: 0.92;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Mobil ve Tablet Uyumu)
   ========================================================================== */
@media (max-width: 1200px) {
  .dashboard-grid-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body {
    padding: 0;
  }

  .app-container {
    border-radius: 0;
    min-height: 100vh;
    border: none;
  }

  .sidebar {
    position: fixed;
    left: -270px;
    top: 0;
    bottom: 0;
    height: 100vh;
    border-radius: 0;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
  }

  .sidebar.mobile-open {
    left: 0;
  }

  .top-header {
    padding: 12px 18px;
  }

  .content-body {
    padding: 18px;
  }

  .ticker-bar {
    margin: 12px 18px 0 18px;
  }

  .header-search-wrap {
    max-width: 240px;
  }
}

@media (max-width: 640px) {
  .header-quick-buttons {
    display: none;
  }

  .hero-title {
    font-size: 22px;
  }

  .hero-headline-card {
    min-height: 320px;
  }

  .market-items-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HABERLER SAYFASI - KATEGORİ MODÜLLERİ (5'ER HABERLİ AKIŞ)
   ========================================================================== */
.page-title-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 24px 30px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-title-banner h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.page-title-banner p {
  font-size: 14px;
  color: var(--text-muted);
}

/* Üst Kategori Butonları (Türkiyenin En Popüler Kategorileri) */
.popular-categories-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-behavior: smooth;
}

.popular-categories-bar::-webkit-scrollbar {
  height: 4px;
}
.popular-categories-bar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-full);
}

.cat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  box-shadow: var(--shadow-subtle);
}

.cat-pill-btn:hover {
  background: var(--primary-600);
  color: #ffffff;
  border-color: var(--primary-600);
}

.cat-pill-btn.active {
  background: var(--primary-600);
  color: #ffffff;
  border-color: var(--primary-600);
}

.cat-pill-count {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

[data-theme="dark"] .cat-pill-count {
  background: rgba(255, 255, 255, 0.15);
}

/* Kategori Bölüm Kartı */
.category-block {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl); /* 30px Kavis */
  padding: 26px 28px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: 100px;
}

.category-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
}

.category-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
}

.category-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--primary-50);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .category-icon-box {
  background: var(--primary-900);
  color: var(--primary-300);
}

.badge-count-5 {
  background: rgba(124, 58, 237, 0.1);
  color: var(--primary-600);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

[data-theme="dark"] .badge-count-5 {
  background: rgba(124, 58, 237, 0.25);
  color: var(--primary-300);
}

.btn-view-all-cat {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.btn-view-all-cat:hover {
  color: var(--primary-700);
}

/* 5'li Haber Izgarası */
.category-grid-5 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* İlk Haber Öne Çıkan Kart */
.category-grid-5 .news-card.featured-in-cat {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .category-grid-5 .news-card.featured-in-cat {
    grid-column: span 1;
  }
}

/* ==========================================================================
   KATEGORİ SAYFASI BAŞLIK & DÜZENİ
   ========================================================================== */
.categories-nav-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 5px 8px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  align-items: center;
}

.category-page-header {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 16px 24px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.category-page-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.category-icon-large {
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.category-page-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.4px;
  margin: 0;
}

.category-badge-pill {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Sitenin hiçbir yerinde buton, kart veya resim üzerine gelince havaya kalkmasın */
button:hover,
a:hover,
.nav-item:hover,
.cat-pill-btn:hover,
.news-card:hover,
.news-card-img:hover,
.hero-headline-card:hover,
.hero-headline-bg:hover,
.market-item:hover,
.searx-item-card:hover,
.quick-btn:hover,
.btn-sondakika-bottom:hover,
.btn-view-all-cat:hover,
.btn-original-source:hover,
.btn-show-map:hover,
.emergency-call-btn:hover {
  transform: none !important;
}

/* ==========================================================================
   SON DEPREMLER SAYFASI STİLLERİ (KaNews Birebir Uyarlaması)
   ========================================================================== */
.deprem-page-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Breadcrumb & Sayfa Başlığı */
.deprem-header-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.deprem-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.deprem-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.deprem-breadcrumb a:hover {
  color: var(--primary-600);
}

.deprem-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.deprem-title-row h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.live-pulse-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulseLive 1.5s infinite;
}

/* 4'lü İstatistik Kartları */
.deprem-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1080px) {
  .deprem-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .deprem-stats-grid {
    grid-template-columns: 1fr;
  }
}

.deprem-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 112px;
}

.deprem-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.deprem-stat-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deprem-stat-time {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.deprem-stat-location {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deprem-stat-number {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1;
}

.deprem-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #dc2626;
  margin-top: 4px;
}

.deprem-stat-badge.pill {
  background: rgba(220, 38, 38, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  width: fit-content;
}

.deprem-datasource-notice {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: -6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Bölüm Başlığı Çubuğu */
.section-bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 2px;
}

.section-bar-title .bar-indicator {
  width: 4px;
  height: 18px;
  background: #dc2626;
  border-radius: 2px;
}

/* Harita Kapsayıcısı */
.deprem-map-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  position: relative;
}

#earthquakeMap {
  width: 100%;
  height: 480px;
  background: #e2e8f0;
  z-index: 10;
}

.map-helper-footer {
  padding: 8px 16px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
}

/* Leaflet Custom Popups (KaNews Birebir Uyumu) */
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
  padding: 2px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.leaflet-popup-content {
  margin: 10px 14px !important;
  line-height: 1.5 !important;
}

.kanews-earthquake-popup {
  font-size: 13px;
  line-height: 1.55;
  color: #1e293b;
}

.kanews-earthquake-popup strong {
  font-weight: 700;
  color: inherit;
}

.kanews-earthquake-popup a {
  display: inline-block;
  margin-top: 4px;
  color: #0284c7;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s, text-decoration 0.15s;
}

.kanews-earthquake-popup a:hover {
  color: #0369a1;
  text-decoration: underline;
}

[data-theme="dark"] .leaflet-popup-content-wrapper {
  background: #1e222d !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .leaflet-popup-tip {
  background: #1e222d !important;
}

[data-theme="dark"] .kanews-earthquake-popup {
  color: #f1f5f9;
}

[data-theme="dark"] .kanews-earthquake-popup a {
  color: #38bdf8;
}

[data-theme="dark"] .kanews-earthquake-popup a:hover {
  color: #7dd3fc;
}

/* Büyüklük Açıklaması ve Lejant */
.deprem-legend-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deprem-legend-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.deprem-legend-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.deprem-legend-pills {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.legend-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.legend-color-box {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Deprem Listesi Kartı & Filtreler */
.deprem-list-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.deprem-tabs-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 10px;
}

.deprem-tab-btn {
  background: transparent;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.deprem-tab-btn.active {
  color: var(--primary-600);
  background: var(--primary-50);
}

[data-theme="dark"] .deprem-tab-btn.active {
  color: #fff;
  background: var(--primary-900);
}

.deprem-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-search-input {
  flex: 1;
  min-width: 240px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.filter-search-input:focus {
  border-color: var(--primary-500);
}

.filter-select {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

.btn-refresh-deprem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-refresh-deprem:hover {
  background: var(--primary-50);
  color: var(--primary-600);
  border-color: var(--primary-300);
}

/* Deprem Tablosu */
.deprem-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  max-height: 520px;
  overflow-y: auto;
}

.deprem-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.deprem-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  z-index: 5;
}

.deprem-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}

.deprem-table tbody tr:hover {
  background: var(--bg-card-subtle);
}

.deprem-table td {
  padding: 10px 14px;
  color: var(--text-main);
  font-weight: 500;
  vertical-align: middle;
}

.td-date {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.td-location {
  font-weight: 700;
  max-width: 320px;
}

.td-type {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 11px;
}

.mag-pill-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mag-number-pill {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  min-width: 36px;
  text-align: center;
}

.mag-label-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.td-depth {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.btn-show-map {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-show-map:hover {
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
}

/* Acil Durum & Yardım Bölümü (2 Kolon) */
.emergency-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .emergency-info-grid {
    grid-template-columns: 1fr;
  }
}

.emergency-box-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emergency-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.emergency-list-wrap::-webkit-scrollbar {
  width: 4px;
}
.emergency-list-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

.emergency-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  gap: 12px;
}

.emergency-org-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.emergency-phone-number {
  font-family: monospace;
  font-size: 13px;
  font-weight: 800;
  color: #dc2626;
  white-space: nowrap;
}

.emergency-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  margin-left: 8px;
}

.emergency-link-btn {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}

.emergency-link-btn:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

/* ==========================================================================
   14. CANLI TRAFİK DURUMU SAYFASI STİLLERİ (Yandex Maps & KaNews Uyumu)
   ========================================================================== */
.traffic-page-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.traffic-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.traffic-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.traffic-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.traffic-breadcrumb a:hover {
  color: var(--primary-600);
}

.traffic-banner-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-card-subtle);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
}

.kanews-traffic-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 150px);
  max-height: calc(100vh - 150px);
  min-height: 550px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  background: var(--bg-card);
}

@media (min-width: 860px) {
  .kanews-traffic-layout {
    flex-direction: row;
    align-items: stretch;
  }
}

.kanews-traffic-mapcol {
  flex: 1;
  height: 100%;
  position: relative;
  min-width: 0;
  background: #f1f3f5;
}

@media (min-width: 860px) {
  .kanews-traffic-mapcol {
    height: 100%;
  }
}

.kanews-traffic-map#aahaber_yandexTraffic,
#aahaber_yandexTraffic.kanews-traffic-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  inset: 0;
  border: 0;
}

@media (min-width: 860px) {
  .kanews-traffic-map#aahaber_yandexTraffic,
  #aahaber_yandexTraffic.kanews-traffic-map {
    height: 100%;
  }
}

.kanews-traffic-sidebar {
  flex-shrink: 0;
  width: 100%;
  max-height: 48vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent;
  z-index: 10;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

@media (min-width: 860px) {
  .kanews-traffic-sidebar {
    width: 330px;
    max-width: min(34vw, 370px);
    height: 100%;
    max-height: 100%;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  }
}

.kanews-traffic-sidebar__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(
    165deg,
    rgba(28, 32, 40, 0.96) 0%,
    rgba(16, 18, 24, 0.98) 50%,
    rgba(10, 12, 16, 0.99) 100%
  );
  color: #ffffff;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.kanews-traffic-sidebar__top {
  flex-shrink: 0;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kanews-traffic-sidebar__brand-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.kanews-traffic-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.kanews-traffic-sidebar__app-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.06) 100%);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.kanews-traffic-sidebar__brand-text {
  min-width: 0;
  flex: 1;
}

.kanews-traffic-sidebar__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

.kanews-traffic-sidebar__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanews-traffic-fullscreen-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kanews-traffic-fullscreen-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.traffic-density-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  margin-bottom: 12px;
}

.kanews-traffic-sidebar__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.kanews-traffic-sidebar__field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.kanews-traffic-sidebar__city {
  position: relative;
}

.kanews-traffic-sidebar__picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.kanews-traffic-sidebar__picker:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2);
}

.kanews-traffic-sidebar__picker.is-active-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.kanews-traffic-sidebar__picker-value {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanews-traffic-sidebar__picker-caret {
  flex-shrink: 0;
  opacity: 0.7;
}

.kanews-traffic-sidebar__cities {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  width: 100%;
  max-height: 280px;
  z-index: 100;
  box-sizing: border-box;
  border-radius: 12px;
  background: #171920;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  display: none;
  overflow: hidden;
  flex-direction: column;
}

.kanews-traffic-sidebar__cities.is-active {
  display: flex;
}

.city-search-box-wrap {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.city-search-box-wrap input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 13px;
  outline: none;
}

.city-search-box-wrap input:focus {
  border-color: #ef4444;
}

.city-picker-scroll-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.city-picker-scroll-list::-webkit-scrollbar {
  width: 5px;
}

.city-picker-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.kanews-weather-city {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kanews-weather-city:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.kanews-weather-city.selected {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
  font-weight: 700;
}

.kanews-traffic-geo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.kanews-traffic-geo-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.kanews-traffic-geo-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.kanews-traffic-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
}

.kanews-traffic-location__label {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

.kanews-traffic-location__value {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.kanews-traffic-geo-status {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 6px;
}

.kanews-traffic-geo-status.is-info {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.kanews-traffic-geo-status.is-error {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.kanews-traffic-sidebar__sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.kanews-traffic-districts__head {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(18, 20, 26, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kanews-traffic-districts__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.kanews-traffic-districts__list::-webkit-scrollbar {
  width: 5px;
}

.kanews-traffic-districts__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.kanews-traffic-district {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px 8px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.kanews-traffic-district:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.kanews-traffic-district.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 700;
}

.kanews-traffic-district.is-active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  border-radius: 2px;
  background: #ef4444;
}

/* TAM EKRAN (FULLSCREEN) MODU */
.traffic-page-container.is-fullscreen-app {
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: #0b0d11;
}

.traffic-page-container.is-fullscreen-app .traffic-header-banner {
  display: none !important;
}

.traffic-page-container.is-fullscreen-app .kanews-traffic-layout {
  height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  border: 0 !important;
}

.traffic-page-container.is-fullscreen-app .kanews-traffic-sidebar {
  min-height: 100vh !important;
}

/* ==========================================================================
   TELEVİZYON İZLE (CANLI TV) & EPG YAYIN AKIŞI SAYFASI STİLLERİ
   ========================================================================== */
.tv-page-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.tv-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  flex-wrap: wrap;
}

.tv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.tv-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.tv-breadcrumb a:hover {
  color: var(--primary-600);
}

.tv-banner-notice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--status-green);
}

.tv-live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-green);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: tvPulse 1.8s infinite;
}

@keyframes tvPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* TV Ana Düzeni: Sol Oynatıcı, Sağ Kanal Listesi */
.tv-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1.15fr);
  gap: 24px;
  align-items: start;
}

.tv-stage-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ==========================================================================
   TV GÖRÜNÜM / TEMA SEÇİCİ & 4 FARKLI TV TEMASI (OLED, CRT, CYBER, NORDIC)
   ========================================================================== */
.tv-skin-switcher-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  box-shadow: var(--shadow-subtle);
  flex-wrap: wrap;
}

.tv-skin-switcher-bar .skin-switcher-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tv-skin-switcher-bar .skin-switcher-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tv-hero-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. ÜST DEKORATİF PARÇALAR */
.tv-stage-top-decor {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Retro CRT Teleskopik Çift Anten */
.crt-antenna-rig {
  display: none;
  position: relative;
  width: 190px;
  height: 48px;
  margin-bottom: -5px;
  z-index: 4;
}

.skin-retro-crt .crt-antenna-rig {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.crt-rod {
  width: 5px;
  height: 48px;
  background: linear-gradient(to right, #cfd8dc, #90a4ae, #546e7a);
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  position: relative;
}

.crt-rod::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #eceff1;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.crt-rod-left {
  transform: rotate(-32deg) translateY(4px);
  transform-origin: bottom center;
}

.crt-rod-right {
  transform: rotate(32deg) translateY(4px);
  transform-origin: bottom center;
}

.crt-antenna-pivot {
  width: 26px;
  height: 12px;
  background: #263238;
  border-radius: 6px 6px 0 0;
  margin: 0 -4px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Cyberpunk Tepe HUD Şeridi */
.cyber-top-strip {
  display: none;
  width: 100%;
  padding: 6px 14px;
  background: rgba(10, 16, 26, 0.95);
  border: 1px solid #00f0ff;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  color: #00f0ff;
  font-family: monospace, 'Courier New', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}

.skin-cyber-neon .cyber-top-strip {
  display: flex;
}

.cyber-strip-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyber-blink-dot {
  width: 8px;
  height: 8px;
  background: #ff0055;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff0055;
  animation: cyberPulseAnim 1.2s infinite;
}

@keyframes cyberPulseAnim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

/* 2. TV KABİN & KASA ÇERÇEVESİ */
.tv-cabinet-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  transition: all 0.35s ease;
}

/* ================= 1. MODERN OLED SİNEMA ================= */
.skin-modern-oled .tv-cabinet-wrapper {
  padding: 5px;
  background: #11141b;
  border: 2px solid #27272a;
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(99, 102, 241, 0.22), 0 25px 60px rgba(0, 0, 0, 0.55);
}

.skin-modern-oled .tv-player-box {
  border-radius: 16px;
  border: none;
}

.oled-stand-mount {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-top: -1px;
}

.skin-modern-oled .oled-stand-mount {
  display: flex;
}

.oled-stand-neck {
  width: 90px;
  height: 16px;
  background: linear-gradient(to bottom, #18181b, #27272a);
  border-left: 1px solid #3f3f46;
  border-right: 1px solid #3f3f46;
}

.oled-stand-foot {
  width: 250px;
  height: 10px;
  background: linear-gradient(to right, #3f3f46, #71717a, #3f3f46);
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oled-logo-emboss {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

/* ================= 2. NOSTALJİK TÜPLÜ CRT TV ================= */
.skin-retro-crt .tv-cabinet-wrapper {
  background: linear-gradient(145deg, #4a2818, #2a140a);
  border: 10px solid #5d341e;
  border-radius: 28px;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 8px rgba(0,0,0,0.8), 0 25px 55px rgba(0, 0, 0, 0.6);
  padding: 14px;
  gap: 14px;
}

.skin-retro-crt .tv-player-box {
  border-radius: 18px;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
  border: 3px solid #1a0f07;
}

.crt-side-panel {
  display: none;
  width: 100px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #381f13, #221008);
  border: 2px solid #522d1a;
  border-radius: 14px;
  padding: 12px 8px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}

.skin-retro-crt .crt-side-panel {
  display: flex;
}

.crt-brand-badge {
  text-align: center;
  color: #d4af37;
  font-family: 'Times New Roman', serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 4px;
  width: 100%;
}

.crt-brand-badge small {
  display: block;
  font-size: 7.5px;
  letter-spacing: 1px;
  color: #a38125;
}

.crt-rotary-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin: 6px 0;
}

.crt-rotary-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
}

.crt-knob-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #555, #111);
  border: 2px solid #888;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  position: relative;
  transition: transform 0.2s ease;
}

.crt-rotary-dial:hover .crt-knob-circle {
  border-color: #d4af37;
}

@keyframes crtDialTurn {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(38deg) scale(0.96); }
  100% { transform: rotate(0deg); }
}

.dial-turn .crt-knob-circle {
  animation: crtDialTurn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.knob-marker {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 10px;
  background: #d4af37;
  border-radius: 2px;
}

.crt-knob-text {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #d4af37;
  text-transform: uppercase;
}

.crt-speaker-grille {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 75%;
  margin: 6px 0;
}

.crt-speaker-grille span {
  display: block;
  height: 2px;
  background: #110804;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.crt-power-section {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.crt-power-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.crt-power-btn-cap {
  font-size: 8.5px;
  font-weight: 800;
  color: #ff9999;
  letter-spacing: 0.5px;
}

.crt-screen-reflection {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  background: radial-gradient(circle at 60% 25%, rgba(255, 255, 255, 0.07) 0%, transparent 65%);
  border-radius: inherit;
  z-index: 5;
}

.skin-retro-crt .crt-screen-reflection {
  display: block;
}

/* ================= 3. CYBERPUNK HUD ================= */
.skin-cyber-neon .tv-cabinet-wrapper {
  background: #080c14;
  border: 2px solid #00f0ff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.25), 0 0 70px rgba(255, 0, 127, 0.15), 0 25px 60px rgba(0, 0, 0, 0.7);
  padding: 3px;
}

.skin-cyber-neon .tv-player-box {
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(255, 0, 127, 0.3);
}

.cyber-corner-bracket {
  display: none;
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none !important;
  z-index: 6;
}

.skin-cyber-neon .cyber-corner-bracket {
  display: block;
}

.corner-tl { top: 8px; left: 8px; border-top: 3px solid #00f0ff; border-left: 3px solid #00f0ff; }
.corner-tr { top: 8px; right: 8px; border-top: 3px solid #ff007f; border-right: 3px solid #ff007f; }
.corner-bl { bottom: 8px; left: 8px; border-bottom: 3px solid #ff007f; border-left: 3px solid #ff007f; }
.corner-br { bottom: 8px; right: 8px; border-bottom: 3px solid #00f0ff; border-right: 3px solid #00f0ff; }

/* ================= 4. NORDİK AHŞAP TV ================= */
.skin-nordic-wood .tv-cabinet-wrapper {
  background: #8b5a2b;
  border: 10px solid #6b3e18;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  padding: 2px;
}

.skin-nordic-wood .tv-player-box {
  border-radius: 8px;
  border: none;
}

.nordic-soundbar-row {
  display: none;
  position: relative;
  width: 100%;
  height: 34px;
  background: #3e3f42;
  border-top: 2px solid #5a3517;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.skin-nordic-wood .nordic-soundbar-row {
  display: flex;
}

.nordic-fabric-mesh {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px, transparent 2px, transparent 4px);
  pointer-events: none;
}

.nordic-metal-badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #dfba73;
}

.nordic-status-led {
  width: 6px;
  height: 6px;
  background: #eab308;
  border-radius: 50%;
  box-shadow: 0 0 6px #eab308;
}

.nordic-easel-legs {
  display: none;
  justify-content: space-between;
  width: 70%;
  margin: -3px auto 0;
}

.skin-nordic-wood .nordic-easel-legs {
  display: flex;
}

.nordic-leg-bar {
  width: 12px;
  height: 38px;
  background: linear-gradient(to bottom, #6b3e18, #4a280e);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.nordic-leg-bar.leg-l { transform: rotate(18deg); }
.nordic-leg-bar.leg-r { transform: rotate(-18deg); }

/* ==========================================================================
   KONTROL BARI & EPG KARTI TEMA UYARLAMALARI (YÜKSEK KONTRAST & NET OKUNURLUK)
   ========================================================================== */

/* 1. RETRO CRT TEMA YAZILARI & BUTONLARI */
.skin-retro-crt ~ .tv-player-bar {
  background: linear-gradient(145deg, #2e160a, #1a0b04);
  border: 2px solid #6b3e18;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.skin-retro-crt ~ .tv-player-bar .tv-now-playing-info h2 {
  color: #fff9e6 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.skin-retro-crt ~ .tv-player-bar .tv-tool-btn {
  background: #3b1d0c;
  border-color: #7c451e;
  color: #fde68a;
}
.skin-retro-crt ~ .tv-player-bar .tv-tool-btn:hover {
  background: #502711;
  color: #ffffff;
  border-color: #d4af37;
}

.skin-retro-crt ~ .tv-epg-card {
  background: linear-gradient(145deg, #261106, #160803);
  border: 2px solid #5d3419;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-badge-wrap {
  color: #fbbf24 !important;
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-time {
  color: #fef08a !important;
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-title {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-next-col {
  border-left-color: rgba(212, 175, 55, 0.35);
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-next-label {
  color: #d4af37 !important;
  font-weight: 800;
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-next-title {
  color: #fef3c7 !important;
  font-weight: 700;
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-next-time {
  color: #fef08a !important;
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-progress-wrap {
  background: #190a03;
  border-color: #5d3419;
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-progress-fill {
  background: linear-gradient(to right, #d97706, #fbbf24);
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-open-btn {
  background: #d4af37;
  color: #1a0b04;
  font-weight: 800;
}
.skin-retro-crt ~ .tv-epg-card .tv-epg-open-btn:hover {
  background: #fef08a;
  color: #000;
}

/* 2. CYBERPUNK HUD TEMA YAZILARI & BUTONLARI */
.skin-cyber-neon ~ .tv-player-bar {
  background: rgba(6, 10, 18, 0.96);
  border: 1px solid #00f0ff;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.22);
}
.skin-cyber-neon ~ .tv-player-bar .tv-now-playing-info h2 {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}
.skin-cyber-neon ~ .tv-player-bar .tv-tool-btn {
  background: #0f172a;
  border-color: #00f0ff;
  color: #00f0ff;
}
.skin-cyber-neon ~ .tv-player-bar .tv-tool-btn:hover {
  background: #00f0ff;
  color: #000;
  box-shadow: 0 0 12px #00f0ff;
}

.skin-cyber-neon ~ .tv-epg-card {
  background: rgba(6, 10, 18, 0.96);
  border: 1px solid #ff007f;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.18);
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-badge-wrap {
  color: #ff007f !important;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-time {
  color: #38bdf8 !important;
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-title {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-next-col {
  border-left-color: rgba(0, 240, 255, 0.35);
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-next-label {
  color: #00f0ff !important;
  letter-spacing: 1px;
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-next-title {
  color: #f8fafc !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-next-time {
  color: #38bdf8 !important;
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-progress-wrap {
  background: #0f172a;
  border-color: rgba(0, 240, 255, 0.4);
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-progress-fill {
  background: linear-gradient(to right, #00f0ff, #ff007f);
  box-shadow: 0 0 10px #00f0ff;
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-open-btn {
  background: #00f0ff;
  color: #000;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}
.skin-cyber-neon ~ .tv-epg-card .tv-epg-open-btn:hover {
  background: #ff007f;
  color: #fff;
  box-shadow: 0 0 14px #ff007f;
}

/* 3. NORDİK AHŞAP TEMA YAZILARI & BUTONLARI */
.skin-nordic-wood ~ .tv-player-bar {
  background: linear-gradient(145deg, #24140a, #160b05);
  border: 2px solid #5c3516;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.skin-nordic-wood ~ .tv-player-bar .tv-now-playing-info h2 {
  color: #fff9e6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.skin-nordic-wood ~ .tv-player-bar .tv-tool-btn {
  background: #381e0e;
  border-color: #693917;
  color: #fde68a;
}
.skin-nordic-wood ~ .tv-player-bar .tv-tool-btn:hover {
  background: #502711;
  color: #ffffff;
  border-color: #dfba73;
}

.skin-nordic-wood ~ .tv-epg-card {
  background: linear-gradient(145deg, #1f0f06, #120703);
  border: 2px solid #4a2810;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-badge-wrap {
  color: #f59e0b !important;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-time {
  color: #fef08a !important;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-title {
  color: #ffffff !important;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-next-col {
  border-left-color: rgba(223, 186, 115, 0.35);
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-next-label {
  color: #dfba73 !important;
  font-weight: 800;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-next-title {
  color: #fef3c7 !important;
  font-weight: 700;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-next-time {
  color: #fef08a !important;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-progress-wrap {
  background: #140803;
  border-color: #4a2810;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-progress-fill {
  background: linear-gradient(to right, #b45309, #f59e0b);
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-open-btn {
  background: #dfba73;
  color: #1a0b04;
  font-weight: 800;
}
.skin-nordic-wood ~ .tv-epg-card .tv-epg-open-btn:hover {
  background: #fef08a;
  color: #000;
}

/* 4. MODERN OLED TEMA */
.skin-modern-oled ~ .tv-player-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-subtle);
}
.skin-modern-oled ~ .tv-player-bar .tv-now-playing-info h2 {
  color: var(--text-main);
}
.skin-modern-oled ~ .tv-epg-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}
.skin-modern-oled ~ .tv-epg-card .tv-epg-title {
  color: var(--text-main);
}
.skin-modern-oled ~ .tv-epg-card .tv-epg-next-title {
  color: var(--text-main);
}

@media (max-width: 860px) {
  .skin-retro-crt .tv-cabinet-wrapper {
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }
  .skin-retro-crt .crt-side-panel {
    width: 100%;
    height: 56px;
    flex-direction: row;
    padding: 6px 14px;
    justify-content: space-around;
  }
  .crt-rotary-group {
    flex-direction: row;
    gap: 16px;
    margin: 0;
  }
  .crt-speaker-grille {
    display: none;
  }
}

/* TV Video Oynatıcı Kutusu */
.tv-player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  max-height: 600px;
  background: #000;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-subtle);
  flex: 1;
  min-width: 0;
}

.tv-media-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 1;
}

.tv-youtube-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #000;
}

.tv-youtube-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Yükleniyor & Hata Katmanı */
.tv-player-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(11, 15, 25, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  text-align: center;
  padding: 30px;
}

.tv-spinner {
  width: 48px;
  height: 48px;
  border: 3.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: tvSpin 0.9s linear infinite;
  margin-bottom: 16px;
}

@keyframes tvSpin {
  to { transform: rotate(360deg); }
}

.tv-loader-text {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.tv-error-icon {
  font-size: 42px;
  margin-bottom: 12px;
}

.tv-error-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #fca5a5;
}

.tv-error-msg {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 380px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.tv-btn-retry {
  padding: 9px 22px;
  background: var(--hot-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
  transition: opacity 0.2s;
}

.tv-btn-retry:hover {
  opacity: 0.92;
}

/* Oynatıcı Alt Barı (Ekranın Altındaki Bağımsız Panel) */
.tv-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  color: var(--text-main);
  flex-wrap: wrap;
}

.tv-now-playing-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tv-channel-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--sidebar-gradient);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
}

.tv-now-playing-info h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  color: var(--text-main);
}

.tv-live-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 800;
  color: #ef4444;
}

.tv-player-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tv-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tv-tool-btn:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: var(--primary-400);
  color: var(--primary-600);
}

.tv-tool-btn.favorited {
  color: #fbbf24;
}

.tv-tool-btn.favorited .tv-fav-star {
  color: #fbbf24;
}

.tv-yt-link-btn {
  width: auto !important;
  height: 36px !important;
  border-radius: 18px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  display: none;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  text-decoration: none;
  transition: all 0.2s ease;
}
.tv-yt-link-btn.is-visible {
  display: inline-flex !important;
}
.tv-yt-link-btn:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #dc2626 !important;
}

/* Canlı EPG Bilgi Kartı */
.tv-epg-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tv-epg-now {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tv-epg-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-600);
  letter-spacing: 0.5px;
}

[data-theme="dark"] .tv-epg-badge-wrap {
  color: var(--primary-400);
}

.tv-epg-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: tvPulse 1.6s infinite;
}

.tv-epg-time {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.tv-epg-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.tv-epg-progress-wrap {
  width: 100%;
  height: 6px;
  background: var(--bg-card-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid var(--border-subtle);
}

.tv-epg-progress-fill {
  height: 100%;
  background: var(--sidebar-gradient);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.tv-epg-next-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 1px solid var(--border-subtle);
  min-width: 0;
}

.tv-epg-next-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

.tv-epg-next-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.tv-epg-next-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.tv-epg-action {
  flex-shrink: 0;
}

.tv-epg-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.tv-epg-open-btn:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: var(--primary-400);
  color: var(--primary-600);
}

/* TV Sağ Kolon: Kanallar Listesi */
.tv-sidebar-col {
  position: sticky;
  top: 90px;
}

.tv-sidebar-inner {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 120px);
  min-height: 580px;
  overflow: hidden !important;
}

/* Ülke Seçici Barı (Dünya Kanalları & Radyoları) */
.tv-country-bar,
.radio-country-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0 !important;
}

.tv-country-head,
.radio-country-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.tv-country-count-tag,
.radio-country-count-tag {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(124, 58, 237, 0.12);
  color: var(--primary-600);
  font-weight: 700;
}

[data-theme="dark"] .tv-country-count-tag,
[data-theme="dark"] .radio-country-count-tag {
  background: rgba(124, 58, 237, 0.25);
  color: var(--primary-300);
}

.tv-country-select,
.radio-country-select {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card-subtle);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tv-country-select:focus,
.radio-country-select:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* Özel Ülke Seçici (Gerçek Bayraklı & Arama Kutulu Modern Dropdown) */
.custom-country-picker {
  position: relative;
  width: 100%;
}

.country-picker-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box;
  text-align: left;
}

.country-picker-btn:hover {
  border-color: var(--primary-400);
  background: var(--bg-card);
}

.country-flag-icon {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.country-selected-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.custom-country-picker.open .picker-chevron {
  transform: rotate(180deg);
}

.country-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(16px);
  max-height: 320px;
}

.country-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.country-search-box svg {
  position: absolute;
  left: 10px;
  color: var(--text-light);
  pointer-events: none;
}

.country-search-box input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-main);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.country-search-box input:focus {
  border-color: var(--primary-500);
}

.country-options-scroll {
  overflow-y: auto;
  max-height: 250px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
}

.country-options-scroll::-webkit-scrollbar {
  width: 5px;
}

.country-options-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-full);
}

.country-group-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 8px 3px 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.country-opt-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  transition: background 0.15s, color 0.15s;
}

.country-opt-row:hover {
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary-600);
}

.country-opt-row.active {
  background: rgba(124, 58, 237, 0.15);
  color: var(--primary-600);
  font-weight: 700;
}

[data-theme="dark"] .country-opt-row.active {
  background: rgba(124, 58, 237, 0.28);
  color: var(--primary-300);
}

.country-opt-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-opt-check {
  font-size: 12px;
  color: var(--primary-500);
}

.tv-search-wrap,
.radio-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0 !important;
}

.tv-search-wrap svg,
.radio-search-wrap svg {
  position: absolute;
  left: 12px;
  color: var(--text-light);
}

.tv-search-wrap input,
.radio-search-wrap input {
  width: 100%;
  padding: 9px 34px 9px 34px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s;
}

.tv-search-wrap input:focus,
.radio-search-wrap input:focus {
  border-color: var(--primary-500);
}

.tv-search-clear-btn,
.radio-search-clear-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.tv-sidebar-tabs,
.radio-sidebar-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg-card-subtle);
  border-radius: var(--radius-full);
  flex-shrink: 0 !important;
}

.tv-tab-btn,
.radio-tab-btn {
  flex: 1;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}

.tv-tab-btn.active,
.radio-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tv-badge,
.radio-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: rgba(148, 163, 184, 0.2);
  font-size: 11px;
  font-weight: 700;
}

.tv-tab-btn.active .tv-badge,
.radio-tab-btn.active .radio-badge {
  background: var(--primary-100);
  color: var(--primary-700);
}

[data-theme="dark"] .tv-tab-btn.active .tv-badge,
[data-theme="dark"] .radio-tab-btn.active .radio-badge {
  background: rgba(124, 58, 237, 0.25);
  color: var(--primary-300);
}

/* Kategori Butonları Scroll (Asla Ezilmez ve Kırpılmaz) */
.tv-categories-scroll,
.radio-categories-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 4px 2px 6px 2px;
  box-sizing: border-box;
}

.tv-categories-scroll::-webkit-scrollbar,
.radio-categories-scroll::-webkit-scrollbar {
  height: 4px;
}
.tv-categories-scroll::-webkit-scrollbar-thumb,
.radio-categories-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-full);
}

.tv-cat-btn,
.tv-cat-chip,
.radio-cat-btn,
.radio-cat-chip {
  flex-shrink: 0;
  padding: 6px 13px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-family: inherit;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition: all 0.2s ease;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tv-cat-btn:hover,
.tv-cat-chip:hover,
.radio-cat-btn:hover,
.radio-cat-chip:hover {
  border-color: var(--primary-400);
  color: var(--text-main);
  background: rgba(124, 58, 237, 0.08);
}

.tv-cat-btn.active,
.tv-cat-chip.active,
.radio-cat-btn.active,
.radio-cat-chip.active {
  background: var(--sidebar-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* Kanallar Listesi */
.tv-channels-list,
.radio-stations-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  padding-right: 4px;
  scrollbar-width: thin;
}

.tv-channels-list::-webkit-scrollbar,
.radio-stations-list::-webkit-scrollbar {
  width: 5px;
}
.tv-channels-list::-webkit-scrollbar-thumb,
.radio-stations-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-full);
}

.tv-channel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.tv-channel-card:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.28);
}

.tv-channel-card.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(217, 70, 239, 0.12) 100%);
  border-color: var(--primary-500);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
}

.tv-c-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sidebar-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.tv-channel-card.active .tv-c-avatar {
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.tv-c-meta {
  flex: 1;
  min-width: 0;
}

.tv-c-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 3px 0;
}

.tv-c-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.tv-type-tag {
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
}

.tv-type-tag.stream {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.tv-type-tag.youtube {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.tv-type-tag.embed {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.tv-cat-tag {
  color: var(--text-muted);
  font-weight: 500;
}

.tv-c-star {
  background: transparent;
  border: none;
  font-size: 17px;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}

.tv-c-star:hover {
  color: #fbbf24;
}

.tv-c-star.favorited {
  color: #fbbf24;
}

.tv-empty-state,
.radio-empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* EPG Modal */
.tv-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.7);
  backdrop-filter: blur(6px);
}

.tv-modal-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.tv-modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tv-modal-title-group h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.tv-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.tv-modal-close-btn {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.tv-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.tv-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tv-epg-modal-row {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  transition: background 0.15s;
}

.tv-epg-modal-row.is-current {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}

.tv-epg-modal-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-600);
  white-space: nowrap;
}

[data-theme="dark"] .tv-epg-modal-time {
  color: var(--primary-400);
}

.tv-epg-modal-info {
  flex: 1;
  min-width: 0;
}

.tv-epg-modal-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 2px;
}

.tv-epg-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-green);
  animation: tvPulse 1.6s infinite;
  flex-shrink: 0;
}

.tv-epg-cat-badge {
  font-size: 10.5px;
  padding: 1px 7px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  font-weight: 600;
  color: var(--text-muted);
}

.tv-epg-modal-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 4px 0 0 0;
}

/* ==========================================================================
   RADYO DİNLE (CANLI RADYO) SAYFASI STİLLERİ
   ========================================================================== */
.radio-page-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.radio-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  flex-wrap: wrap;
}

.radio-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.radio-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.radio-breadcrumb a:hover {
  color: var(--primary-600);
}

.radio-banner-notice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-600);
}

[data-theme="dark"] .radio-banner-notice {
  color: var(--primary-400);
}

.radio-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-500);
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
  animation: radioPulse 1.8s infinite;
}

@keyframes radioPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

/* Radyo Ana Düzeni: Sol Stüdyo Sahnesi, Sağ İstasyon Listesi */
.radio-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1.15fr);
  gap: 24px;
  align-items: start;
}

.radio-stage-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ==========================================================================
   RADYO GÖRÜNÜM / TEMA SEÇİCİ & ÇOKLU RADYO TEMALARI (NOSTALJİ, BOOMBOX, CYBER, MODERN)
   ========================================================================== */

.radio-skin-switcher-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  box-shadow: var(--shadow-subtle);
  flex-wrap: wrap;
}

.skin-switcher-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skin-switcher-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.skin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.skin-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--primary-400);
}

.skin-btn.active {
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-500);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.skin-btn .skin-icon {
  font-size: 14px;
  line-height: 1;
}

/* ==========================================================================
   RADYO OYNATICI KARTI (Ana Kapsayıcı & Skin Görünümleri)
   ========================================================================== */
.radio-hero-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.4s ease;
  width: 100%;
}

.radio-hero-card .skin-view {
  display: none;
  width: 100%;
}

/* Aktif Temanın Gösterilmesi */
.radio-hero-card.skin-vintage-wood .skin-view-vintage {
  display: flex;
  flex-direction: column;
}
.radio-hero-card.skin-retro-boombox .skin-view-boombox {
  display: flex;
  flex-direction: column;
}
.radio-hero-card.skin-winamp-classic .skin-view-winamp {
  display: flex;
  flex-direction: column;
}
.radio-hero-card.skin-aimp-player .skin-view-aimp {
  display: flex;
  flex-direction: column;
}
.radio-hero-card.skin-cyber-hifi .skin-view-cyber {
  display: flex;
  flex-direction: column;
}
.radio-hero-card.skin-modern-studio .skin-view-modern {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   1. NOSTALJİK AHŞAP RADYO (Vintage Wood Tube Radio)
   ========================================================================== */
.skin-view-vintage {
  background: radial-gradient(ellipse at 50% 15%, #4e2811 0%, #2a1305 55%, #140802 100%);
  border: 6px solid #8c552a;
  outline: 2px solid #4a2810;
  border-radius: 22px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), inset 0 2px 10px rgba(255, 215, 0, 0.25);
  padding: 22px;
  position: relative;
  gap: 16px;
  color: #fff;
}

.skin-view-vintage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 2px, transparent 2px, transparent 6px);
  pointer-events: none;
  border-radius: 16px;
}

/* Ahşap Kasa Başlığı & Pirinç Vidalar */
.vintage-cabinet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
}

.vintage-screw {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, #f3e88a 0%, #d4af37 60%, #85610e 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 1px 1px #fff;
  position: relative;
}

.vintage-screw::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  background: #3b2704;
  transform: translate(-50%, -50%) rotate(35deg);
}

.vintage-plaque-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #ecd68b 0%, #c49925 50%, #dfb94d 100%);
  color: #271602;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 16px;
  border-radius: 4px;
  border: 1px solid #7c570b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Hoparlör Izgarası & Vakum Lambası Sırası */
.vintage-grille-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.vintage-speaker-grille {
  flex: 1;
  height: 105px;
  background: repeating-radial-gradient(circle at 0 0, transparent 0, #160c04 8px),
              repeating-linear-gradient(#241307 0px, #241307 2px, #0e0602 2px, #0e0602 4px);
  border: 3px solid #5a3216;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

.vintage-cloth-crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: radial-gradient(circle, #ecd68b 0%, #aa820a 100%);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid #5c3e04;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  color: #2b1501;
}

.vintage-crest-symbol {
  font-size: 18px;
  line-height: 1;
}

.vintage-crest-name {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

/* Sihirli Göz Vakum Katot Lambası */
.vintage-tube-housing {
  width: 80px;
  background: #0d0602;
  border: 2px solid #4a2810;
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.95);
}

.vintage-tube-socket {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vintage-tube-glass {
  width: 34px;
  height: 56px;
  border-radius: 17px 17px 4px 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.vintage-tube-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: radial-gradient(circle, #f97316 0%, transparent 80%);
  opacity: 0.8;
}

.vintage-magic-eye-beam {
  position: absolute;
  top: 10px;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  background: #22c55e;
  border-radius: 4px;
  box-shadow: 0 0 12px #22c55e, 0 0 20px #16a34a;
  transition: width 0.3s ease;
}

.radio-hero-card.playing .vintage-magic-eye-beam {
  width: 18px;
  animation: magicEyePulse 1.2s ease-in-out infinite alternate;
}

@keyframes magicEyePulse {
  0% { width: 12px; opacity: 0.85; filter: drop-shadow(0 0 8px #22c55e); }
  50% { width: 22px; opacity: 1; filter: drop-shadow(0 0 16px #4ade80); }
  100% { width: 14px; opacity: 0.9; filter: drop-shadow(0 0 10px #22c55e); }
}

.vintage-tube-tag {
  font-size: 8px;
  font-weight: 800;
  color: #d4af37;
  letter-spacing: 0.5px;
}

/* Analog Frekans Skalası */
.vintage-dial-wrapper {
  background: #000;
  border: 3px solid #73411b;
  border-radius: 10px;
  padding: 5px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.95);
}

.vintage-dial-glass {
  background: radial-gradient(ellipse at 50% 50%, #3a2205 0%, #190e02 60%, #0a0501 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 6px;
  padding: 10px 14px;
  position: relative;
  box-shadow: inset 0 0 25px rgba(245, 158, 11, 0.35);
  overflow: hidden;
}

.vintage-dial-scales {
  display: flex;
  flex-direction: column;
  gap: 3px;
  user-select: none;
}

.vintage-band-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
}

.vintage-band-title {
  color: #f59e0b;
  font-weight: 900;
  width: 28px;
}

.vintage-band-unit {
  font-size: 9px;
  color: #d97706;
  width: 28px;
  text-align: right;
}

.vintage-freq-marks {
  display: flex;
  flex: 1;
  justify-content: space-between;
  padding: 0 10px;
  color: rgba(254, 240, 138, 0.85);
  font-size: 10.5px;
}

.vintage-dial-ticks {
  display: flex;
  justify-content: space-between;
  color: #b45309;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.7;
}

/* Analog Kırmızı İbre */
.vintage-tuner-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239, 68, 68, 0.8);
  transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 5;
  pointer-events: none;
}

.vintage-tuner-needle .needle-tip {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #f87171;
  border-radius: 50%;
  box-shadow: 0 0 6px #ef4444;
}

/* İstasyon Pirinç Bilgi Plaketi */
.vintage-brass-panel {
  background: linear-gradient(135deg, #ecd68b 0%, #aa820a 50%, #f6e07a 100%);
  border: 2px solid #5c3e04;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  color: #271602;
}

.vintage-panel-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vintage-signal-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #78350f;
  border: 1px solid #451a03;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  transition: all 0.3s;
}

.radio-hero-card.playing .vintage-signal-light {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e, 0 0 15px #4ade80;
}

.vintage-meta-info {
  min-width: 0;
}

.vintage-station-name {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: #1f1201;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vintage-station-genre {
  font-size: 11.5px;
  font-weight: 600;
  margin: 2px 0 0 0;
  color: #4a2d04;
}

.vintage-freq-tag {
  background: #241402;
  color: #ecd68b;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #633f07;
  white-space: nowrap;
}

/* Nostaljik Pirinç & Bakalit Kontroller */
.vintage-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #150903;
  border: 2px solid #542f13;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
}

.vintage-knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.vintage-rotary-knob {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, #52301a 0%, #291508 70%, #150802 100%);
  border: 3px solid #d4af37;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.25);
  color: #ecd68b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s;
}

.vintage-rotary-knob:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4);
}

.vintage-rotary-knob:active {
  transform: scale(0.95);
}

.vintage-rotary-knob .rotary-indicator {
  font-size: 18px;
  line-height: 1;
}

.vintage-knob-text {
  font-size: 8.5px;
  font-weight: 800;
  color: #ecd68b;
  letter-spacing: 0.5px;
}

.vintage-slider-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vintage-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  color: #ecd68b;
}

.vintage-pot-slider,
.vintage-fader-input {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #3b200b;
  outline: none;
  cursor: pointer;
  accent-color: #d4af37;
}

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

.vintage-brass-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 42px;
  height: 44px;
  background: radial-gradient(circle, #ecd68b 0%, #aa820a 100%);
  border: 1px solid #5a3e04;
  border-radius: 6px;
  color: #241402;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.15s;
}

.vintage-brass-btn:hover {
  transform: translateY(-2px);
}

.vintage-brass-btn:active {
  transform: translateY(1px);
}

.brass-btn-icon {
  font-size: 15px;
  line-height: 1;
}

.brass-btn-sub {
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   2. 80'LER RETRO BOOMBOX (Ghetto Blaster Cassette Deck)
   ========================================================================== */
.skin-view-boombox {
  background: linear-gradient(180deg, #475569 0%, #334155 45%, #1e293b 100%);
  border: 4px solid #64748b;
  border-radius: 20px;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.9), inset 0 2px 6px rgba(255, 255, 255, 0.3);
  padding: 18px 20px;
  position: relative;
  gap: 14px;
  color: #fff;
}

.boombox-roof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.boombox-handle {
  width: 140px;
  height: 8px;
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
  border-radius: 4px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.boombox-antenna {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 2px;
}
.boombox-antenna.left-antenna {
  transform: rotate(-18deg);
  transform-origin: bottom left;
}
.boombox-antenna.right-antenna {
  transform: rotate(18deg);
  transform-origin: bottom right;
}

.boombox-body {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: 16px;
  align-items: center;
}

/* Hoparlörler */
.boombox-speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.speaker-tweeter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #e2e8f0 0%, #475569 100%);
  border: 2px solid #94a3b8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
  margin-bottom: 2px;
}

.speaker-outer-rim {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e293b 0%, #0f172a 100%);
  border: 4px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.8);
}

.speaker-cone {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, #334155 0%, #0f172a 75%);
  border: 2px dashed #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.radio-hero-card.playing .speaker-cone {
  animation: boomboxBass 0.6s ease-in-out infinite alternate;
}

@keyframes boomboxBass {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5)); }
  100% { transform: scale(0.98); }
}

.speaker-dustcap {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #cbd5e1 0%, #64748b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 900;
  color: #0f172a;
}

.speaker-label {
  font-size: 8px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

/* Orta Kasetçalar & VU Metreler */
.boombox-center-deck {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
}

.boombox-vu-meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vu-dial-box {
  background: #fef08a;
  border: 2px solid #ca8a04;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.vu-dial-face {
  width: 100%;
  height: 32px;
  position: relative;
  overflow: hidden;
}

.vu-scale-txt {
  font-size: 7.5px;
  font-weight: 900;
  color: #713f12;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.vu-needle {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 2px;
  height: 26px;
  background: #dc2626;
  transform-origin: bottom center;
  transform: rotate(-35deg);
  transition: transform 0.15s ease;
}

.radio-hero-card.playing .vu-needle#boomboxNeedleL {
  animation: vuBounceL 0.45s ease-in-out infinite alternate;
}
.radio-hero-card.playing .vu-needle#boomboxNeedleR {
  animation: vuBounceR 0.4s ease-in-out infinite alternate;
}

@keyframes vuBounceL {
  0% { transform: rotate(-30deg); }
  50% { transform: rotate(15deg); }
  100% { transform: rotate(-10deg); }
}
@keyframes vuBounceR {
  0% { transform: rotate(-25deg); }
  50% { transform: rotate(20deg); }
  100% { transform: rotate(-5deg); }
}

.vu-ch-label {
  font-size: 8px;
  font-weight: 900;
  color: #854d0e;
}

/* Kasetçalar Bölmesi & Dönen Makaralar */
.boombox-cassette-pocket {
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 8px;
  padding: 6px;
}

.cassette-glass-window {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
}

.cassette-top-label {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 800;
  color: #38bdf8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 3px;
  margin-bottom: 6px;
}

.cassette-spools-area {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 38px;
}

.cassette-spool {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #cbd5e1 60%, #475569 100%);
  border: 2px solid #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.spool-cog {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px dashed #94a3b8;
}

.radio-hero-card.playing .cassette-spool {
  animation: spoolSpin 2.5s linear infinite;
}

@keyframes spoolSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tape-bridge {
  width: 60px;
  height: 12px;
  background: #451a03;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* LCD Ekran */
.boombox-lcd-strip {
  background: #064e3b;
  border: 2px solid #047857;
  border-radius: 6px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.lcd-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
  flex-shrink: 0;
}

.lcd-info-wrap {
  min-width: 0;
}

.lcd-station-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #a7f3d0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(167, 243, 208, 0.5);
}

.lcd-station-freq {
  font-size: 10.5px;
  color: #6ee7b7;
  font-weight: 700;
}

/* Piyano Tuşları */
.boombox-deck-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.boombox-piano-keys {
  display: flex;
  gap: 6px;
}

.boombox-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
  border: 1px solid #94a3b8;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, background 0.15s;
}

.boombox-key:hover {
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
}

.boombox-key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.key-icon {
  font-size: 13px;
  line-height: 1;
}

.key-label {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.boombox-vol-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.boombox-vol-group .vol-label {
  font-size: 9px;
  font-weight: 900;
  color: #94a3b8;
}

.boombox-vol-slider {
  width: 75px;
  height: 5px;
  accent-color: #38bdf8;
  cursor: pointer;
}

/* ==========================================================================
   3. CYBER HI-FI RACK (90s / Cyberpunk Neon Component Audio)
   ========================================================================== */
.skin-view-cyber {
  background: linear-gradient(145deg, #0f172a 0%, #090d16 100%);
  border: 2px solid #0284c7;
  border-radius: 18px;
  box-shadow: 0 25px 60px -10px rgba(2, 132, 199, 0.25), inset 0 0 30px rgba(6, 182, 212, 0.1);
  padding: 22px;
  position: relative;
  gap: 16px;
  color: #fff;
}

.cyber-top-rack {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rack-hex-bolt {
  width: 10px;
  height: 10px;
  background: #38bdf8;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 6px #38bdf8;
}

.cyber-rack-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.cyber-led-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee;
}

/* VFD Screen */
.cyber-vfd-screen {
  background: #020617;
  border: 1px solid #0891b2;
  border-radius: 12px;
  padding: 16px;
  box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.15);
}

.cyber-vfd-top {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.vfd-status-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.vfd-status-tag.live {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.cyber-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #22d3ee;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 16 Barlı Ekolayzır */
.cyber-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 50px;
}

.c-bar {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f43f5e 0%, #fbbf24 40%, #22c55e 100%);
  transition: height 0.15s ease;
}

.radio-hero-card.playing .c-bar {
  animation: cyberDance 0.8s ease-in-out infinite alternate;
}

.c-bar.cb1 { animation-delay: 0.1s; }
.c-bar.cb2 { animation-delay: 0.25s; }
.c-bar.cb3 { animation-delay: 0.4s; }
.c-bar.cb4 { animation-delay: 0.15s; }
.c-bar.cb5 { animation-delay: 0.5s; }
.c-bar.cb6 { animation-delay: 0.3s; }
.c-bar.cb7 { animation-delay: 0.65s; }
.c-bar.cb8 { animation-delay: 0.2s; }
.c-bar.cb9 { animation-delay: 0.45s; }
.c-bar.cb10 { animation-delay: 0.6s; }
.c-bar.cb11 { animation-delay: 0.35s; }
.c-bar.cb12 { animation-delay: 0.7s; }
.c-bar.cb13 { animation-delay: 0.25s; }
.c-bar.cb14 { animation-delay: 0.55s; }
.c-bar.cb15 { animation-delay: 0.15s; }
.c-bar.cb16 { animation-delay: 0.4s; }

@keyframes cyberDance {
  0% { height: 6px; }
  50% { height: 48px; }
  100% { height: 16px; }
}

/* Cyber Kontroller */
.cyber-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 12px;
}

.cyber-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
  transition: transform 0.15s;
}

.cyber-play-btn:hover {
  transform: scale(1.08);
}

.cyber-fader-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cyber-fader-header {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 800;
  color: #38bdf8;
}

.cyber-fader-input {
  width: 100%;
  accent-color: #22d3ee;
  cursor: pointer;
}

.cyber-actions {
  display: flex;
  gap: 8px;
}

.cyber-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #334155;
  color: #38bdf8;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.cyber-action-btn:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: #22d3ee;
}

/* ==========================================================================
   4. MODERN STÜDYO (Minimalist Akrilik)
   ========================================================================== */
.skin-view-modern {
  background: radial-gradient(circle at 50% 15%, #1e1b4b 0%, #0f172a 60%, #080c14 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.5);
  padding: 44px 30px;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.skin-view-modern::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.28) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(30px);
}

.radio-studio-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.radio-disc-halo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(217, 70, 239, 0.2) 100%);
  border: 2px solid rgba(255, 255, 255, 0.15);
  padding: 10px;
  box-shadow: 0 0 35px rgba(124, 58, 237, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.4s ease;
}

.radio-hero-card.playing .radio-disc-halo {
  box-shadow: 0 0 50px rgba(139, 92, 246, 0.6);
  animation: radioRotate 12s linear infinite;
}

@keyframes radioRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radio-disc-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #2e1065 0%, #1e1b4b 60%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 8 Barlı Ses Ekolayzırı */
.radio-eq-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 38px;
  padding: 0 10px;
}

.radio-eq-bar {
  width: 5px;
  height: 8px;
  background: var(--accent-gradient);
  border-radius: var(--radius-full);
  transition: height 0.2s ease;
}

.radio-hero-card.playing .radio-eq-bar {
  animation: eqBounce 1.2s ease-in-out infinite alternate;
}

.radio-eq-bar.bar1 { animation-delay: 0.1s; }
.radio-eq-bar.bar2 { animation-delay: 0.3s; }
.radio-eq-bar.bar3 { animation-delay: 0.5s; }
.radio-eq-bar.bar4 { animation-delay: 0.2s; }
.radio-eq-bar.bar5 { animation-delay: 0.6s; }
.radio-eq-bar.bar6 { animation-delay: 0.4s; }
.radio-eq-bar.bar7 { animation-delay: 0.7s; }
.radio-eq-bar.bar8 { animation-delay: 0.25s; }

@keyframes eqBounce {
  0% { height: 6px; }
  50% { height: 34px; }
  100% { height: 14px; }
}

.radio-station-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  max-width: 480px;
}

.radio-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
}

.radio-station-title {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: #fff;
  letter-spacing: -0.5px;
}

.radio-station-genre {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Kontrol Doku (Play Butonu, Volume Slider, Favori) */
.radio-controls-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
}

.radio-play-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent-gradient);
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(217, 70, 239, 0.45);
  transition: opacity 0.2s, box-shadow 0.2s;
}

.radio-play-btn:hover {
  opacity: 0.92;
  box-shadow: 0 10px 30px rgba(217, 70, 239, 0.6);
}

.radio-volume-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio-mute-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

#radioVolumeSlider {
  width: 90px;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
  accent-color: var(--primary-400);
}

.radio-tool-fav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.radio-tool-fav-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.radio-tool-fav-btn.favorited {
  color: #fbbf24;
}

/* ==========================================================================
   5. WINAMP 2.91 KLASİK (The Legendary Desktop Player)
   ========================================================================== */
.skin-view-winamp {
  background: #292a30;
  border: 3px solid #3d3e46;
  border-radius: 4px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.9), inset 1px 1px 0 #5a5b64, inset -1px -1px 0 #18191c;
  padding: 4px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
}

/* Winamp Titlebar */
.winamp-titlebar {
  background: linear-gradient(90deg, #101538 0%, #203578 40%, #152050 100%);
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  border: 1px solid #000;
  margin-bottom: 4px;
}

.winamp-title-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.winamp-lightning {
  color: #fde047;
  font-size: 12px;
  filter: drop-shadow(0 0 2px #eab308);
}

.winamp-title-text {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 1px 1px 0 #000;
}

.winamp-win-controls {
  display: flex;
  gap: 2px;
}

.winamp-win-btn {
  width: 13px;
  height: 13px;
  background: #3c3d44;
  border: 1px solid #5a5b64;
  color: #d1d5db;
  font-size: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Winamp Main Body */
.winamp-main-body {
  background: #24252a;
  border: 2px solid #1a1b1e;
  border-radius: 2px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Display Row (LCD + Timer + Visualizer) */
.winamp-display-row {
  background: #000000;
  border: 2px solid #3c3d44;
  border-radius: 3px;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 75px 1fr 65px;
  gap: 10px;
  align-items: center;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.95);
}

.winamp-time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-right: 1px solid #1f2937;
  padding-right: 6px;
}

.winamp-time-status {
  font-size: 8px;
  font-weight: 900;
  color: #22c55e;
  letter-spacing: 0.5px;
}

.winamp-time-clock {
  font-family: 'Space Grotesk', monospace;
  font-size: 19px;
  font-weight: 900;
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.7);
  line-height: 1;
}

.winamp-time-kbps {
  font-size: 7.5px;
  font-weight: 900;
  color: #10b981;
}

.winamp-screen-center {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.winamp-marquee-wrap {
  background: #0a130a;
  border: 1px solid #1a2f1a;
  border-radius: 2px;
  padding: 3px 6px;
  overflow: hidden;
  white-space: nowrap;
}

.winamp-marquee-inner {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  animation: winampScroll 14s linear infinite;
}

@keyframes winampScroll {
  0% { transform: translateX(0%); }
  50% { transform: translateX(-40%); }
  100% { transform: translateX(0%); }
}

.winamp-track-num {
  color: #00ff41;
  font-size: 11px;
  font-weight: 900;
}

.winamp-track-name {
  color: #00ff41;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
  font-family: 'Courier New', monospace;
}

.winamp-track-spec {
  color: #34d399;
  font-size: 10px;
}

/* Winamp Spektrum Visualizer (Green -> Yellow -> Red) */
.winamp-spectrum-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  background: #050a05;
  border: 1px solid #142214;
  border-radius: 2px;
  padding: 2px 4px;
}

.wa-bar {
  flex: 1;
  height: 3px;
  background: linear-gradient(180deg, #ef4444 0%, #eab308 35%, #22c55e 100%);
  border-radius: 1px;
  transition: height 0.15s ease;
}

.radio-hero-card.playing .wa-bar {
  animation: waBounce 0.45s ease-in-out infinite alternate;
}

.wa-bar.wb1  { animation-delay: 0.05s; }
.wa-bar.wb2  { animation-delay: 0.15s; }
.wa-bar.wb3  { animation-delay: 0.25s; }
.wa-bar.wb4  { animation-delay: 0.10s; }
.wa-bar.wb5  { animation-delay: 0.30s; }
.wa-bar.wb6  { animation-delay: 0.08s; }
.wa-bar.wb7  { animation-delay: 0.22s; }
.wa-bar.wb8  { animation-delay: 0.14s; }
.wa-bar.wb9  { animation-delay: 0.28s; }
.wa-bar.wb10 { animation-delay: 0.18s; }
.wa-bar.wb11 { animation-delay: 0.06s; }
.wa-bar.wb12 { animation-delay: 0.24s; }
.wa-bar.wb13 { animation-delay: 0.12s; }
.wa-bar.wb14 { animation-delay: 0.32s; }
.wa-bar.wb15 { animation-delay: 0.16s; }
.wa-bar.wb16 { animation-delay: 0.26s; }
.wa-bar.wb17 { animation-delay: 0.09s; }
.wa-bar.wb18 { animation-delay: 0.21s; }
.wa-bar.wb19 { animation-delay: 0.13s; }
.wa-bar.wb20 { animation-delay: 0.27s; }

@keyframes waBounce {
  0%   { height: 4px; }
  40%  { height: 18px; }
  80%  { height: 24px; }
  100% { height: 9px; }
}

.winamp-info-badges {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  border-left: 1px solid #1f2937;
  padding-left: 6px;
}

.wa-badge {
  font-size: 7.5px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 2px;
  background: #1e293b;
  color: #64748b;
  border: 1px solid #334155;
  width: 100%;
  text-align: center;
}

.wa-badge.active {
  background: #064e3b;
  color: #34d399;
  border-color: #059669;
  box-shadow: 0 0 5px rgba(52, 211, 153, 0.4);
}

/* Winamp Sliders Row */
.winamp-sliders-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #1e1f24;
  border: 1px solid #33343c;
  border-radius: 3px;
  padding: 5px 10px;
}

.winamp-fader-block {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-fader-label {
  font-size: 8px;
  font-weight: 900;
  color: #9ca3af;
  letter-spacing: 0.5px;
}

.winamp-slider {
  width: 90px;
  height: 6px;
  background: linear-gradient(90deg, #15803d 0%, #84cc16 100%);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  accent-color: #22c55e;
}

.winamp-pill-toggles {
  display: flex;
  gap: 4px;
}

.wa-pill-btn {
  font-size: 7.5px;
  font-weight: 900;
  padding: 2px 6px;
  background: #2b2c32;
  border: 1px solid #4a4b54;
  border-radius: 2px;
  color: #94a3b8;
  cursor: pointer;
}

.wa-pill-btn.active {
  background: #0f766e;
  border-color: #14b8a6;
  color: #ccfbf1;
}

/* Winamp Transport Bar */
.winamp-transport-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #18191c;
  border: 1px solid #33343c;
  border-radius: 3px;
  padding: 6px 10px;
}

.winamp-btn-group {
  display: flex;
  gap: 4px;
}

.wa-btn {
  width: 32px;
  height: 25px;
  background: linear-gradient(180deg, #4d4e56 0%, #2a2b30 100%);
  border: 2px outset #6b7280;
  border-radius: 2px;
  color: #f3f4f6;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.05s;
}

.wa-btn:active {
  border-style: inset;
  transform: translate(1px, 1px);
  background: #1f2024;
}

.wa-btn.wa-play {
  width: 36px;
  color: #22c55e;
}

.wa-btn.wa-stop {
  color: #ef4444;
}

.winamp-extras-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-mini-btn {
  width: 24px;
  height: 24px;
  background: #2a2b30;
  border: 1px solid #4b5563;
  border-radius: 2px;
  color: #9ca3af;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.winamp-slogan {
  font-size: 8px;
  font-weight: 800;
  color: #6b7280;
  font-style: italic;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   6. AIMP HI-FI MODERN (Russian / European Audiophile Dark & Amber)
   ========================================================================== */
.skin-view-aimp {
  background: radial-gradient(ellipse at 50% 10%, #1e1b29 0%, #0d0c14 60%, #06050a 100%);
  border: 2px solid rgba(249, 115, 22, 0.35);
  border-radius: 18px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.95), 0 0 35px rgba(249, 115, 22, 0.15);
  padding: 16px 20px;
  color: #fff;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.aimp-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.aimp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aimp-logo-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.aimp-brand-text {
  display: flex;
  flex-direction: column;
}

.aimp-app-name {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fdba74;
}

.aimp-app-sub {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

.aimp-top-tags {
  display: flex;
  gap: 6px;
}

.aimp-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d1d5db;
}

.aimp-tag.live {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* AIMP Screen Glass */
.aimp-screen-glass {
  background: rgba(15, 14, 23, 0.7);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
}

.aimp-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.aimp-station-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.aimp-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffedd5;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.4);
}

.aimp-freq-pill {
  font-size: 10px;
  font-weight: 900;
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid #f97316;
  color: #fb923c;
  padding: 2px 8px;
  border-radius: 10px;
}

.aimp-vol-gauge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.aimp-gauge-label {
  font-size: 7.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
}

.aimp-gauge-num {
  font-family: 'Space Grotesk', monospace;
  font-size: 14px;
  font-weight: 900;
  color: #fb923c;
}

/* AIMP Amber Spektrum Grafiği (24 columns) */
.aimp-spectrum-rack {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 38px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.aimp-spec-col {
  flex: 1;
  height: 4px;
  background: linear-gradient(180deg, #fdba74 0%, #f97316 40%, #c2410c 100%);
  border-radius: 2px;
  transition: height 0.15s ease;
  box-shadow: 0 0 5px rgba(249, 115, 22, 0.4);
}

.radio-hero-card.playing .aimp-spec-col {
  animation: aimpBounce 0.5s ease-in-out infinite alternate;
}

.aimp-spec-col.sc1  { animation-delay: 0.04s; }
.aimp-spec-col.sc2  { animation-delay: 0.12s; }
.aimp-spec-col.sc3  { animation-delay: 0.24s; }
.aimp-spec-col.sc4  { animation-delay: 0.08s; }
.aimp-spec-col.sc5  { animation-delay: 0.20s; }
.aimp-spec-col.sc6  { animation-delay: 0.32s; }
.aimp-spec-col.sc7  { animation-delay: 0.14s; }
.aimp-spec-col.sc8  { animation-delay: 0.02s; }
.aimp-spec-col.sc9  { animation-delay: 0.22s; }
.aimp-spec-col.sc10 { animation-delay: 0.35s; }
.aimp-spec-col.sc11 { animation-delay: 0.18s; }
.aimp-spec-col.sc12 { animation-delay: 0.06s; }
.aimp-spec-col.sc13 { animation-delay: 0.28s; }
.aimp-spec-col.sc14 { animation-delay: 0.10s; }
.aimp-spec-col.sc15 { animation-delay: 0.26s; }
.aimp-spec-col.sc16 { animation-delay: 0.38s; }
.aimp-spec-col.sc17 { animation-delay: 0.16s; }
.aimp-spec-col.sc18 { animation-delay: 0.05s; }
.aimp-spec-col.sc19 { animation-delay: 0.30s; }
.aimp-spec-col.sc20 { animation-delay: 0.15s; }
.aimp-spec-col.sc21 { animation-delay: 0.25s; }
.aimp-spec-col.sc22 { animation-delay: 0.09s; }
.aimp-spec-col.sc23 { animation-delay: 0.34s; }
.aimp-spec-col.sc24 { animation-delay: 0.19s; }

@keyframes aimpBounce {
  0%   { height: 4px; }
  50%  { height: 32px; filter: brightness(1.2); }
  100% { height: 10px; }
}

/* AIMP Kontrol Doku */
.aimp-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(15, 14, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 14px;
}

.aimp-transport-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aimp-btn.aimp-step {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fdba74;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.aimp-btn.aimp-step:hover {
  background: rgba(249, 115, 22, 0.25);
  border-color: #f97316;
  transform: scale(1.05);
}

.aimp-jog-play {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #f97316 0%, #c2410c 80%, #7c2d12 100%);
  border: 2px solid #fdba74;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transition: all 0.2s;
  position: relative;
}

.aimp-jog-play:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.7);
}

.radio-hero-card.playing .aimp-jog-play {
  animation: aimpPulseRing 1.8s infinite;
}

@keyframes aimpPulseRing {
  0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

.aimp-fader-zone {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 200px;
}

.aimp-mute-btn {
  background: transparent;
  border: none;
  color: #fdba74;
  font-size: 16px;
  cursor: pointer;
}

.aimp-slider-track {
  flex: 1;
}

.aimp-range-slider {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  accent-color: #f97316;
}

.aimp-aux-tools {
  display: flex;
  gap: 6px;
}

.aimp-fav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fdba74;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.aimp-fav-btn:hover {
  background: rgba(249, 115, 22, 0.25);
  border-color: #f97316;
}

/* Kısayol Kartı */
.radio-shortcuts-card {
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
}

.radio-shortcuts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  margin-bottom: 12px;
}

.radio-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.shortcut-item kbd {
  padding: 3px 8px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Radyo Sağ Kolon */
.radio-sidebar-col {
  position: sticky;
  top: 90px;
}

.radio-sidebar-inner {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 120px);
  min-height: 580px;
  overflow: hidden !important;
}

.radio-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.radio-search-wrap svg {
  position: absolute;
  left: 12px;
  color: var(--text-light);
}

.radio-search-wrap input {
  width: 100%;
  padding: 9px 34px 9px 34px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s;
}

.radio-search-wrap input:focus {
  border-color: var(--primary-500);
}

.radio-search-clear-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.radio-sidebar-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg-card-subtle);
  border-radius: var(--radius-full);
}

.radio-tab-btn {
  flex: 1;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}

.radio-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.radio-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: rgba(148, 163, 184, 0.2);
  font-size: 11px;
  font-weight: 700;
}

.radio-tab-btn.active .radio-badge {
  background: var(--primary-100);
  color: var(--primary-700);
}

[data-theme="dark"] .radio-tab-btn.active .radio-badge {
  background: rgba(124, 58, 237, 0.25);
  color: var(--primary-300);
}

/* Radyo İstasyonları Listesi */
.radio-stations-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  scrollbar-width: thin;
}

.radio-channel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.radio-channel-card:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.28);
}

.radio-channel-card.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(217, 70, 239, 0.12) 100%);
  border-color: var(--primary-500);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
}

.radio-c-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.radio-channel-card.active .radio-c-avatar {
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

.radio-c-meta {
  flex: 1;
  min-width: 0;
}

.radio-c-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 3px 0;
}

.radio-c-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.radio-genre-tag {
  color: var(--text-muted);
  font-weight: 500;
}

.radio-live-playing-tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-weight: 700;
  font-size: 10.5px;
}

.radio-c-star {
  background: transparent;
  border: none;
  font-size: 17px;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}

.radio-c-star:hover {
  color: #fbbf24;
}

.radio-c-star.favorited {
  color: #fbbf24;
}

/* ==========================================================================
   RESPONSIVE UYUM (TV & RADYO)
   ========================================================================== */
@media (max-width: 1080px) {
  .tv-main-layout,
  .radio-main-layout {
    grid-template-columns: 1fr;
  }

  .tv-sidebar-col,
  .radio-sidebar-col {
    position: static;
  }

  .tv-sidebar-inner,
  .radio-sidebar-inner {
    max-height: 520px;
    min-height: auto;
  }

  .tv-epg-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tv-epg-next-col {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
  }
}

@media (max-width: 640px) {
  .tv-player-box {
    min-height: 240px;
    border-radius: var(--radius-md);
  }

  .tv-player-bar {
    padding: 10px 14px;
  }

  .tv-now-playing-info h2 {
    font-size: 15px;
  }

  .radio-hero-card {
    padding: 28px 18px;
  }

  .radio-station-title {
    font-size: 20px;
  }

  .radio-controls-dock {
    width: 100%;
    justify-content: space-around;
    padding: 10px 16px;
  }

  #radioVolumeSlider {
    width: 65px;
  }
}

/* ==========================================================================
   GAZETE MANŞETLERİ SAYFASI STİLLERİ
   ========================================================================== */
.gazete-page-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.gazete-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-subtle);
  position: relative;
  overflow: hidden;
}

.gazete-header-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #3b82f6, #06b6d4);
}

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

.gazete-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.gazete-breadcrumb a:hover {
  color: var(--primary-600);
}

.gazete-main-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
  margin: 0 0 6px 0;
}

.gazete-main-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  max-width: 650px;
  line-height: 1.5;
}

.gazete-header-stats-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
}

.gazete-badge-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.gazete-stat-sep {
  color: var(--text-light);
}

.gazete-hd-tag {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   GAZETE KONTROL & FİLTRE PANELİ
   ========================================================================== */
.gazete-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
}

.gazete-controls-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gazete-date-btn-group,
.yazar-date-btn-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card-subtle);
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  gap: 2px;
}

.gazete-quick-date-btn,
.yazar-quick-date-btn {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.gazete-quick-date-btn:hover,
.yazar-quick-date-btn:hover {
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.04);
}

.gazete-quick-date-btn.active,
.yazar-quick-date-btn.active {
  background: var(--bg-card);
  color: var(--primary-600);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .gazete-quick-date-btn:hover,
[data-theme="dark"] .yazar-quick-date-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .gazete-quick-date-btn.active,
[data-theme="dark"] .yazar-quick-date-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #60a5fa;
}

.gazete-datepicker-box,
.yazar-datepicker-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 12.5px;
}

.gazete-datepicker-box input[type="date"],
.yazar-datepicker-box input[type="date"] {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.gazete-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  margin-left: auto;
}

.gazete-search-wrap svg {
  position: absolute;
  left: 12px;
  color: var(--text-light);
  pointer-events: none;
}

.gazete-search-wrap input {
  width: 100%;
  padding: 8px 34px 8px 36px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-main);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gazete-search-wrap input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.gazete-search-clear-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

/* Kategori Filtre Sekmeleri */
.gazete-categories-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.gazete-categories-bar::-webkit-scrollbar {
  display: none;
}

.gazete-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.2s ease;
}

.gazete-cat-tab:hover {
  background: var(--bg-card);
  border-color: var(--primary-300);
  color: var(--text-main);
}

.gazete-cat-tab.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.gazete-cat-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

.gazete-cat-tab.active .gazete-cat-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

[data-theme="dark"] .gazete-cat-count {
  background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   GAZETE KART IZGARASI (GRID)
   ========================================================================== */
.gazete-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.gazete-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.22s;
  outline: none;
}

.gazete-card:hover,
.gazete-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-400);
}

[data-theme="dark"] .gazete-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   GAZETE KARTLARI (Resim 1: Kaliteli Küçük Resimler, Rozet & Tarih)
   ========================================================================== */
.gazete-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 2;
}

.gazete-card-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.gazete-cat-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 5px;
  color: #fff;
  flex-shrink: 0;
}

.gazete-cat-badge.cat-ulusal { background: #0284c7; }
.gazete-cat-badge.cat-spor { background: #16a34a; }
.gazete-cat-badge.cat-ekonomi { background: #d97706; }
.gazete-cat-badge.cat-yabanci { background: #7c3aed; }
.gazete-cat-badge.cat-kibris { background: #ea580c; }

.gazete-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gazete-card-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.gazete-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.45;
  background: var(--bg-card-subtle);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gazete-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.gazete-card:hover .gazete-card-img {
  transform: scale(1.025);
}

.gazete-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

.gazete-card:hover .gazete-card-overlay {
  opacity: 1;
}

.btn-read-hd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #0f172a;
  border: none;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s, background 0.15s;
}

.btn-read-hd:hover {
  transform: scale(1.05);
  background: #f8fafc;
}

.gazete-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
}

.btn-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.btn-card-action:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
  transform: scale(1.08);
}

/* Yükleniyor ve Boş Durumlar */
.gazete-loading-state,
.gazete-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-card);
  border: 1px dashed var(--border-card);
  border-radius: var(--radius-xl);
}

.gazete-empty-icon {
  font-size: 44px;
  margin-bottom: 12px;
}

.gazete-empty-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.gazete-empty-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}

.gazete-empty-btn {
  padding: 9px 20px;
  background: var(--primary-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.gazete-empty-btn:hover {
  background: var(--primary-700);
}

.gazete-footer-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 16px;
}

/* ==========================================================================
   GÖRÜNÜM 2: TİKTOK TARZI DİKEY KAYDIRMALI MANŞET AKIŞI (Resim 2 & Resim 3)
   ========================================================================== */
.gazete-feed-view {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

/* Sabit Üst Kontrol & Navigasyon Çubuğu (Resim 2 Birebir) */
.feed-top-navbar {
  position: sticky;
  top: 70px;
  z-index: 90;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  padding: 12px 18px;
}

[data-theme="dark"] .feed-top-navbar {
  background: #162032;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.feed-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.feed-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.btn-feed-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.btn-feed-back:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-600);
}

[data-theme="dark"] .btn-feed-back:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--primary-500);
  color: #60a5fa;
}

.feed-breadcrumb-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-breadcrumb-line a {
  color: var(--text-muted);
  text-decoration: none;
}

.feed-breadcrumb-line a:hover {
  color: var(--primary-600);
  text-decoration: underline;
}

.feed-breadcrumb-line .active {
  color: var(--text-main);
  font-weight: 700;
}

/* Navigasyon Sağ Kontroller (Resim 2 Birebir) */
.feed-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.feed-custom-select {
  padding: 8px 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  min-width: 150px;
}

[data-theme="dark"] .feed-custom-select {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

.feed-custom-date {
  padding: 7px 10px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

[data-theme="dark"] .feed-custom-date {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

/* Resim 2'deki Mavi [Getir] Butonu */
.btn-feed-getir {
  padding: 8px 20px;
  background: #00a4e4;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.3px;
}

.btn-feed-getir:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

/* TikTok Akış Listesi ve Kartları */
.feed-stream-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.feed-item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
  padding: 0 0 24px 0;
  position: relative;
}

[data-theme="dark"] .feed-item-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.feed-img-stage {
  position: relative;
  width: 100%;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

[data-theme="dark"] .feed-img-stage {
  background: #0b0f19;
}

.feed-headline-img {
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

.feed-zoom-pill {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.2s;
}

.feed-img-stage:hover .feed-zoom-pill {
  opacity: 1;
  transform: scale(1.04);
}

/* Resim 3: Gazete Başlık, Alt Bilgi ve Sosyal Butonlar */
.feed-info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 20px 10px;
  width: 100%;
}

.feed-newspaper-name {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: var(--text-main);
  margin: 0 0 10px 0;
  letter-spacing: -0.6px;
}

.feed-newspaper-subtitle {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 22px 0;
  max-width: 680px;
  line-height: 1.45;
}

/* Resim 3'teki Daire Sosyal Medya Butonları */
.feed-share-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.feed-share-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.feed-share-circle:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.feed-share-circle.fb { background: #3b5998; }
.feed-share-circle.tw { background: #1da1f2; }
.feed-share-circle.pin { background: #bd081c; }
.feed-share-circle.wa { background: #25d366; }

.feed-share-circle.copy { 
  background: var(--bg-card-subtle); 
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
}

.feed-share-circle.copy:hover {
  background: var(--primary-600);
  color: #ffffff;
  border-color: var(--primary-600);
}

.feed-item-divider {
  width: 80px;
  height: 3px;
  background: var(--border-subtle);
  border-radius: 2px;
  margin-top: 24px;
}

/* ==========================================================================
   GÖRÜNÜM 3: POPUP ZOOM LIGHTBOX (Resim 4)
   Saf Zoom / Pan Özelliği (Gezinme Oku Yok)
   ========================================================================== */
.gazete-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gazete-zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 22, 0.92);
  backdrop-filter: blur(10px);
}

.gazete-zoom-wrapper {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.gazete-zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  flex-shrink: 0;
}

.gazete-zoom-title-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
}

.gazete-zoom-title-box span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.gazete-zoom-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zoom-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.zoom-tool-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.35);
}

.zoom-tool-btn.download {
  background: #2563eb;
  border-color: #2563eb;
}

.zoom-tool-btn.download:hover {
  background: #1d4ed8;
}

.zoom-tool-btn.close {
  background: #ef4444;
  border-color: #ef4444;
}

.zoom-tool-btn.close:hover {
  background: #dc2626;
}

.zoom-tool-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 4px;
}

.zoom-factor-label {
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  min-width: 48px;
  text-align: center;
}

.gazete-zoom-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  cursor: grab;
}

.gazete-zoom-stage.dragging {
  cursor: grabbing;
}

.gazete-zoom-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.08s ease-out;
  will-change: transform;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}

.zoom-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: rgba(15, 23, 42, 0.6);
}

.gazete-zoom-bottom-hint {
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}

/* ==========================================================================
   DUYARLI (RESPONSIVE) TASARIM
   ========================================================================== */
@media (max-width: 1200px) {
  .gazete-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .gazete-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .gazete-header-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }

  .gazete-controls-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  .gazete-search-wrap {
    max-width: 100%;
    margin-left: 0;
  }

  .feed-top-navbar {
    top: 50px;
    padding: 10px 14px;
  }

  .feed-nav-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .feed-nav-controls {
    justify-content: space-between;
  }

  .feed-custom-select {
    flex: 1;
    min-width: 0;
  }

  .feed-newspaper-name {
    font-size: 26px;
  }

  .feed-newspaper-subtitle {
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .gazete-grid {
    grid-template-columns: 1fr;
  }

  .gazete-zoom-toolbar {
    padding: 10px 14px;
  }

  .gazete-zoom-title-box span,
  .zoom-factor-label,
  .zoom-tool-sep,
  .zoom-tool-btn.download span {
    display: none;
  }
}

/* ==========================================================================
   DONANIMSAL GERÇEK MONİTÖR TAM EKRAN (HARDWARE MONITOR FULLSCREEN)
   ========================================================================== */
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
.tv-player-box:fullscreen,
.tv-player-box:-webkit-full-screen,
.tv-player-box:-moz-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: 0 !important;
  object-fit: contain !important;
  z-index: 999999 !important;
}

:fullscreen .crt-screen-reflection,
:fullscreen .cyber-corner-bracket,
:-webkit-full-screen .crt-screen-reflection,
:-webkit-full-screen .cyber-corner-bracket {
  display: none !important;
}

/* ==========================================================================
   KÖŞE YAZARLARI SAYFASI (YAZARLAR.HTML) - MODERN EDİTORYAL TASARIM
   ========================================================================== */

.yazar-page-container {
  width: 100%;
  margin: 0;
  padding: 0 0 60px;
}

/* 1. Üst Banner & Başlık */
.yazar-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 24px 30px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-subtle);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.yazar-header-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-500), #ec4899, #f59e0b, var(--primary-600));
}

[data-theme="dark"] .yazar-header-banner {
  background: rgba(19, 27, 46, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.yazar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.yazar-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.yazar-breadcrumb a:hover {
  color: var(--primary-600);
}

.yazar-breadcrumb strong {
  color: var(--primary-600);
}

.yazar-main-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.yazar-main-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  max-width: 680px;
  line-height: 1.5;
}

.yazar-header-stats-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .yazar-header-stats-pill {
  background: #19233a;
  border-color: rgba(255, 255, 255, 0.09);
}

.yazar-badge-live {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: pulse-live 2s infinite;
}

.yazar-stat-sep {
  color: var(--border-subtle);
}

.yazar-refresh-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  margin-left: 2px;
}

.yazar-refresh-btn:hover {
  color: var(--primary-600);
  background: rgba(124, 58, 237, 0.1);
}

.yazar-refresh-btn.spinning svg {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 2. Kontrol ve Filtreleme Paneli */
.yazar-controls-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-subtle);
}

[data-theme="dark"] .yazar-controls-panel {
  background: rgba(19, 27, 46, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.yazar-controls-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.yazar-search-wrap {
  position: relative;
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
}

.yazar-search-wrap svg {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.yazar-search-wrap input {
  width: 100%;
  padding: 10px 38px 10px 40px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-main);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  outline: none;
  transition: all 0.2s;
}

.yazar-search-wrap input:focus {
  border-color: var(--primary-500);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.yazar-search-clear-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 50%;
}

.yazar-search-clear-btn:hover {
  color: var(--text-main);
}

.yazar-sort-box {
  position: relative;
  display: flex;
  align-items: center;
}

.yazar-sort-box svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.yazar-sort-box select {
  appearance: none;
  padding: 10px 32px 10px 36px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
}

.yazar-sort-box select:focus {
  border-color: var(--primary-500);
  background: var(--bg-card);
}

.yazar-fav-filter-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.yazar-fav-filter-btn:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: var(--primary-400);
  color: var(--primary-600);
}

.yazar-fav-filter-btn.active {
  background: #fef08a;
  border-color: #eab308;
  color: #854d0e;
}

.yazar-fav-filter-btn.active svg {
  fill: #eab308;
  color: #ca8a04;
}

[data-theme="dark"] .yazar-fav-filter-btn.active {
  background: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.4);
  color: #fef08a;
}

.yazar-fav-count {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 7px;
  border-radius: 10px;
}

[data-theme="dark"] .yazar-fav-count {
  background: rgba(255, 255, 255, 0.12);
}

/* Gazete Filtre Çipleri */
.yazar-categories-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.yazar-categories-bar::-webkit-scrollbar {
  height: 4px;
}

.yazar-categories-bar::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 4px;
}

.yazar-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.yazar-cat-tab:hover {
  color: var(--text-main);
  border-color: var(--primary-400);
  background: var(--bg-card);
  transform: translateY(-1px);
}

.yazar-cat-tab.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.yazar-cat-count {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 800;
}

.yazar-cat-tab.active .yazar-cat-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

[data-theme="dark"] .yazar-cat-tab {
  background: #19233a;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .yazar-cat-tab.active {
  background: var(--primary-600);
  border-color: var(--primary-500);
}

/* 3. Kart Izgarası (Grid) */
.yazar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
}

.yazar-loading-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
}

/* Yazar Kartı Tasarımı */
.yazar-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.22s;
  position: relative;
}

.yazar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.14);
  border-color: var(--primary-400);
}

[data-theme="dark"] .yazar-card {
  background: #131b2e;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .yazar-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  border-color: var(--primary-500);
}

/* Kart Üst Başlık (Yazar Bilgisi) */
.yazar-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}

[data-theme="dark"] .yazar-card-header {
  background: #162032;
}

.yazar-avatar-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--primary-300);
  background: var(--bg-card-subtle);
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .yazar-avatar-box {
  border-color: var(--primary-600);
}

.yazar-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yazar-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-600), #ec4899);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
}

.yazar-author-meta {
  flex: 1;
  min-width: 0;
}

.yazar-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.yazar-card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.yazar-paper-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1.3;
}

.yazar-fav-btn {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.yazar-fav-btn:hover {
  color: #eab308;
  background: rgba(234, 179, 8, 0.12);
  transform: scale(1.15);
}

.yazar-fav-btn.is-fav {
  color: #eab308;
}

/* Kart Gövdesi (Başlık ve Özet) */
.yazar-card-body {
  padding: 16px;
  flex: 1;
  cursor: pointer;
}

.yazar-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.yazar-card:hover .yazar-card-title {
  color: var(--primary-600);
}

.yazar-card-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kart Alt Bilgi & Butonlar */
.yazar-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card-subtle);
  border-top: 1px solid var(--border-subtle);
}

[data-theme="dark"] .yazar-card-footer {
  background: #0f1626;
}

.yazar-date-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.yazar-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-yazar-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--primary-600);
  border: 1px solid var(--primary-600);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.btn-yazar-read:hover {
  background: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.btn-yazar-external {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition: all 0.2s;
}

.btn-yazar-external:hover {
  color: var(--primary-600);
  border-color: var(--primary-400);
  background: rgba(124, 58, 237, 0.08);
}

/* Boş Durum */
.yazar-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
  margin-top: 10px;
}

.yazar-empty-icon {
  font-size: 46px;
  margin-bottom: 12px;
}

.yazar-empty-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px;
}

.yazar-empty-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.yazar-empty-btn {
  padding: 8px 18px;
  background: var(--primary-600);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.yazar-empty-btn:hover {
  background: var(--primary-700);
}

.yazar-footer-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 20px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   4. MAKALE OKUYUCU MODAL (READER LIGHTBOX)
   ========================================================================== */

.yazar-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.yazar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 20, 0.75);
  backdrop-filter: blur(8px);
}

.yazar-modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  height: 90vh;
  max-height: 840px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[data-theme="dark"] .yazar-modal-container {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.12);
}

.yazar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

[data-theme="dark"] .yazar-modal-header {
  background: #162032;
}

.yazar-modal-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.yazar-modal-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--primary-400);
}

.yazar-modal-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yazar-modal-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yazar-modal-author-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.yazar-modal-paper-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
}

.yazar-modal-date {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.yazar-modal-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.yazar-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.yazar-tool-btn:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}

.yazar-tool-btn.is-fav {
  color: #eab308;
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.12);
}

.yazar-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
  margin: 0 4px;
}

.yazar-modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  cursor: pointer;
  transition: all 0.2s;
}

.yazar-modal-close-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* Modal Gövdesi (Makale Metni) */
.yazar-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px 40px;
  background: var(--bg-card);
  line-height: 1.8;
  color: var(--text-main);
  scrollbar-width: thin;
}

[data-theme="dark"] .yazar-modal-body {
  background: #111827;
}

.yazar-article-container {
  max-width: 720px;
  margin: 0 auto;
}

.yazar-article-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.yazar-article-lead {
  font-size: 1.05em;
  font-style: italic;
  padding: 16px 20px;
  background: var(--bg-card-subtle);
  border-left: 4px solid var(--primary-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 24px;
  color: var(--text-muted);
}

[data-theme="dark"] .yazar-article-lead {
  background: #19233a;
}

.yazar-article-content {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1em;
  line-height: 1.85;
}

.yazar-article-content p {
  margin-bottom: 18px;
}

.yazar-article-loading {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}

/* Zarif Özet Kartı */
.yazar-excerpt-box {
  margin-top: 10px;
}

.yazar-excerpt-text {
  font-size: 1.1em;
  line-height: 1.8;
  margin-bottom: 24px;
}

.yazar-excerpt-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-main);
}

.yazar-excerpt-notice svg {
  color: var(--primary-600);
  flex-shrink: 0;
  margin-top: 2px;
}

.btn-yazar-read-full {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--primary-600), #9333ea);
  border: none;
  border-radius: var(--radius-full);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-yazar-read-full:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.45);
}

/* Modal Alt Bar */
.yazar-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

[data-theme="dark"] .yazar-modal-footer {
  background: #162032;
}

.yazar-modal-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yazar-footer-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-main);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.yazar-footer-nav-btn:hover:not(:disabled) {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}

.yazar-footer-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.yazar-btn-original {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--primary-600);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}

.yazar-btn-original:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}

/* Toast Bildirim */
.yazar-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 100000;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.yazar-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Duyarlı (Responsive) Tasarım */
@media (max-width: 1100px) {
  .yazar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .yazar-header-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }

  .yazar-controls-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  .yazar-modal {
    padding: 10px;
  }

  .yazar-modal-container {
    height: 96vh;
    border-radius: var(--radius-lg);
  }

  .yazar-modal-body {
    padding: 20px;
  }

  .yazar-article-heading {
    font-size: 20px;
  }
}

@media (max-width: 580px) {
  .yazar-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .yazar-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .yazar-modal-nav-group {
    justify-content: space-between;
  }

  .yazar-btn-original {
    justify-content: center;
  }
}

/* =============================================================================
   AKTÜEL ÜRÜNLER & MARKET KATALOGLARI MODÜLÜ (aahaber.com)
   ============================================================================= */

/* Hero Banner */
.aktuel-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 30px 34px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-subtle);
  position: relative;
  overflow: hidden;
}

.aktuel-hero-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12) 0%, rgba(139, 92, 246, 0.04) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .aktuel-hero-card::before {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, rgba(124, 58, 237, 0.08) 50%, transparent 70%);
}

.aktuel-hero-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.aktuel-hero-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.22);
  padding: 5px 14px;
  border-radius: 9999px;
  margin-bottom: 14px;
}

[data-theme="dark"] .aktuel-hero-badge-wrap {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.35);
}

.aktuel-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-600);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7);
  animation: aktuelPulse 2s infinite;
}

@keyframes aktuelPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

.aktuel-hero-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-600);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.aktuel-hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.aktuel-hero-subtitle {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 18px 0;
}

.aktuel-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aktuel-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-card);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.aktuel-stat-badge .stat-icon {
  font-size: 14px;
}

/* Toolbar (Arama ve Durum Filtreleri) */
.aktuel-toolbar-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 330px;
  max-width: 380px;
  width: 100%;
}

.aktuel-search-wrap {
  position: relative;
  width: 100%;
}

.aktuel-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.aktuel-search-input {
  width: 100%;
  height: 46px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  border-radius: 9999px;
  padding: 0 40px 0 42px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.aktuel-search-input::placeholder {
  color: var(--text-muted);
}

.aktuel-search-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.aktuel-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-card);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.aktuel-search-clear:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.aktuel-status-filters {
  display: flex;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
}

.status-filter-btn {
  flex: 1;
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  white-space: nowrap;
}

.status-filter-btn:hover {
  color: var(--text-main);
}

.status-filter-btn.active {
  background: var(--sidebar-gradient) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
}

/* Market Sekmeleri (Bar) */
.aktuel-market-bar-section {
  margin-bottom: 22px;
}

.aktuel-market-tabs-wrapper {
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.aktuel-market-tabs {
  display: flex;
  gap: 8px;
  min-width: max-content;
  padding: 2px 0;
}

.aktuel-market-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 9999px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.aktuel-market-pill:hover {
  border-color: var(--primary-400);
  color: var(--primary-600);
  transform: translateY(-1px);
}

.aktuel-market-pill.active {
  background: var(--sidebar-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.aktuel-market-pill.active .market-pill-name {
  color: #ffffff !important;
  font-weight: 700;
}

.market-pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.aktuel-market-pill.active .market-pill-dot {
  background: #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.market-pill-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 12px;
  transition: var(--transition);
}

.aktuel-market-pill.active .market-pill-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Bölüm Başlığı */
.aktuel-section-header {
  margin-bottom: 18px;
}

.aktuel-grid-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px 0;
}

.aktuel-grid-subheading {
  font-size: 13px;
  color: var(--text-muted);
}

/* Katalog Kartları Izgarası (Grid) */
.aktuel-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1280px) {
  .aktuel-catalog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 860px) {
  .aktuel-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 540px) {
  .aktuel-catalog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Tekil Katalog Kartı */
.aktuel-card-item {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}

.aktuel-card-item:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 14px 34px -6px rgba(124, 58, 237, 0.16);
}

[data-theme="dark"] .aktuel-card-item:hover {
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.55);
}

.aktuel-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.aktuel-card-thumb-wrap {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: #0f172a;
  overflow: hidden;
  isolation: isolate;
}

.aktuel-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
  display: block;
}

.aktuel-card-item:hover .aktuel-card-img {
  transform: scale(1.05);
}

.aktuel-card-item.is-expired .aktuel-card-img {
  filter: grayscale(60%) opacity(0.7);
}

/* Rozetler */
.aktuel-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.aktuel-badge-market {
  padding: 4px 10px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.aktuel-badge-pinned {
  padding: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Çapraz Ribbon (Sayfa Sayısı) */
.aktuel-card-ribbon {
  position: absolute;
  top: 14px;
  right: -32px;
  width: 112px;
  transform: rotate(45deg);
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.02em;
}

/* Süresi Bitti Damgası */
.aktuel-card-expired-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  background: #dc2626;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 3;
}

/* Hover Aksiyonu */
.aktuel-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.aktuel-card-item:hover .aktuel-card-overlay {
  opacity: 1;
}

.aktuel-btn-inspect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 9999px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.aktuel-card-item:hover .aktuel-btn-inspect {
  transform: translateY(0);
}

/* Kart Gövdesi */
.aktuel-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 10px;
}

.aktuel-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}

.aktuel-card-item:hover .aktuel-card-title {
  color: var(--primary-600);
}

.aktuel-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-card);
  padding-top: 10px;
}

.aktuel-card-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aktuel-card-views {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Yükleme, Boş ve Hata Durumları */
.aktuel-loading-state,
.aktuel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.aktuel-loading-state p {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
}

.aktuel-empty-state h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 16px 0 8px;
}

.aktuel-empty-state p {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 480px;
}

.aktuel-error-box {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
}

.aktuel-error-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 12px 0 6px;
}

.aktuel-error-box p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.btn-aktuel-retry {
  padding: 8px 20px;
  background: var(--primary-600);
  border: none;
  border-radius: var(--radius-md);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-aktuel-retry:hover {
  background: var(--primary-700);
}

/* Daha Fazla Yükle */
.aktuel-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
  margin-bottom: 20px;
}

.btn-aktuel-load-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  border-radius: 9999px;
  color: var(--text-main);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.btn-aktuel-load-more:hover {
  border-color: var(--primary-600);
  color: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.2);
}

.btn-aktuel-load-more.loading {
  pointer-events: none;
  opacity: 0.8;
}

/* =============================================================================
   İNTERAKTİF BROŞÜR OKUYUCU MODAL (READER MODAL)
   ============================================================================= */
.aktuel-reader-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}

.aktuel-reader-modal.active {
  display: flex;
  animation: aktuelModalFadeIn 0.25s ease-out;
}

@keyframes aktuelModalFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.aktuel-reader-dialog {
  width: 100%;
  max-width: 1200px;
  height: 94vh;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Modal Üst Çubuk */
.aktuel-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: rgba(17, 24, 39, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
  flex-shrink: 0;
}

.aktuel-modal-meta-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.aktuel-modal-market-badge {
  padding: 5px 12px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.aktuel-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.aktuel-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aktuel-modal-date-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #94a3b8;
}

.aktuel-modal-dot {
  opacity: 0.5;
}

.aktuel-modal-page-counter {
  font-weight: 700;
  color: #38bdf8;
}

/* Modal Araçları */
.aktuel-modal-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.aktuel-tool-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.aktuel-tool-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.aktuel-tool-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 4px;
}

.aktuel-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.aktuel-modal-close-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Okuma Sahnesi (Stage) */
.aktuel-modal-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #030712;
}

.aktuel-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: auto;
  scrollbar-width: thin;
}

.aktuel-image-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #94a3b8;
  font-size: 13px;
  background: rgba(3, 7, 18, 0.85);
  z-index: 5;
}

.aktuel-main-image {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
  user-select: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  border-radius: 6px;
}

/* Floating Yön Butonları */
.aktuel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.aktuel-nav-btn:hover:not(:disabled) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-50%) scale(1.08);
}

.aktuel-nav-prev {
  left: 18px;
}

.aktuel-nav-next {
  right: 18px;
}

/* Küçük Resimler (Thumbnails) */
.aktuel-thumbnails-strip {
  height: 84px;
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
}

.aktuel-thumb-item {
  width: 52px;
  height: 68px;
  border-radius: 6px;
  background: #1e293b;
  border: 2px solid transparent;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.aktuel-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aktuel-thumb-item:hover {
  transform: scale(1.06);
  border-color: rgba(56, 189, 248, 0.5);
}

.aktuel-thumb-item.active {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6);
  transform: scale(1.06);
}

.thumb-page-num {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

/* Modal Alt Çubuğu */
.aktuel-modal-footer {
  background: rgba(17, 24, 39, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.aktuel-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.aktuel-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.aktuel-footer-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.aktuel-desc-toggle-btn {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 3px 0;
}

.aktuel-modal-desc-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
}

.aktuel-modal-desc-accordion.expanded {
  max-height: 180px;
  overflow-y: auto;
}

.aktuel-desc-content h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 4px 0;
}

/* Bildirim Baloncuğu */
.aktuel-toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.aktuel-toast-notification.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive Modal Ayarları */
@media (max-width: 768px) {
  .aktuel-hero-card {
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
  }

  .aktuel-toolbar-box {
    max-width: 100%;
    min-width: auto;
  }

  .aktuel-reader-dialog {
    height: 98vh;
    border-radius: var(--radius-lg);
  }

  .aktuel-modal-header {
    padding: 10px 14px;
  }

  .aktuel-modal-title {
    max-width: 180px;
  }

  .aktuel-nav-btn {
    width: 40px;
    height: 40px;
  }

  .aktuel-nav-prev { left: 8px; }
  .aktuel-nav-next { right: 8px; }
}

/* ==========================================================================
   MSN TARZI KESİNTİSİZ HABER AKIŞI & OKUYUCU SAYFASI (haber.php)
   ========================================================================== */
.news-reading-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 14px 60px 14px;
}

/* 2/3 ve 1/3 Çift Sütunlu Haber Düzeni */
.news-layout-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 1240px) {
  .news-layout-columns {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
  }
}

@media (max-width: 1040px) {
  .news-layout-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.news-main-column {
  min-width: 0;
  width: 100%;
}

.news-sidebar-column {
  min-width: 0;
  width: 100%;
}

.news-sidebar-sticky {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.body-popup-mode .news-layout-columns {
  grid-template-columns: 1fr !important;
}

body.body-popup-mode .news-sidebar-column {
  display: none !important;
}

/* Sidebar Widget Kutusu */
.sidebar-widget-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.035);
  transition: var(--transition);
}

.sidebar-widget-box:hover {
  border-color: rgba(124, 58, 237, 0.22);
}

.sidebar-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-widget-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.sidebar-widget-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.sidebar-widget-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg-card-subtle);
  color: var(--primary-600);
  border: 1px solid var(--border-subtle);
}

/* Kart Listesi */
.sidebar-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tekil Benzer Haber Kartı (Kutucuk) */
.sidebar-news-card {
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-card-subtle);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  align-items: center;
}

.sidebar-news-card:hover {
  background: var(--bg-card);
  border-color: rgba(124, 58, 237, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.sidebar-card-thumb-wrap {
  width: 105px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #1e293b;
}

.sidebar-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  display: block;
}

.sidebar-news-card:hover .sidebar-card-thumb {
  transform: scale(1.07);
}

.sidebar-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.sidebar-card-meta-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.sidebar-cat-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-600);
}

.sidebar-meta-sep {
  opacity: 0.5;
}

.sidebar-card-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.38;
  color: var(--text-main);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.sidebar-news-card:hover .sidebar-card-title {
  color: var(--primary-600);
}

.sidebar-card-source {
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sidebar-source-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-500);
}

/* İlk Haber: Öne Çıkan Geniş Kutucuk */
.sidebar-news-card.featured-card {
  flex-direction: column;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  align-items: stretch;
}

.sidebar-news-card.featured-card .sidebar-card-thumb-wrap {
  width: 100%;
  height: 165px;
  border-radius: 15px 15px 0 0;
}

.sidebar-news-card.featured-card .sidebar-card-body {
  padding: 14px 14px 16px;
  gap: 8px;
}

.sidebar-news-card.featured-card .sidebar-card-title {
  font-size: 14.5px;
  line-height: 1.4;
}

.sidebar-card-pill-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
}

/* Trend Haber Kartları */
.sidebar-news-card.trending-card {
  gap: 12px;
}

.sidebar-trend-rank {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(124, 58, 237, 0.1);
  color: var(--primary-600);
}

.sidebar-cards-list > .trending-card:nth-child(1) .sidebar-trend-rank {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.sidebar-cards-list > .trending-card:nth-child(2) .sidebar-trend-rank {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3);
}

.sidebar-cards-list > .trending-card:nth-child(3) .sidebar-trend-rank {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.sidebar-view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-card-subtle);
  border: 1px dashed var(--border-subtle);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebar-view-all-btn:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: var(--primary-500);
  border-style: solid;
}


.feed-stream-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Tekil Haber Akış Kartı */
.feed-story-unit {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
  transition: var(--transition);
  position: relative;
}

@media (max-width: 768px) {
  .feed-story-unit {
    padding: 20px 16px;
    border-radius: 14px;
  }
}

/* Breadcrumb & Akış Sıra Rozeti */
.story-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.story-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.story-breadcrumb a {
  color: var(--primary-600);
  text-decoration: none;
}

.story-breadcrumb a:hover {
  text-decoration: underline;
}

.story-category-link {
  color: var(--text-main);
  background: var(--bg-card-subtle);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

.story-stream-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary-600);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.stream-indicator-dot {
  width: 7px;
  height: 7px;
  background: #7c3aed;
  border-radius: 50%;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Ana Başlık */
.story-main-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .story-main-headline {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 14px;
  }
}

/* Meta Bilgileri */
.story-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.story-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-source-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.story-meta-texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.story-source-title {
  font-size: 14px;
  color: var(--text-main);
}

.story-author-name {
  color: var(--text-muted);
  font-size: 13px;
}

.meta-separator {
  color: var(--text-muted);
  margin: 0 4px;
}

.story-date-line {
  font-size: 12px;
  color: var(--text-muted);
}

/* Aksiyon Butonları */
.story-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.font-size-adjuster {
  display: flex;
  align-items: center;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 2px;
}

.btn-text-size {
  background: transparent;
  border: 0;
  color: var(--text-main);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.btn-text-size:hover {
  background: var(--primary-500);
  color: #fff;
}

.story-share-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-share-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}

.btn-share-icon:hover {
  transform: translateY(-2px);
}

.btn-share-icon.whatsapp:hover {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
}

.btn-share-icon.twitter:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.btn-share-icon.copy:hover {
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
}

/* Ana Görsel */
.story-hero-media {
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.story-hero-image {
  width: 100%;
  max-height: 540px;
  object-fit: cover;
  display: block;
}

.story-image-caption {
  padding: 8px 14px;
  background: var(--bg-card-subtle);
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}

/* Yapay Zeka Özeti Kutusu */
.story-ai-summary-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.07) 0%, rgba(59, 130, 246, 0.04) 100%);
  border: 1.5px solid rgba(124, 58, 237, 0.25);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.05);
}

.ai-summary-badge-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-600);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.ai-tag {
  background: rgba(124, 58, 237, 0.15);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ai-summary-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-summary-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-main);
}

.ai-summary-bullets li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-500);
  font-size: 13px;
}

/* Spot Lead */
.story-spot-lead {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 22px;
}

/* Detay İçerik */
.story-rich-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
  transition: font-size 0.2s ease;
}

.story-rich-body p {
  margin: 0;
}

.story-rich-body blockquote {
  margin: 14px 0;
  padding: 16px 20px;
  background: var(--bg-card-subtle);
  border-left: 4px solid var(--primary-500);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-main);
}

.story-rich-body blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  color: var(--primary-600);
}

/* Doğrulama & Kaynak Çubuğu */
.story-verification-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}

.verification-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.verification-pill svg {
  color: #10b981;
  flex-shrink: 0;
}

.btn-original-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-original-link:hover {
  text-decoration: underline;
}

/* ======================================================================
   HABER ALTI BENZER / DİĞER KATEGORİLERDEN HABER KOLAJI
   ====================================================================== */
.story-related-collage-section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px dashed var(--border-subtle);
  margin-bottom: 24px;
}

.related-collage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.related-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.related-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

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

.related-all-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-600);
  text-decoration: none;
}

.related-all-link:hover {
  text-decoration: underline;
}

/* 4 Kartlı İlgili Kolaj Izgarası */
.story-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .story-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .story-related-grid {
    grid-template-columns: 1fr;
  }
}

.related-news-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.related-card-img-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #1e1b2e;
}

.related-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related-news-card:hover .related-card-img-wrap img {
  transform: scale(1.05);
}

.related-cat-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 10, 28, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  backdrop-filter: blur(4px);
}

.related-card-content {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.related-card-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-card-meta {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.meta-dot {
  margin: 0 4px;
}

/* ======================================================================
   AKIŞ GEÇİŞ BANDI (Next Story Divider)
   ====================================================================== */
.feed-next-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 10px 0;
  cursor: pointer;
  user-select: none;
}

.divider-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
}

.next-story-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1.5px solid var(--primary-500);
  border-radius: var(--radius-full);
  color: var(--text-main);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15);
  transition: var(--transition);
}

.feed-next-divider:hover .next-story-pill {
  transform: translateY(2px);
  background: var(--primary-600);
  color: #fff;
}

.feed-next-divider:hover .next-story-pill svg {
  color: #fff;
  transform: translateY(2px);
}

.next-pill-label {
  font-size: 11px;
  font-weight: 800;
  background: var(--primary-500);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.5px;
}

.feed-next-divider:hover .next-pill-label {
  background: #fff;
  color: var(--primary-600);
}

.next-pill-title {
  font-size: 13.5px;
  font-weight: 700;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.next-story-pill svg {
  color: var(--primary-500);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.feed-end-notice {
  text-align: center;
  padding: 24px 16px 10px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ======================================================================
   5 HABERDEN SONRA ÇIKAN FOOTER (Site Footer)
   ====================================================================== */
.site-footer {
  margin-top: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-badge-ft {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-weight: 900;
  font-size: 19px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-name-ft {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
}

.brand-name-ft span {
  color: var(--primary-500);
}

.brand-desc-ft {
  font-size: 12px;
  color: var(--text-muted);
  margin: 3px 0 0 0;
}

.footer-links-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-links-group a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}

.footer-links-group a:hover {
  color: var(--primary-600);
}

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.footer-copyright {
  margin: 0;
}

.footer-sub-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toast Bildirimi */
.aahaber-toast-box {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 10, 28, 0.92);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 9999;
}

.aahaber-toast-box.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   KÖŞE YAZARLARI KESİNTİSİZ OKUMA AKIŞI (yazi.php)
   ========================================================================== */
.columnist-reading-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 12px 60px 12px;
}

.columnist-stream-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-back-to-yazarlar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-600);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  text-decoration: none;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
}

.btn-back-to-yazarlar:hover {
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
  transform: translateX(-3px);
}

.columnist-stream-stats {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.columnist-stream-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Tekil Yazar Akış Ünitesi */
.feed-columnist-unit {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 34px 38px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
  transition: var(--transition);
  position: relative;
}

@media (max-width: 768px) {
  .feed-columnist-unit {
    padding: 22px 18px;
    border-radius: 14px;
  }
}

.columnist-unit-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.columnist-breadcrumb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.columnist-breadcrumb-left a {
  color: var(--primary-600);
  text-decoration: none;
}

.columnist-breadcrumb-left a:hover {
  text-decoration: underline;
}

.paper-badge-pill {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid;
}

.columnist-stream-order-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary-600);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.columnist-stream-dot {
  width: 7px;
  height: 7px;
  background: #7c3aed;
  border-radius: 50%;
  animation: pulseDot 2s infinite;
}

/* Yazar Profil Başlığı */
.columnist-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.columnist-profile-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.columnist-avatar-frame {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2.5px solid var(--primary-500);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15);
  background: var(--bg-card-subtle);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.columnist-avatar-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-600), #a855f7);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.columnist-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.columnist-author-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.columnist-subline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.columnist-newspaper-name {
  color: var(--primary-600);
}

.columnist-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.columnist-share-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Makale Başlığı */
.columnist-article-title {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 0 0 20px 0;
}

@media (max-width: 768px) {
  .columnist-article-title {
    font-size: 23px;
    line-height: 1.35;
    margin-bottom: 16px;
  }
}

/* Alıntı / Giriş Kutusu */
.columnist-lead-box {
  position: relative;
  background: var(--bg-card-subtle);
  border-left: 4px solid var(--primary-500);
  border-radius: 0 14px 14px 0;
  padding: 18px 24px 18px 36px;
  margin-bottom: 26px;
}

.columnist-quote-mark {
  position: absolute;
  left: 12px;
  top: 6px;
  font-size: 32px;
  font-family: Georgia, serif;
  color: var(--primary-500);
  opacity: 0.6;
  line-height: 1;
}

.columnist-lead-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-main);
  margin: 0;
}

/* Makale Gövdesi */
.columnist-body-content {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 30px;
  transition: font-size 0.2s ease;
}

.columnist-body-content p {
  margin: 0;
}

.columnist-lead-paragraph {
  font-size: 1.08em;
  line-height: 1.8;
  color: var(--text-main);
  font-weight: 500;
}

.columnist-meta-notice {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
}

/* Gazete ve Telif Çubuğu */
.columnist-attribution-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.columnist-attribution-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.columnist-attribution-info svg {
  color: var(--primary-500);
  flex-shrink: 0;
}

.btn-columnist-original-newspaper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid;
  background: var(--bg-card);
  text-decoration: none;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
}

.btn-columnist-original-newspaper:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background: var(--primary-600);
  color: #fff !important;
  border-color: var(--primary-600) !important;
}

/* Sıradaki Yazara Geçiş Çubuğu */
.columnist-stream-next-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 10px 0;
  cursor: pointer;
  user-select: none;
}

.next-columnist-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1.5px solid var(--primary-500);
  border-radius: var(--radius-full);
  color: var(--text-main);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15);
  transition: var(--transition);
  max-width: 90%;
}

.columnist-stream-next-divider:hover .next-columnist-pill {
  transform: translateY(2px);
  background: var(--primary-600);
  color: #fff;
}

.next-columnist-badge {
  font-size: 11px;
  font-weight: 800;
  background: var(--primary-500);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.columnist-stream-next-divider:hover .next-columnist-badge {
  background: #fff;
  color: var(--primary-600);
}

.next-columnist-name {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text-main);
}

.columnist-stream-next-divider:hover .next-columnist-name {
  color: #fff;
}

.next-columnist-sep {
  color: var(--text-muted);
}

.next-columnist-paper {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-500);
}

.columnist-stream-next-divider:hover .next-columnist-paper {
  color: #ecd68b;
}

.next-columnist-title {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.columnist-stream-next-divider:hover .next-columnist-title {
  color: rgba(255, 255, 255, 0.85);
}

.next-columnist-pill svg {
  color: var(--primary-500);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.columnist-stream-next-divider:hover .next-columnist-pill svg {
  color: #fff;
  transform: translateY(2px);
}

/* Günün Sonu Bildirimi */
.columnist-stream-finish-box {
  text-align: center;
  padding: 36px 20px;
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
  border-radius: 18px;
  margin-top: 20px;
}

.finish-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
}

.columnist-stream-finish-box strong {
  font-size: 17px;
  color: var(--text-main);
  display: block;
  margin-bottom: 4px;
}

.columnist-stream-finish-box p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}

/* =============================================================================
   BELEDİYE HABER TARZI AKTÜEL BROŞÜR DETAY SAYFASI (katalog.php)
   ============================================================================= */

.katalog-page-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 24px 60px;
}

/* 1. Üst Navigasyon Şeridi */
.katalog-top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.katalog-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-katalog-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-full);
  color: var(--text-main);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
  text-transform: uppercase;
}

.btn-katalog-back:hover {
  border-color: var(--primary-500);
  color: var(--primary-600);
  transform: translateX(-2px);
}

.katalog-market-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.katalog-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.katalog-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 800;
}

.katalog-status-badge.active {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.28);
}

.katalog-status-badge.expired {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.btn-katalog-next-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: var(--primary-600);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
  transition: var(--transition);
}

.btn-katalog-next-top:hover {
  background: var(--primary-700);
  transform: translateX(2px);
}

/* 2. Başlık ve Açıklama */
.katalog-header {
  margin-bottom: 26px;
}

.katalog-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.katalog-main-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* 3. Broşür Sayfaları Listesi */
.katalog-pages-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.katalog-sheet-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.katalog-sheet-card:hover {
  border-color: var(--primary-400);
  box-shadow: var(--shadow-card);
}

.katalog-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--bg-card-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.katalog-sheet-counter-pill {
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.katalog-sheet-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.katalog-sheet-img-wrap {
  position: relative;
  width: 100%;
  background: #0f172a;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.katalog-sheet-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.katalog-sheet-img-wrap:hover .katalog-sheet-img {
  transform: scale(1.01);
}

.katalog-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.katalog-sheet-img-wrap:hover .katalog-sheet-overlay {
  opacity: 1;
}

.sheet-zoom-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(8px);
  transition: transform 0.25s ease;
}

.katalog-sheet-img-wrap:hover .sheet-zoom-pill {
  transform: translateY(0);
}

/* 4. Alt Katalog Geçiş Navigasyonu */
.katalog-bottom-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 36px 0;
}

.katalog-nav-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  text-decoration: none;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition);
}

.katalog-nav-card.next {
  text-align: right;
  align-items: flex-end;
}

.katalog-nav-card:hover {
  border-color: var(--primary-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.katalog-nav-card .nav-direction {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-600);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.katalog-nav-card .nav-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.35;
}

/* 5. Ürün Detayları ve Açıklama Bölümü */
.katalog-description-section {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 26px 30px;
  box-shadow: var(--shadow-subtle);
  margin-top: 10px;
}

.katalog-desc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.katalog-desc-header svg {
  color: var(--primary-600);
}

.katalog-desc-header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.katalog-desc-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.katalog-desc-content a {
  color: var(--primary-600);
  font-weight: 700;
  text-decoration: underline;
}

/* =============================================================================
   6. BELEDİYE HABER TARZI TAM EKRAN LIGHTBOX POPUP
   ============================================================================= */

.belediye-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000000;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.belediye-lightbox.active {
  display: flex;
  opacity: 1;
}

.bl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.96);
  z-index: 1;
}

/* Üst Sol Rozet */
.bl-top-left {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 20;
}

.bl-page-badge {
  background: #00a2e8;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 15px rgba(0, 162, 232, 0.45);
  letter-spacing: 0.5px;
}

/* Üst Sağ Kapatma */
.bl-top-right {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 20;
}

.bl-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.bl-close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  transform: rotate(90deg) scale(1.08);
}

/* TikTok Tarzı Dikey Sahne ve Akış */
.bl-stage {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bl-tiktok-feed {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bl-tiktok-feed::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.bl-tiktok-slide {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 60px 80px;
  position: relative;
  flex-shrink: 0;
}

.bl-slide-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.bl-slide-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.88);
  cursor: zoom-in;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Alt Sol Bilgi ve Buton */
.bl-bottom-left {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bl-btn-next-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}

.bl-btn-next-cat:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  transform: translateX(2px);
}

.bl-market-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-full);
  background: rgba(20, 24, 35, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.bl-market-pill-badge {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
}

.bl-market-date-text {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

/* Alt Sağ Dikey Araç Çubuğu (Yakınlaştır, Özet, Paylaş) */
.bl-bottom-right {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.bl-tool-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  padding: 0;
  outline: none;
  transition: transform 0.2s ease;
}

.bl-tool-action-btn:hover {
  transform: translateY(-2px);
}

.bl-tool-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20, 24, 38, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.bl-tool-action-btn:hover .bl-tool-circle,
.bl-tool-circle.active {
  background: #00a2e8;
  border-color: #00a2e8;
  box-shadow: 0 0 16px rgba(0, 162, 232, 0.5);
}

.bl-tool-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
}

/* Özet Çekmecesi (Slide-out Drawer) */
.bl-summary-drawer {
  position: absolute;
  top: 0;
  right: -420px;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  z-index: 35;
  display: flex;
  flex-direction: column;
  transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
}

.bl-summary-drawer.open {
  right: 0;
}

.bl-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.bl-drawer-header h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.bl-drawer-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.bl-drawer-close:hover {
  color: #ef4444;
}

.bl-drawer-body {
  padding: 24px;
  overflow-y: auto;
  color: #ffffff;
  scrollbar-width: thin;
}

.bl-drawer-body h5 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: #00a2e8;
}

.bl-drawer-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bl-drawer-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

/* Bildirim Toast */
.katalog-toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #00a2e8;
  color: #ffffff;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 9999999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.katalog-toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobil ve Tablet Uyumu */
@media (max-width: 768px) {
  .katalog-page-container {
    padding: 14px 16px 40px;
  }

  .katalog-main-title {
    font-size: 24px;
  }

  .katalog-bottom-nav {
    grid-template-columns: 1fr;
  }

  .bl-tiktok-slide {
    padding: 30px 10px 80px;
  }

  .bl-bottom-left {
    bottom: 14px;
    left: 14px;
    gap: 8px;
  }

  .bl-btn-next-cat {
    padding: 6px 14px;
    font-size: 11.5px;
  }

  .bl-bottom-right {
    bottom: 14px;
    right: 14px;
    gap: 10px;
  }

  .bl-tool-circle {
    width: 38px;
    height: 38px;
  }
}

/* =============================================================================
   TV & RADYO SEO BİLGİ KARTLARI
   ============================================================================= */
.tv-seo-info-card,
.radio-seo-info-card {
  margin-top: 24px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-xl, 16px);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

[data-theme="dark"] .tv-seo-info-card,
[data-theme="dark"] .radio-seo-info-card {
  background: rgba(25, 29, 45, 0.7);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.tv-seo-header,
.radio-seo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

.tv-seo-title-group,
.radio-seo-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tv-seo-header h2,
.radio-seo-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main, #1e293b);
  margin: 0;
  letter-spacing: -0.3px;
}

[data-theme="dark"] .tv-seo-header h2,
[data-theme="dark"] .radio-seo-header h2 {
  color: #ffffff;
}

.tv-seo-badge,
.radio-seo-badge {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.tv-seo-live-indicator,
.radio-seo-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.tv-seo-description,
.radio-seo-description {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted, #64748b);
  margin: 0 0 18px 0;
}

[data-theme="dark"] .tv-seo-description,
[data-theme="dark"] .radio-seo-description {
  color: rgba(255, 255, 255, 0.7);
}

.tv-seo-features,
.radio-seo-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.tv-feat-item,
.radio-feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
  padding: 10px 14px;
  border-radius: 12px;
}

[data-theme="dark"] .tv-feat-item,
[data-theme="dark"] .radio-feat-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.tv-feat-icon,
.radio-feat-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.tv-feat-item strong,
.radio-feat-item strong {
  display: block;
  font-size: 12.5px;
  color: var(--text-main, #1e293b);
}

[data-theme="dark"] .tv-feat-item strong,
[data-theme="dark"] .radio-feat-item strong {
  color: #ffffff;
}

.tv-feat-item span,
.radio-feat-item span {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

.tv-channel-card,
.radio-channel-card {
  text-decoration: none !important;
  color: inherit !important;
}

/* ==========================================================================
   ANINDA ÇOKLU ÇEVİRİ — POT DESKTOP STİLİ (ceviri.php)
   ========================================================================== */

.pot-translate-page {
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 6px 36px 6px;
}

.pot-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}

.pot-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.pot-breadcrumb a {
  color: var(--text-muted, #64748b);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.pot-breadcrumb a:hover {
  color: var(--primary, #7c3aed);
}

.pot-breadcrumb span {
  color: var(--text-muted, #94a3b8);
}

.pot-breadcrumb .active-crumb {
  color: var(--text-main, #0f172a);
  font-weight: 800;
}

.pot-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pot-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

.pot-badge-multi {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

.pot-badge-auto {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.pot-badge-tts {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* 2 Kolonlu Düzen */
.pot-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .pot-main-layout {
    grid-template-columns: 1fr;
  }
}

/* Pot Pencere Kartı (Ana Konsol) */
.pot-window-wrapper {
  width: 100%;
}

.pot-window-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 20px;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.07), 0 0 1px 1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.25s ease;
}

[data-theme="dark"] .pot-window-card {
  background: #1e2029;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.55);
}

.pot-window-card.pot-card-pinned {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35), 0 20px 48px -10px rgba(124, 58, 237, 0.25);
}

/* Pencere Başlığı */
.pot-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

[data-theme="dark"] .pot-window-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.pot-window-header-left,
.pot-window-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Başlık İçi Doğrudan Çeviri Motoru Seçicisi */
.pot-engine-inline-toggles {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .pot-engine-inline-toggles {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.pot-engine-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
}

[data-theme="dark"] .pot-engine-pill {
  color: rgba(255, 255, 255, 0.6);
}

.pot-engine-pill:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-engine-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.pot-engine-pill:active {
  transform: scale(0.96);
}

.pot-pill-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.2s ease;
}

[data-theme="dark"] .pot-pill-dot {
  background: #475569;
}

/* Aktif Hap Butonlar */
.pot-engine-pill.active {
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #0f172a);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .pot-engine-pill.active {
  background: #1e293b;
  color: #ffffff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}

.pot-engine-pill.active .dot-google {
  background: #4285F4;
  box-shadow: 0 0 6px rgba(66, 133, 244, 0.65);
}

.pot-engine-pill.active .dot-yandex {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.65);
}

.pot-engine-pill.active .dot-bing {
  background: #00a4ef;
  box-shadow: 0 0 6px rgba(0, 164, 239, 0.65);
}

.pot-engine-pill.active .dot-lingva {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.65);
}

.pot-win-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.pot-win-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-win-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.pot-pin-btn.active {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
}

.pot-win-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.pot-mini-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.pot-win-name {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

.pot-ver-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted, #64748b);
}

[data-theme="dark"] .pot-ver-pill {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

/* 1. Kaynak Metin Kutusu */
.pot-source-box {
  padding: 18px 20px 14px 20px;
  background: var(--bg-card, #ffffff);
}

[data-theme="dark"] .pot-source-box {
  background: #1e2029;
}

.pot-source-textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-main, #0f172a);
  resize: vertical;
  min-height: 85px;
  box-sizing: border-box;
}

[data-theme="dark"] .pot-source-textarea {
  color: #f8fafc;
}

.pot-source-textarea::placeholder {
  color: var(--text-muted, #94a3b8);
  opacity: 0.65;
}

/* Kaynak Araç Çubuğu */
.pot-source-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .pot-source-toolbar {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.pot-source-tools-left,
.pot-source-tools-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pot-tool-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

[data-theme="dark"] .pot-tool-btn {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

.pot-tool-btn:hover {
  background: var(--primary, #7c3aed);
  color: #ffffff;
  transform: translateY(-1px);
}

.pot-tool-btn.pot-btn-speaking {
  background: #3b82f6 !important;
  color: #ffffff !important;
  animation: potPulse 1s infinite alternate;
}

@keyframes potPulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.pot-detected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-detected-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.pot-dot-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9333ea;
  box-shadow: 0 0 6px rgba(147, 51, 234, 0.7);
}

.pot-char-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

.pot-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 10px;
  border: none;
  background: #7c3aed;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.pot-translate-btn:hover {
  background: #6d28d9;
  transform: translateY(-1px);
}

/* 2. Dil Seçim & Değiştirme Barı (Language Switcher Bar) */
.pot-lang-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 18px 16px 18px;
  padding: 6px 12px;
  border-radius: 14px;
  background: #f1f3f5;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .pot-lang-bar {
  background: #252836;
  border-color: rgba(255, 255, 255, 0.06);
}

.pot-lang-select-wrap {
  flex: 1;
}

.pot-lang-select {
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
}

[data-theme="dark"] .pot-lang-select {
  color: #ffffff;
}

[data-theme="dark"] .pot-lang-select option {
  background: #1e2029;
  color: #ffffff;
}

.pot-swap-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: #ffffff;
  color: var(--text-main, #0f172a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
  margin: 0 8px;
  flex-shrink: 0;
}

[data-theme="dark"] .pot-swap-btn {
  background: #1e2029;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pot-swap-btn:hover {
  background: #7c3aed;
  color: #ffffff;
  transform: scale(1.08);
}

.pot-swap-btn.pot-swap-spin {
  transform: rotate(180deg);
}

/* 3. Sonuç Kartları (Result Engine Cards) */
.pot-results-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 18px 18px 18px;
}

.pot-engine-card {
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.2s ease;
}

[data-theme="dark"] .pot-engine-card {
  background: #232634;
  border-color: rgba(255, 255, 255, 0.06);
}

.pot-engine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: rgba(0, 0, 0, 0.015);
  transition: background 0.15s;
}

.pot-engine-header:hover {
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="dark"] .pot-engine-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.pot-engine-header-left,
.pot-engine-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pot-engine-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.pot-engine-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-engine-title {
  color: #ffffff;
}

.pot-engine-status-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted, #64748b);
}

[data-theme="dark"] .pot-engine-status-tag {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

.pot-engine-status-tag.status-loading {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.pot-engine-status-tag.status-ready {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.pot-engine-status-tag.status-error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.pot-chevron-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.pot-engine-card.pot-engine-collapsed .pot-chevron-btn svg {
  transform: rotate(0deg);
}

.pot-engine-card.pot-engine-expanded .pot-chevron-btn svg {
  transform: rotate(180deg);
}

.pot-engine-card.pot-engine-collapsed .pot-engine-body {
  display: none;
}

.pot-engine-body {
  padding: 14px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .pot-engine-body {
  border-top-color: rgba(255, 255, 255, 0.04);
}

.pot-output-text {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-main, #0f172a);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 48px;
}

[data-theme="dark"] .pot-output-text {
  color: #f1f5f9;
}

.pot-engine-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .pot-engine-footer {
  border-top-color: rgba(255, 255, 255, 0.04);
}

.pot-engine-footer-left,
.pot-engine-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pot-engine-badge-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

/* SAĞ KOLON: Bilgi & Geçmiş Yan Paneli */
.pot-side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pot-about-card,
.pot-history-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .pot-about-card,
[data-theme="dark"] .pot-history-card {
  background: #1e2029;
  border-color: rgba(255, 255, 255, 0.08);
}

.pot-about-hero {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.pot-about-big-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.pot-about-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  margin: 0 0 4px 0;
}

[data-theme="dark"] .pot-about-title {
  color: #ffffff;
}

.pot-about-ver {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  margin-bottom: 10px;
}

.pot-about-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted, #64748b);
  margin: 0;
}

[data-theme="dark"] .pot-about-desc {
  color: rgba(255, 255, 255, 0.65);
}

.pot-shortcuts-box {
  margin-top: 18px;
}

.pot-shortcuts-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 10px;
}

.pot-shortcuts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pot-shortcuts-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.pot-keys-combo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pot-key-plus {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  margin: 0 1px;
}

.pot-key-desc {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-align: right;
}

[data-theme="dark"] .pot-key-desc {
  color: rgba(255, 255, 255, 0.7);
}

.pot-shortcuts-list kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-shortcuts-list kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Çeviri Geçmişi */
.pot-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.pot-history-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-history-title {
  color: #ffffff;
}

.pot-clear-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pot-clear-history-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: translateY(-1px);
}

.pot-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}

.pot-history-empty {
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  padding: 20px 10px;
}

.pot-history-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
  cursor: pointer;
  transition: all 0.15s;
}

[data-theme="dark"] .pot-history-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.pot-history-item:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateX(2px);
}

.pot-history-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pot-history-lang-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.pot-history-item-del {
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.pot-history-item-del:hover {
  color: #ef4444;
}

.pot-history-item-q {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .pot-history-item-q {
  color: #ffffff;
}

.pot-history-item-ans {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .pot-history-item-ans {
  color: rgba(255, 255, 255, 0.6);
}

.pot-highlight-card {
  animation: potCardGlow 1.5s ease-out;
}

@keyframes potCardGlow {
  0% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.5); }
  100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); }
}

/* Toast Bildirim Kutusu */
.pot-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: #0f172a;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  z-index: 99999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .pot-toast {
  background: #ffffff;
  color: #0f172a;
}

.pot-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   SERVİS YÖNETİMİ BUTONU & MODAL PENCERESİ (POT MAVİ SWITCHLER)
   ========================================================================== */

.pot-services-btn {
  width: auto !important;
  padding: 0 10px !important;
  gap: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

.pot-services-active-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #7c3aed);
  background: rgba(124, 58, 237, 0.1);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Modal Overlay */
.pot-services-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.pot-services-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Penceresi */
.pot-services-modal {
  width: 100%;
  max-width: 520px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.96) translateY(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .pot-services-modal {
  background: #1e2029;
  border-color: rgba(255, 255, 255, 0.1);
}

.pot-services-modal-overlay.show .pot-services-modal {
  transform: scale(1) translateY(0);
}

.pot-services-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 14px 22px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .pot-services-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.pot-services-modal-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pot-services-modal-icon {
  font-size: 22px;
}

.pot-services-modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  margin: 0 0 2px 0;
}

[data-theme="dark"] .pot-services-modal-title {
  color: #ffffff;
}

.pot-services-modal-desc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0;
}

[data-theme="dark"] .pot-services-modal-desc {
  color: rgba(255, 255, 255, 0.6);
}

.pot-modal-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}

.pot-modal-close-btn:hover {
  color: var(--text-main, #0f172a);
}

/* Servis Listesi & Elemanları */
.pot-services-list {
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

.pot-service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
  transition: all 0.15s ease;
}

[data-theme="dark"] .pot-service-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.pot-service-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .pot-service-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.pot-service-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pot-service-info {
  display: flex;
  flex-direction: column;
}

.pot-service-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .pot-service-name {
  color: #ffffff;
}

.pot-default-tag {
  font-size: 10px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.pot-service-sub {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  margin-top: 1px;
}

[data-theme="dark"] .pot-service-sub {
  color: rgba(255, 255, 255, 0.55);
}

/* POT STİLİ MAVİ SWITCH (TOGGLE SLIDER) */
.pot-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}

.pot-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pot-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 34px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .pot-slider {
  background-color: #334155;
}

.pot-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pot-switch input:checked + .pot-slider {
  background-color: #2563eb; /* Pot Mavi Switch Rengi */
}

.pot-switch input:checked + .pot-slider:before {
  transform: translateX(20px);
}

/* Modal Alt Barı */
.pot-services-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .pot-services-modal-footer {
  background: rgba(255, 255, 255, 0.02);
  border-top-color: rgba(255, 255, 255, 0.06);
}

.pot-services-modal-hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

.pot-save-services-btn {
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: var(--primary, #7c3aed);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.pot-save-services-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ==========================================================================
   CAMBRIDGE & ECDICT DETAYLI SÖZLÜK KARTI STİLLERİ
   ========================================================================== */

.pot-dict-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pot-dict-empty-note {
  font-size: 13.5px;
  color: var(--text-muted, #64748b);
  line-height: 1.6;
}

[data-theme="dark"] .pot-dict-empty-note {
  color: rgba(255, 255, 255, 0.6);
}

.pot-dict-entries-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pot-dict-pos-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pot-dict-pos-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 800;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: capitalize;
}

[data-theme="dark"] .pot-dict-pos-badge {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
}

.pot-dict-meanings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pot-meaning-chip {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main, #0f172a);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .pot-meaning-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.pot-meaning-chip:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  transform: translateY(-1px);
}

/* ==========================================================================
   SAĞ YAN PANEL: AAHABER AKILLI SÖZLÜK KARTI
   ========================================================================== */
.pot-dict-sidebar-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

[data-theme="dark"] .pot-dict-sidebar-card {
  background: #151c2c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
}

.pot-dict-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .pot-dict-sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.pot-dict-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-dict-header-title {
  color: #ffffff;
}

.pot-dict-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.pot-dict-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

[data-theme="dark"] .pot-dict-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

/* Kelime Başlığı ve Fonetik Okunuş */
.pot-dict-word-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(37, 99, 235, 0.04);
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

[data-theme="dark"] .pot-dict-word-hero {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
}

.pot-dict-word-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pot-dict-word-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-dict-word-title {
  color: #ffffff;
}

.pot-dict-phonetic-badge {
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);
  padding: 2px 8px;
  border-radius: 6px;
}

[data-theme="dark"] .pot-dict-phonetic-badge {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.18);
}

.pot-dict-tts-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.pot-dict-tts-btn:hover {
  background: #1d4ed8;
  transform: scale(1.08);
}

/* Sözlük POS Blokları */
.pot-dict-pos-block {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.pot-dict-pos-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pot-dict-pos-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.pot-dict-pos-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2.5px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pos-noun { background: rgba(16, 185, 129, 0.12); color: #059669; }
.pos-verb { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.pos-adj { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.pos-adv { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
.pos-default { background: rgba(59, 130, 246, 0.12); color: #2563eb; }

[data-theme="dark"] .pos-noun { background: rgba(16, 185, 129, 0.2); color: #34d399; }
[data-theme="dark"] .pos-verb { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
[data-theme="dark"] .pos-adj { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
[data-theme="dark"] .pos-adv { background: rgba(6, 182, 212, 0.2); color: #22d3ee; }
[data-theme="dark"] .pos-default { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }

/* Anlamlar ve Eşanlamlılar */
.pot-dict-meanings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pot-dict-meaning-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  padding: 8px 10px;
}

[data-theme="dark"] .pot-dict-meaning-item {
  background: rgba(255, 255, 255, 0.03);
}

.pot-dict-meaning-main {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-theme="dark"] .pot-dict-meaning-main {
  color: #f1f5f9;
}

.pot-dict-sub-synonyms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.pot-synonym-tag {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .pot-synonym-tag {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.pot-synonym-tag:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* Boş ve Keşif Durumu */
.pot-dict-placeholder {
  text-align: center;
  padding: 16px 8px;
  color: var(--text-muted, #64748b);
}

.pot-dict-placeholder-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.pot-dict-placeholder-text {
  font-size: 13px;
  line-height: 1.5;
}

.pot-dict-discovery {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .pot-dict-discovery {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.pot-dict-discovery-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  margin-bottom: 8px;
}

.pot-dict-sample-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pot-sample-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-600, #2563eb);
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .pot-sample-chip {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
  color: #93c5fd;
}

.pot-sample-chip:hover {
  background: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ==========================================================================
   ÇOKLU DİL MODU (MULTI-LANGUAGE MODE) STİLLERİ
   ========================================================================== */

/* 1. Üst Mod Değiştirici Barı (Segmented Control Tabs) */
.pot-mode-nav-bar {
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .pot-mode-nav-bar {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.pot-mode-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pot-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  background: var(--bg-card, #ffffff);
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

[data-theme="dark"] .pot-mode-tab {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}

.pot-mode-tab:hover {
  color: var(--text-main, #0f172a);
  border-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.04);
  transform: translateY(-1px);
}

[data-theme="dark"] .pot-mode-tab:hover {
  color: #ffffff;
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
}

.pot-mode-tab.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

[data-theme="dark"] .pot-mode-tab.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.35);
}

.pot-mode-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.pot-mode-title {
  font-weight: 700;
}

.pot-mode-hint {
  font-size: 11px;
  opacity: 0.75;
  font-weight: 500;
}

.pot-mode-tab.active .pot-mode-hint {
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

.pot-mode-new-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: #f59e0b;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* 2. Çoklu Dil Seçim Barı (Hedef Dil Hapları / Pills) */
.pot-multilang-bar-wrap {
  display: none;
  width: 100%;
}

.pot-multilang-pills-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  width: 100%;
}

.pot-multilang-pill-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 2px;
}

[data-theme="dark"] .pot-multilang-pill-label {
  color: rgba(255, 255, 255, 0.6);
}

.pot-multilang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  background: var(--bg-card, #ffffff);
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

[data-theme="dark"] .pot-multilang-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}

.pot-multilang-pill:hover {
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-multilang-pill:hover {
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.4);
}

.pot-multilang-pill.active {
  background: rgba(37, 99, 235, 0.09);
  border-color: #2563eb;
  color: #1d4ed8;
  font-weight: 700;
}

[data-theme="dark"] .pot-multilang-pill.active {
  background: rgba(59, 130, 246, 0.18);
  border-color: #60a5fa;
  color: #93c5fd;
}

.pot-pill-check {
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  line-height: 1;
}

[data-theme="dark"] .pot-pill-check {
  background: #60a5fa;
  color: #0f172a;
}

/* 3. Çoklu Dil Kartları Konteyneri */
.pot-multilang-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 22px 20px;
}

.pot-lang-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .pot-lang-card {
  background: #151c2c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.2);
}

.pot-lang-card:hover {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 8px 22px -4px rgba(37, 99, 235, 0.08);
}

[data-theme="dark"] .pot-lang-card:hover {
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 8px 22px -4px rgba(0, 0, 0, 0.4);
}

.pot-lang-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.015);
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
  cursor: pointer;
}

[data-theme="dark"] .pot-lang-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.pot-lang-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pot-lang-flag {
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .pot-lang-flag {
  background: rgba(255, 255, 255, 0.06);
}

.pot-lang-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .pot-lang-title {
  color: #ffffff;
}

.pot-lang-code-badge {
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted, #64748b);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 7px;
  border-radius: 5px;
}

[data-theme="dark"] .pot-lang-code-badge {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

.pot-lang-body {
  padding: 14px 18px 12px 18px;
}

.pot-lang-body .pot-output-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-main, #0f172a);
  min-height: 40px;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="dark"] .pot-lang-body .pot-output-text {
  color: #f1f5f9;
}

/* ==========================================================================
   18. AAHaber Çeviri - Popüler Çeviri Çiftleri & SEO Varyasyonları Stilleri
   ========================================================================== */

.pot-seo-pairs-section {
  margin-top: 36px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

[data-theme="dark"] .pot-seo-pairs-section {
  background: #151c2c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.pot-seo-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}

[data-theme="dark"] .pot-seo-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.pot-seo-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.15));
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="dark"] .pot-seo-header-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.25));
  color: #60a5fa;
}

.pot-seo-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

[data-theme="dark"] .pot-seo-title {
  color: #f8fafc;
}

.pot-seo-subtitle {
  font-size: 13.5px;
  color: var(--text-muted, #64748b);
  margin: 0;
  line-height: 1.5;
}

[data-theme="dark"] .pot-seo-subtitle {
  color: #94a3b8;
}

/* 2 Kolonlu Grup Kartları */
.pot-seo-groups-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .pot-seo-groups-grid {
    grid-template-columns: 1fr;
  }
}

.pot-seo-group-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-theme="dark"] .pot-seo-group-card {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.07);
}

.pot-seo-group-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pot-seo-group-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin: 0;
}

[data-theme="dark"] .pot-seo-group-title {
  color: #e2e8f0;
}

.pot-seo-group-desc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

[data-theme="dark"] .pot-seo-group-desc {
  color: #94a3b8;
}

/* Çipler Grid */
.pot-seo-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pot-seo-pair-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  user-select: none;
}

[data-theme="dark"] .pot-seo-pair-link {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.pot-seo-pair-link:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .pot-seo-pair-link:hover {
  background: #2563eb;
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.pot-seo-pair-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  transition: all 0.2s;
}

[data-theme="dark"] .pot-seo-pair-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.pot-seo-pair-link:hover .pot-seo-pair-badge {
  background: #dbeafe;
  color: #1e40af;
}

[data-theme="dark"] .pot-seo-pair-link:hover .pot-seo-pair-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Aktif Dil Çifti Vurgusu */
.pot-seo-pair-link.active-pair {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1e40af;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.pot-seo-pair-link.active-pair .pot-seo-pair-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Alt SEO Özellikler Banner */
.pot-seo-features-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color, #f1f5f9);
}

[data-theme="dark"] .pot-seo-features-banner {
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
  .pot-seo-features-banner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .pot-seo-features-banner {
    grid-template-columns: 1fr;
  }
}

.pot-seo-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pot-feat-icon {
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

[data-theme="dark"] .pot-feat-icon {
  background: rgba(255, 255, 255, 0.05);
}

.pot-seo-feature-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  margin-bottom: 2px;
}

[data-theme="dark"] .pot-seo-feature-item strong {
  color: #f1f5f9;
}

.pot-seo-feature-item p {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
  margin: 0;
}

[data-theme="dark"] .pot-seo-feature-item p {
  color: #94a3b8;
}

/* ==========================================================================
   1. YÖNTEM: MİNİ CHROME POPUP PENCERESİ STİLLERİ
   ========================================================================== */
body.body-popup-mode .sidebar {
  display: none !important;
}
body.body-popup-mode .top-header {
  display: none !important;
}
body.body-popup-mode .app-container {
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100%;
}
body.body-popup-mode .main-wrapper {
  height: 100vh;
  padding: 0;
}
body.body-popup-mode .news-reading-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 14px 20px 50px;
}

.popup-chrome-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  margin-bottom: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 6px;
  z-index: 50;
  backdrop-filter: blur(16px);
}
.popup-chrome-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.popup-chrome-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.25));
  color: var(--primary-600);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 700;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.popup-url-preview {
  color: var(--text-muted);
  font-size: 12px;
  font-family: monospace;
}
.popup-chrome-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-popup-ext {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--primary-600);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: var(--transition);
}
.btn-popup-ext:hover {
  background: var(--primary-700);
}
.btn-popup-close {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.btn-popup-close:hover {
  background: #ef4444;
  color: #fff;
}

/* ==========================================================================
   2. YÖNTEM: SAYFA İÇİ SANAL CHROME SEKME TARAYICISI (IN-APP CHROME BROWSER)
   ========================================================================== */
.chrome-browser-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 8, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeInChrome 0.22s ease-out;
}

@keyframes fadeInChrome {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.chrome-browser-window {
  width: 960px;
  max-width: 100%;
  height: 86vh;
  max-height: 880px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

[data-theme="dark"] .chrome-browser-window {
  background: #181d28;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.chrome-browser-window.maximized {
  width: 98vw;
  height: 96vh;
  max-height: none;
  border-radius: 10px;
}

/* Chrome Tab Strip (En Üst Sekme Çubuğu) */
.chrome-tab-strip {
  background: #dee1e6;
  padding: 8px 10px 0 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .chrome-tab-strip {
  background: #11141c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chrome-tabs-container {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
}

.chrome-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 10px 10px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  max-width: 240px;
  min-width: 130px;
  transition: all 0.15s ease;
  position: relative;
}

[data-theme="dark"] .chrome-tab {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}

.chrome-tab:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #0f172a;
}

[data-theme="dark"] .chrome-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.chrome-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .chrome-tab.active {
  background: #1e2432;
  color: #ffffff;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

.chrome-tab-favicon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-600);
}

.chrome-tab-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.chrome-tab-close {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s ease;
}

.chrome-tab-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .chrome-tab-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.chrome-tab-new {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.15s ease;
}

[data-theme="dark"] .chrome-tab-new {
  color: #94a3b8;
}

.chrome-tab-new:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

[data-theme="dark"] .chrome-tab-new:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Pencere Kontrolleri (Min, Max, Close) */
.chrome-window-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.win-btn {
  width: 28px;
  height: 24px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.win-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

[data-theme="dark"] .win-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.win-btn.win-close:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Chrome Omnibox Bar (Adres Çubuğu Satırı) */
.chrome-omnibox-bar {
  background: #ffffff;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="dark"] .chrome-omnibox-bar {
  background: #1e2432;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chrome-nav-arrows {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chrome-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chrome-icon-btn:hover:not(.disabled) {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="dark"] .chrome-icon-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.chrome-icon-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Adres Kutusu */
.chrome-url-box {
  flex: 1;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

[data-theme="dark"] .chrome-url-box {
  background: #121620;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.chrome-url-box:focus-within {
  background: #ffffff;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

[data-theme="dark"] .chrome-url-box:focus-within {
  background: #161b26;
}

.chrome-url-text {
  flex: 1;
  font-family: 'Space Grotesk', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.url-protocol {
  color: #94a3b8;
}

.url-domain {
  font-weight: 700;
  color: var(--text-main);
}

.url-path {
  color: #64748b;
}

.chrome-reader-mode-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.chrome-omnibox-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chrome-btn-action {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

[data-theme="dark"] .chrome-btn-action {
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

.chrome-btn-action:hover {
  background: #f8fafc;
  border-color: var(--primary-500);
  color: var(--primary-600);
}

[data-theme="dark"] .chrome-btn-action:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Chrome Viewport (Sayfa İçi Okuma Alanı) */
.chrome-viewport {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-card);
  padding: 30px 40px 60px;
}

.chrome-viewport::-webkit-scrollbar {
  width: 7px;
}
.chrome-viewport::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}

.chrome-reader-content {
  max-width: 760px;
  margin: 0 auto;
}

.chrome-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.spinner-circle {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(124, 58, 237, 0.15);
  border-top-color: var(--primary-600);
  border-radius: 50%;
  animation: spinLoader 0.75s linear infinite;
}
@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

/* Makale Tipografisi & Detayları */
.cr-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.cr-source-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 6px;
  font-weight: 700;
  color: var(--text-main);
}
.cr-source-logo {
  font-size: 11px;
}
.cr-dot {
  color: var(--text-light);
}
.cr-category-tag {
  color: var(--primary-600);
  font-weight: 700;
}
.cr-read-badge {
  margin-left: auto;
  background: var(--bg-card-subtle);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.cr-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.cr-spot-lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 24px;
  padding-left: 14px;
  border-left: 3px solid var(--primary-500);
}

.cr-hero-image-wrap {
  margin: 20px 0 28px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.cr-hero-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.cr-hero-caption {
  padding: 8px 14px;
  background: var(--bg-card-subtle);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* AI Kutu */
.cr-ai-box {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(217, 70, 239, 0.06) 100%);
  border: 1.5px solid rgba(139, 92, 246, 0.28);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 24px 0 28px;
}
.cr-ai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-600);
  font-size: 13.5px;
  margin-bottom: 12px;
}
.cr-ai-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.65;
}
.cr-ai-list li {
  margin-bottom: 8px;
}
.cr-ai-list li:last-child {
  margin-bottom: 0;
}

/* Makale Paragrafları */
.cr-body-paragraphs {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-main);
}
.cr-body-paragraphs p {
  margin-bottom: 20px;
}
.cr-body-paragraphs blockquote {
  margin: 24px 0;
  padding: 16px 22px;
  background: rgba(124, 58, 237, 0.05);
  border-left: 4px solid var(--primary-600);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: var(--text-main);
}
.cr-body-paragraphs cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-600);
  font-style: normal;
}

/* Yazı Boyutu Sınıfları */
.chrome-reader-content.fs-normal .cr-body-paragraphs { font-size: 16px; }
.chrome-reader-content.fs-large .cr-body-paragraphs { font-size: 18px; line-height: 1.95; }
.chrome-reader-content.fs-xlarge .cr-body-paragraphs { font-size: 20px; line-height: 2.05; }

/* Alt Bilgi */
.cr-footer-bar {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.cr-footer-copy {
  font-size: 13px;
  color: var(--text-muted);
}
.cr-footer-btns {
  display: flex;
  gap: 8px;
}
.btn-cr-original {
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--primary-600);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: var(--transition);
}
.btn-cr-original:hover {
  background: var(--primary-700);
}
.btn-cr-print {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-card);
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.btn-cr-print:hover {
  background: var(--bg-card-subtle);
}

/* ==========================================================================
   DENEME & KARŞILAŞTIRMA BARI (HABERLER.PHP ÜST PANELİ)
   ========================================================================== */
.reader-modes-demo-bar {
  margin: 10px 16px 20px 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 246, 255, 0.8) 100%);
  border: 1.5px solid rgba(139, 92, 246, 0.25);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.08);
  backdrop-filter: blur(20px);
}

[data-theme="dark"] .reader-modes-demo-bar {
  background: linear-gradient(135deg, rgba(23, 29, 52, 0.85) 0%, rgba(15, 23, 42, 0.8) 100%);
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.demo-bar-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-main);
  margin-bottom: 14px;
}

.pulse-dot-cyan {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
  animation: pulseCyan 1.8s infinite;
}
@keyframes pulseCyan {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(6, 182, 212, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

.demo-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .demo-cards-grid {
    grid-template-columns: 1fr;
  }
}

.demo-mode-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.demo-mode-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.15);
  border-color: var(--primary-500);
}

.demo-card-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  align-self: flex-start;
  letter-spacing: 0.5px;
}

.tag-popup {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.tag-inapp {
  background: rgba(139, 92, 246, 0.14);
  color: #7c3aed;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

.demo-card-body {
  display: flex;
  gap: 14px;
  align-items: center;
}

.demo-card-thumb {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.demo-card-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin-bottom: 4px;
}

.demo-card-info p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 8px;
}

.btn-demo-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-trigger-popup {
  background: #0284c7;
  color: #ffffff;
}
.demo-mode-card.card-popup:hover .btn-trigger-popup {
  background: #0369a1;
}

.btn-trigger-inapp {
  background: #7c3aed;
  color: #ffffff;
}
.demo-mode-card.card-inapp:hover .btn-trigger-inapp {
  background: #6d28d9;
}

/* ==========================================================================
   BUNDLE FEATURED LIVE TEST CARD STYLES
   ========================================================================== */
.bundle-featured-test-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(220, 38, 38, 0.35);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 10px;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.08);
  transition: all 0.25s ease;
}

[data-theme="dark"] .bundle-featured-test-card {
  background: rgba(26, 31, 46, 0.95);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.bundle-featured-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.tag-bundle-live {
  background: #dc2626;
  color: #ffffff;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
}

.bundle-source-pill {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.bundle-adfree-pill {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  padding: 2px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(16, 185, 129, 0.25);
  margin-left: auto;
}

.bundle-featured-layout {
  display: flex;
  gap: 20px;
  align-items: center;
}

@media (max-width: 768px) {
  .bundle-featured-layout {
    flex-direction: column;
    align-items: flex-start;
  }
}

.bundle-featured-img {
  width: 170px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.bundle-featured-text {
  flex: 1;
}

.bundle-featured-headline {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.35;
  margin-bottom: 6px;
}

.bundle-featured-excerpt {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

.bundle-url-display-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card-subtle);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-family: monospace;
  color: var(--text-muted);
  margin-bottom: 14px;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-bundle-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-inapp-chrome {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
}
.btn-inapp-chrome:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  transform: translateY(-1px);
}

.btn-popup-chrome {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
}
.btn-popup-chrome:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.btn-bundle-direct {
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.btn-bundle-direct:hover {
  background: var(--bg-card);
  color: var(--text-main);
}

/* ==========================================================================
   HABERİN İÇİNDE GÖMÜLÜ SANAL CHROME & SAYFA İÇİ OKUMA MODU
   ========================================================================== */
.btn-inpage-direct {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.35);
}
.btn-inpage-direct:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  transform: translateY(-1px);
}

.inpage-chrome-bar {
  margin: 16px 0 20px 0;
  border-radius: 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.25s ease;
}

[data-theme="dark"] .inpage-chrome-bar {
  background: #182234;
  border-color: #2b3952;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.inpage-chrome-tabs-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 0 12px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
}

[data-theme="dark"] .inpage-chrome-tabs-strip {
  background: rgba(0, 0, 0, 0.25);
  border-bottom-color: #2b3952;
}

.inpage-chrome-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 9px 9px 0 0;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  border-bottom: 1px solid #ffffff;
  margin-bottom: -1px;
}

[data-theme="dark"] .inpage-chrome-tab {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
  border-bottom-color: #1e293b;
}

.inpage-tab-icon {
  display: flex;
  align-items: center;
  color: #2563eb;
}

[data-theme="dark"] .inpage-tab-icon {
  color: #60a5fa;
}

.inpage-chrome-tab-ext {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.inpage-chrome-tab-ext:hover {
  color: var(--primary-600);
  background: var(--bg-card-subtle);
}

.inpage-chrome-omnibox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.inpage-chrome-omnibox {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

[data-theme="dark"] .inpage-chrome-omnibox {
  background: #0f172a;
  border-color: #334155;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.inpage-url-domain {
  font-weight: 700;
  color: #0f172a;
}

[data-theme="dark"] .inpage-url-domain {
  color: #e2e8f0;
}

.inpage-url-path {
  color: #64748b;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

[data-theme="dark"] .inpage-url-path {
  color: #94a3b8;
}

.inpage-reader-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="dark"] .inpage-reader-badge {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}

.inpage-chrome-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inpage-fs-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

[data-theme="dark"] .inpage-fs-group {
  border-color: #334155;
  background: #0f172a;
}

.btn-inpage-fs {
  background: transparent;
  border: none;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-main);
  transition: all 0.15s ease;
}

.btn-inpage-fs:hover {
  background: var(--bg-card-subtle);
  color: var(--primary-600);
}

.btn-inpage-source-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-theme="dark"] .btn-inpage-source-link {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

.btn-inpage-source-link:hover {
  color: var(--primary-600);
  border-color: var(--primary-600);
}

/* ==========================================================================
   RSS OTOMATİK KAYNAK SİTE GÖMÜCÜ (IFRAME & OKUMA MODU GEÇİŞİ)
   ========================================================================== */
.rss-embed-view-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 14px 0;
  padding: 8px 12px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.rss-embed-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
}

.rss-embed-btn-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.btn-rss-toggle {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.btn-rss-toggle:hover {
  color: var(--text-main);
}

.btn-rss-toggle.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.rss-auto-embed-container {
  margin: 14px 0 24px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-subtle);
}

[data-theme="dark"] .rss-auto-embed-container {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.embed-container-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-card-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.embed-window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.embed-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.embed-dot.red { background: #ef4444; }
.embed-dot.yellow { background: #eab308; }
.embed-dot.green { background: #22c55e; }

.embed-title-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.embed-ext-small {
  color: var(--primary-600);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.embed-ext-small:hover {
  background: var(--bg-card);
}

.rss-auto-embed-iframe {
  width: 100%;
  height: 650px;
  border: none;
  display: block;
  background: var(--bg-card);
}

/* ==========================================================================
   SANAL CHROME SEKME MODU: NORMAL INSTAGRAM WEB TAB STİLLERİ (OKUMA MODU DEĞİL)
   ========================================================================== */
.chrome-web-tab-shell {
  padding: 0 !important;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  background: var(--bg-card);
}

.ig-web-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ig-web-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.ig-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ig-brand-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ig-mock-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-muted);
  width: 220px;
}

.ig-nav-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-ig-nav-login {
  background: #0095f6;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.btn-ig-nav-signup {
  color: #0095f6;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 10px;
}

.ig-profile-hero {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  padding: 30px 24px 20px;
}

.ig-avatar-story-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ig-avatar-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-card);
}

.ig-profile-data {
  flex: 1;
}

.ig-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ig-handle-heading {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.btn-ig-follow-blue {
  background: #0095f6;
  color: #ffffff;
  padding: 6px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-ig-follow-blue:hover {
  background: #1877f2;
}

.btn-ig-message-grey {
  background: var(--bg-card-subtle);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ig-stats-counter {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 14px;
}

.ig-stats-counter strong {
  font-weight: 800;
}

.ig-brand-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.ig-category-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ig-bio-copy {
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.5;
  margin: 4px 0 0;
}

.ig-grid-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 10px;
}

.ig-grid-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 12px 4px;
  cursor: pointer;
  border-top: 1px solid transparent;
  margin-top: -1px;
}

.ig-grid-tab.active {
  color: var(--text-main);
  border-top: 1px solid var(--text-main);
}

.ig-posts-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 24px 24px;
}

.ig-post-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #111;
  text-decoration: none;
}

.ig-post-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.ig-overlay-hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ig-post-item:hover img {
  transform: scale(1.04);
}
.ig-post-item:hover .ig-overlay-hover {
  opacity: 1;
}

.ig-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card-subtle);
  font-size: 12px;
  color: var(--text-muted);
}

.btn-ig-open-app {
  color: #0095f6;
  text-decoration: none;
  font-weight: 700;
}
.btn-ig-open-app:hover {
  text-decoration: underline;
}

/* ==========================================================================
   AAHABER 1536x864 EXCLUSIVE VIEWPORT SUITE & DESKTOP RESOLUTION HARMONY
   Tailored specifically for 1536x864 displays & Windows 125% DPI laptops.
   ========================================================================== */
@media screen and (min-width: 1360px) and (max-width: 1620px),
       screen and (max-height: 890px) and (min-width: 1200px) {

  /* 1. Global Page Layout & Proportions */
  body {
    line-height: 1.45;
  }

  /* 2. Left Sidebar (Zero Vertical Overflow, Complete 12-Item Visibility) */
  .sidebar {
    width: 242px !important;
    padding: 8px 6px !important;
    margin: 5px 0 5px 5px !important;
    height: calc(100vh - 10px) !important;
    border-radius: 28px 14px 14px 28px !important;
  }

  .brand-box {
    gap: 8px !important;
    margin-bottom: 6px !important;
    padding: 2px 4px !important;
  }

  .brand-badge {
    width: 38px !important;
    height: 38px !important;
    font-size: 17px !important;
    border-radius: 10px !important;
  }

  .brand-title {
    font-size: 18px !important;
  }

  .brand-subtitle {
    font-size: 10px !important;
  }

  .sidebar-nav {
    gap: 2px !important;
  }

  .nav-section-title {
    font-size: 10px !important;
    margin: 6px 8px 2px 8px !important;
  }

  .nav-item {
    padding: 6.5px 10px !important;
    font-size: 13px !important;
    gap: 9px !important;
    border-radius: 12px !important;
  }

  .nav-item svg {
    width: 17px !important;
    height: 17px !important;
  }

  .sidebar-bottom-action {
    padding-top: 4px !important;
    margin-top: auto !important;
  }

  .btn-sondakika-bottom {
    padding: 7px 11px !important;
    font-size: 13px !important;
    gap: 9px !important;
    border-radius: 12px !important;
  }

  .btn-sondakika-bottom svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* 3. Top Header Bar & Breaking Ticker */
  .top-header {
    margin: 5px 14px 0 8px !important;
    padding: 5px 12px !important;
    border-radius: 16px !important;
  }

  .header-search-wrap {
    max-width: 480px !important;
  }

  .header-search-input {
    padding: 5px 28px 5px 32px !important;
    font-size: 12.5px !important;
  }

  .search-shortcut-badge {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }

  .user-profile-badge {
    padding: 2px 7px 2px 2px !important;
  }

  .avatar-circle {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }

  .user-name {
    font-size: 11.5px !important;
  }

  .icon-btn {
    width: 30px !important;
    height: 30px !important;
  }

  .ticker-bar {
    margin: 6px 14px 0 8px !important;
    padding: 6px 16px !important;
    font-size: 12.5px !important;
    border-radius: 16px !important;
  }

  .ticker-badge {
    padding: 3px 10px !important;
    font-size: 10.5px !important;
    gap: 5px !important;
  }

  .content-body {
    padding: 8px 14px 32px 8px !important;
    gap: 10px !important;
  }

  /* 4. Category Filter Tabs / Bar (haberler.php & kategori.php) */
  .categories-nav-wrapper {
    margin-bottom: 6px !important;
  }

  .popular-categories-bar {
    gap: 6px !important;
    padding: 3px !important;
  }

  .cat-pill-btn {
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    border-radius: 9999px !important;
  }

  /* 5. MSN News Grid & Cards (Balanced 4-Column Layout) */
  .msn-collage-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 2px !important;
    margin-bottom: 24px !important;
  }

  /* Slider Card */
  .msn-slider-card {
    min-height: 340px !important;
    border-radius: 18px !important;
  }

  .slider-track {
    min-height: 288px !important;
  }

  .slide-content {
    padding: 16px 18px !important;
  }

  .slide-category-badge {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
  }

  .slide-title {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .slider-bottom-bar {
    height: 48px !important;
    padding: 0 14px !important;
  }

  /* Standard News Card */
  .msn-card {
    border-radius: 18px !important;
  }

  .msn-card .msn-news-img-wrap {
    height: 160px !important;
  }

  .msn-card .msn-card-body {
    padding: 11px 13px !important;
  }

  .msn-news-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .msn-source-row {
    font-size: 11.5px !important;
    margin-bottom: 6px !important;
  }

  /* Horizontal Card (Span 2) */
  .msn-card.horizontal-card .msn-news-img-wrap {
    width: 42% !important;
    min-height: 160px !important;
  }

  .msn-card.horizontal-card .msn-card-body {
    width: 58% !important;
    padding: 12px 14px !important;
  }

  .msn-card.horizontal-card .msn-news-title {
    font-size: 15.5px !important;
    line-height: 1.35 !important;
  }

  /* Overlay Card */
  .msn-card.overlay-card {
    min-height: 260px !important;
    border-radius: 18px !important;
  }

  .msn-card.overlay-card .overlay-content {
    padding: 16px 18px !important;
  }

  .msn-card.overlay-card .overlay-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* 6. News Reading Page (haber.php) */
  .news-reading-container {
    max-width: 1360px !important;
    padding: 10px 14px 48px 14px !important;
  }

  .news-layout-columns {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 28px !important;
  }

  .feed-story-unit {
    padding: 26px 32px !important;
    border-radius: 20px !important;
  }

  .story-main-headline {
    font-size: 28px !important;
    line-height: 1.28 !important;
    margin-bottom: 14px !important;
  }

  .story-hero-media {
    margin-bottom: 18px !important;
  }

  .story-hero-media img,
  .story-hero-image {
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .story-spot-lead {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }

  .story-rich-body {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .story-related-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }

  .related-news-card .related-card-img-wrap {
    height: 125px !important;
  }

  .related-card-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* 7. Modals (Haber Pop-up, Lightbox, Okuyucu) */
  .article-modal {
    max-width: 880px !important;
    max-height: calc(100vh - 60px) !important;
    border-radius: 22px !important;
  }

  .modal-header-bar {
    padding: 13px 20px !important;
  }

  .modal-scroll-body {
    padding: 20px 24px !important;
  }

  .modal-article-img {
    height: 280px !important;
    margin-bottom: 16px !important;
    border-radius: 16px !important;
  }

  .modal-article-title {
    font-size: 23px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .ai-summary-box {
    padding: 12px 16px !important;
    margin-bottom: 18px !important;
  }

  /* Gazete Modal Lightbox */
  .gazete-modal-container {
    max-width: 1040px !important;
    height: 94vh !important;
    max-height: 820px !important;
    border-radius: 20px !important;
  }

  .gazete-modal-header {
    padding: 10px 18px !important;
  }

  /* Yazar Modal Lightbox */
  .yazar-modal-container {
    max-width: 860px !important;
    height: 92vh !important;
    max-height: 790px !important;
    border-radius: 20px !important;
  }

  /* 8. Aktüel Ürünler (aktuel.php) Market Tabs & Grid */
  .aktuel-market-tabs-wrapper {
    padding-bottom: 4px !important;
  }

  .aktuel-market-tabs {
    gap: 6px !important;
    padding: 2px 0 !important;
  }

  .aktuel-market-pill {
    padding: 6px 12px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }

  .aktuel-catalog-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  .aktuel-hero-card {
    padding: 20px 24px !important;
  }

  /* 9. Gazete Manşetleri (gazeteler.php) */
  .gazete-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  .gazete-card-header {
    padding: 10px 12px !important;
  }

  .gazete-card-title {
    font-size: 13.5px !important;
  }

  /* 10. Köşe Yazarları (yazarlar.php) */
  .yazar-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    gap: 16px !important;
  }

  .yazar-card {
    border-radius: 18px !important;
  }

  .yazar-card-header {
    padding: 14px 16px !important;
  }

  .yazar-article-title {
    font-size: 16px !important;
  }

  .yazar-article-excerpt {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .yazar-card-footer {
    padding: 11px 16px !important;
  }

  /* 11. Canlı TV (tv.php) Proportions */
  .tv-main-layout {
    gap: 16px !important;
  }

  .tv-stage-col {
    gap: 12px !important;
  }

  .tv-skin-switcher-bar {
    padding: 8px 14px !important;
  }

  .tv-player-box {
    min-height: 330px !important;
    max-height: 400px !important;
  }

  .tv-player-bar {
    padding: 8px 14px !important;
  }

  .tv-sidebar-col .tv-sidebar-inner {
    max-height: 560px !important;
  }

  /* 12. Radyo Dinle (radyo.php) */
  .radyo-main-grid {
    gap: 16px !important;
  }

  .radyo-theme-bar {
    padding: 8px 14px !important;
  }

  .radyo-channels-list-wrap {
    max-height: 520px !important;
  }

  /* 13. Deprem & Trafik Canlı Haritalar */
  .deprem-map-wrapper,
  .trafik-map-frame {
    height: calc(100vh - 215px) !important;
    min-height: 460px !important;
  }
}

/* ==========================================================================
   GOOGLE AAHABER HOMEPAGE REDESIGN (Google UI + SearXNG + MSN News Feed)
   ========================================================================== */
.no-sidebar-layout {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--bg-app);
}

.no-sidebar-layout .main-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1;
}

.top-header-google {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 24px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  min-height: 64px !important;
  gap: 16px;
}

.google-mini-brand {
  text-decoration: none;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: inline-flex;
  flex-shrink: 0;
}

/* Üst Header Ortasındaki Google Arama Çubuğu */
.header-center-search {
  flex: 1;
  max-width: 780px;
  margin: 0 24px;
  display: flex;
  justify-content: center;
}

.header-center-search .header-google-form {
  width: 100%;
}

.header-center-search .google-search-bar {
  width: 100%;
  height: 46px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle, #dfe1e5);
  border-radius: 24px;
  padding: 0 18px;
  box-shadow: 0 1px 4px rgba(32, 33, 36, 0.08);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.header-center-search .google-search-bar:hover,
.header-center-search .google-search-bar:focus-within {
  box-shadow: 0 2px 14px rgba(32, 33, 36, 0.16);
  border-color: transparent;
}

[data-theme="dark"] .header-center-search .google-search-bar {
  background: #303134;
  border-color: #5f6368;
  box-shadow: none;
}

[data-theme="dark"] .header-center-search .google-search-bar:hover,
[data-theme="dark"] .header-center-search .google-search-bar:focus-within {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  background: #303134;
  border-color: #5f6368;
}

.header-center-search .google-search-input {
  width: 100%;
  flex: 1;
  min-width: 0;
  font-size: 15px;
}

.google-top-link {
  text-decoration: none;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.google-top-link:hover {
  background: rgba(60, 64, 67, 0.08);
}

/* 9-Nokta Google Servisler Menüsü */
.google-apps-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.google-apps-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.google-apps-btn:hover,
.google-apps-btn.active {
  background: rgba(60, 64, 67, 0.1);
}

.google-apps-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  padding: 18px 16px;
  z-index: 9999;
  display: none;
  backdrop-filter: blur(12px);
}

.google-apps-dropdown.active {
  display: block;
  animation: gAppsFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gAppsFade {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.google-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.google-app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 12px 6px;
  border-radius: 14px;
  transition: all 0.15s ease;
}

.google-app-card:hover {
  background: rgba(60, 64, 67, 0.08);
  transform: translateY(-2px);
}

.google-app-card .app-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.google-app-card .app-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
  text-align: center;
  line-height: 1.2;
}

/* ==========================================================================
   GOOGLE HERO SECTION (Sayfanın Üstünde)
   ========================================================================== */
.google-home-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px 60px 20px;
}

.google-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px auto 30px auto;
  max-width: 720px;
  text-align: center;
}

.google-logo-wrap {
  margin-bottom: 22px;
  user-select: none;
}

.google-logo-text {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: clamp(52px, 7vw, 84px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  margin: 0;
  display: inline-block;
  text-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Google Renkleri */
.g-blue   { color: #4285F4; }
.g-red    { color: #EA4335; }
.g-yellow { color: #FBBC05; }
.g-green  { color: #34A853; }

.g-mini-a1 { color: #4285F4; }
.g-mini-a2 { color: #EA4335; }
.g-mini-h  { color: #FBBC05; }
.g-mini-a3 { color: #4285F4; }
.g-mini-b  { color: #34A853; }
.g-mini-e  { color: #EA4335; }
.g-mini-r  { color: #4285F4; }

/* Google Arama Çubuğu */
.google-search-form {
  width: 100%;
}

.google-search-bar {
  width: 100%;
  display: flex;
  align-items: center;
  height: 52px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle, #dfe1e5);
  border-radius: 28px;
  padding: 0 16px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.12);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.google-search-bar:hover,
.google-search-bar:focus-within {
  box-shadow: 0 2px 16px rgba(32, 33, 36, 0.2);
  border-color: transparent;
}

[data-theme="dark"] .google-search-bar {
  background: #303134;
  border-color: #5f6368;
  box-shadow: none;
}

[data-theme="dark"] .google-search-bar:hover,
[data-theme="dark"] .google-search-bar:focus-within {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  background: #303134;
  border-color: #5f6368;
}

.g-search-icon {
  display: flex;
  align-items: center;
  color: #9aa0a6;
  margin-right: 12px;
}

.google-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-main);
  padding: 0;
}

.google-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

.g-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
  margin-right: 6px;
}

.g-clear-btn:hover {
  color: var(--text-main);
}

.g-action-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.g-mic-btn,
.g-lens-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.g-mic-btn:hover,
.g-lens-btn:hover {
  transform: scale(1.12);
}

/* Google Butonları */
.google-btn-row {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.google-btn {
  background-color: var(--bg-card-subtle, #f8f9fa);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-main, #3c4043);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  padding: 0 18px;
  height: 40px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.google-btn:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border-color: var(--border-subtle, #dadce0);
  color: var(--text-main);
}

[data-theme="dark"] .google-btn {
  background-color: #303134;
  color: #e8eaed;
  border-color: #303134;
}

[data-theme="dark"] .google-btn:hover {
  border-color: #5f6368;
  color: #fff;
}

.google-home-container .searx-results-section,
.google-hero-section .searx-results-section {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 24px;
  text-align: left;
}

/* ==========================================================================
   MSN FEED SECTION
   ========================================================================== */
.msn-feed-section {
  width: 100%;
  margin-top: 25px;
}

.msn-feed-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.msn-feed-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #dc2626;
}

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 rgba(220, 38, 38, 0.4);
  animation: livePulseAnim 1.8s infinite;
}

@keyframes livePulseAnim {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.msn-categories-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.msn-categories-scroll::-webkit-scrollbar {
  display: none;
}

.msn-cat-chip {
  text-decoration: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 24px;
  background: var(--bg-card);
  color: var(--text-main);
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2px solid var(--border-subtle, #cbd5e1);
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.msn-cat-chip:hover {
  background: var(--bg-card-hover, rgba(124, 58, 237, 0.08));
  border-color: #7c3aed;
  color: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.15);
}

.msn-cat-chip.active {
  background: var(--primary-600, #7c3aed);
  color: #ffffff;
  border-color: #7c3aed;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.35);
  transform: none;
}

[data-theme="dark"] .msn-cat-chip {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

[data-theme="dark"] .msn-cat-chip:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: #9333ea;
  color: #c084fc;
}

[data-theme="dark"] .msn-cat-chip.active {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
}

/* Responsive Düzenlemeler: Üst Header Google Arama */
@media (max-width: 992px) {
  .google-top-link {
    display: none;
  }
}

@media (max-width: 768px) {
  .top-header-google {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .header-center-search {
    margin: 0 6px;
  }
  .header-center-search .google-search-bar {
    height: 40px;
    padding: 0 10px;
  }
  .header-center-search .google-search-input {
    font-size: 13.5px;
  }
  .google-mini-brand {
    font-size: 19px;
  }
}

@media (max-width: 520px) {
  .header-center-search .g-lens-btn {
    display: none;
  }
  .header-center-search .google-search-input::placeholder {
    font-size: 12px;
  }
  .slider-bottom-bar {
    padding: 0 8px;
  }
  .slider-dots-center {
    gap: 3px;
    justify-content: flex-start;
    padding: 2px 2px;
    margin: 0 2px;
  }
  .slider-dot {
    min-width: 21px;
    height: 23px;
    font-size: 11px;
    border-radius: 5px;
    padding: 0 2px;
  }
  .slider-dot.active {
    min-width: 22px;
    transform: none;
  }
  .slider-bar-arrow {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   CANLI GOOGLE TRENDLER BÖLÜMÜ (Yatay, Renkli & Şık Çipler)
   ========================================================================== */
.trending-bar-section {
  width: 100%;
  margin: 14px 0 18px 0;
}

.trending-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 20px;
  padding: 10px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.trending-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 14px;
  border-right: 1.5px solid var(--border-subtle);
  flex-shrink: 0;
  user-select: none;
  align-self: center;
}

.trending-flame-icon {
  font-size: 16px;
  line-height: 1;
}

.trending-badge-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #dc2626;
}

.trending-chips-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 1;
  padding: 2px 0;
}

.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.trend-chip * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.trend-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trend-arrow {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.trend-text {
  letter-spacing: -0.1px;
}

.trend-mini-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: 2px;
}

/* Şık ve Renkli Çipler (6 Renk Döngüsü) */
.trend-chip-color-0 {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  border: 1.5px solid rgba(37, 99, 235, 0.25);
}
.trend-chip-color-0:hover {
  background: rgba(37, 99, 235, 0.16);
  border-color: #2563eb;
}

.trend-chip-color-1 {
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
  border: 1.5px solid rgba(16, 185, 129, 0.25);
}
.trend-chip-color-1:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: #10b981;
}

.trend-chip-color-2 {
  background: rgba(217, 119, 6, 0.08);
  color: #b45309;
  border: 1.5px solid rgba(217, 119, 6, 0.25);
}
.trend-chip-color-2:hover {
  background: rgba(217, 119, 6, 0.16);
  border-color: #f59e0b;
}

.trend-chip-color-3 {
  background: rgba(147, 51, 234, 0.08);
  color: #7e22ce;
  border: 1.5px solid rgba(147, 51, 234, 0.25);
}
.trend-chip-color-3:hover {
  background: rgba(147, 51, 234, 0.16);
  border-color: #9333ea;
}

.trend-chip-color-4 {
  background: rgba(225, 29, 72, 0.08);
  color: #be123c;
  border: 1.5px solid rgba(225, 29, 72, 0.25);
}
.trend-chip-color-4:hover {
  background: rgba(225, 29, 72, 0.16);
  border-color: #e11d48;
}

.trend-chip-color-5 {
  background: rgba(14, 165, 233, 0.08);
  color: #0369a1;
  border: 1.5px solid rgba(14, 165, 233, 0.25);
}
.trend-chip-color-5:hover {
  background: rgba(14, 165, 233, 0.16);
  border-color: #0ea5e9;
}

[data-theme="dark"] .trend-chip-color-0 { background: rgba(59, 130, 246, 0.16); color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }
[data-theme="dark"] .trend-chip-color-1 { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.4); }
[data-theme="dark"] .trend-chip-color-2 { background: rgba(245, 158, 11, 0.16); color: #fde68a; border-color: rgba(245, 158, 11, 0.4); }
[data-theme="dark"] .trend-chip-color-3 { background: rgba(147, 51, 234, 0.16); color: #d8b4fe; border-color: rgba(147, 51, 234, 0.4); }
[data-theme="dark"] .trend-chip-color-4 { background: rgba(244, 63, 94, 0.16); color: #fda4af; border-color: rgba(244, 63, 94, 0.4); }
[data-theme="dark"] .trend-chip-color-5 { background: rgba(14, 165, 233, 0.16); color: #7dd3fc; border-color: rgba(14, 165, 233, 0.4); }

@media (max-width: 640px) {
  .trending-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 16px;
  }
  .trending-badge {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding-right: 0;
    padding-bottom: 8px;
    width: 100%;
  }
  .trending-chips-scroll {
    gap: 6px 8px;
  }
  .trend-chip {
    font-size: 12px;
    padding: 5px 12px;
  }
}

/* ==========================================================================
   ARAMA SONUÇLARI SAYFASI (Google Tarzı Zengin Sonuçlar)
   ========================================================================== */
.arama-page-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 60px 20px;
}

.arama-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 18px;
  gap: 12px;
}

.arama-nav-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.arama-btn-pref {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.arama-btn-pref:hover {
  color: #2563eb;
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.arama-btn-pref svg {
  transition: transform 0.4s ease;
}

.arama-btn-pref:hover svg {
  transform: rotate(60deg);
}

.arama-tabs-scroll {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.arama-tabs-scroll::-webkit-scrollbar { display: none; }

.arama-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.arama-tab-btn:hover {
  color: var(--text-main);
}

.arama-tab-btn.active {
  color: #1a73e8;
  border-bottom-color: #1a73e8;
  font-weight: 700;
}

[data-theme="dark"] .arama-tab-btn.active {
  color: #8ab4f8;
  border-bottom-color: #8ab4f8;
}

.arama-stats-bar {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.arama-main-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
}

@media (max-width: 992px) {
  .arama-main-layout {
    grid-template-columns: 1fr;
  }
  .arama-sidebar-col {
    display: none;
  }
}

/* En çok okunan haberler kutusu */
.arama-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.arama-box-header {
  margin-bottom: 16px;
}

.arama-box-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.arama-news-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.arama-headline-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.arama-headline-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: #1a73e8;
}

.arama-headline-img-wrap {
  width: 100%;
  height: 135px;
  position: relative;
  overflow: hidden;
  background: #0f172a;
}

.arama-headline-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arama-web-card-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  background: linear-gradient(135deg, #1e293b, #334155);
}

.arama-badge-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.arama-headline-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.arama-headline-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arama-headline-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.meta-source {
  font-weight: 700;
  color: var(--text-main);
}

/* Wikipedia Bilgi Kartı */
.arama-wiki-box {
  background: var(--bg-card);
  border: 1.5px solid #2563eb;
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.arama-wiki-badge {
  display: inline-block;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.arama-wiki-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px 0;
}
.arama-wiki-snippet {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 10px 0;
}
.arama-wiki-link {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}

/* Organik Web Arama Sonuçları */
.arama-web-item-card {
  margin-bottom: 26px;
  max-width: 720px;
}

.arama-web-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.arama-site-favicon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.arama-site-info {
  display: flex;
  flex-direction: column;
}

.arama-site-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.arama-site-url {
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 480px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arama-item-title {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.arama-item-title a {
  color: #1a0dab;
  text-decoration: none;
}

.arama-item-title a:hover {
  text-decoration: underline;
}

[data-theme="dark"] .arama-item-title a {
  color: #8ab4f8;
}

.arama-item-snippet {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 6px 0;
}

.arama-item-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Sidebar Trendler */
.arama-sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}

.sidebar-header-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: var(--text-main);
}

.sidebar-trends-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-trend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.sidebar-trend-row:hover {
  background: var(--bg-card-subtle);
}

.trend-rank {
  font-size: 14px;
  font-weight: 800;
  color: #dc2626;
  width: 18px;
  text-align: center;
}

.trend-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.trend-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
}

.trend-vol {
  font-size: 11px;
  color: var(--text-muted);
}

.trend-icon-right {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 700;
}

/* ==========================================================================
   SEARXNG & GOOGLE TARZI ARAMA TERCİHLERİ VE AYARLAR MODALI
   ========================================================================== */
.search-prefs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-prefs-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-prefs-modal {
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-prefs-overlay.active .search-prefs-modal {
  transform: scale(1) translateY(0);
}

/* Modal Başlık */
.search-prefs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card-subtle);
}

.search-prefs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pref-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.5px;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.search-prefs-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.search-prefs-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-close-prefs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-close-prefs:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-main);
}

[data-theme="dark"] .btn-close-prefs:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Modal Sekmeleri (SearXNG Preferences Stili) */
.search-prefs-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
  overflow-x: auto;
  scrollbar-width: none;
}

.search-prefs-tabs::-webkit-scrollbar { display: none; }

.pref-tab-btn {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.pref-tab-btn:hover {
  color: var(--text-main);
}

.pref-tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

[data-theme="dark"] .pref-tab-btn.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

/* Modal Gövdesi ve Satırları */
.search-prefs-body {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1;
}

.pref-tab-pane {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.pref-tab-pane.active {
  display: flex;
}

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pref-row:last-child {
  border-bottom: none;
}

.pref-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.pref-label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}

.pref-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

.pref-control {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Select Dropdown */
.pref-select {
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pref-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* iOS Tarzı Şık Toggle Switch */
.pref-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 25px;
}

.pref-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pref-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  transition: background-color 0.25s ease;
  border-radius: 25px;
}

[data-theme="dark"] .pref-slider {
  background-color: #334155;
}

.pref-slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.pref-switch input:checked + .pref-slider {
  background-color: #2563eb;
}

.pref-switch input:checked + .pref-slider:before {
  transform: translateX(21px);
}

/* Gizlilik Kartı */
.pref-privacy-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: rgba(37, 99, 235, 0.06);
  border: 1.5px solid rgba(37, 99, 235, 0.2);
  border-radius: 14px;
}

.pref-privacy-icon {
  font-size: 24px;
  line-height: 1;
}

.pref-privacy-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.pref-privacy-text p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.btn-clear-cache {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border: 1.5px solid rgba(220, 38, 38, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-clear-cache:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: #dc2626;
}

/* Modal Alt Butonlar */
.search-prefs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-card-subtle);
  border-top: 1px solid var(--border-subtle);
  gap: 12px;
  flex-wrap: wrap;
}

.btn-reset-prefs {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-reset-prefs:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-main);
}

.btn-cancel-prefs {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.btn-save-prefs {
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  background: #2563eb;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
}

.btn-save-prefs:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

/* Toast Bildirimi */
.search-prefs-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-prefs-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="dark"] .search-prefs-toast {
  background: #2563eb;
}

@media (max-width: 640px) {
  .search-prefs-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .search-prefs-footer > div {
    display: flex;
    justify-content: flex-end;
  }
  .btn-reset-prefs {
    width: 100%;
    text-align: center;
  }
}