/* ============================================================
   PUBLIC LAYOUT FIX — hanya web publik (index, dll.)
   - Konten tidak ketutup header fixed
   - Padding atas proporsional HP / tablet / laptop
   - Animasi jaringan dekoratif (bukan portal & admin)
   ============================================================ */

/* Nonaktifkan rule lama .navbar fixed jika ada di dalam site-header */
body:not(.mhs-portal-body):not(.admin-body) .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}

body:not(.mhs-portal-body):not(.admin-body) .site-header .navbar,
body:not(.mhs-portal-body) .site-header .navbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

/* Tinggi header diukur JS → --site-header-h; fallback aman */
body:not(.mhs-portal-body):not(.admin-body) {
  --site-header-h: 112px;
}

body:not(.mhs-portal-body):not(.admin-body) .main-content {
  padding-top: calc(var(--site-header-h, 112px) + 12px) !important;
  scroll-margin-top: calc(var(--site-header-h, 112px) + 8px);
}

body:not(.mhs-portal-body):not(.admin-body) .page-view,
body:not(.mhs-portal-body):not(.admin-body) .hero,
body:not(.mhs-portal-body):not(.admin-body) .live-strip,
body:not(.mhs-portal-body):not(.admin-body) .section-header {
  scroll-margin-top: calc(var(--site-header-h, 112px) + 12px);
}

html {
  scroll-padding-top: calc(var(--site-header-h, 112px) + 12px);
}

/* Saat announce disembunyikan */
body:not(.mhs-portal-body):has(.site-announce.is-hidden),
body:not(.mhs-portal-body):has(.site-announce[hidden]) {
  --site-header-h: 64px;
}

/* ---- Breakpoints: fallback jika JS belum jalan ---- */
@media (max-width: 640px) {
  body:not(.mhs-portal-body):not(.admin-body) {
    --site-header-h: 118px;
  }
  body:not(.mhs-portal-body):has(.site-announce.is-hidden) {
    --site-header-h: 56px;
  }
  body:not(.mhs-portal-body) .main-content {
    padding-top: calc(var(--site-header-h, 118px) + 10px) !important;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  body:not(.mhs-portal-body) .site-announce-inner {
    padding: 7px 12px !important;
    min-height: 0 !important;
  }
  body:not(.mhs-portal-body) .site-announce {
    font-size: 11.5px !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  body:not(.mhs-portal-body):not(.admin-body) {
    --site-header-h: 108px;
  }
  body:not(.mhs-portal-body):has(.site-announce.is-hidden) {
    --site-header-h: 60px;
  }
  body:not(.mhs-portal-body) .main-content {
    padding-top: calc(var(--site-header-h, 108px) + 12px) !important;
  }
}

@media (min-width: 1024px) {
  body:not(.mhs-portal-body):not(.admin-body) {
    --site-header-h: 104px;
  }
  body:not(.mhs-portal-body):has(.site-announce.is-hidden) {
    --site-header-h: 64px;
  }
}

/* Cegah konten horizontal overflow di publik */
body:not(.mhs-portal-body):not(.admin-body) {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ============================================================
   Animasi jaringan — HANYA publik
   ============================================================ */

body:not(.mhs-portal-body):not(.admin-body) .net-canvas-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.mhs-portal-body):not(.admin-body) .site-header,
body:not(.mhs-portal-body):not(.admin-body) .main-content,
body:not(.mhs-portal-body):not(.admin-body) footer,
body:not(.mhs-portal-body):not(.admin-body) .site-loader {
  position: relative;
  z-index: 1;
}
body:not(.mhs-portal-body):not(.admin-body) .site-header {
  z-index: 1000 !important;
}

/* Node mesh CSS (ringan, tanpa canvas jika reduced-motion) */
body:not(.mhs-portal-body):not(.admin-body) .net-mesh {
  position: absolute;
  inset: -10% -5%;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.07) 0 1.5px, transparent 2px),
    radial-gradient(circle at 30% 60%, rgba(196, 30, 58, 0.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 55% 25%, rgba(37, 99, 235, 0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 70%, rgba(13, 148, 136, 0.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 90% 40%, rgba(37, 99, 235, 0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 85%, rgba(196, 30, 58, 0.05) 0 1px, transparent 2px);
  background-size: 100% 100%;
  animation: netMeshDrift 28s ease-in-out infinite;
  opacity: 0.9;
}

[data-theme="dark"] body:not(.mhs-portal-body) .net-mesh,
body:not(.mhs-portal-body)[data-theme="dark"] .net-mesh {
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(96, 165, 250, 0.12) 0 1.5px, transparent 2px),
    radial-gradient(circle at 30% 60%, rgba(248, 113, 113, 0.08) 0 1.5px, transparent 2px),
    radial-gradient(circle at 55% 25%, rgba(96, 165, 250, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 70%, rgba(45, 212, 191, 0.08) 0 1.5px, transparent 2px),
    radial-gradient(circle at 90% 40%, rgba(96, 165, 250, 0.08) 0 1px, transparent 2px);
}

@keyframes netMeshDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-12px, 8px); }
}

/* Garis koneksi halus */
body:not(.mhs-portal-body):not(.admin-body) .net-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(37, 99, 235, 0.04) 50%, transparent 60%),
    linear-gradient(245deg, transparent 35%, rgba(196, 30, 58, 0.03) 48%, transparent 58%);
  background-size: 200% 200%;
  animation: netLinesShift 18s linear infinite;
  opacity: 0.8;
}

@keyframes netLinesShift {
  0% { background-position: 0% 50%, 100% 50%; }
  100% { background-position: 100% 50%, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.mhs-portal-body) .net-mesh,
  body:not(.mhs-portal-body) .net-lines {
    animation: none !important;
  }
}

/* Jangan ganggu portal & admin */
body.mhs-portal-body .net-canvas-layer,
body.admin-body .net-canvas-layer,
.admin-shell ~ .net-canvas-layer {
  display: none !important;
}

/* ============================================================
   Jaringan LEBIH TEBAL & KELIHATAN (publik only)
   ============================================================ */

body:not(.mhs-portal-body):not(.admin-body) .net-mesh {
  opacity: 1 !important;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(37, 99, 235, 0.22) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 22% 55%, rgba(196, 30, 58, 0.18) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 40% 28%, rgba(37, 99, 235, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 72%, rgba(13, 148, 136, 0.18) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 72% 22%, rgba(37, 99, 235, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 48%, rgba(196, 30, 58, 0.15) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 15% 82%, rgba(37, 99, 235, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 45%, rgba(99, 102, 241, 0.12) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 65% 12%, rgba(14, 165, 233, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 80%, rgba(37, 99, 235, 0.12) 0 2px, transparent 3px) !important;
  filter: drop-shadow(0 0 1px rgba(37, 99, 235, 0.15));
}

body:not(.mhs-portal-body):not(.admin-body) .net-lines {
  opacity: 1 !important;
  background:
    linear-gradient(115deg, transparent 38%, rgba(37, 99, 235, 0.12) 50%, transparent 62%),
    linear-gradient(245deg, transparent 32%, rgba(196, 30, 58, 0.1) 48%, transparent 60%),
    linear-gradient(30deg, transparent 45%, rgba(13, 148, 136, 0.08) 52%, transparent 58%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 48px,
      rgba(37, 99, 235, 0.04) 48px,
      rgba(37, 99, 235, 0.04) 49px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 48px,
      rgba(37, 99, 235, 0.03) 48px,
      rgba(37, 99, 235, 0.03) 49px
    ) !important;
  background-size: 200% 200%, 200% 200%, 180% 180%, 100% 100%, 100% 100% !important;
}

[data-theme="dark"] body:not(.mhs-portal-body) .net-mesh,
body:not(.mhs-portal-body)[data-theme="dark"] .net-mesh {
  opacity: 0.95 !important;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(96, 165, 250, 0.35) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 22% 55%, rgba(248, 113, 113, 0.25) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 40% 28%, rgba(96, 165, 250, 0.3) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 72%, rgba(45, 212, 191, 0.22) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 72% 22%, rgba(147, 197, 253, 0.28) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 48%, rgba(252, 165, 165, 0.2) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 15% 82%, rgba(96, 165, 250, 0.25) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 45%, rgba(129, 140, 248, 0.22) 0 1.5px, transparent 2.5px) !important;
}

[data-theme="dark"] body:not(.mhs-portal-body) .net-lines {
  opacity: 0.9 !important;
  background:
    linear-gradient(115deg, transparent 38%, rgba(96, 165, 250, 0.16) 50%, transparent 62%),
    linear-gradient(245deg, transparent 32%, rgba(248, 113, 113, 0.12) 48%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0, transparent 44px, rgba(96, 165, 250, 0.06) 44px, rgba(96, 165, 250, 0.06) 45px),
    repeating-linear-gradient(0deg, transparent 0, transparent 44px, rgba(96, 165, 250, 0.05) 44px, rgba(96, 165, 250, 0.05) 45px) !important;
}

/* Rapikan jarak header → hero (HP/tablet) */
body:not(.mhs-portal-body):not(.admin-body) .main-content {
  padding-top: calc(var(--site-header-h, 107px) + 4px) !important;
}

body:not(.mhs-portal-body) .hero {
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  body:not(.mhs-portal-body):not(.admin-body) .main-content {
    padding-top: calc(var(--site-header-h, 107px) + 2px) !important;
  }
  body:not(.mhs-portal-body) .hero {
    margin-top: 0 !important;
    border-radius: 16px 16px 18px 18px !important;
  }
  body:not(.mhs-portal-body) .container.main-content,
  body:not(.mhs-portal-body) .main-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Jaringan LEBIH KELIHATAN di LIGHT mode */
body:not(.mhs-portal-body):not(.admin-body) .net-mesh {
  opacity: 1 !important;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(30, 64, 175, 0.35) 0 3px, transparent 4px),
    radial-gradient(circle at 22% 55%, rgba(185, 28, 28, 0.28) 0 3px, transparent 4px),
    radial-gradient(circle at 40% 28%, rgba(37, 99, 235, 0.32) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 58% 72%, rgba(15, 118, 110, 0.28) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 22%, rgba(29, 78, 216, 0.28) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 88% 48%, rgba(190, 24, 93, 0.25) 0 3px, transparent 4px),
    radial-gradient(circle at 15% 82%, rgba(37, 99, 235, 0.26) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 50% 45%, rgba(79, 70, 229, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 12%, rgba(2, 132, 199, 0.25) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 92% 80%, rgba(37, 99, 235, 0.22) 0 2.5px, transparent 3.5px) !important;
}

body:not(.mhs-portal-body):not(.admin-body) .net-lines {
  opacity: 1 !important;
  background:
    linear-gradient(115deg, transparent 36%, rgba(37, 99, 235, 0.18) 50%, transparent 64%),
    linear-gradient(245deg, transparent 30%, rgba(185, 28, 28, 0.14) 48%, transparent 62%),
    linear-gradient(30deg, transparent 42%, rgba(13, 148, 136, 0.12) 52%, transparent 60%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 40px,
      rgba(37, 99, 235, 0.07) 40px,
      rgba(37, 99, 235, 0.07) 41px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 40px,
      rgba(37, 99, 235, 0.05) 40px,
      rgba(37, 99, 235, 0.05) 41px
    ) !important;
  background-size: 200% 200%, 200% 200%, 180% 180%, 100% 100%, 100% 100% !important;
}