/* ==========================================================
   KallzStore — Mobile Sidebar (hamburger + drawer animasi)
   ========================================================== */

/* ---------- Hamburger button ---------- */
.nav-actions-wrap{ display: flex; align-items: center; gap: 12px; }
.hamburger-btn{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
}
.hamburger-btn span{
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.hamburger-btn.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-active span:nth-child(2){ opacity: 0; }
.hamburger-btn.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Backdrop ---------- */
.sidebar-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}

/* ---------- Drawer ---------- */
.sidebar-drawer{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(80vw, 320px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px -12px rgba(0,0,0,.6);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index: 91;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.sidebar-head{
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar-head .brand{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
}
.sidebar-head .brand .mark{ color: var(--red-glow); }
.sidebar-close{
  background: transparent; border: none; color: var(--text-dim);
  font-size: 1.6rem; line-height: 1; padding: 4px 8px;
  border-radius: 8px; transition: color .15s, background .15s;
}
.sidebar-close:hover{ color: var(--text); background: var(--surface-2); }

.sidebar-links{ display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.sidebar-links li{ opacity: 0; transform: translateX(16px); transition: opacity .3s ease, transform .3s ease; }
.sidebar-links a{
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  color: var(--text-dim);
  font-weight: 500;
  font-size: .95rem;
  transition: color .15s, background .15s;
}
.sidebar-links a:hover, .sidebar-links a.active{ color: var(--text); background: var(--surface-2); }

.sidebar-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.sidebar-actions .btn{ width: 100%; }

/* Stagger animasi link pas drawer kebuka */
body.sidebar-open .sidebar-links li{ opacity: 1; transform: translateX(0); }
body.sidebar-open .sidebar-links li:nth-child(1){ transition-delay: .08s; }
body.sidebar-open .sidebar-links li:nth-child(2){ transition-delay: .12s; }
body.sidebar-open .sidebar-links li:nth-child(3){ transition-delay: .16s; }
body.sidebar-open .sidebar-links li:nth-child(4){ transition-delay: .20s; }
body.sidebar-open .sidebar-links li:nth-child(5){ transition-delay: .24s; }
body.sidebar-open .sidebar-links li:nth-child(6){ transition-delay: .28s; }

/* ---------- State: sidebar kebuka ---------- */
body.sidebar-open{ overflow: hidden; }
body.sidebar-open .sidebar-backdrop{ opacity: 1; pointer-events: auto; }
body.sidebar-open .sidebar-drawer{ transform: translateX(0); }

/* ---------- Cuma nongol di layar sempit ---------- */
@media (max-width: 900px){
  .hamburger-btn{ display: flex; }
}

@media (prefers-reduced-motion: reduce){
  .hamburger-btn span, .sidebar-backdrop, .sidebar-drawer, .sidebar-links li{ transition: none !important; }
}