/* Homepage mega-menu (2026-11-04, permintaan owner: hover What We Do / Insights / About di home sama seperti halaman lain).
   Dimuat setelah home.css + home-p4.css; home.css tidak diubah. Gaya = salinan dropdown di assets/css/components.css,
   di-scope ke #header supaya tidak bentrok dengan kelas lain di homepage. Markup panel diisi tools/build.py (sync_home_nav). */
#header .nav-container { position: relative; }
#header.scrolled .nav-container,
#header.has-open .nav-container { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

#header .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; position: relative; }
#header .nav-link[aria-expanded="true"] { color: var(--color-foreground); }
#header .nav-link[aria-expanded="true"]::after { width: 100%; }
#header .nav-link .chev { width: 10px; height: 10px; transition: transform var(--transition-base); }
#header .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

#header .dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  padding: var(--spacing-lg, 2rem);
  background: rgba(6, 1, 25, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: 25px;
  box-shadow: var(--shadow-card);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear 0.3s;
}
#header .dropdown.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 1023px) { #header .dropdown { display: none; } }

#header .dropdown__grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--spacing-xl, 3rem); }
#header .dropdown__grid--2 { grid-template-columns: 1fr 1.6fr; }
#header .dropdown__intro h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0.5rem 0; color: var(--color-foreground); }
#header .dropdown__intro p { font-size: 0.875rem; line-height: 1.6; color: var(--color-muted-foreground); }
#header .dropdown__intro .badge { position: static; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: #fff; }
#header .dropdown__intro .link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--spacing-md, 1.5rem);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-primary);
}
#header .dropdown__intro .link-arrow svg { width: 16px; height: 16px; transition: transform var(--transition-base); }
#header .dropdown__intro .link-arrow:hover svg { transform: translateX(4px); }
#header .dropdown__col h4 {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-muted-foreground);
  padding-bottom: 0.75rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--color-border);
}
#header .dropdown__col a {
  display: block; padding: 0.45rem 0;
  font-size: 0.875rem; font-weight: 500; color: var(--color-foreground);
  transition: color var(--transition-base), transform var(--transition-base);
}
#header .dropdown__col a:hover { color: var(--color-primary); transform: translateX(3px); }
#header .dropdown__col a small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-muted-foreground); }
#header .dropdown__split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
#header .dropdown__group { min-width: 0; }

/* Bahasa: panel mengikuti pola .i/.e homepage */
html[data-lang="id"] #header .dropdown .e,
html[data-lang="en"] #header .dropdown .i { display: none; }

/* Samakan dengan VIS v2 halaman dalam: link panel Off-White (Copper dipakai sekali per surface), titik badge Mist */
#header .dropdown__intro .link-arrow { color: #FAFAFA; }
#header .dropdown__intro .badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #B2B2B2; }
#header .dropdown__intro h3 { max-width: 20em; }