/* ==========================================================================
   mIRC Sohbet (mircsohbet.com.tr) - Özgün Tasarım Sistemi (Bespoke 2026 Edition)
   Sıra Dışı, Modern, Yüksek Dönüşümlü Türk Sohbet Portalı
   ========================================================================== */

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

/* ==========================================================================
   1. Tema Değişkenleri (Açık & Koyu Uyumlu Tasarım Sistemi)
   ========================================================================== */

/* Varsayılan / Açık Tema (Light Theme - Sıcak Yakut, Gül & Ferah Gövde) */
:root, [data-theme="light"] {
  --topbar-bg: #1e0b2b;
  --topbar-text: #e9d5ff;

  --header-bg: #be123c;
  --header-gradient: linear-gradient(90deg, #be123c 0%, #db2777 50%, #be123c 100%);

  /* Hero: Gövdeyle kesintisiz kaynaşan sıcak gül ve ferah geçiş */
  --hero-bg: #fff5f7;
  --hero-gradient: linear-gradient(180deg, #fff1f3 0%, #ffe4e8 35%, #eed8de 65%, #e2e8f0 100%);
  --hero-glow: radial-gradient(circle, rgba(190, 18, 60, 0.09) 0%, transparent 70%);

  --brand-ruby: #be123c;
  --brand-ruby-hover: #9f1239;
  --brand-ruby-glow: 0 10px 30px rgba(190, 18, 60, 0.25);

  --coral-500: #be123c;
  --coral-600: #9f1239;
  --coral-gradient: linear-gradient(135deg, #be123c 0%, #db2777 100%);
  --coral-glow: 0 10px 30px rgba(190, 18, 60, 0.25);

  --amber-400: #f59e0b;
  --amber-500: #d97706;
  --amber-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --amber-glow: 0 10px 30px rgba(245, 158, 11, 0.35);

  --emerald-500: #10b981;
  --emerald-glow: 0 0 12px rgba(16, 185, 129, 0.5);

  --indigo-500: #6366f1;

  /* Sayfa Gövdesi & Yüzeyler (Açık temada kartların arka plandan net ayırt edilmesini sağlayan belirgin zemin) */
  --bg-page: #e2e8f0;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-alt: #cbd5e1;
  --bg-subtle: #cbd5e1;

  /* Tipografi */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-light: #f8fafc;

  /* Kenarlıklar & Gölgeler */
  --border-light: #cbd5e1;
  --border-card: #94a3b8;
  --shadow-sm: 0 2px 8px -1px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 35px -8px rgba(15, 23, 42, 0.16), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-studio: 0 20px 50px -10px rgba(190, 18, 60, 0.18);

  /* CTA Bandı: Sıcak Yakut & Mürdüm Köprüsü */
  --cta-bg: linear-gradient(135deg, #be123c 0%, #9f1239 45%, #4a044e 100%);

  /* Altbilgi */
  --footer-bg: #15031e;
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-text: #cbd5e1;

  --bubble-bg: rgba(255, 255, 255, 0.95);
  --bubble-border: rgba(255, 255, 255, 0.9);
  --bubble-text: #0f172a;
  --bubble-msg: #334155;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Koyu Tema (Dark Theme - Derin Obsidyen, Gece Mavisi & Büyüleyici Mürdüm Parıltısı) */
[data-theme="dark"] {
  --topbar-bg: #07090e;
  --topbar-text: #cbd5e1;

  --header-bg: #0c101c;
  --header-gradient: linear-gradient(90deg, #090d16 0%, #131a2c 50%, #090d16 100%);

  /* Hero: Derin Gece Obsidyen & Zarif Parıltı */
  --hero-bg: #090d16;
  --hero-gradient: linear-gradient(180deg, #090d16 0%, #0f1524 50%, #090d16 100%);
  --hero-glow: radial-gradient(circle, rgba(225, 29, 72, 0.18) 0%, transparent 70%);

  --brand-ruby: #e11d48;
  --brand-ruby-hover: #f43f5e;
  --brand-ruby-glow: 0 10px 30px rgba(225, 29, 72, 0.4);

  --coral-500: #e11d48;
  --coral-600: #f43f5e;
  --coral-gradient: linear-gradient(135deg, #e11d48 0%, #db2777 100%);
  --coral-glow: 0 10px 30px rgba(225, 29, 72, 0.4);

  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --amber-glow: 0 10px 30px rgba(245, 158, 11, 0.35);

  --emerald-500: #10b981;
  --emerald-glow: 0 0 14px rgba(16, 185, 129, 0.5);

  --indigo-500: #818cf8;

  /* Sayfa Gövdesi & Yüzeyler: Bütünüyle Uyumlu Obsidyen */
  --bg-page: #090d16;
  --bg-surface: #111827;
  --bg-surface-elevated: #161f33;
  --bg-surface-alt: #0c101c;
  --bg-subtle: #192235;

  /* Tipografi - Yüksek Kontrast & Kolay Okunurluk */
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;
  --text-light: #ffffff;

  /* Kenarlıklar & Gölgeler */
  --border-light: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.09);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 45px -10px rgba(0, 0, 0, 0.7);
  --shadow-studio: 0 25px 60px -15px rgba(0, 0, 0, 0.8);

  /* CTA Bandı: Derin Gece & Mürdüm */
  --cta-bg: linear-gradient(135deg, #110320 0%, #250742 50%, #4a044e 100%);

  /* Altbilgi */
  --footer-bg: #060810;
  --footer-border: rgba(255, 255, 255, 0.06);
  --footer-text: #cbd5e1;

  --bubble-bg: rgba(17, 24, 39, 0.92);
  --bubble-border: rgba(255, 255, 255, 0.12);
  --bubble-text: #f8fafc;
  --bubble-msg: #cbd5e1;
}

/* ==========================================================================
   2. Sıfırlama & Temel Yapı
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-secondary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main.site-main {
  flex: 1 0 auto;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Sayfa Zemin Yardımcısı */
.bg-page {
  background-color: var(--bg-page) !important;
}

/* ==========================================================================
   Genel Kart Tasarım Sistemi (Universal Elevated Card System)
   Açık temada kartların arka plandan kristal netliğinde ayırt edilmesini sağlar
   ========================================================================== */
.portal-card,
.glass-card,
.card {
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 24px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12), 0 2px 8px -2px rgba(15, 23, 42, 0.06);
  color: var(--text-primary);
  transition: all 0.25s ease;
  position: relative;
}

[data-theme="dark"] .portal-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.portal-card:hover,
.glass-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .portal-card:hover,
[data-theme="dark"] .glass-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--coral-500);
}

/* ==========================================================================
   Ortak Alt Sayfa Tasarım Mimarisi (Unified Subpage Shell)
   İletişim, Kurallar, mIRC İndir ve Blog Detayı sayfalarında tam görsel bütünlük
   ========================================================================== */
.subpage-wrapper {
  background-color: var(--bg-page);
  padding: 48px 0 80px;
  min-height: calc(100vh - 200px);
  transition: background-color 0.25s ease;
}

.subpage-header {
  text-align: center;
  max-width: 100%;
  margin: 0 auto 36px;
}

.subpage-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

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

.subpage-breadcrumb .breadcrumb-separator {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.subpage-breadcrumb .breadcrumb-active {
  color: var(--text-primary);
  font-weight: 700;
}

[data-theme="dark"] .subpage-breadcrumb {
  background: rgba(17, 24, 39, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .subpage-breadcrumb a {
  color: #94a3b8;
}
[data-theme="dark"] .subpage-breadcrumb a:hover {
  color: #00f0ff;
}
[data-theme="dark"] .subpage-breadcrumb .breadcrumb-active {
  color: #f8fafc;
}

.subpage-tag-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 14px;
  border-radius: 30px;
  background: rgba(190, 18, 60, 0.1);
  color: var(--coral-500);
  border: 1px solid rgba(190, 18, 60, 0.2);
  margin-bottom: 12px;
}
[data-theme="dark"] .subpage-tag-badge {
  background: rgba(225, 29, 72, 0.18);
  border-color: rgba(225, 29, 72, 0.35);
  color: #fb7185;
}

.subpage-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.6px;
  line-height: 1.25;
  margin-bottom: 12px;
}

.subpage-subtitle {
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================================
   WebChat Sayfası & Applet Konteyneri
   ========================================================================== */
.webchat-page-wrapper {
  background-color: var(--bg-page);
  min-height: calc(100vh - 180px);
  padding: 24px 0 60px;
  transition: background-color 0.25s ease;
}

.chat-control-bar {
  border-radius: 18px;
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08);
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(190, 18, 60, 0.1);
  border: 1px solid rgba(190, 18, 60, 0.2);
  color: var(--coral-500);
  padding: 6px 14px;
  border-radius: 20px;
}
[data-theme="dark"] .channel-badge {
  background: rgba(225, 29, 72, 0.18);
  border-color: rgba(225, 29, 72, 0.35);
  color: #fb7185;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--emerald-500);
  box-shadow: var(--emerald-glow);
  animation: pulseAnim 1.8s infinite;
}

.webchat-frame-container {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 24px;
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .chat-control-bar,
[data-theme="dark"] .webchat-frame-container {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.chat-placeholder-box {
  width: 100%;
}

.applet-spec-info {
  background-color: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  border-radius: 16px;
}
[data-theme="dark"] .applet-spec-info {
  background-color: #0c101c;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   3. Üst Bilgi Şeridi (Live Status Top Bar)
   ========================================================================== */
.bespoke-topbar {
  background-color: var(--topbar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--topbar-text);
  font-size: 0.82rem;
  padding: 8px 0;
  position: relative;
  z-index: 1030;
  transition: background-color 0.25s ease;
}
/* Topbar mobilde tamamen gizlenir - header tek ve kompakt kalır */
@media (max-width: 767.98px) {
  .bespoke-topbar {
    display: none !important;
  }
}

.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.78rem;
}

.ping-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #cbd5e1;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.pulse-dot-green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--emerald-500);
  box-shadow: var(--emerald-glow);
  animation: pulseAnim 1.8s infinite;
}

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

.topbar-radio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.topbar-radio-btn:hover {
  background: var(--amber-500);
  color: #ffffff;
  border-color: var(--amber-500);
  box-shadow: var(--amber-glow);
}

.topbar-link {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.15s;
}
.topbar-link:hover {
  color: #ffffff;
}

/* ==========================================================================
   4. Ana Navigasyon (Harmonized Header)
   ========================================================================== */
.bespoke-header {
  background: var(--header-gradient);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 14px 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* Mobilde daha kompakt header */
@media (max-width: 767.98px) {
  .bespoke-header {
    padding: 10px 0;
  }
}

[data-theme="dark"] .bespoke-header {
  border-bottom: 1px solid rgba(225, 29, 72, 0.2);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45);
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
  flex: 0 1 auto;
}

.brand-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
  padding: 7px;
  flex-shrink: 0;
}
.brand-icon-box .brand-mirc-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.brand-logo-wrap:hover .brand-icon-box {
  transform: scale(1.08) rotate(-4deg);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 8px 20px rgba(0, 240, 255, 0.25);
}

.brand-text-main {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 400px) {
  .brand-text-main {
    font-size: 1rem;
  }
}

.brand-badge-domain {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  background: #ffffff;
  color: var(--brand-ruby);
  border: none;
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* "Sohbet" parçası mIRC ile bitişik ama hafif boşlukla */
.brand-name-sep {
  margin-left: 4px;
}

/* .com.tr rozeti her zaman görünür - gizleme kuralı kaldırıldı */

.brand-subtext {
  font-size: 0.75rem;
  color: #ffe4e6;
  font-weight: 500;
  display: block;
}

.nav-item-link {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.94rem;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}
.nav-item-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}
.nav-item-link.active {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Tema Değiştirici Buton (Theme Toggle Button - Modern SVG) */
.theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

.theme-toggle-btn svg {
  display: block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s ease;
}

.theme-toggle-btn:hover svg {
  transform: rotate(20deg);
}

@media (max-width: 767.98px) {
  .theme-toggle-btn {
    width: 34px;
    height: 34px;
  }
}

/* Koyu temada: Buton kehribar-altın parıltısıyla Güneş ikonunu öne çıkarır */
html[data-theme="dark"] .theme-toggle-btn {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
html[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.4);
  color: #fde047;
}

/* Açık temada: Buton şık yarı saydam zeminle zarif hilal ay ikonunu öne çıkarır */
html[data-theme="light"] .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
html[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
}

/* İkon Gösterim Mantığı: Koyu temada Güneş (Açık temaya geçmek için), Açık temada Ay (Koyu temaya geçmek için) */
html[data-theme="dark"] .theme-toggle-icon-dark {
  display: none !important;
}
html[data-theme="dark"] .theme-toggle-icon-light {
  display: block !important;
}
html[data-theme="light"] .theme-toggle-icon-dark {
  display: block !important;
}
html[data-theme="light"] .theme-toggle-icon-light {
  display: none !important;
}

.btn-header-cta {
  background: var(--amber-gradient);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 9px 20px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-header-cta:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(217, 119, 6, 0.5);
}

@media (max-width: 767.98px) {
  .btn-header-cta {
    padding: 7px 14px;
    font-size: 0.82rem;
    gap: 5px;
  }
}

/* ==========================================================================
   Mobil Navigasyon & Açılır Çekmece (Mobile Navigation Drawer)
   ========================================================================== */

/* Aksiyon grubu hiç büzülmesin */
.header-actions {
  flex-shrink: 0;
}

.mobile-menu-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
  user-select: none;
  flex-shrink: 0;
}
.mobile-menu-toggle-btn:hover,
.mobile-menu-toggle-btn.active {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

@media (max-width: 767.98px) {
  .mobile-menu-toggle-btn {
    width: 34px;
    height: 34px;
  }
}

.mobile-nav-panel {
  display: none;
  background: rgba(21, 3, 30, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1025;
}
[data-theme="dark"] .mobile-nav-panel {
  background: rgba(9, 13, 22, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .mobile-nav-panel {
  background: #be123c;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-nav-panel.show {
  display: block;
  animation: slideDownMobile 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDownMobile {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.96rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateX(4px);
}
.mobile-nav-link.active {
  background: var(--amber-gradient);
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.35);
}

/* ==========================================================================
   5. Hero Bölümü: "Connect Studio" & Görsel Vitrini
   ========================================================================== */
.bespoke-hero-section {
  background: var(--hero-gradient);
  color: var(--text-primary);
  position: relative;
  padding: 60px 0 90px;
  overflow: hidden;
  transition: background 0.3s ease;
}

.hero-ambient-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  background: var(--hero-glow);
  top: -180px;
  right: -120px;
  pointer-events: none;
  z-index: 1;
}

/* Connect Studio Giriş Kartı */
.connect-studio-card {
  max-width: 530px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 28px;
  box-shadow: 0 16px 40px -8px rgba(190, 18, 60, 0.16), 0 4px 16px -2px rgba(15, 23, 42, 0.08);
  padding: 38px 32px;
  color: var(--text-primary);
  position: relative;
  z-index: 2;
  margin: 0 auto;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-theme="dark"] .connect-studio-card {
  background: var(--bg-surface);
  border: 1px solid rgba(225, 29, 72, 0.25);
  box-shadow: var(--shadow-studio);
}

.studio-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(190, 18, 60, 0.1);
  color: var(--coral-500);
  border: 1px solid rgba(190, 18, 60, 0.2);
  padding: 5px 14px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.studio-main-heading {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.studio-subtext {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Özel Input Kutuları */
.studio-input-wrap {
  position: relative;
  margin-bottom: 18px;
}

.studio-input-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.studio-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.studio-input-icon {
  position: absolute;
  left: 16px;
  color: var(--text-dim);
  font-size: 1.1rem;
  pointer-events: none;
}

.studio-form-control {
  width: 100%;
  height: 52px;
  background: var(--bg-subtle);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0 18px 0 46px;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.2s ease;
}
.studio-form-control:focus {
  background: var(--bg-surface);
  border-color: var(--coral-500);
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.15);
  outline: none;
}

.btn-random-nick {
  position: absolute;
  right: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-random-nick:hover {
  background: var(--amber-gradient);
  color: #ffffff;
  border-color: transparent;
  transform: scale(1.02);
}

/* İnteraktif Kanal Seçici Haplar */
.channel-chips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}

.channel-chip-btn {
  background: var(--bg-subtle);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.channel-chip-btn:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--border-light);
}
.channel-chip-btn.selected {
  background: rgba(190, 18, 60, 0.1);
  border-color: var(--coral-500);
  color: var(--coral-500);
}
.channel-chip-name {
  font-size: 0.88rem;
  font-weight: 800;
  display: block;
}
.channel-chip-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  font-family: var(--font-mono);
}
.channel-chip-btn.selected .channel-chip-count {
  color: var(--coral-500);
}

/* Giriş Butonu */
.btn-studio-connect {
  width: 100%;
  height: 56px;
  background: var(--coral-gradient);
  color: #ffffff;
  border: none;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--coral-glow);
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-studio-connect:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(190, 18, 60, 0.45);
}

.studio-footer-features {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

.feature-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.feature-pill-item span.icon {
  color: var(--emerald-500);
  font-size: 0.95rem;
}

/* ==========================================================================
   Sağ Taraf: Sıcak Sohbet Ortamı Görseli & Yüzen Mesaj Balonları
   ========================================================================== */
.hero-image-stage {
  position: relative;
  z-index: 2;
}

.hero-photo-card {
  border-radius: 28px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

.hero-img-cover {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hero-photo-card:hover .hero-img-cover {
  transform: scale(1.03);
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

/* Yüzen Mesaj Balonları */
.floating-chat-bubble {
  position: absolute;
  background: var(--bubble-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--bubble-border);
  border-radius: 20px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  color: var(--bubble-text);
  z-index: 5;
  animation: floatChatBubble 4s ease-in-out infinite alternate;
  max-width: 320px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

@keyframes floatChatBubble {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

.bubble-avatar-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--coral-gradient);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(190, 18, 60, 0.3);
}
.bubble-avatar-box.avatar-pink {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}
.bubble-avatar-box.avatar-amber {
  background: var(--amber-gradient);
  color: #ffffff;
}

.bubble-content {
  line-height: 1.35;
}
.bubble-user {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--coral-500);
  display: block;
}
.bubble-msg {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--bubble-msg);
  margin: 0;
}

/* Konumlandırmalar */
.bubble-top-right {
  top: -18px;
  right: -15px;
  animation-delay: 0.2s;
}
.bubble-mid-left {
  top: 48%;
  left: -20px;
  animation-delay: 1.5s;
}
.bubble-bottom-right {
  bottom: -20px;
  right: 15px;
  animation-delay: 0.8s;
}

/* ==========================================================================
   6. Bento Grid Bölümü (Özellik & Deneyim Vitrini)
   ========================================================================== */
.bento-section {
  padding: 80px 0;
  background-color: var(--bg-page);
  transition: background-color 0.25s ease;
}

.section-tag-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 14px;
  border-radius: 30px;
  background: rgba(190, 18, 60, 0.1);
  color: var(--coral-500);
  border: 1px solid rgba(190, 18, 60, 0.2);
  margin-bottom: 12px;
}

.section-headline {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.6px;
  margin-bottom: 10px;
}

.section-subheadline {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 620px;
}

/* Bento Kartları */
.bento-card {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12), 0 2px 8px -2px rgba(15, 23, 42, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  border-color: var(--coral-500);
}
.bento-card .border-top {
  border-top-color: #e2e8f0 !important;
}
[data-theme="dark"] .bento-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .bento-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--coral-500);
}
[data-theme="dark"] .bento-card .border-top {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.bento-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.icon-box-coral {
  background: rgba(190, 18, 60, 0.12);
  color: var(--coral-500);
}
.icon-box-amber {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-500);
}
.icon-box-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: var(--emerald-500);
}
.icon-box-indigo {
  background: rgba(99, 102, 241, 0.12);
  color: var(--indigo-500);
}

.bento-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}
.bento-pill-coral {
  background: rgba(190, 18, 60, 0.12);
  color: var(--coral-500);
}
[data-theme="dark"] .bento-pill-coral {
  background: rgba(225, 29, 72, 0.2);
  color: #fb7185;
}
.bento-pill-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
[data-theme="dark"] .bento-pill-amber {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
.bento-pill-indigo {
  background: rgba(99, 102, 241, 0.15);
  color: #4338ca;
}
[data-theme="dark"] .bento-pill-indigo {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}
.bento-pill-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}
[data-theme="dark"] .bento-pill-emerald {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.bento-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.bento-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   7. Canlı Kanal & Oda Rehberi
   ========================================================================== */
.rooms-section {
  padding: 75px 0;
  background-color: var(--bg-surface-alt);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.room-card-box {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  padding: 24px;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 20px -4px rgba(15, 23, 42, 0.1), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
}
.room-card-box:hover {
  background: #ffffff;
  border-color: var(--coral-500);
  box-shadow: 0 14px 32px -6px rgba(15, 23, 42, 0.16);
  transform: translateY(-3px);
}
[data-theme="dark"] .room-card-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .room-card-box:hover {
  box-shadow: var(--shadow-md);
}

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

.room-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.room-activity-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--emerald-500);
  background: rgba(16, 185, 129, 0.1);
  padding: 3px 8px;
  border-radius: 12px;
}

.room-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  flex-grow: 1;
}

.room-footer-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.room-meta-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.btn-enter-room {
  background: rgba(190, 18, 60, 0.1);
  color: var(--coral-500);
  border: 1px solid rgba(190, 18, 60, 0.25);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s;
}
.room-card-box:hover .btn-enter-room {
  background: var(--coral-500);
  color: #ffffff;
}

/* ==========================================================================
   8. Editoryal Rehberler & Blog Bölümü
   ========================================================================== */
.editorial-section {
  padding: 80px 0;
  background-color: var(--bg-page);
  transition: background-color 0.25s ease;
}

.blog-card-item {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 6px 20px -4px rgba(15, 23, 42, 0.1), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18);
  border-color: var(--coral-500);
}
[data-theme="dark"] .blog-card-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .blog-card-item:hover {
  box-shadow: var(--shadow-md);
}

.blog-thumb-wrap {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.blog-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.blog-card-item:hover .blog-thumb-img {
  transform: scale(1.05);
}

.blog-category-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.blog-body-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: var(--bg-surface);
}

.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.blog-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 10px;
}
.blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.blog-card-title a:hover {
  color: var(--coral-500);
}

.blog-card-snippet {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

.blog-read-more-link {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--coral-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.blog-read-more-link:hover {
  gap: 10px;
}

/* ==========================================================================
   9. SEO Bilgilendirme & Sıkça Sorulan Sorular (FAQ)
   ========================================================================== */
.seo-faq-section {
  padding: 80px 0;
  background-color: var(--bg-surface-alt);
  border-top: 1px solid var(--border-light);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.faq-accordion-item {
  border: 1px solid var(--border-light);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: all 0.2s;
  background: var(--bg-surface);
}
.faq-accordion-header {
  width: 100%;
  background: var(--bg-subtle);
  border: none;
  padding: 20px 24px;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.faq-accordion-header:hover {
  background: var(--bg-surface-elevated);
}
.faq-accordion-icon {
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}
.faq-accordion-item.open .faq-accordion-icon {
  transform: rotate(180deg);
}
.faq-accordion-body {
  display: none;
  padding: 20px 24px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
}
.faq-accordion-item.open .faq-accordion-body {
  display: block;
}

/* ==========================================================================
   10. Pre-Footer Elit CTA Bandı
   ========================================================================== */
.bespoke-cta-banner {
  background: var(--cta-bg) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 70px 0;
  color: #ffffff !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}

.cta-avatar-stack {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.cta-avatar-stack span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-left: -12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.cta-avatar-stack span:first-child {
  margin-left: 0;
}

.cta-banner-title {
  color: #ffffff !important;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.6px;
  margin-bottom: 10px;
}

.cta-banner-sub {
  font-size: 1.05rem;
  color: #f1f5f9 !important;
  max-width: 550px;
  margin: 0 auto 28px;
}

.btn-cta-magnetic {
  background: var(--amber-gradient);
  color: #ffffff !important;
  font-weight: 900;
  font-size: 1.05rem;
  padding: 14px 34px;
  border-radius: 35px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(217, 119, 6, 0.45);
  transition: all 0.25s ease;
  border: none;
}
.btn-cta-magnetic:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 45px rgba(217, 119, 6, 0.6);
  color: #ffffff !important;
}

/* ==========================================================================
/* ==========================================================================
   11. Altbilgi (Bespoke Footer) - Gelişmiş Hiyerarşik Tasarım
   ========================================================================== */
.bespoke-footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  font-size: 0.9rem;
  padding: 70px 0 30px;
  border-top: 1px solid var(--footer-border);
  transition: background-color 0.25s ease;
}

/* Site Markası & Açıklama (Açık ve Koyu Temada Net Görünürlük) */
.footer-brand-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffffff !important;
  margin-bottom: 12px;
}

.footer-brand-desc {
  color: #e2e8f0 !important; /* Açık temada mor/aubergine zemin üzerinde %100 net ve okunabilir */
  font-size: 0.88rem;
  line-height: 1.75;
  opacity: 0.95;
}

.footer-col-head {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff !important;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-col-head::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral-500, #f43f5e);
}

.footer-links-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links-unstyled li {
  margin-bottom: 10px;
}
.footer-links-unstyled a {
  color: #cbd5e1 !important;
  text-decoration: none;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.footer-links-unstyled a:hover {
  color: #ffffff !important;
  transform: translateX(4px);
}

/* Popüler Kanallar - Çok Katmanlı Renk Hiyerarşisi */
.footer-channel-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.footer-channel-tag {
  color: #38bdf8 !important; /* Canlı Cyan / Sky Mavisi */
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
.footer-channel-sub {
  color: #94a3b8 !important; /* İkincil Muted Açıklama Rengi */
  font-size: 0.82rem;
  transition: color 0.15s ease;
}
.footer-channel-link:hover {
  transform: translateX(4px);
}
.footer-channel-link:hover .footer-channel-tag {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}
.footer-channel-link:hover .footer-channel-sub {
  color: #cbd5e1 !important;
}

/* Sunucu Bilgi Kutusu */
.footer-server-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--footer-border) !important;
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.footer-server-label {
  color: #94a3b8 !important;
  font-weight: 500;
}
.footer-server-val-warning {
  color: #fbbf24 !important;
  font-weight: 700;
}
.footer-server-val-success {
  color: #34d399 !important;
  font-weight: 700;
}

/* Güvenlik & SSL Kutusu */
.footer-security-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--footer-border);
}
.footer-security-item {
  color: #94a3b8;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-security-item span {
  color: #cbd5e1;
}

/* Alt Telif Barı */
.footer-bottom-bar {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #94a3b8;
}
.footer-copyright strong {
  color: #e2e8f0;
}
.footer-dev-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-weight: 500;
}
.footer-tagline {
  color: #64748b;
  font-size: 0.8rem;
}

.btn-back-to-top {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-back-to-top:hover {
  background: var(--coral-500) !important;
  border-color: var(--coral-500) !important;
}

/* ==========================================================================
   12. Alt Sayfa & Genel Yardımcı Sınıflar (Sohbet, İndir, İletişim, vb.)
   ========================================================================== */
.portal-card, .glass-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.text-brand, .text-coral {
  color: var(--coral-500) !important;
}

.border-coral {
  border-color: rgba(190, 18, 60, 0.25) !important;
}

.bg-page {
  background-color: var(--bg-page) !important;
}

.bg-surface {
  background-color: var(--bg-surface) !important;
}

.webchat-frame-container {
  background: var(--bg-surface);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

.chat-control-bar {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}
.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(190, 18, 60, 0.15);
  border: 1px solid rgba(190, 18, 60, 0.3);
  color: var(--coral-500);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
}

.btn-chat-submit, .btn-brand {
  background: var(--coral-gradient) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: var(--coral-glow) !important;
  transition: all 0.25s ease !important;
}
.btn-chat-submit:hover, .btn-brand:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 35px rgba(190, 18, 60, 0.45) !important;
  color: #ffffff !important;
}

.article-content img, .page-body-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ==========================================================================
   Blog & Makale Detay Stilleri (Yüksek Kontrast & Net Okunurluk)
   ========================================================================== */
.article-detail-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .article-detail-title {
    font-size: 1.25rem;
  }
}

.badge-brand-pill {
  background: rgba(190, 18, 60, 0.1);
  color: var(--coral-500);
  border: 1px solid rgba(190, 18, 60, 0.25);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 5px 14px;
  border-radius: 30px;
  display: inline-block;
}

.article-lead-box {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(247, 37, 133, 0.07) 100%);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-left: 5px solid #00f0ff;
  border-radius: 14px;
  margin-bottom: 28px;
  padding: 22px 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.article-lead-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(0, 240, 255, 0.12), transparent 70%);
  pointer-events: none;
}

.lead-text {
  color: #f1f5f9 !important;
  font-weight: 500;
  line-height: 1.75;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}

.article-content-body {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.72;
}
.article-content-body p {
  margin-bottom: 0.95rem;
  color: var(--text-secondary);
}
.article-content-body p:empty,
.article-content-body p:has(> br:only-child) {
  display: none !important;
  margin: 0 !important;
}
.article-content-body h2, .article-content-body h3 {
  color: var(--text-primary);
  font-weight: 800;
  margin-top: 1.85rem;
  margin-bottom: 0.75rem;
}
.article-content-body ul, .article-content-body ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}
.article-content-body li {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}
.article-content-body blockquote {
  border-left: 4px solid var(--accent-cyan, #00f0ff);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(0, 240, 255, 0.05);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--text-primary);
}
.article-content-body pre {
  background: #0d121f;
  color: #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: monospace;
  margin: 1.5rem 0;
}
.article-content-body code {
  background: rgba(0, 240, 255, 0.1);
  color: var(--accent-cyan, #00f0ff);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}
.article-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem 0;
}
.article-content-body a {
  color: var(--accent-cyan, #00f0ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------
   AI Makale: mIRC İndir CTA Kutusu
   ----------------------------------------------------------------------- */
.mirc-indir-cta-box {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.1) 0%, rgba(247, 37, 133, 0.06) 100%);
  border: 1px solid rgba(255, 77, 109, 0.35);
  border-radius: 14px;
  padding: 1.4rem 1.75rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}
.mirc-indir-cta-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mirc-indir-cta-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(255, 77, 109, 0.45));
}
.mirc-indir-cta-content {
  flex: 1;
  min-width: 200px;
}
.mirc-indir-cta-content strong {
  display: block;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.mirc-indir-cta-content p {
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  margin: 0 !important;
  line-height: 1.5;
}
.mirc-indir-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #ff4d6d, #f72585);
  color: #ffffff !important;
  border-radius: 10px;
  padding: 0.65rem 1.4rem;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 6px 20px rgba(255, 77, 109, 0.3);
}
.mirc-indir-cta-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  color: #ffffff !important;
}
@media (max-width: 768px) {
  /* Mobil cihazlarda (telefon / tablet) mIRC masaüstü programı kurulamadığı için CTA kutusunu gizle */
  .mirc-indir-cta-box {
    display: none !important;
  }
}

.article-cta-box {
  background: var(--cta-bg);
  color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.article-cta-box h3, .article-cta-box .h4 {
  color: #ffffff !important;
}
.article-cta-box p {
  color: #e2e8f0 !important;
}

/* ==========================================================================
   Yüksek Kontrast & Kolay Okunurluk Düzeltmeleri
   ========================================================================== */

/* Ekmek Kırıntısı (Breadcrumbs) */
.breadcrumb-item a {
  color: var(--text-muted) !important;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.breadcrumb-item a:hover {
  color: var(--coral-500) !important;
}
.breadcrumb-item.active {
  color: var(--coral-500) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-dim) !important;
}

/* Makale Meta Satırı (Tarih, Okunma, Yazar) */
.article-meta-row,
.article-meta-header .text-muted,
.article-meta-header .border-bottom {
  color: var(--text-muted) !important;
  border-color: var(--border-light) !important;
}
.article-meta-row span,
.article-meta-header .text-muted span {
  color: var(--text-muted) !important;
  font-weight: 500;
}

/* Koyu Mod İçin Global Tipografi & Kontrast İyileştirmeleri */
[data-theme="dark"] .text-muted {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .text-secondary {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .text-white-50 {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-light,
[data-theme="dark"] .border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .article-lead-box {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.09) 0%, rgba(247, 37, 133, 0.07) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-left: 5px solid #00f0ff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .lead-text {
  color: #f8fafc !important;
}

[data-theme="dark"] .article-content-body {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .article-content-body p,
[data-theme="dark"] .article-content-body li {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .portal-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   KOYU TEMA FOOTER (Zengin, Dinamik ve Çok Katmanlı Renk Uyarlaması)
   ========================================================================== */
[data-theme="dark"] .bespoke-footer {
  background-color: #060810 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .footer-brand-title {
  color: #ffffff !important;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}

/* Açıklama metni: Koyu temada ferah ve rahat okunabilir Slate-300 */
[data-theme="dark"] .footer-brand-desc {
  color: #94a3b8 !important;
  font-size: 0.88rem;
}

[data-theme="dark"] .footer-col-head {
  color: #f1f5f9 !important;
  font-weight: 800;
}
[data-theme="dark"] .footer-col-head::before {
  background: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

/* Menü Linkleri: Temiz, şık Slate-400 ve hover'da parlayan neon renk */
[data-theme="dark"] .footer-links-unstyled a {
  color: #94a3b8 !important;
}
[data-theme="dark"] .footer-links-unstyled a:hover {
  color: #00f0ff !important;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
  transform: translateX(4px);
}

/* Popüler Kanallar: Tek renk boğuculuğunu kıran canlı kanal etiketleri */
[data-theme="dark"] .footer-channel-tag {
  color: #00f0ff !important; /* Siber Neon Cyan */
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}
[data-theme="dark"] .footer-channel-sub {
  color: #64748b !important; /* Muted Slate-500 ikincil metin */
}
[data-theme="dark"] .footer-channel-link:hover .footer-channel-tag {
  color: #ffffff !important;
  text-shadow: 0 0 12px #00f0ff;
}
[data-theme="dark"] .footer-channel-link:hover .footer-channel-sub {
  color: #cbd5e1 !important;
}

/* Sunucu Kutusu: Koyu temaya özel yüksek kontrast ve renk ayrımı */
[data-theme="dark"] .footer-server-box {
  background: rgba(13, 18, 32, 0.8) !important;
  border: 1px solid rgba(0, 240, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .footer-server-label {
  color: #64748b !important;
}
[data-theme="dark"] .footer-server-val-warning {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}
[data-theme="dark"] .footer-server-val-success {
  color: #10b981 !important;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

/* Güvenlik Kutusu */
[data-theme="dark"] .footer-security-card {
  background: rgba(13, 18, 32, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .footer-security-item {
  color: #64748b !important;
}
[data-theme="dark"] .footer-security-item span {
  color: #94a3b8 !important;
}

/* Alt Telif Barı */
[data-theme="dark"] .footer-bottom-bar {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: #64748b !important;
}
[data-theme="dark"] .footer-copyright strong {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .footer-dev-badge {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #64748b !important;
}
/* ==========================================================================
   mIRC İndirme Bilgilendirme Kutusu
   ========================================================================== */
.mirc-download-notice {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.mirc-download-notice .notice-title {
  color: #d97706;
}
.mirc-download-notice .notice-text {
  color: #475569;
  line-height: 1.6;
}
.mirc-download-notice .notice-link {
  color: #e11d48;
  font-weight: 600;
  text-decoration: underline;
}

/* Koyu Tema: Koyu obsidian zemin, net altın sarısı başlık ve açık gri okunabilir metin */
[data-theme="dark"] .mirc-download-notice {
  background: rgba(13, 18, 32, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .mirc-download-notice .notice-title {
  color: #fbbf24 !important; /* Koyu temada yüksek kontrastlı altın sarısı */
}
[data-theme="dark"] .mirc-download-notice .notice-text {
  color: #cbd5e1 !important; /* Koyu temada net ve rahat okunabilir açık gri */
}
[data-theme="dark"] .mirc-download-notice .notice-link {
  color: #00f0ff !important; /* Parlak cyan link */
}

/* ==========================================================================
   13. Mobil Duyarlılık (Responsive Media Queries)
   ========================================================================== */
@media (max-width: 992px) {
  .bespoke-hero-section {
    padding: 40px 0 60px;
  }
  .connect-studio-card {
    padding: 28px 20px;
    margin-bottom: 40px;
  }
  .channel-chips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-headline {
    font-size: 1.8rem;
  }
}

@media (max-width: 576px) {
  .bespoke-header {
    padding: 10px 0;
  }
  .bespoke-topbar {
    padding: 6px 0;
    font-size: 0.78rem;
  }
  .brand-logo-wrap {
    gap: 8px;
  }
  .brand-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    padding: 5px;
  }
  .brand-icon-box .brand-mirc-logo {
    width: 20px;
    height: 20px;
  }
  .brand-text-main {
    font-size: 1.12rem;
    letter-spacing: -0.3px;
  }
  .brand-badge-domain {
    font-size: 0.6rem;
    padding: 2px 5px;
    margin-left: 3px;
  }
  .theme-toggle-btn {
    width: 36px;
    height: 36px;
  }
  .mobile-menu-toggle-btn {
    width: 36px;
    height: 36px;
  }
  .btn-header-cta {
    padding: 7px 14px;
    font-size: 0.82rem;
    border-radius: 20px;
    gap: 5px;
  }
  .channel-chips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .studio-main-heading {
    font-size: 1.45rem;
  }
  .bento-card {
    padding: 24px;
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Blog Yazı Sayfası — Sticky Sohbet Giriş Bandı (Header Altı)
   ========================================================================== */

/* Bantın kendisi: header sticky olduğu için top değeri header yüksekliğiyle eşleşmeli */
.blog-chat-sticky-band {
  position: sticky;
  top: 58px;           /* bespoke-header yüksekliği (~58px) */
  z-index: 1010;       /* header'ın (1020) altında kalır */
  background: var(--header-gradient);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .blog-chat-sticky-band {
  background: linear-gradient(90deg, #090d16 0%, #131a2c 50%, #090d16 100%);
  border-bottom: 1px solid rgba(225, 29, 72, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* Form içi: yatay, tek satır, ince */
.blog-sticky-form {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

/* Sol: canlı rozet ve metin */
.blog-sticky-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.blog-sticky-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sağ: input + buton grubu - kalan tüm alanı doldurur */
.blog-sticky-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Input sarmalayıcı - esner */
.blog-sticky-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 0 12px;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.blog-sticky-input-wrap:focus-within {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}

.blog-sticky-icon {
  font-size: 0.82rem;
  opacity: 0.65;
  flex-shrink: 0;
}

.blog-sticky-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 7px 0;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.blog-sticky-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 400;
}

/* Gönder butonu */
.blog-sticky-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--amber-gradient);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 7px 16px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(217, 119, 6, 0.4);
  transition: all 0.22s ease;
  font-family: var(--font-sans);
}

.blog-sticky-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.55);
}

/* Mobil: input genişletilir, label zaten d-none d-sm-flex ile gizli */
@media (max-width: 575.98px) {
  .blog-sticky-form {
    gap: 8px;
    padding: 7px 12px;
  }

  .blog-sticky-input {
    width: 110px;
  }

  .blog-sticky-btn {
    padding: 7px 12px;
    font-size: 0.78rem;
    gap: 4px;
  }
}

/* ==========================================================================
   Blog Yazı Sayfası — Masaüstü Sohbet Giriş Kartı
   ========================================================================== */
.blog-desktop-chat-card {
  background: var(--header-gradient);
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(190, 18, 60, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

[data-theme="dark"] .blog-desktop-chat-card {
  background: linear-gradient(135deg, #0f1524 0%, #131a2c 50%, #1a0a26 100%);
  border-color: rgba(225, 29, 72, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(225, 29, 72, 0.1);
}

.blog-desktop-chat-form {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 32px;
}

/* Sol: başlık alanı */
.blog-desktop-chat-info {
  flex: 0 0 220px;
  min-width: 0;
}

.blog-desktop-chat-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px;
  line-height: 1.3;
}

.blog-desktop-chat-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.4;
}

/* Orta & Sağ: input alanları ve buton tek satırda */
.blog-desktop-chat-fields {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.blog-desktop-field-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.blog-desktop-btn-wrap {
  flex: 0 0 auto;
}

.blog-desktop-field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.text-opacity {
  opacity: 0.6;
  text-transform: none;
  font-weight: 400;
}

.blog-desktop-input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 0 14px;
  gap: 8px;
  height: 48px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.blog-desktop-input-group:focus-within {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}

.blog-desktop-input-icon {
  font-size: 0.88rem;
  opacity: 0.6;
  flex-shrink: 0;
}

.blog-desktop-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 0;
  width: 100%;
  min-width: 0;
}

.blog-desktop-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
}

.blog-desktop-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--amber-gradient);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.9rem;
  height: 48px;
  padding: 0 28px;
  box-sizing: border-box;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
  transition: all 0.22s ease;
  font-family: var(--font-sans);
  letter-spacing: 0.3px;
}

.blog-desktop-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.55);
}

/* -----------------------------------------------------------------------
   mIRC İndir Sayfası: Kısayol Tablosu Şeffaf Tasarım
   ----------------------------------------------------------------------- */
.mirc-shortcuts-table {
  --bs-table-bg: transparent !important;
  background-color: transparent !important;
  color: #cbd5e1 !important;
  border-collapse: separate;
  border-spacing: 0;
}
.mirc-shortcuts-table th,
.mirc-shortcuts-table td {
  background-color: transparent !important;
  padding: 0.75rem 0.6rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  vertical-align: middle;
}
.mirc-shortcuts-table thead th {
  color: #94a3b8 !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.mirc-shortcuts-table tbody tr:last-child td {
  border-bottom: none !important;
}
.mirc-shortcuts-table tbody tr {
  transition: background-color 0.15s ease;
}
.mirc-shortcuts-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.035) !important;
  color: #ffffff !important;
}
.mirc-shortcuts-table code {
  background: rgba(247, 37, 133, 0.12);
  color: #f72585;
  border: 1px solid rgba(247, 37, 133, 0.3);
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: monospace;
}