/*
  Layout lock — ABSOLUTE FINAL override.
  Guarantees:
  1. All max-w-* containers are centered horizontally
  2. No element overflows its parent
  3. No horizontal scrollbar anywhere
  4. Consistent page-gutter padding on all sections
  5. Everything works on 320px – 2560px screens
*/

/* ── Base reset ── */
html {
  overflow-x: clip !important;
  scrollbar-gutter: stable;
  max-width: 100% !important;
}

html body.sr-site,
body.sr-site {
  overflow-x: clip !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Site wrapper ── */
body.sr-site .site-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 92rem !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}

/* ── All sections full width ── */
body.sr-site section[id],
body.sr-site .footer-premium {
  width: 100% !important;
  max-width: 92rem !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  clear: both !important;
}

/* ── Tokens ── */
body.sr-site,
body.sr-site.sr-flagship {
  --sr-page-gutter: clamp(0.75rem, 2vw, 1.25rem);
  --sr-lane-wide: min(92rem, 100%);
  --sr-vdm-max: min(92rem, 100%);
  --sr-section-y: clamp(2.25rem, 5vw, 3.75rem);
  --sr-section-y-tight: clamp(1.25rem, 3.5vw, 2rem);
}

/* ── Section gutter ── */
body.sr-site .sr-hero-pro.sr-aether-hero,
body.sr-site #dashboard,
body.sr-site .sr-promo-strip,
body.sr-site .sr-seo-section,
body.sr-site #guide,
body.sr-site .sr-faq-section,
body.sr-site .footer-premium {
  padding-left: var(--sr-page-gutter) !important;
  padding-right: var(--sr-page-gutter) !important;
}

/* ── EVERY inner container: centered, no extra padding ── */
body.sr-site .sr-lane,
body.sr-site .sr-hero-pro__shell,
body.sr-site .sr-promo-strip__inner,
body.sr-site .sr-footer-pro__container,
body.sr-site .footer-premium > .max-w-7xl,
body.sr-site #dashboard > .max-w-7xl,
body.sr-site #dashboard > div,
body.sr-site #guide > .max-w-7xl,
body.sr-site #guide > div,
body.sr-site .sr-seo-inner,
body.sr-site #about > .max-w-7xl,
body.sr-site #about > div,
body.sr-site .sr-faq-list,
body.sr-site .max-w-7xl,
body.sr-site .max-w-5xl,
body.sr-site .max-w-4xl,
body.sr-site .max-w-3xl {
  width: 100% !important;
  max-width: 92rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  display: block !important;
}

/* ── Header inner — flex koru, sadece genişlik/ortalama ── */
body.sr-site .sr-vdm-inner {
  width: 100% !important;
  max-width: 92rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--sr-page-gutter) !important;
  padding-right: var(--sr-page-gutter) !important;
  box-sizing: border-box !important;
}

/* ── Section rhythm ── */
body.sr-site #dashboard,
body.sr-flagship #dashboard,
html body.sr-site #dashboard {
  padding-top: var(--sr-section-y-tight) !important;
  padding-bottom: var(--sr-section-y) !important;
  margin-top: 0 !important;
}

body.sr-site .sr-seo-section,
body.sr-site #guide,
body.sr-site .sr-faq-section,
body.sr-site .footer-premium,
html body.sr-site #guide,
html body.sr-site #about {
  padding-top: var(--sr-section-y) !important;
  padding-bottom: var(--sr-section-y) !important;
}

/* ── Spectrogram ── */
body.sr-site .sr-dash-pro-spectro-stage,
body.sr-site .sr-dash-pro-spectro-viewport,
body.sr-site #spectrogram,
body.sr-site .sr-aether-dash-head {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Cards ── */
body.sr-site .card,
body.sr-site .grid,
body.sr-site .sr-dash-pro .card,
body.sr-site .sr-seo-card,
body.sr-site .sr-faq-card {
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Media ── */
body.sr-site img,
body.sr-site canvas,
body.sr-site video,
body.sr-site svg,
body.sr-site .spectro-container,
body.sr-site #main-spectro,
body.sr-site #world-solar-bg canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* ── Tabs ── */
body.sr-site .chart-tab-row,
body.sr-site .sr-dash-pro-tabs {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── FAQ ── */
body.sr-site .sr-faq-section::before,
body.sr-site .sr-faq-section::after {
  display: none !important;
}

/* ── Cosmos scroll ── */
body.sr-site .sr-scroll-scene-inner {
  min-height: auto !important;
  padding: 0 !important;
}

body.sr-site .sr-scroll-cosmos-hint {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* ── Hero ── */
body.sr-site .sr-hero-pro__shell {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  pointer-events: auto !important;
}

body.sr-site .sr-flow-section {
  transform: none !important;
  opacity: 1 !important;
}

body.sr-site .sr-hero-pro__tone-expired-bg {
  overflow: hidden;
}

body.sr-site .sr-hero-pro__tone-expired-bg span:nth-child(1) {
  left: 0 !important;
}

body.sr-site .sr-hero-pro__tone-expired-bg span:nth-child(2) {
  right: 0 !important;
}

body.sr-site .sr-hero-pro.sr-aether-hero,
body.sr-flagship .sr-hero-pro.sr-aether-hero,
html body.sr-site.sr-aether .sr-hero-pro.sr-aether-hero,
html body.sr-site.sr-aether.sr-flagship .sr-hero-pro.sr-aether-hero {
  min-height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

body.sr-site .sr-hero-pro {
  padding-block: calc(var(--sr-nav-offset, 5.85rem) + 0.35rem) 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}

body.sr-site .sr-cosmos-scroll-track {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Section orbs ── */
body.sr-site .sr-seo-section .sr-section-orb.a {
  left: 0 !important;
}

body.sr-site .sr-seo-section .sr-section-orb.b {
  right: 0 !important;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  body.sr-site {
    --sr-page-gutter: clamp(0.65rem, 3vw, 0.85rem);
    --sr-section-y: clamp(1.75rem, 5vw, 2.5rem);
    --sr-section-y-tight: clamp(1rem, 3vw, 1.5rem);
  }

  body.sr-site .sr-hero-pro {
    padding-block-start: calc(var(--sr-nav-offset, 5.85rem) + 0.25rem) !important;
  }

  body.sr-site .sr-hero-pro__shell {
    gap: 0.65rem !important;
  }

  body.sr-site .sr-hero-masthead--observatory {
    gap: 0.4rem !important;
    padding: 0.6rem 0.65rem !important;
  }

  body.sr-site .sr-hero-pro__intro--masthead .sr-hero-trust {
    margin-bottom: 0.25rem !important;
  }

  body.sr-site .sr-hero-pro__tone-readout--hero,
  body.sr-site .sr-hero-pro__apex-live .sr-hero-pro__hz {
    display: none !important;
  }

  body.sr-site .sr-hero-pro__tone {
    margin-top: 0 !important;
    padding: 0.7rem 0.65rem !important;
  }

  body.sr-site .sr-hero-pro__apex {
    gap: 0.55rem !important;
  }

  body.sr-site .sr-hero-pro__bar {
    margin-top: 0 !important;
  }

  body.sr-site .sr-cosmos-scroll-track {
    height: clamp(120px, 22dvh, 200px) !important;
    min-height: clamp(100px, 18dvh, 180px) !important;
  }

  body.sr-site:not(.sr-past-hero) .sr-scroll-cosmos-hint {
    display: none !important;
  }

  body.sr-site .sr-hero-pro__telemetry {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  body.sr-site .sr-hero-pro__tone-trial-pill {
    position: relative !important;
    z-index: 2 !important;
  }
}
