/* =====================================================================
   v73 — header sejajar menu, font menu lebih besar, dropdown, hero lebih halus,
   kartu tujuan & statistik satu tema. Dimuat paling akhir.
   ===================================================================== */

/* ---------- 1) Logo/judul kiri atas sejajar dengan menu ---------- */
@media (min-width: 769px) {
  .main-nav > .container.flex { max-width: none !important; padding: 0 20px !important; }
  .main-nav .logo-wrap { margin-left: 0; padding-left: 0; }
}
@media (min-width: 1440px) {
  .main-nav > .container.flex { padding: 0 32px !important; }
}

/* ---------- 2) Font menu sedikit lebih besar ---------- */
@media (min-width: 769px) {
  nav.primary-menu ul > li > a,
  nav.primary-menu ul > li > .nav-links-trigger {
    font-size: clamp(13px, 1.12vw, 16px);
  }
  nav.primary-menu .dropdown-content a,
  nav.primary-menu .dropdown-content .elearning-link-btn {
    font-size: 16px;
    padding: 12px 18px;
  }
  nav.primary-menu .dropdown-content { min-width: 290px; }
  nav.primary-menu .dropdown-content--right { min-width: 230px; }
}
/* tanda panah pada menu yang punya submenu */
.nav-caret, nav.primary-menu .nav-links-trigger i {
  font-size: .62em; opacity: .85; transition: transform .2s ease;
}
nav.primary-menu .dropdown.dropdown-open > a .nav-caret,
nav.primary-menu .dropdown.dropdown-open > .nav-links-trigger i { transform: rotate(180deg); }

/* ---------- 3) Garis di bawah statistik hero: putih ---------- */
.hero-stats > div::before {
  background: #fff;
  opacity: .92;
}

/* ---------- 4) Perpaduan warna hero ke section di bawahnya: lebih halus ---------- */
:root .hero .hero-grid-blur,
:root:not([data-theme="light"]) .hero .hero-grid-blur,
:root[data-theme="dark"] .hero .hero-grid-blur,
:root .page-banner .page-banner-grid-blur,
:root:not([data-theme="light"]) .page-banner .page-banner-grid-blur,
:root[data-theme="dark"] .page-banner .page-banner-grid-blur,
:root .spmb-grid-blur,
:root:not([data-theme="light"]) .spmb-grid-blur,
:root[data-theme="dark"] .spmb-grid-blur {
  /* tanpa lapisan navy abu-abu: hanya blur lembut yang memudar bertahap */
  background: none !important;
  -webkit-backdrop-filter: blur(9px) saturate(110%) !important;
          backdrop-filter: blur(9px) saturate(110%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.86) 84%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.34) 48%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.86) 84%, #000 100%);
}
.hero::after {
  background: linear-gradient(
    180deg,
    rgba(var(--section-bg-rgb), 0)    calc(100% - var(--hero-fade)),
    rgba(var(--section-bg-rgb), .02)  calc(100% - var(--hero-fade) * .90),
    rgba(var(--section-bg-rgb), .07)  calc(100% - var(--hero-fade) * .78),
    rgba(var(--section-bg-rgb), .16)  calc(100% - var(--hero-fade) * .66),
    rgba(var(--section-bg-rgb), .30)  calc(100% - var(--hero-fade) * .54),
    rgba(var(--section-bg-rgb), .48)  calc(100% - var(--hero-fade) * .42),
    rgba(var(--section-bg-rgb), .66)  calc(100% - var(--hero-fade) * .30),
    rgba(var(--section-bg-rgb), .84)  calc(100% - var(--hero-fade) * .18),
    rgba(var(--section-bg-rgb), .95)  calc(100% - var(--hero-fade) * .08),
    rgba(var(--section-bg-rgb), 1)    100%
  );
}

/* ---------- 5) Kartu tujuan (.feature-card) & statistik (.sg-card): satu tema ---------- */
.features,
.stats-glass {
  background: rgba(var(--section-bg-rgb), 1);
  padding: var(--section-pad, 64px) 0;
  color: inherit;
}
.sambutan-section + .features { padding-top: 24px; }
.stats-glass { isolation: auto; }
.stats-glass .sg-orb { display: none; }

.features .section-heading,
.stats-glass .section-heading { margin-bottom: 28px; }

.sg-card {
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px -12px rgba(11, 37, 69, 0.18);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--text-dark);
}
.sg-card:hover {
  transform: translateY(-5px);
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.sg-icon {
  width: 52px; height: 52px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--sky);
  color: var(--navy-steel);
  font-size: 21px;
}
.sg-card:hover .sg-icon { background: var(--orange); color: #fff; transform: rotate(-6deg) scale(1.06); }
.sg-num { color: var(--navy); font-size: 2rem; }
.sg-label { color: var(--text-muted); font-size: .98rem; font-weight: 600; }
.sg-hint { color: var(--navy-steel); }