/* ==========================================================================
   ORGANISMS / navbar / navbar.css  (Glassmorphism Override)
   --------------------------------------------------------------------------
   Navbar floating + center + pill radius + glassmorphism scroll-aware.

   BEHAVIOR:
     [initial]          — transparan, tanpa background
     [scrolled-down]    — muncul dengan efek glass
     [scrolled-further] — navbar tersembunyi (hide) agar tidak ganggu konten
     [scroll-up]        — muncul kembali dengan efek glass
     [back-to-top]      — kembali transparan

   STATE CLASSES (dikelola oleh navbar.js):
     .navbar--glass     — tampilkan efek glassmorphism
     .navbar--hidden    — sembunyikan navbar (translate ke atas)
     .navbar--at-top    — posisi scroll di paling atas (transparan)

   HTML STRUCTURE:
     <header class="navbar" id="navbar">
       <div class="navbar-inner">
         <a class="navbar-brand" href="/">...</a>
         <nav class="navbar-nav" aria-label="Navigasi Utama">
           <a class="navbar-link" href="">Link</a>
         </nav>
         <div class="navbar-actions">...</div>
         <button class="navbar-hamburger" ...>...</button>
       </div>
       <div class="navbar-mobile-menu" id="navbar-mobile-menu" hidden>...</div>
     </header>

   CATATAN:
   - Tidak menggunakan .container karena navbar ini full-width wrapper
     dengan inner pill yang terpusat. Pill width dikontrol oleh
     --navbar-pill-max-width.
   - Tidak memerlukan <div class="container"> di luar navbar-inner.
   ========================================================================== */


/* --------------------------------------------------------------------------
   CUSTOM PROPERTIES — navbar scope
   -------------------------------------------------------------------------- */
:root {
  /* --navbar-pill-max-width:    860px;          lebar maksimum pill navbar */
  --navbar-pill-max-width:    var(--container-xl);          /* lebar maksimum pill navbar */
  --navbar-pill-height:       52px;           /* tinggi pill (desktop) */
  --navbar-pill-height-sm:    48px;           /* tinggi pill (mobile) */
  --navbar-top-offset:        16px;           /* jarak dari atas layar */
  --navbar-side-padding:      var(--size-400); /* 16px — ruang kiri-kanan pill */

  /* Glass surface */
  --navbar-glass-bg-light:    hsla(0, 0%, 100%, 0.72);
  --navbar-glass-bg-dark:     hsla(0, 0%, 8%, 0.70);
  --navbar-glass-blur:        16px;
  --navbar-glass-border-light: hsla(0, 0%, 100%, 0.45);
  --navbar-glass-border-dark:  hsla(0, 0%, 100%, 0.10);
  --navbar-glass-shadow-light:
    0 4px 24px -4px hsla(0, 0%, 0%, 0.10),
    0 1px 4px -1px  hsla(0, 0%, 0%, 0.06),
    inset 0 1px 0   hsla(0, 0%, 100%, 0.60);
  --navbar-glass-shadow-dark:
    0 4px 24px -4px hsla(0, 0%, 0%, 0.50),
    0 1px 4px -1px  hsla(0, 0%, 0%, 0.30),
    inset 0 1px 0   hsla(0, 0%, 100%, 0.06);

  /* Transition timings */
  --navbar-transition-appear:  var(--duration-moderate) var(--ease-out);
  --navbar-transition-hide:    var(--duration-normal)   var(--ease-in);
  --navbar-transition-glass:   var(--duration-slow)     var(--ease-default);
}


/* --------------------------------------------------------------------------
   WRAPPER — fixed di viewport, full-width, pointer-events: none agar
   konten di bawah tetap bisa diklik di area kosong
   -------------------------------------------------------------------------- */
.navbar {
  position:       fixed;
  top:            0;
  left:           0;
  right:          0;
  z-index:        var(--z-sticky);
  padding-top:    var(--navbar-top-offset);
  padding-inline: var(--navbar-side-padding);
  pointer-events: none;              /* klik tembus ke konten */

  /* Transisi saat muncul / sembunyi */
  transform:      translateY(0);
  transition:
    transform  var(--navbar-transition-appear),
    opacity    var(--navbar-transition-appear);

    /* Reset background dari design-system — glassmorphism di .navbar-inner */
  background-color: transparent;
  border-bottom:    none;          /* reset border-bottom juga */
  box-shadow:       none;          /* reset transition target */
  width:            auto;          /* reset width: 100% */

}

.navbar.is-scrolled {
  box-shadow: none;
}

/* State: navbar tersembunyi (scroll ke bawah cukup jauh) */
.navbar--hidden {
  transform: translateY(calc(-100% - var(--navbar-top-offset) - 8px));
  transition:
    transform var(--navbar-transition-hide),
    opacity   var(--navbar-transition-hide);
}


/* --------------------------------------------------------------------------
   INNER PILL — elemen visual navbar yang sebenarnya
   -------------------------------------------------------------------------- */
.navbar-inner {
  display:         flex;
  align-items:     center;
  gap:             var(--size-300);
  height:          var(--navbar-pill-height);
  max-width:       var(--navbar-pill-max-width);
  margin-inline:   auto;
  padding-inline:  var(--size-500);    /* 20px — padding dalam pill */
  border-radius:   var(--radius-full); /* pill shape */
  pointer-events:  auto;              /* interaksi aktif di dalam pill */

  /* --- INITIAL STATE: transparan, tanpa background --- */
  background-color: transparent;
  border:           1px solid transparent;
  box-shadow:       none;

  /* Transisi glass effect */
  transition:
    background-color  var(--navbar-transition-glass),
    backdrop-filter   var(--navbar-transition-glass),
    -webkit-backdrop-filter var(--navbar-transition-glass),
    border-color      var(--navbar-transition-glass),
    box-shadow        var(--navbar-transition-glass);
}

/* --- GLASS STATE: aktif saat .navbar--glass --- */
.navbar--glass .navbar-inner {
  background-color:    var(--navbar-glass-bg-light);
  backdrop-filter:     blur(var(--navbar-glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
  border-color:        var(--navbar-glass-border-light);
  box-shadow:          var(--navbar-glass-shadow-light);
}

/* Dark mode glass */
[data-theme="dark"] .navbar--glass .navbar-inner {
  background-color:    var(--navbar-glass-bg-dark);
  border-color:        var(--navbar-glass-border-dark);
  box-shadow:          var(--navbar-glass-shadow-dark);
}


/* --------------------------------------------------------------------------
   BRAND / LOGO
   -------------------------------------------------------------------------- */
.navbar-brand {
  display:         flex;
  align-items:     center;
  gap:             var(--size-200);
  text-decoration: none;
  flex-shrink:     0;
  color:           var(--color-text-primary);
}

.navbar-logo {
  height:  28px;
  width:   auto;
  display: block;
}

.navbar-brand-name {
  font-size:   var(--text-heading-xs-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  white-space: nowrap;
  letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   DESKTOP NAVIGATION — terpusat di dalam pill
   -------------------------------------------------------------------------- */
.navbar-nav {
  display:     flex;
  align-items: center;
  gap:         var(--size-50);
  flex:        1;
}

/* justify-center: nav item rata tengah */
.navbar-nav.justify-center {
  justify-content: center;
}

.navbar-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--size-100);
  padding:         var(--size-150) var(--size-350);   /* 6px 14px */
  font-size:       var(--text-label-size);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-secondary);
  text-decoration: none;
  border-radius:   var(--radius-full);
  white-space:     nowrap;
  transition:      var(--transition-base);
  background:      none;
  border:          none;
  cursor:          pointer;
  font-family:     inherit;
}

.navbar-link:hover {
  color:            var(--color-text-primary);
  background-color: hsla(0, 0%, 0%, 0.06);
}

[data-theme="dark"] .navbar-link:hover {
  background-color: hsla(0, 0%, 100%, 0.10);
}

.navbar-link-active,
.navbar-link[aria-current="page"] {
  color:            var(--color-text-primary);
  background-color: hsla(0, 0%, 0%, 0.08);
  font-weight:      var(--font-weight-semibold);
}

[data-theme="dark"] .navbar-link-active,
[data-theme="dark"] .navbar-link[aria-current="page"] {
  background-color: hsla(0, 0%, 100%, 0.12);
}

.navbar-link:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   ACTIONS (kanan)
   -------------------------------------------------------------------------- */
.navbar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--size-200);
  margin-left: auto;
  flex-shrink: 0;
}

/* Theme toggle button */
.theme-toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  padding:         0;
  background:      none;
  border:          none;
  border-radius:   var(--radius-full);
  cursor:          pointer;
  color:           var(--color-text-secondary);
  transition:      var(--transition-base);
  flex-shrink:     0;
}

.theme-toggle:hover {
  color:            var(--color-text-primary);
  background-color: hsla(0, 0%, 0%, 0.06);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: hsla(0, 0%, 100%, 0.10);
}

.theme-toggle:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.theme-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-icon svg {
  width:  var(--size-icon-sm);   /* 16px */
  height: var(--size-icon-sm);
}

/* User trigger button */
.navbar-user-trigger {
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       var(--size-100);
  border-radius: var(--radius-full);
  transition:    box-shadow var(--duration-fast) var(--ease-default);
  display:       flex;
}
.navbar-user-trigger:hover {
  box-shadow: 0 0 0 3px var(--color-border-default);
}
.navbar-user-trigger:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   HAMBURGER BUTTON (mobile only)
   -------------------------------------------------------------------------- */
.navbar-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           36px;
  height:          36px;
  padding:         var(--size-200);
  background:      none;
  border:          none;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  margin-left:     auto;
  flex-shrink:     0;
}

.navbar-hamburger:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.navbar-hamburger-bar {
  display:          block;
  width:            100%;
  height:           2px;
  background-color: var(--color-text-primary);
  border-radius:    var(--radius-full);
  transition:
    transform var(--duration-normal) var(--ease-in-out),
    opacity   var(--duration-normal) var(--ease-in-out);
  transform-origin: center;
}

/* Hamburger → X */
.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-bar:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}
.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   MOBILE MENU — muncul di bawah pill
   -------------------------------------------------------------------------- */
.navbar-mobile-menu {
  max-width:        var(--navbar-pill-max-width);
  margin-inline:    auto;
  margin-top:       var(--size-200);
  border-radius:    var(--radius-2xl);
  overflow:         hidden;
  pointer-events:   auto;

  /* Glass background */
  background-color: var(--navbar-glass-bg-light);
  backdrop-filter:  blur(var(--navbar-glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
  border:           1px solid var(--navbar-glass-border-light);
  box-shadow:       var(--navbar-glass-shadow-light);

  padding:          var(--size-300) var(--size-400) var(--size-400);
  animation:        ds-slide-down var(--duration-moderate) var(--ease-out) both;
}

[data-theme="dark"] .navbar-mobile-menu {
  background-color: var(--navbar-glass-bg-dark);
  border-color:     var(--navbar-glass-border-dark);
  box-shadow:       var(--navbar-glass-shadow-dark);
}

.navbar-mobile-link {
  display:         block;
  padding:         var(--size-300) var(--size-400);
  font-size:       var(--text-body-size);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-secondary);
  text-decoration: none;
  border-radius:   var(--radius-lg);
  transition:      var(--transition-base);
}

.navbar-mobile-link:hover {
  color:            var(--color-text-primary);
  background-color: hsla(0, 0%, 0%, 0.05);
}

[data-theme="dark"] .navbar-mobile-link:hover {
  background-color: hsla(0, 0%, 100%, 0.08);
}

.navbar-mobile-link-active {
  color:            var(--color-text-primary);
  background-color: hsla(0, 0%, 0%, 0.07);
  font-weight:      var(--font-weight-semibold);
}

.navbar-mobile-menu .container,
.navbar-mobile-menu nav {
  display:        flex;
  flex-direction: column;
  gap:            var(--size-50);
}


/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar-inner {
    height:          var(--navbar-pill-height-sm);
    padding-inline:  var(--size-400);   /* 16px pada mobile */
  }

  .navbar-nav,
  .navbar-actions {
    display: none;
  }

  .navbar-hamburger {
    display: flex;
  }
}

@media (min-width: 768px) {
  .navbar-mobile-menu {
    display: none !important;
  }
}

/* Tablet: sedikit lebih compact */
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-inner {
    padding-inline: var(--size-400);
  }

  .navbar-link {
    padding: var(--size-150) var(--size-300);
  }
}


/* ==========================================================================
   MEGA MENU
   --------------------------------------------------------------------------
   Mega menu melebar full-width viewport, tapi konten di dalamnya
   dibatasi lebar --navbar-pill-max-width agar tetap sejajar dengan pill.

   Strategi posisi:
   - .navbar-mega-wrapper  → relative, inline-flex (sebagai nav item)
   - .mega-menu            → fixed (agar bisa melebar full viewport)
                             posisi Y dihitung via JS (top = bawah navbar)

   STATE:
   - [data-open="true"] pada .navbar-mega-wrapper → menu tampil

   HTML PATTERN:
     <div class="navbar-mega-wrapper" data-mega>
       <button class="navbar-link navbar-mega-trigger"
               aria-haspopup="true" aria-expanded="false"
               aria-controls="mega-merchandise">
         Merchandise
         <span class="navbar-mega-caret" aria-hidden="true"></span>
       </button>
       <div class="mega-menu" id="mega-merchandise" hidden>
         <div class="mega-menu-inner">
           <div class="mega-col">
             <p class="mega-col-label">Kategori</p>
             <a class="mega-item" href="">
               <span class="mega-item-icon">...</span>
               <span class="mega-item-body">
                 <span class="mega-item-title">T-Shirt</span>
                 <span class="mega-item-desc">Custom printing premium</span>
               </span>
             </a>
           </div>
           <div class="mega-col mega-col-featured">
             <p class="mega-col-label">Promo</p>
             ...
           </div>
         </div>
       </div>
     </div>
   ========================================================================== */

/* ── Custom properties untuk mega menu ── */
:root {
  --mega-menu-gap-top:     var(--size-300);   /* jarak pill → mega menu */
  --mega-menu-padding:     var(--size-600);   /* padding dalam menu */
  --mega-menu-col-gap:     var(--size-600);   /* gap antar kolom */
  --mega-menu-item-radius: var(--radius-lg);
}

/* ── Wrapper (menggantikan posisi nav item) ── */
.navbar-mega-wrapper {
  position: static;   /* mega-menu sendiri yang pakai fixed */
  display:  inline-flex;
  align-items: center;
}

/* ── Caret ── */
.navbar-mega-caret {
  display:      inline-block;
  width:        0;
  height:       0;
  margin-left:  var(--size-150);
  border-left:  4px solid transparent;
  border-right: 4px solid transparent;
  border-top:   4.5px solid currentColor;
  transition:   transform var(--duration-normal) var(--ease-default);
  vertical-align: middle;
  flex-shrink:  0;
}

.navbar-mega-wrapper[data-open="true"] .navbar-mega-caret {
  transform: rotate(180deg);
}

/* ── Mega menu panel (fixed, full-width) ── */
.mega-menu {
  /* Posisi: fixed, left/right 0, top di-set oleh JS */
  position: fixed;
  left:     0;
  right:    0;
  z-index:  calc(var(--z-sticky) - 1);   /* di bawah navbar pill */

  /* Glass surface — konsisten dengan navbar glass */
  background-color:    var(--navbar-glass-bg-light);
  backdrop-filter:     blur(var(--navbar-glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
  /* border-bottom:       1px solid var(--navbar-glass-border-light); */
  border:       1px solid var(--navbar-glass-border-light);
  box-shadow:
    0 8px 32px -8px hsla(0, 0%, 0%, 0.12),
    0 2px 8px  -2px hsla(0, 0%, 0%, 0.06);

  pointer-events: auto;
  overflow: hidden;

  /* ── Animasi: clip-path reveal dari atas ── */
  transform-origin: top center;
  animation: none;

  border-radius: var(--radius-xl);
}

.mega-menu[data-entering] {
  animation: mega-enter var(--duration-moderate) var(--ease-out) both;
}
.mega-menu[data-leaving] {
  animation: mega-leave var(--duration-normal) var(--ease-in) both;
}

@keyframes mega-enter {
  from {
    opacity:   0;
    transform: translateY(-8px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity:   1;
    transform: translateY(0);
    clip-path: inset(0 0 0% 0);
  }
}
@keyframes mega-leave {
  from {
    opacity:   1;
    transform: translateY(0);
    clip-path: inset(0 0 0% 0);
  }
  to {
    opacity:   0;
    transform: translateY(-6px);
    clip-path: inset(0 0 100% 0);
  }
}

[data-theme="dark"] .mega-menu {
  background-color:  var(--navbar-glass-bg-dark);
  /* border-bottom-color: var(--navbar-glass-border-dark); */
  border-color: var(--navbar-glass-border-dark);
  box-shadow:
    0 8px 32px -8px hsla(0, 0%, 0%, 0.50),
    0 2px 8px  -2px hsla(0, 0%, 0%, 0.30);
}

/* ── Inner: konten dibatasi selebar pill ── */
.mega-menu-inner {
  display:         flex;
  gap:             var(--mega-menu-col-gap);
  max-width:       var(--navbar-pill-max-width);
  margin-inline:   auto;
  padding:         var(--mega-menu-padding) var(--navbar-side-padding);
}

/* ── Kolom ── */
.mega-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-100);
}

/* Featured column: lebih lebar */
.mega-col-featured {
  flex: 1.4;
}

/* Label kolom */
.mega-col-label {
  font-size:      var(--text-label-size);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  var(--size-200);
  padding-left:   var(--size-300);
}

/* ── Item di dalam kolom ── */
.mega-item {
  display:         flex;
  align-items:     flex-start;
  gap:             var(--size-300);
  padding:         var(--size-300);
  border-radius:   var(--mega-menu-item-radius);
  text-decoration: none;
  color:           var(--color-text-primary);
  transition:      background-color var(--duration-fast) var(--ease-default),
                   transform        var(--duration-fast) var(--ease-out);
  cursor:          pointer;
}

.mega-item:hover {
  background-color: hsla(0, 0%, 0%, 0.05);
  transform:        translateX(2px);
}

[data-theme="dark"] .mega-item:hover {
  background-color: hsla(0, 0%, 100%, 0.07);
}

.mega-item:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Ikon dalam item */
.mega-item-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  flex-shrink:      0;
  border-radius:    var(--radius-md);
  background-color: var(--color-bg-sunken);
  color:            var(--color-brand);
  transition:       background-color var(--duration-fast) var(--ease-default);
}

.mega-item:hover .mega-item-icon {
  background-color: var(--color-brand-subtle);
}

.mega-item-icon svg {
  width:  var(--size-icon-md);
  height: var(--size-icon-md);
}

/* Teks dalam item */
.mega-item-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--size-50);
  min-width:      0;
}

.mega-item-title {
  font-size:   var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
  white-space: nowrap;
}

.mega-item-desc {
  font-size:  calc(var(--text-label-size) - 0.5px);
  color:      var(--color-text-secondary);
  line-height: 1.4;
  white-space: normal;
}

/* Divider vertikal antar kolom */
.mega-col-divider {
  width:            1px;
  background-color: var(--color-border-default);
  margin-block:     var(--size-200);
  flex-shrink:      0;
}

/* Footer strip di dalam mega menu */
.mega-footer {
  border-top:      1px solid var(--color-border-default);
  padding:         var(--size-300) var(--navbar-side-padding);
  display:         flex;
  justify-content: center;
}

.mega-footer-inner {
  display:       flex;
  gap:           var(--size-600);
  max-width:     var(--navbar-pill-max-width);
  width:         100%;
}

.mega-footer-link {
  font-size:       var(--text-label-size);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-link);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             var(--size-150);
  transition:      color var(--duration-fast) var(--ease-default);
}

.mega-footer-link:hover {
  color: var(--color-text-link-hover);
}

/* ── Featured card (untuk kolom promo) ── */
.mega-card-featured {
  display:         flex;
  flex-direction:  column;
  gap:             var(--size-200);
  padding:         var(--size-400);
  border-radius:   var(--radius-xl);
  border:          1px solid var(--color-border-default);
  text-decoration: none;
  color:           var(--color-text-primary);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color     var(--duration-fast) var(--ease-default);
}

.mega-card-featured:hover {
  background-color: hsla(0, 0%, 0%, 0.03);
  border-color:     var(--color-border-strong);
}

[data-theme="dark"] .mega-card-featured:hover {
  background-color: hsla(0, 0%, 100%, 0.04);
}

.mega-card-badge {
  display:          inline-flex;
  align-items:      center;
  padding:          2px var(--size-200);
  border-radius:    var(--radius-full);
  font-size:        0.6875rem;
  font-weight:      var(--font-weight-semibold);
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand-text);
  align-self:       flex-start;
}

.mega-card-title {
  font-size:   var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
}

.mega-card-desc {
  font-size:   var(--text-label-size);
  color:       var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Mobile: mega menu jadi accordion di mobile menu ── */
.navbar-mobile-mega {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.navbar-mobile-mega-trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         var(--size-300) var(--size-400);
  font-size:       var(--text-body-size);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-secondary);
  text-decoration: none;
  border-radius:   var(--radius-lg);
  transition:      var(--transition-base);
  background:      none;
  border:          none;
  cursor:          pointer;
  font-family:     inherit;
  text-align:      left;
}

.navbar-mobile-mega-trigger:hover {
  color:            var(--color-text-primary);
  background-color: hsla(0, 0%, 0%, 0.05);
}

[data-theme="dark"] .navbar-mobile-mega-trigger:hover {
  background-color: hsla(0, 0%, 100%, 0.08);
}

.navbar-mobile-mega-trigger[aria-expanded="true"] {
  color: var(--color-text-primary);
}

.navbar-mobile-mega-trigger[aria-expanded="true"] .navbar-mega-caret {
  transform: rotate(180deg);
}

/* Accordion content */
.navbar-mobile-mega-panel {
  display:        flex;
  flex-direction: column;
  gap:            var(--size-50);
  padding-left:   var(--size-400);
  overflow:       hidden;

  /* Animasi accordion */
  max-height:     0;
  opacity:        0;
  transition:
    max-height var(--duration-moderate) var(--ease-in-out),
    opacity    var(--duration-normal)   var(--ease-default);
}

.navbar-mobile-mega-panel[data-open="true"] {
  max-height:  480px;   /* cukup besar untuk semua item */
  opacity:     1;
  padding-top: var(--size-100);
  padding-bottom: var(--size-200);
}

/* Item di dalam mobile accordion */
.navbar-mobile-mega-item {
  display:         block;
  padding:         var(--size-250) var(--size-300);
  font-size:       var(--text-body-size);
  color:           var(--color-text-secondary);
  text-decoration: none;
  border-radius:   var(--radius-md);
  transition:      var(--transition-base);
}

.navbar-mobile-mega-item:hover {
  color:            var(--color-text-primary);
  background-color: hsla(0, 0%, 0%, 0.05);
}

[data-theme="dark"] .navbar-mobile-mega-item:hover {
  background-color: hsla(0, 0%, 100%, 0.08);
}


/* ==========================================================================
   USER DROPDOWN MENU (setelah sign-in)
   --------------------------------------------------------------------------
   Mengadopsi .dropdown dan .dropdown-menu dari molecules/dropdown,
   dengan kustomisasi visual untuk konteks navbar glass.

   HTML PATTERN:
     <div class="dropdown navbar-user-menu">
       <button class="navbar-user-trigger dropdown-trigger"
               aria-haspopup="true" aria-expanded="false"
               aria-controls="dd-user" aria-label="Menu akun">
         <div class="avatar avatar-sm">
           <img src="user.jpg" alt="Nama User">
           <!-- atau fallback: <span class="avatar-initials">AB</span> -->
         </div>
         <span class="navbar-user-name">Budi</span>     ← opsional
         <span class="dropdown-caret" aria-hidden="true"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right navbar-user-dropdown"
           id="dd-user" role="menu" hidden>
         <li class="navbar-user-dropdown-header">
           <div class="avatar avatar-md">...</div>
           <div>
             <p class="navbar-user-dropdown-name">Budi Santoso</p>
             <p class="navbar-user-dropdown-email">budi@email.com</p>
           </div>
         </li>
         <li class="dropdown-divider" role="separator"></li>
         <li class="dropdown-item" role="menuitem">Profil Saya</li>
         <li class="dropdown-item" role="menuitem">Pesanan</li>
         <li class="dropdown-item" role="menuitem">Pengaturan</li>
         <li class="dropdown-divider" role="separator"></li>
         <li class="dropdown-item dropdown-item-danger" role="menuitem">Keluar</li>
       </ul>
     </div>
   ========================================================================== */

/* ── Wrapper (extend .dropdown dari DS) ── */
.navbar-user-menu {
  position: relative;
  display:  inline-flex;
  align-items: center;
}

/* ── Trigger: avatar + optional name ── */
.navbar-user-trigger {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--size-200);
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       var(--size-100);
  padding-right: var(--size-200);
  border-radius: var(--radius-full);
  transition:
    background-color var(--duration-fast) var(--ease-default),
    box-shadow       var(--duration-fast) var(--ease-default);
}

.navbar-user-trigger:hover {
  background-color: hsla(0, 0%, 0%, 0.06);
}

[data-theme="dark"] .navbar-user-trigger:hover {
  background-color: hsla(0, 0%, 100%, 0.10);
}

.navbar-user-trigger:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Avatar di dalam trigger — ukuran sm (32px) */
.navbar-user-trigger .avatar {
  width:  32px;
  height: 32px;
  flex-shrink: 0;
}

/* Nama user opsional */
.navbar-user-name {
  font-size:   var(--text-label-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
  white-space: nowrap;
}

/* Caret kecil — adopt dari .dropdown-caret DS */
.navbar-user-trigger .dropdown-caret {
  margin-left: 0;
  opacity: 0.6;
  transition: transform var(--duration-normal) var(--ease-default);
}
.navbar-user-menu[data-open="true"] .dropdown-caret {
  transform: rotate(180deg);
}

/* ── Dropdown panel — extend .dropdown-menu dari DS ── */
.navbar-user-dropdown {
  /* Override posisi: muncul dari kanan (karena ini di sudut kanan navbar) */
  left:  auto;
  right: 0;
  top:   calc(100% + var(--size-600));

  /* Ukuran */
  min-width: 220px;

  /* Glass surface — inherit sistem navbar */
  background-color:    var(--navbar-glass-bg-light);
  backdrop-filter:     blur(var(--navbar-glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(1.6);
  border:              1px solid var(--navbar-glass-border-light);

  /* Override shadow dari DS: lebih dalam agar menonjol di atas glass */
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.55);

  border-radius: var(--radius-xl);
  padding:       var(--size-200) var(--size-200);   /* padding horizontal agar item punya radius */
  transform-origin: top right;

  /* Animasi — ds-scale-in dari _motion.css DS */
  animation: navbar-user-dd-enter var(--duration-moderate) var(--ease-spring) both;
}

@keyframes navbar-user-dd-enter {
  from {
    opacity:   0;
    transform: scale(0.93) translateY(-6px);
  }
  to {
    opacity:   1;
    transform: scale(1) translateY(0);
  }
}

/* Exit animation — ditambahkan via JS dengan class */
.navbar-user-dropdown[data-leaving] {
  animation: navbar-user-dd-leave var(--duration-normal) var(--ease-in) both;
  pointer-events: none;
}

@keyframes navbar-user-dd-leave {
  from {
    opacity:   1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity:   0;
    transform: scale(0.95) translateY(-4px);
  }
}

[data-theme="dark"] .navbar-user-dropdown {
  background-color:    var(--navbar-glass-bg-dark);
  border-color:        var(--navbar-glass-border-dark);
  box-shadow:
    var(--shadow-xl),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.06);
}

/* ── Header section (info user) ── */
.navbar-user-dropdown-header {
  display:     flex;
  align-items: center;
  gap:         var(--size-300);
  padding:     var(--size-300) var(--size-300) var(--size-400);
  list-style:  none;
}

.navbar-user-dropdown-name {
  font-size:   var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
  line-height: 1.3;
}

.navbar-user-dropdown-email {
  font-size:   var(--text-label-size);
  color:       var(--color-text-secondary);
  line-height: 1.3;
  margin-top:  var(--size-50);
}

/* ── Override .dropdown-item agar cocok dengan glass panel ── */
.navbar-user-dropdown .dropdown-item {
  border-radius: var(--radius-md);
  padding:       var(--size-250) var(--size-300);
  gap:           var(--size-300);
}

.navbar-user-dropdown .dropdown-item:hover,
.navbar-user-dropdown .dropdown-item[data-focused="true"] {
  background-color: hsla(0, 0%, 0%, 0.06);
}

[data-theme="dark"] .navbar-user-dropdown .dropdown-item:hover,
[data-theme="dark"] .navbar-user-dropdown .dropdown-item[data-focused="true"] {
  background-color: hsla(0, 0%, 100%, 0.10);
}

.navbar-user-dropdown .dropdown-item-danger:hover {
  background-color: var(--color-error-subtle);
}

/* Divider override */
.navbar-user-dropdown .dropdown-divider {
  margin: var(--size-200) var(--size-200);
  background: var(--color-border-default);
}

/* Icon dalam item */
.navbar-user-dropdown .dropdown-item-icon {
  color: var(--color-text-secondary);
}

/* ── Responsive: user menu di mobile ── */
@media (max-width: 767px) {
  /* Dropdown tetap bisa muncul dari tombol user di mobile menu */
  .navbar-user-dropdown {
    right: 0;
    left:  auto;
    min-width: 200px;
  }
}