:root {
    --gn-gold:         #F59E0B;
    --gn-gold-2:       #FBBF24;
    --gn-gold-light:   #FEF3C7;
    --gn-purple-light: #EDE9FE;
    --header-h:        72px;
  }

  /* ── Base ── */
  .main-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1050;
    height: var(--header-h);
    transition:
      height     .35s cubic-bezier(.4, 0, .2, 1),
      background .35s cubic-bezier(.4, 0, .2, 1),
      box-shadow .35s cubic-bezier(.4, 0, .2, 1);
  }

  /* Gradient overlay transparan */
  .main-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,6,20,.52) 0%, transparent 100%);
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0;
  }


  /* ── Logo ── */
  .logo-text {
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 45%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    transition: filter .3s;
  }

  .main-header.scrolled .logo-text {
    background: linear-gradient(135deg, var(--gn-purple, #7c3aed) 0%, var(--gn-purple-4, #6d28d9) 45%, #4F46E5 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .logo-pulse {
    width: 7px;
    height: 7px;
    background: var(--gn-gold);
    border-radius: 50%;
    margin-top: 10px;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(245, 158, 11, .55);
    animation: pulse-dot 2s ease-in-out infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { transform: scale(1);    opacity: 1;   box-shadow: 0 0 6px rgba(245,158,11,.5); }
    50%       { transform: scale(1.55); opacity: .55; box-shadow: 0 0 12px rgba(245,158,11,.8); }
  }

  /* ── Hamburger toggler ── */
  .nav-toggler {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, .12) !important;
    border: 1.5px solid rgba(255, 255, 255, .26) !important;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background .25s, border-color .25s, transform .2s;
    padding: 0;
  }

  .nav-toggler:hover {
    background: rgba(255, 255, 255, .22) !important;
    transform: scale(1.06);
  }

  .nav-toggler .ti {
    font-size: 1.35rem;
    color: #fff;
    transition: color .3s, transform .3s;
  }

  .nav-toggler:hover .ti {
    transform: rotate(90deg);
  }

  .main-header.scrolled .nav-toggler {
    background: rgba(124, 58, 237, .08) !important;
    border-color: rgba(124, 58, 237, .22) !important;
  }

  .main-header.scrolled .nav-toggler .ti {
    color: var(--gn-purple, #7c3aed);
  }

  /* ── Desktop nav links ── */
  .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    --nav-link-pad-x: .85rem;

    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;

    color: rgba(255, 255, 255, .85);

    padding: .42rem var(--nav-link-pad-x);
    border-radius: 9px;
    position: relative;
    transition: color .22s, background .22s;
    text-decoration: none;
  }

  .navbar-nav .nav-text {
    position: relative;
    display: inline-block;
    line-height: 1;
    padding-bottom: 10px;
  }

  .navbar-nav .nav-text::after {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  }

  .navbar-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
  }

  .navbar-nav .nav-link:hover .nav-text::after,
  .navbar-nav .nav-link:focus-visible .nav-text::after,
  .navbar-nav .nav-link.is-active .nav-text::after {
    transform: scaleX(1);
  }

  /* ── Scrolled nav links ── */
  .main-header.scrolled .navbar-nav .nav-link {
    color: rgba(60, 49, 96, .75);
  }

  .main-header.scrolled .navbar-nav .nav-link:hover {
    color: var(--gn-purple, #7c3aed);
    background: rgba(124, 58, 237, .06);
  }

  .main-header.scrolled .navbar-nav .nav-link.is-active {
    color: var(--gn-purple, #7c3aed);
  }

  /* ══════════════════════════════════════════════════
   DROPDOWN — v4 — Konsisten & Elegan
   ══════════════════════════════════════════════════ */

/* Arrow: spring bounce yang halus */
.navbar-nav .nav-item.dropdown .dropdown-toggle::after {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    justify-content: center;
    opacity: .7;
    transition: transform .38s cubic-bezier(.34, 1.56, .64, 1),
                opacity .22s ease;
  }

  .navbar-nav .nav-item.dropdown:hover .dropdown-toggle::after,
  .navbar-nav .nav-item.dropdown:focus-within .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* ── Panel wrapper ── */
  .navbar-nav .nav-item.dropdown .dropdown-menu {
    display:          block !important;
    opacity:          0;
    visibility:       hidden;
    pointer-events:   none;

    /* Posisi tengah relatif trigger */
    left:             50%;
    right:            auto;
    transform:        translateX(-50%) translateY(-10px) scale(.96);
    transform-origin: top center;

    /* Glassmorphism ringan — konsisten dgn scrolled header */
    background:       rgba(252, 250, 255, .98);
    backdrop-filter:  blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    border:           1px solid rgba(124, 58, 237, .12);
    border-radius:    16px;
    padding:          6px;
    padding-right:    14px;
    min-width:        220px;

    box-shadow:
      0 4px 6px   rgba(124, 58, 237, .04),
      0 12px 40px rgba(79, 46, 189, .14),
      0 0 0 0.5px rgba(124, 58, 237, .06),
      inset 0 1px 0 rgba(255, 255, 255, .9);

    transition:
      opacity    .28s cubic-bezier(.22, 1, .36, 1),
      transform  .35s cubic-bezier(.34, 1.56, .64, 1),
      visibility 0s   linear .28s;
  }

  /* Caret segitiga kecil */
  .navbar-nav .nav-item.dropdown .dropdown-menu::before {
    content:    '';
    position:   absolute;
    top:        -6px;
    left:       50%;
    transform:  translateX(-50%) rotate(45deg);
    width:      12px;
    height:     12px;
    background: rgba(252, 250, 255, .98);
    border-top:  1px solid rgba(124, 58, 237, .12);
    border-left: 1px solid rgba(124, 58, 237, .12);
    border-radius: 2px 0 0 0;
  }

  /* State terbuka */
  .navbar-nav .nav-item.dropdown:hover  > .dropdown-menu,
  .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu {
    opacity:       1;
    visibility:    visible;
    pointer-events: auto;
    transform:     translateX(-50%) translateY(0) scale(1);
    transition:
      opacity    .28s cubic-bezier(.22, 1, .36, 1),
      transform  .35s cubic-bezier(.34, 1.56, .64, 1),
      visibility 0s   linear 0s;
  }

  /* ── Dropdown items ── */
  .navbar-nav .dropdown-menu .dropdown-item {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        9px 12px;
    border-radius:  10px;
    font-family:    'DM Sans', system-ui, sans-serif;
    font-size:      .84rem;
    font-weight:    600;
    color:          rgba(60, 49, 96, .82);
    cursor:         pointer;

    /* State awal: tersembunyi + geser */
    opacity:         0;
    transform:       translateY(6px) translateX(-3px);

    transition:
      opacity    .22s cubic-bezier(.22, 1, .36, 1),
      transform  .26s cubic-bezier(.34, 1.56, .64, 1),
      color      .16s,
      background .16s;
  }

  /* Stagger per item */
  .navbar-nav .dropdown-menu .dropdown-item:nth-child(1) { transition-delay: 0s,     0s,    0s, 0s; }
  .navbar-nav .dropdown-menu .dropdown-item:nth-child(2) { transition-delay: .05s,  .05s,   0s, 0s; }
  .navbar-nav .dropdown-menu .dropdown-item:nth-child(3) { transition-delay: .10s,  .10s,   0s, 0s; }
  .navbar-nav .dropdown-menu .dropdown-item:nth-child(4) { transition-delay: .15s,  .15s,   0s, 0s; }
  .navbar-nav .dropdown-menu .dropdown-item:nth-child(5) { transition-delay: .20s,  .20s,   0s, 0s; }

  /* Item visible saat dropdown terbuka */
  .navbar-nav .nav-item.dropdown:hover       > .dropdown-menu .dropdown-item,
  .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu .dropdown-item {
    opacity:   1;
    transform: translateY(0) translateX(0);
  }

  /* Hover item: geser kanan + warna purple */
  .navbar-nav .dropdown-menu .dropdown-item:hover {
    color:      var(--gn-purple, #7c3aed) !important;
    background: rgba(124, 58, 237, .07);
    transform:  translateX(4px) !important;
    transition:
      transform  .22s cubic-bezier(.34, 1.56, .64, 1),
      color      .16s,
      background .16s !important;
  }

  .navbar-nav .dropdown-menu .dropdown-item:active {
    transform:  translateX(4px) scale(.97) !important;
    background: rgba(124, 58, 237, .12);
  }

  /* ── Icon di dalam item ── */
  .dropdown-item-icon {
    width:           30px;
    height:          30px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    flex-shrink:     0;
    background:      rgba(124, 58, 237, .08);
    transition:      background .16s, transform .22s;
  }

  .dropdown-menu .dropdown-item:hover .dropdown-item-icon {
    background: rgba(124, 58, 237, .14);
    transform:  scale(1.08) rotate(-4deg);
  }

  /* Teks dua baris (judul + subjudul) */
  .dropdown-item-body       { display: flex; flex-direction: column; gap: 1px; }
  .dropdown-item-title      { font-weight: 600; color: rgba(40, 32, 80, .9); line-height: 1.2; }
  .dropdown-item-sub        { font-size: .73rem; font-weight: 400; color: rgba(100, 85, 140, .55); line-height: 1.2; }

  /* ── Divider ── */
  .dropdown-divider {
    height:     1px;
    background: rgba(124, 58, 237, .08);
    margin:     4px 8px;
    border:     none;
  }

  /* ── Section heading opsional ── */
  .dropdown-section-heading {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:          rgba(124, 58, 237, .45);
    padding:        4px 12px 6px;
  }

  /* ── Footer CTA di dalam dropdown ── */
  .dropdown-footer-cta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 12px;
    border-radius:   10px;
    background:      rgba(124, 58, 237, .04);
    cursor:          pointer;
    font-size:       .75rem;
    font-weight:     700;
    letter-spacing:  .02em;
    color:           var(--gn-purple, #7c3aed);
    margin-top:      2px;

    opacity:         0;
    transform:       translateY(6px);
    transition:
      opacity    .22s .18s cubic-bezier(.22, 1, .36, 1),
      transform  .26s .18s cubic-bezier(.34, 1.56, .64, 1),
      background .16s 0s;
  }

  .navbar-nav .nav-item.dropdown:hover       > .dropdown-menu .dropdown-footer-cta,
  .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu .dropdown-footer-cta {
    opacity:   1;
    transform: translateY(0);
  }

  .dropdown-footer-cta:hover { background: rgba(124, 58, 237, .09); }

  .dropdown-footer-cta .footer-arrow {
    color:      var(--gn-gold);
    font-size:  .9rem;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
  }

  .dropdown-footer-cta:hover .footer-arrow { transform: translateX(4px); }

  /* ── CTA Button ── */
  .btn-header-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: .875rem;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(135deg, var(--gn-gold) 0%, var(--gn-gold-2) 100%);
    border: none;
    border-radius: 10px;
    padding: .55rem 1.15rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
      0 3px 14px rgba(245, 158, 11, .38),
      inset 0 1px 0 rgba(255, 255, 255, .28);
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, filter .18s;
  }

  .btn-header-cta::before {
    content: '';
    position: absolute;
    top: -50%; left: -65%;
    width: 40%; height: 200%;
    background: rgba(255, 255, 255, .32);
    transform: skewX(-20deg);
    transition: left .55s ease;
  }

  .btn-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 22px rgba(245, 158, 11, .5);
    filter: brightness(1.04);
  }

  .btn-header-cta:hover::before { left: 140%; }
  .btn-header-cta:active { transform: translateY(0) scale(.98); }

  .btn-header-cta i {
    font-size: 1rem;
    transition: transform .22s;
  }

  .btn-header-cta:hover i {
    transform: rotate(-12deg) scale(1.15);
  }

  /* ── Responsive ── */
  @media (max-width: 575.98px) {
    :root { --gn-header-offset: 82px; }

    .main-header .navbar {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .main-header .nav-link {
      padding: 10px 10px !important;
      --nav-link-pad-x: 10px;
    }

    .navbar-nav .nav-text {
      padding-bottom: 6px;
    }
  }