/* ================================================================
   RADYO MODA V2.9.3 — PREMIUM HEADER & NAV REDESIGN
   header-v293.css
   ================================================================
   Kural: Yalnızca topbar, header, nav stillerini override eder.
   Player, portal, içerik, router stillerine dokunmaz.
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Custom Properties (V2.9.3 ek değişkenler)
   ---------------------------------------------------------------- */
.rm-v27 {
  --v293-header-height: 140px;
  --v293-nav-height: 52px;
  --v293-topbar-height: 36px;
  --v293-logo-max: 280px;
  --v293-accent: #c8102e;
  --v293-accent-deep: #8f0d22;
  --v293-header-text: #1a1a2e;
  --v293-nav-bg: #8f0d22;
  --v293-nav-gradient: linear-gradient(90deg, #7a0b1e 0%, #c8102e 50%, #7a0b1e 100%);
}

/* ================================================================
   TOPBAR  — koyu şerit, sosyal ikonlar
   ================================================================ */
.rm-v27 .rm-topbar {
  background: #0d0d1a !important;
  border-bottom: 1px solid rgba(200, 16, 46, 0.35) !important;
  padding: 0 1.75rem !important;
  height: var(--v293-topbar-height);
  font-size: 0.76rem !important;
  color: rgba(255,255,255,0.58) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 100;
}

.rm-v27 .rm-topbar-loc {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  font-weight: 600 !important;
}

.rm-v27 .rm-topbar-loc .rm-dot {
  width: 7px !important; height: 7px !important;
  background: var(--v293-accent) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(200,16,46,0.7);
  animation: rm-pulse-dot 1.6s ease-in-out infinite !important;
  flex-shrink: 0;
}

.rm-v27 .rm-topbar-social {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.rm-v27 .rm-topbar-social a {
  color: rgba(255,255,255,0.5) !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  transition: color 0.2s, background 0.2s, transform 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important;
}
.rm-v27 .rm-topbar-social a:hover {
  color: #fff !important;
  background: rgba(200,16,46,0.25) !important;
  transform: translateY(-1px);
}

/* ================================================================
   HEADER — Yeni arka plan görseli ile Premium Brand Area
   ================================================================ */
.rm-v27 .rm-header {
  /* Yeni header banner görseli */
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.72) 0%,
      rgba(255,255,255,0.42) 20%,
      rgba(255,255,255,0.18) 40%,
      rgba(255,255,255,0.18) 60%,
      rgba(255,255,255,0.42) 80%,
      rgba(255,255,255,0.72) 100%
    ),
    url('../images/header/radyo-moda-header-background-v30.png') center center / cover no-repeat !important;
  border-bottom: 3px solid var(--v293-accent) !important;
  padding: 0 !important;
  min-height: var(--v293-header-height);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 32px rgba(143,13,34,0.18);
}

/* ::before overlay kaldır — arka plan resmi zaten düzgün */
.rm-v27 .rm-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: none !important;
  pointer-events: none !important;
}

/* Brand row — dikey ortalama */
.rm-v27 .rm-brand-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3rem !important;
  position: relative !important;
  z-index: 2 !important;
  padding: 1.25rem 2rem !important;
  width: 100% !important;
}

/* Logo */
.rm-v27 .rm-logo-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.rm-v27 .rm-logo-wrap img {
  width: clamp(180px, 20vw, var(--v293-logo-max)) !important;
  height: auto !important;
  /* Görsel açık zemin üzerinde — hafif gölge yeterli */
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.22)) !important;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.rm-v27 .rm-logo-wrap img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 18px rgba(143,13,34,0.35)) !important;
}

/* Tagline & sub — açık arka plan üzerinde koyu metin */
.rm-v27 .rm-brand-titles {
  margin-top: 0.15rem !important;
  text-align: center;
}
.rm-v27 .rm-brand-tagline {
  font-size: clamp(0.82rem, 1.4vw, 1.0rem) !important;
  font-weight: 800 !important;
  /* Açık arka planda okunabilir koyu renk */
  color: #1a1a2e !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.rm-v27 .rm-brand-sub {
  font-size: clamp(0.68rem, 1.1vw, 0.8rem) !important;
  color: var(--v293-accent) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-top: 0.12rem !important;
  text-shadow: none !important;
}

/* Sound Waves — açık zemin üzerinde kırmızı-mavi kontrast sağlar */
.rm-v27 .rm-soundwaves {
  display: flex !important;
  align-items: flex-end !important;
  gap: 4px !important;
  height: 60px !important;
}
.rm-v27 .rm-soundwaves span {
  display: block !important;
  width: 5px !important;
  border-radius: 3px !important;
  animation: rm-wave 1.4s ease-in-out infinite !important;
  opacity: 0.85;
}

/* Sol dalgalar: kırmızı & mavi (görsel sol dalgalara uygun) */
.rm-v27 .rm-soundwaves.left span:nth-child(1) { height: 22px; animation-delay: 0s;    background: #7a9ecf; }
.rm-v27 .rm-soundwaves.left span:nth-child(2) { height: 40px; animation-delay: 0.15s; background: var(--v293-accent); }
.rm-v27 .rm-soundwaves.left span:nth-child(3) { height: 56px; animation-delay: 0.3s;  background: #5577bb; }
.rm-v27 .rm-soundwaves.left span:nth-child(4) { height: 34px; animation-delay: 0.45s; background: var(--v293-accent); }
.rm-v27 .rm-soundwaves.left span:nth-child(5) { height: 18px; animation-delay: 0.6s;  background: #8aabda; }

/* Sağ dalgalar: simetrik */
.rm-v27 .rm-soundwaves.right span:nth-child(1) { height: 18px; animation-delay: 0.6s;  background: #8aabda; }
.rm-v27 .rm-soundwaves.right span:nth-child(2) { height: 34px; animation-delay: 0.45s; background: var(--v293-accent); }
.rm-v27 .rm-soundwaves.right span:nth-child(3) { height: 56px; animation-delay: 0.3s;  background: #5577bb; }
.rm-v27 .rm-soundwaves.right span:nth-child(4) { height: 40px; animation-delay: 0.15s; background: var(--v293-accent); }
.rm-v27 .rm-soundwaves.right span:nth-child(5) { height: 22px; animation-delay: 0s;    background: #7a9ecf; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rm-v27 .rm-soundwaves span { animation: none !important; height: 30px !important; }
}

/* ================================================================
   NAVIGATION — Yapı korunuyor, görsel iyileştirmeler
   ================================================================ */
.rm-v27 .rm-nav {
  background: var(--v293-nav-gradient) !important;
  border-bottom: 2px solid rgba(0,0,0,0.35) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  box-shadow: 0 3px 18px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  backdrop-filter: blur(0px);
}

.rm-v27 .rm-nav-inner {
  max-width: 1520px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.rm-v27 .rm-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

.rm-v27 .rm-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 0.38rem !important;
  padding: 0.82rem 0.9rem !important;
  font-size: 0.79rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  transition: background 0.22s, color 0.22s, border-color 0.22s !important;
  border-bottom: 3px solid transparent !important;
  position: relative;
}

.rm-v27 .rm-menu li a i {
  font-size: 0.78rem;
  opacity: 0.85;
}

.rm-v27 .rm-menu li a:hover,
.rm-v27 .rm-menu li a.active {
  background: rgba(0,0,0,0.2) !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.75) !important;
}

.rm-v27 .rm-menu li a.rm-player-link {
  background: rgba(255,255,255,0.14) !important;
  border-radius: 7px !important;
  margin: 0.28rem 0.45rem !important;
  padding: 0.42rem 0.85rem !important;
  border-bottom: none !important;
  font-size: 0.74rem !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.rm-v27 .rm-menu li a.rm-player-link:hover {
  background: rgba(255,255,255,0.24) !important;
  border-bottom: none !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

/* Hamburger */
.rm-v27 .rm-hamburger {
  display: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.rm-v27 .rm-hamburger span {
  display: block !important;
  width: 24px !important; height: 2px !important;
  background: #fff !important;
  border-radius: 2px !important;
  transition: all 0.3s !important;
}

/* ================================================================
   RESPONSIVE — Tablet ve Mobil
   ================================================================ */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .rm-v27 .rm-brand-row {
    gap: 2rem !important;
  }
  .rm-v27 .rm-menu li a {
    padding: 0.78rem 0.7rem !important;
    font-size: 0.75rem !important;
  }
}

/* Mobil (≤768px) */
@media (max-width: 768px) {
  .rm-v27 .rm-header {
    min-height: 100px;
  }
  .rm-v27 .rm-brand-row {
    flex-direction: row !important;
    gap: 1rem !important;
    padding: 1rem !important;
    justify-content: center !important;
  }
  .rm-v27 .rm-soundwaves {
    display: none !important;
  }
  .rm-v27 .rm-logo-wrap img {
    width: clamp(140px, 40vw, 220px) !important;
  }
  .rm-v27 .rm-brand-tagline {
    font-size: 0.78rem !important;
  }
  .rm-v27 .rm-brand-sub {
    font-size: 0.65rem !important;
  }
  .rm-v27 .rm-topbar {
    padding: 0 1rem !important;
    font-size: 0.7rem !important;
  }
  .rm-v27 .rm-hamburger {
    display: flex !important;
  }
  .rm-v27 .rm-menu {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: var(--v293-nav-height) !important;
    left: 0 !important; right: 0 !important;
    background: #7a0b1e !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    z-index: 300 !important;
  }
  .rm-v27 .rm-menu.rm-menu-open {
    display: flex !important;
  }
  .rm-v27 .rm-menu li {
    width: 100%;
  }
  .rm-v27 .rm-menu li a {
    padding: 0.9rem 1.5rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 0.82rem !important;
  }
  .rm-v27 .rm-menu li a:hover,
  .rm-v27 .rm-menu li a.active {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(0,0,0,0.25) !important;
  }
  .rm-v27 .rm-menu li a.rm-player-link {
    margin: 0.4rem 1rem !important;
    padding: 0.6rem 1rem !important;
  }
}

/* Küçük mobil (≤480px) */
@media (max-width: 480px) {
  .rm-v27 .rm-topbar-loc { font-size: 0.68rem; }
  .rm-v27 .rm-topbar-social a { width: 24px !important; height: 24px !important; font-size: 0.78rem !important; }
}