/*
  Schumann Resonance Live — Master Design Fix v5
  Fixes: Logo alignment, header/footer width consistency, drawer UX, mobile, overflow
  Load LAST — 20260521
*/

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL WIDTH CONSISTENCY — No overflow, no gaps
   ═══════════════════════════════════════════════════════════════ */

html, html body.sr-site {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

html body.sr-site {
  --sr-content-lane: min(78rem, calc(100% - 2.5rem));
  --sr-page-gutter: clamp(0.75rem, 2.5vw, 1.5rem);
}

@media (max-width: 767px) {
  html body.sr-site {
    --sr-content-lane: calc(100% - 1.25rem);
    --sr-page-gutter: 0.625rem;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  html body.sr-site {
    --sr-content-lane: min(72rem, calc(100% - 3rem));
  }
}

/* All content containers — same max-width */
html body.sr-site .max-w-7xl,
html body.sr-site .max-w-5xl,
html body.sr-site .max-w-4xl,
html body.sr-site .sr-lane,
html body.sr-site .sr-hero-pro__shell,
html body.sr-site .footer-premium-shell,
html body.sr-site .sr-footer-pro__container,
html body.sr-site #dashboard > .max-w-7xl,
html body.sr-site #dashboard > div:not(.card),
html body.sr-site #guide > .max-w-7xl,
html body.sr-site #guide > div {
  max-width: var(--sr-content-lane) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

/* Sections full-width with consistent padding */
html body.sr-site section[id],
html body.sr-site .sr-hero-pro.sr-aether-hero,
html body.sr-site footer.footer-premium,
html body.sr-site .sr-faq-section,
html body.sr-site .sr-seo-section,
html body.sr-site .sr-promo-strip,
html body.sr-site #dashboard,
html body.sr-site #guide,
html body.sr-site #about {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: var(--sr-page-gutter) !important;
  box-sizing: border-box !important;
}

/* Footer container matches header max-width */
html body.sr-site footer.footer-premium .sr-footer-pro__container {
  max-width: var(--sr-content-lane) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Header inner matches */
html body.sr-site .sr-vdm-inner {
  max-width: var(--sr-content-lane) !important;
  margin-inline: auto !important;
}

/* No overflow on grids */
html body.sr-site .grid {
  max-width: 100% !important;
  overflow: hidden;
}

html body.sr-site .grid > * {
  min-width: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. HEADER — Logo sol tarafa hizalı, şık ve uyumlu
   ═══════════════════════════════════════════════════════════════ */

/* Header bar — fixed, consistent */
html body.sr-site .sr-vdm-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 3.6rem !important;
  padding: 0.5rem 0.85rem !important;
  gap: 0.6rem !important;
}

/* Brand group — logo + text, flex-start (sol hizalı) */
html body.sr-site .sr-vdm-brand {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0.6rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Logo container — premium rounded square */
html body.sr-site .sr-nexus-mark {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(145deg, rgba(6, 20, 42, 0.98) 0%, rgba(2, 10, 24, 0.99) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow:
    0 0 0 2.5px rgba(56, 189, 248, 0.06),
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

html body.sr-site .sr-nexus-logo {
  width: 2.2rem !important;
  height: 2.2rem !important;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.2)) !important;
}

/* Glow ring — subtle rotating conic gradient */
html body.sr-site .sr-nexus-mark-glow {
  position: absolute !important;
  inset: -2px !important;
  border-radius: 1rem !important;
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.25),
    rgba(251, 191, 36, 0.12) 25%,
    rgba(56, 189, 248, 0.04) 50%,
    rgba(251, 191, 36, 0.12) 75%,
    rgba(56, 189, 248, 0.25)
  ) !important;
  opacity: 0.55 !important;
  animation: sr-logo-glow 10s linear infinite !important;
  z-index: -1 !important;
}

@keyframes sr-logo-glow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

html body.sr-site .sr-nexus-mark-ring {
  position: absolute !important;
  inset: -1px !important;
  border-radius: 0.95rem !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  animation: sr-logo-pulse 3s ease-in-out infinite !important;
}

@keyframes sr-logo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Brand text copy */
html body.sr-site .sr-vdm-brand-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

/* Wordmark */
html body.sr-site .sr-vdm-wordmark {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.05rem !important;
}

html body.sr-site .sr-vdm-wordmark__line {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

html body.sr-site .sr-vdm-wordmark__sch {
  font-size: clamp(0.8rem, 1.5vw, 1rem) !important;
}

html body.sr-site .sr-vdm-wordmark__rez {
  font-size: clamp(0.68rem, 1.3vw, 0.84rem) !important;
}

html body.sr-site .sr-vdm-wordmark__live {
  font-size: clamp(0.72rem, 1.35vw, 0.9rem) !important;
}

/* Live Hz badge */
html body.sr-site .sr-vdm-brand-freq {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.6rem !important;
  color: rgba(186, 230, 253, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. DRAWER (Sağ taraf açılır menü) — Daha güzel, uyumlu
   ═══════════════════════════════════════════════════════════════ */

html body.sr-site .sr-vdm-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10060 !important;
  width: min(22rem, 88vw) !important;
  height: 100dvh !important;
  padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  background: linear-gradient(180deg, rgba(4, 10, 22, 0.99) 0%, rgba(2, 6, 14, 1) 100%) !important;
  border-left: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6) !important;
  transform: translateX(105%) !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html body.sr-site .sr-vdm-drawer.is-open {
  transform: translateX(0) !important;
}

/* Drawer backdrop */
html body.sr-site .sr-vdm-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10055 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

html body.sr-site .sr-vdm-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Drawer top area */
html body.sr-site .sr-vdm-drawer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body.sr-site .sr-vdm-drawer-top .sr-nexus-mark {
  width: 2.6rem !important;
  height: 2.6rem !important;
}

html body.sr-site .sr-vdm-drawer-top .sr-nexus-logo {
  width: 1.9rem !important;
  height: 1.9rem !important;
}

/* Drawer close button */
html body.sr-site #sr-cmd-drawer-close {
  width: 2.2rem !important;
  height: 2.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.6rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

html body.sr-site #sr-cmd-drawer-close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Drawer live status */
html body.sr-site .sr-vdm-drawer-live {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.7rem 0.85rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(52, 211, 153, 0.18) !important;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.06) 0%, rgba(56, 189, 248, 0.03) 100%) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* Drawer nav links */
html body.sr-site .sr-vdm-drawer-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  flex: 1 !important;
}

html body.sr-site .sr-vdm-drawer-link {
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 0.9rem !important;
  border-radius: 0.7rem !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: rgba(240, 249, 255, 0.92) !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}

html body.sr-site .sr-vdm-drawer-link:hover {
  background: rgba(56, 189, 248, 0.06) !important;
  transform: translateX(2px) !important;
}

html body.sr-site .sr-vdm-drawer-link.is-active {
  color: #fde68a !important;
  background: rgba(251, 191, 36, 0.08) !important;
  border-left: 3px solid rgba(251, 191, 36, 0.6) !important;
}

html body.sr-site .sr-vdm-drawer-link--star {
  color: #fde68a !important;
  background: rgba(251, 191, 36, 0.04) !important;
}

/* Drawer language section */
html body.sr-site .sr-vdm-drawer-lang {
  margin-top: auto !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}

html body.sr-site .sr-vdm-drawer-lang .sr-vdm-lang-pill {
  padding: 0.4rem 0.65rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(186, 230, 253, 0.12) !important;
  background: rgba(4, 10, 22, 0.6) !important;
  color: rgba(240, 249, 255, 0.85) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

html body.sr-site .sr-vdm-drawer-lang .sr-vdm-lang-pill:hover {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

html body.sr-site .sr-vdm-drawer-lang .sr-vdm-lang-pill.is-active {
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fde68a !important;
  background: rgba(251, 191, 36, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. SPLASH SCREEN — Logo entegrasyonu (aynı logo)
   ═══════════════════════════════════════════════════════════════ */

/* Splash uses the same nexus logo mark */
#sr-splash .sr-splash-logo-mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 4.5rem !important;
  height: 4.5rem !important;
  margin: 0 auto 1rem !important;
  border-radius: 1.2rem !important;
  background: linear-gradient(145deg, rgba(6, 20, 42, 0.98) 0%, rgba(2, 10, 24, 0.99) 100%) !important;
  border: 1.5px solid rgba(45, 212, 191, 0.35) !important;
  box-shadow:
    0 0 0 4px rgba(45, 212, 191, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  animation: sr-splash-logo-breathe 3s ease-in-out infinite !important;
}

#sr-splash .sr-splash-logo-mark svg {
  width: 3.2rem !important;
  height: 3.2rem !important;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.3)) !important;
}

@keyframes sr-splash-logo-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(45,212,191,0.08), 0 12px 40px rgba(0,0,0,0.5); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(45,212,191,0.12), 0 16px 52px rgba(0,0,0,0.55); }
}

/* ═══════════════════════════════════════════════════════════════
   5. MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Header mobile */
  html body.sr-site .sr-vdm-bar {
    min-height: 3.2rem !important;
    padding: 0.4rem 0.65rem !important;
    border-radius: 0.85rem !important;
    gap: 0.4rem !important;
  }

  html body.sr-site .sr-nexus-mark {
    width: 2.6rem !important;
    height: 2.6rem !important;
    border-radius: 0.75rem !important;
  }

  html body.sr-site .sr-nexus-logo {
    width: 1.9rem !important;
    height: 1.9rem !important;
  }

  html body.sr-site .sr-vdm-brand {
    gap: 0.4rem !important;
    max-width: calc(100% - 6rem) !important;
  }

  html body.sr-site .sr-vdm-brand-freq {
    display: none !important;
  }

  html body.sr-site .sr-vdm-wordmark__wave {
    display: none !important;
  }

  /* Content sections mobile */
  html body.sr-site section[id],
  html body.sr-site .sr-hero-pro.sr-aether-hero,
  html body.sr-site footer.footer-premium,
  html body.sr-site #dashboard {
    padding-inline: 0.625rem !important;
  }

  /* Cards mobile */
  html body.sr-site .card {
    border-radius: 0.85rem !important;
  }

  /* Footer mobile */
  html body.sr-site .sr-footer-pro__matrix {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  html body.sr-site .sr-footer-pro__mast {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  html body.sr-site .sr-footer-pro__brand {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  html body.sr-site .sr-footer-pro__logo {
    width: 2.5rem !important;
    height: 2.5rem !important;
    flex-shrink: 0 !important;
  }

  html body.sr-site .sr-footer-pro__title {
    font-size: 1rem !important;
  }

  /* Grid mobile fixes */
  html body.sr-site .grid.grid-cols-2 {
    gap: 0.65rem !important;
  }

  html body.sr-site #solar.grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  html body.sr-site #solar .card {
    padding: 0.85rem !important;
  }

  html body.sr-site #solar .text-3xl {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  html body.sr-site .sr-nexus-mark {
    width: 2.4rem !important;
    height: 2.4rem !important;
  }

  html body.sr-site .sr-nexus-logo {
    width: 1.7rem !important;
    height: 1.7rem !important;
  }

  html body.sr-site .sr-vdm-wordmark__sch {
    font-size: 0.7rem !important;
  }

  html body.sr-site .sr-vdm-wordmark__rez,
  html body.sr-site .sr-vdm-wordmark__live {
    font-size: 0.62rem !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  html body.sr-site .sr-nexus-mark {
    width: 2.85rem !important;
    height: 2.85rem !important;
  }

  html body.sr-site .sr-nexus-logo {
    width: 2.1rem !important;
    height: 2.1rem !important;
  }

  html body.sr-site .sr-footer-pro__matrix {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Desktop large */
@media (min-width: 1280px) {
  html body.sr-site .sr-nexus-mark {
    width: 3.3rem !important;
    height: 3.3rem !important;
    border-radius: 1rem !important;
  }

  html body.sr-site .sr-nexus-logo {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   6. FOOTER — Width alignment, consistency with header
   ═══════════════════════════════════════════════════════════════ */

html body.sr-site footer.footer-premium.sr-footer-pro {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

html body.sr-site .sr-footer-pro__ridge {
  width: 100% !important;
  overflow: hidden !important;
}

html body.sr-site .sr-footer-pro__ridge svg {
  width: 100% !important;
  display: block !important;
}

/* Footer brand area with logo */
html body.sr-site .sr-footer-pro__brand {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

html body.sr-site .sr-footer-pro__logo {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  height: 3rem !important;
  flex-shrink: 0 !important;
}

html body.sr-site .sr-footer-pro__logo .sr-brand-icon-wrap {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.sr-site .sr-footer-pro__logo .sr-brand-logo {
  width: 2.8rem !important;
  height: 2.8rem !important;
}

/* Footer bottom line */
html body.sr-site .sr-footer-pro__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 1.25rem !important;
  margin-top: 2rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. LANGUAGE DROPDOWN (Header) — Daha güzel
   ═══════════════════════════════════════════════════════════════ */

html body.sr-site .sr-vdm-lang-menu {
  position: absolute !important;
  top: calc(100% + 0.5rem) !important;
  right: 0 !important;
  z-index: 10070 !important;
  min-width: 9.5rem !important;
  padding: 0.5rem !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(180deg, rgba(8, 16, 32, 0.99) 0%, rgba(4, 10, 22, 1) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

html body.sr-site .sr-vdm-lang-opt {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.5rem 0.65rem !important;
  border-radius: 0.55rem !important;
  border: none !important;
  background: transparent !important;
  color: rgba(240, 249, 255, 0.85) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

html body.sr-site .sr-vdm-lang-opt:hover {
  background: rgba(56, 189, 248, 0.08) !important;
}

html body.sr-site .sr-vdm-lang-opt.is-active {
  background: rgba(251, 191, 36, 0.08) !important;
  color: #fde68a !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. OVERFLOW PREVENTION — Her yerde kontrol
   ═══════════════════════════════════════════════════════════════ */

html body.sr-site *:not(script):not(style) {
  max-width: 100%;
}

html body.sr-site img,
html body.sr-site video,
html body.sr-site canvas,
html body.sr-site svg:not([class*="sr-vdm-wave"]):not([class*="sr-brand"]):not([class*="sr-nexus"]):not([class*="sr-footer"]):not(.sr-footer-flag-svg) {
  max-width: 100% !important;
  height: auto;
}

html body.sr-site .spectro-container img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Prevent horizontal scroll from any absolute/fixed positioned elements */
html body.sr-site .sr-vdm-meridian,
html body.sr-site .sr-scroll-cosmos-hint {
  max-width: 100vw !important;
  overflow: hidden !important;
}