/* ============================================================
   HEADER BATIK (agent-user.md Bagian 5) — identik semua halaman.
   Foto batik di kiri+kanan, tengah gelap agar menu terbaca.
   ============================================================ */

.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 110px;
  background: #050505 url('../img/header-batik.webp') center/cover no-repeat;
  border-bottom: 1px solid rgba(57, 255, 20, .35);
  transition: background-color .25s ease, backdrop-filter .25s ease;
}

/* Overlay gelap di tengah agar link terbaca */
.hd::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(5, 5, 5, .88) 0%,
      rgba(5, 5, 5, .28) 34%,
      rgba(5, 5, 5, .28) 66%,
      rgba(5, 5, 5, .88) 100%);
}

/* Saat scroll: header jadi lebih transparan (latar kabur tembus konten) */
.hd.scrolled {
  background-image: none !important;
  background-color: rgba(5, 5, 5, .25) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  transition: background-color .25s ease, backdrop-filter .25s ease;
}
.hd.scrolled::before {
  opacity: 0 !important;
  transition: opacity .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hd.scrolled, .hd.scrolled::before { transition: none; }
}

.hd-inner {
  position: relative;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: 24px;
  height: 110px;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 768px) {
  .hd-inner { padding-inline: 56px; }
}

/* Logo + brand */
.hd-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.hd-logo-img {
  height: 46px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, .35));
}
@media (max-width: 900px) {
  .hd-logo-img { height: 38px; }
}
.hd-mark {
  color: var(--neon);
  display: inline-flex;
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, .5));
}

/* Menu tengah */
.hd-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}
.hd-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  border-radius: 8px;
  transition: color .2s ease;
}
.hd-link:hover { color: var(--neon); }
.hd-link.on {
  color: var(--neon);
  box-shadow: inset 0 -2px 0 var(--neon);
}

/* Dropdown Perusahaan */
.hd-drop { position: relative; }
.hd-dropbtn {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.hd-dropbtn[data-current="1"] { color: var(--neon); }
.hd-dropmenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hd-drop:hover .hd-dropmenu,
.hd-drop.open .hd-dropmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hd-dropmenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.hd-dropmenu a:hover { background: rgba(57, 255, 20, .08); color: var(--neon); }
.hd-dropmenu a.on { color: var(--neon); }

/* CTA kanan */
.hd-cta { white-space: nowrap; }

/* Hamburger (mobile) */
.hd-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--neon);
  border-radius: 8px;
  cursor: pointer;
  padding: 10px;
}
.hd-burger i {
  display: block;
  height: 2px;
  background: var(--neon);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.hd-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hd-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel mobile penuh lebar */
.hd-panel {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  background: rgba(5, 5, 5, .97);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 24px;
  /* Bisa di-scroll bila menu lebih tinggi dari layar */
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  .hd-panel { top: 90px; max-height: calc(100dvh - 90px); }
}
.hd-panel[hidden] { display: none; }
.hd-panel nav { display: flex; flex-direction: column; }
.hd-mlink {
  padding: 12px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  border-bottom: 1px solid rgba(57, 255, 20, .08);
}
.hd-mlink.sub { padding-left: 22px; font-weight: 500; color: var(--muted); }
.hd-mlink[aria-current="page"] { color: var(--neon); }
.hd-mcta { margin-top: 16px; justify-content: center; }

@media (max-width: 900px) {
  .hd { height: 90px; background-image: url('../img/header-batik-m.webp'); }
  .hd-inner { height: 90px; }
  .hd-panel { top: 90px; max-height: calc(100dvh - 90px); }
  .hd-nav, .hd-cta { display: none; }
  .hd-burger { display: flex; }
}