/* Header + menu fullscreen
   Saat di-scroll: tanpa garis/latar bar — hanya logo & tombol Menu yang melayang, masing-masing
   dalam kontainer rounded (kaca). */
.site-header { position: fixed; inset: 0 0 auto; z-index: 40; padding: 18px 0; transition: padding .3s; pointer-events: none; }
.site-header.is-scrolled { padding: 12px 0; }
.site-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

.brand, .menu-btn { pointer-events: auto; }

/* Logo: tanpa kontainer di atas hero, menjadi pill kaca saat scroll */
.brand {
  display: inline-flex; align-items: center; border-radius: 99px;
  padding: 0; border: 1px solid transparent; background: transparent;
  transition: padding .3s, background .3s, border-color .3s, box-shadow .3s;
}
.brand img { height: 46px; width: auto; filter: var(--logo-filter); transition: height .3s; }
.is-scrolled .brand {
  padding: 6px 18px; background: var(--glass-fill); border-color: var(--line);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
}
.is-scrolled .brand img { height: 34px; }

.menu-btn {
  padding: 11px 22px; border-radius: 99px; font: 600 13px var(--font-display); cursor: pointer;
  border: 1px solid var(--line); background: var(--glass-fill);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: background .2s, color .2s, box-shadow .3s;
}
.is-scrolled .menu-btn { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35); }
.menu-btn:hover { background: var(--blue); color: var(--on-blue); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 35; display: grid; place-items: center;
  background: var(--overlay-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-overlay nav { display: grid; gap: 6px; text-align: center; }
.menu-overlay a {
  font: 700 clamp(32px, 6.5vw, 68px) var(--font-display); letter-spacing: -.03em;
  color: var(--menu-link); transition: color .25s, transform .25s;
}
.menu-overlay a:hover, .menu-overlay a:focus-visible { color: var(--menu-link-hover); transform: translateX(10px); }