/* =========================================================
   responsive.css — breakpoint (mobile-first)
   320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
   Menu desktop penuh mulai 1360px; di bawahnya hamburger (agar 8 menu tidak berdesakan)
   ========================================================= */

@media (max-width: 767.98px) {
  :root { --hero-top: 104px; }
  .hero__lead { font-size: .9375rem; margin-top: 16px; }
  .hero__title { margin-top: 12px; }
  .hero__cta { margin-top: 22px; }
}
@media (max-width: 479.98px) {
  .hero__eyebrow { font-size: .6875rem; letter-spacing: .12em; }
  .hero__eyebrow::before { display: none; }
  .announce__sep--a { display: none; }
  .announce { font-size: .75rem; }
}

/* ---- Semua layar < 1024: ruang untuk bottom bar seluler ---- */
@media (max-width: 1023.98px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 399.98px) {
  .brand__text strong { font-size: .9375rem; }
  .brand__text small { font-size: .6875rem; }
}

/* ---- >= 480 ---- */
@media (min-width: 480px) {
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
}

/* ---- >= 768 (tablet) ---- */
@media (min-width: 768px) {
  :root { --announce-h: 40px; --nav-h: 76px; --hero-top: 136px; }

  .navbar__actions .theme-toggle { display: inline-grid; }
  .navbar__cta { display: inline-flex; }

  .hero__body { padding-block: 32px 40px; }
  .hero__foot { padding-bottom: 28px; }
  .fcards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .fcard { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .hero__utility { display: flex; }
  .hero__overlay {
    background:
      linear-gradient(to bottom, rgba(8, 40, 14, calc(.5 * var(--ov, 1))) 0%, rgba(8, 40, 14, 0) 22%),
      linear-gradient(to top, rgba(8, 40, 14, calc(.7 * var(--ov, 1))) 0%, rgba(8, 40, 14, 0) 40%),
      linear-gradient(105deg, rgba(10, 48, 18, calc(.86 * var(--ov, 1))) 0%, rgba(16, 68, 26, calc(.6 * var(--ov, 1))) 48%, rgba(40, 116, 44, calc(.24 * var(--ov, 1))) 100%);
  }
}
@media (min-width: 900px) {
  .announce__meta { display: flex; }
}

/* ---- >= 1024 (desktop kecil): dock aktif, hero penuh layar ---- */
@media (min-width: 1024px) {
  :root { --nav-h: 84px; --hero-top: 150px; }

  .hero { min-height: 100vh; min-height: min(100svh, 1080px); }
  .hero__inner { padding-right: 72px; }
  .hero__body { padding-block: 24px 44px; }
  .fcard { flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; }
  .fcard__icon { width: 44px; height: 44px; }

  .dock { display: block; position: fixed; z-index: 90; right: 16px; top: 50%; transform: translateY(-50%); }
  .mbar { display: none; }
}

/* ---- >= 1360: navigasi desktop penuh (di bawahnya memakai menu seluler/tablet) ---- */
@media (min-width: 1360px) {
  .nav { display: block; align-self: stretch; }
  .hamburger:not(.hamburger--close) { display: none; }
  .navbar__inner { gap: 24px; }
}

@media (min-width: 1360px) and (max-width: 1439.98px) {
  .navbar__cta { padding: 0 16px; }
  .navbar__cta .btn__arrow { display: none; }
}

/* ---- Layar tinggi rendah (landscape ponsel) ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__utility { display: none; }
}

/* ---- >= 1440 ---- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
}

/* ---- >= 1600 ---- */
@media (min-width: 1600px) {
  :root { --container: 1440px; }
  .nav__link, .nav__trigger { padding-inline: 12px; font-size: .9375rem; }
  .nav__link::after, .nav__trigger::after { left: 12px; right: 12px; }
}