/* ==========================================================================
   ORGANISMS / navbar / navbar.css
   --------------------------------------------------------------------------
   DEPENDS ON: button.css, dropdown.css, avatar.css

   HTML PATTERN:
     <header class="navbar" id="navbar">
       <div class="container">
         <div class="navbar-inner">

           <!-- Logo -->
           <a class="navbar-brand" href="/">
             <img class="navbar-logo" src="/assets/logo.svg" alt="Brand">
           </a>

           <!-- Desktop nav -->
           <nav class="navbar-nav" aria-label="Navigasi utama">
             <a class="navbar-link" href="/fitur">Fitur</a>
             <a class="navbar-link navbar-link-active" href="/harga">Harga</a>
             <!-- Dropdown item -->
             <div class="dropdown navbar-dropdown">
               <button class="navbar-link dropdown-trigger" aria-haspopup="true"
                       aria-expanded="false" aria-controls="dd-produk">
                 Produk <span class="dropdown-caret" aria-hidden="true"></span>
               </button>
               <ul class="dropdown-menu" id="dd-produk" role="menu" hidden>
                 <li class="dropdown-item" role="menuitem">ERP Module</li>
               </ul>
             </div>
           </nav>

           <!-- Right side -->
           <div class="navbar-actions">
             <a class="btn btn-ghost btn-sm" href="/login">Masuk</a>
             <a class="btn btn-primary btn-sm" href="/daftar">Daftar Gratis</a>

             <!-- User menu (saat sudah login) -->
             <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="Budi">
                 </div>
               </button>
               <ul class="dropdown-menu dropdown-menu-right" id="dd-user" role="menu" hidden>
                 <li class="dropdown-section-label">Budi Santoso</li>
                 <li class="dropdown-item" role="menuitem">Profil</li>
                 <li class="dropdown-divider" role="separator"></li>
                 <li class="dropdown-item dropdown-item-danger" role="menuitem">Keluar</li>
               </ul>
             </div>
           </div>

           <!-- Hamburger (mobile only) -->
           <button class="navbar-hamburger" aria-controls="navbar-mobile-menu"
                   aria-expanded="false" aria-label="Buka menu navigasi">
             <span class="navbar-hamburger-bar"></span>
             <span class="navbar-hamburger-bar"></span>
             <span class="navbar-hamburger-bar"></span>
           </button>

         </div><!-- /navbar-inner -->
       </div><!-- /container -->

       <!-- Mobile menu -->
       <div class="navbar-mobile-menu" id="navbar-mobile-menu" hidden>
         <nav class="container">
           <a class="navbar-mobile-link" href="/fitur">Fitur</a>
           <a class="navbar-mobile-link navbar-mobile-link-active" href="/harga">Harga</a>
           <hr class="divider my-4">
           <a class="btn btn-secondary btn-full mb-2" href="/login">Masuk</a>
           <a class="btn btn-primary btn-full"  href="/daftar">Daftar Gratis</a>
         </nav>
       </div>
     </header>
   ========================================================================== */


/* --------------------------------------------------------------------------
   BASE NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  position:         sticky;
  top:              0;
  z-index:          var(--z-sticky);
  width:            100%;
  background-color: var(--color-bg-surface);
  border-bottom:    1px solid var(--color-border-default);
  transition:       box-shadow var(--duration-normal) var(--ease-default);
}

/* Scrolled state — JS menambahkan class ini */
.navbar.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* Transparent variant (untuk di atas hero/image) */
.navbar-transparent {
  background-color: transparent;
  border-bottom-color: transparent;
}
.navbar-transparent.is-scrolled {
  background-color: var(--color-bg-surface);
  border-bottom-color: var(--color-border-default);
}


/* --------------------------------------------------------------------------
   INNER LAYOUT
   -------------------------------------------------------------------------- */
.navbar-inner {
  display:         flex;
  align-items:     center;
  gap:             var(--size-400);
  height:          var(--navbar-height-md);   /* 60px */
}


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

.navbar-logo {
  height:    32px;
  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;
}


/* --------------------------------------------------------------------------
   DESKTOP NAVIGATION
   -------------------------------------------------------------------------- */
.navbar-nav {
  display:     flex;
  align-items: center;
  gap:         var(--size-100);
  margin-left: var(--size-400);
  flex:        1;
}

.navbar-link {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--size-100);
  padding:        var(--size-200) var(--size-300);
  font-size:      var(--text-label-size);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-text-secondary);
  text-decoration: none;
  border-radius:  var(--radius-md);
  white-space:    nowrap;
  transition:
    color            var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
  background:     none;
  border:         none;
  cursor:         pointer;
  font-family:    inherit;
}

.navbar-link:hover {
  color:            var(--color-text-primary);
  background-color: var(--color-bg-sunken);
}

.navbar-link-active {
  color:            var(--color-brand);
  background-color: var(--color-brand-subtle);
}
.navbar-link-active:hover {
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand-hover);
}

.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;
}

/* 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:          40px;
  height:         40px;
  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 animation */
.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
   -------------------------------------------------------------------------- */
.navbar-mobile-menu {
  border-top:       1px solid var(--color-border-default);
  background-color: var(--color-bg-surface);
  padding:          var(--size-400) 0 var(--size-600);
  animation:        ds-slide-down var(--duration-moderate) var(--ease-out) both;
}

.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-md);
  transition:
    color            var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
}

.navbar-mobile-link:hover {
  color:            var(--color-text-primary);
  background-color: var(--color-bg-sunken);
}

.navbar-mobile-link-active {
  color:            var(--color-brand);
  background-color: var(--color-brand-subtle);
}

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


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar-nav,
  .navbar-actions {
    display: none;
  }
  .navbar-hamburger {
    display: flex;
  }
}

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