/* ============================================================
   FIX FORCE: SEMBUNYIKAN MENU DI HP & MUNCULKAN HAMBURGER
   ============================================================ */
@media screen and (max-width: 900px) {
  /* Sembunyikan total menu desktop */
  body .nav .nav__links,
  body .nav .nav__links--desktop,
  body .nav__hide-mobile {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Paksa tombol Hamburger muncul & bisa diklik */
  body .mobile-menu-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    position: relative !important;
  }

  /* Rapatkan navbar */
  body .nav {
    justify-content: space-between !important;
    padding: 10px 16px !important;
  }
}
/* ============================================================
   NAVBAR & MOBILE SLIDE MENU (FINAL CLEAN)
   ============================================================ */

/* 1. Styling Dasar Navbar */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--carbon);
  position: sticky;
  top: 0;
  z-index: 50; /* Wajib agar navbar di atas konten lain */
}

.nav__left { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}

.nav__links--desktop { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  margin: 0 16px; 
}

.nav__actions { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

.nav__action-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 50%;
}

/* 2. Styling Tombol Hamburger (Default: Sembunyi di Desktop) */
.mobile-menu-btn {
  display: none; /* Sembunyi secara default */
  background: var(--paper);
  border: 1px solid var(--carbon);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  position: relative;
  z-index: 100; /* Pastikan bisa diklik */
  pointer-events: auto !important;
}
.mobile-menu-btn:hover { 
  background: var(--sky); 
}

/* 3. Styling Drawer (Menu Samping) */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  pointer-events: none; /* Tidak menghalangi klik saat tertutup */
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.is-active {
  opacity: 1;
  pointer-events: auto; /* Bisa diklik saat terbuka */
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  max-width: 85vw;
  height: 100dvh;
  background: var(--paper);
  z-index: 999;
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  transition: right 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mobile-menu.is-open { 
  right: 0; 
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--concrete);
}

.mobile-menu__links {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--carbon);
  transition: background 0.2s;
}
.mobile-menu__links a:hover { background: var(--sky); }
.mobile-menu__links a i { font-size: 18px; color: var(--violet); }
.mobile-menu__links a[href*="logout"] i { color: var(--ember); }

.btn-close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.btn-close:hover { background: var(--mist); }

/* 4. Responsive Rules (Hanya untuk HP/Tablet) */
@media (max-width: 768px) {
  /* Sembunyikan menu desktop */
  .nav__links--desktop { 
    display: none !important; 
  }
  
  /* Sembunyikan tombol teks (Login/Logout) */
  .nav__hide-mobile { 
    display: none !important; 
  }
  
  /* Atur ulang tata letak */
  .nav {
    padding: 10px 16px;
  }
  .nav__left {
    flex: 1;
  }
  .nav__actions {
    flex: 1;
    justify-content: flex-end;
    gap: 12px;
  }
  
  /* Tampilkan tombol hamburger */
  .mobile-menu-btn { 
    display: flex; 
  }
}
/* ============================================================
   CART & ORDERS
   ============================================================ */

/* Cart Badge di Nav */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--ember);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
}

/* Cart Layout */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .cart-layout { grid-template-columns: 2fr 1fr; align-items: start; }
}

/* Cart Item */
.cart-items {
  background: var(--paper);
  border: 1px solid var(--carbon);
  border-radius: var(--r-card);
  overflow: hidden;
}
.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--mist);
  align-items: center;
}
.cart-item:last-child { border-bottom: none; }

.cart-item__thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lav);
  border: 1px solid var(--carbon);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
}
.cart-item__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}

.cart-item__info { min-width: 0; }
.cart-item__cat {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 700;
  margin-bottom: 4px;
}
.cart-item__name {
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
}
.cart-item__price {
  font-weight: 700;
  color: var(--ember);
  font-size: 14px;
}

.cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cart-qty-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--carbon);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--paper);
}
.qty-btn {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
}
.qty-btn:hover:not(:disabled) { background: var(--sky); }
.qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qty-value {
  padding: 0 8px;
  font-weight: 700;
  font-size: 13px;
  min-width: 28px;
  text-align: center;
}
.cart-item__remove {
  background: transparent;
  border: none;
  color: var(--ember);
  cursor: pointer;
  padding: 4px;
  font-size: 16px;
  opacity: 0.7;
  transition: opacity .2s;
}
.cart-item__remove:hover { opacity: 1; }

/* Summary */
.cart-summary {
  background: var(--paper);
  border: 2px solid var(--carbon);
  border-radius: var(--r-card);
  padding: 20px;
  position: sticky;
  top: 100px;
}
.cart-summary h3 {
  margin: 0 0 16px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}
.cart-summary__row--total {
  border-top: 2px dashed var(--concrete);
  margin-top: 8px;
  padding-top: 16px;
  font-size: 16px;
}
.cart-summary__row--total strong { color: var(--ember); font-size: 20px; }

/* Order List */
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--carbon);
  border-radius: var(--r-card);
  padding: 16px;
  transition: all .2s;
}
.order-card:hover {
  border-width: 2px;
  transform: translateY(-2px);
  padding: 15px;
}
.order-card__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.order-card__code {
  font-family: monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--carbon);
}
.order-card__date {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}
.order-card__body {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mist);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--carbon);
  white-space: nowrap;
}
.badge--pending { background: var(--sun); }
.badge--paid { background: var(--mint); }
.badge--cancel { background: var(--concrete); }

/* Order Detail */
.order-detail { max-width: 800px; margin: 0 auto; }
.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--mist);
  gap: 12px;
}
.delivery-box {
  background: var(--sky);
  border: 1px solid var(--carbon);
  border-radius: 14px;
  padding: 12px;
  margin: 8px 0 16px;
}
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed var(--carbon);
  font-size: 14px;
}
.order-total strong {
  font-size: 22px;
  color: var(--ember);
}

/* Mobile */
@media (max-width: 480px) {
  .cart-item { grid-template-columns: 64px 1fr; gap: 10px; }
  .cart-item__thumb { width: 64px; height: 64px; }
  .cart-item__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }
}
/* ============================================================
   VALL SOFT — SLUSH E-COMMERCE THEME (CLEAN & RESPONSIVE)
   ============================================================ */

:root{
  --carbon:#000; --paper:#fff; --sky:#dceeff; --concrete:#cccccc;
  --mist:#f4f4f4; --blue:#4da2ff; --mint:#55db9c; --lav:#e9ccff;
  --ember:#fb4903; --sun:#ffd731; --violet:#5c4ade;
  --font-display:'Antonio', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --r-card:20px; --r-card-lg:32px; --r-pill:1600px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:500;
  color:var(--carbon);
  background:var(--paper);
  letter-spacing:-.01em;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
main.page{max-width:1200px;margin:0 auto;padding:24px 16px 80px;}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--carbon);color:#fff;overflow:hidden;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;}
.marquee__track{display:inline-flex;white-space:nowrap;padding:10px 0;animation:scroll 25s linear infinite;}
.marquee__track span{margin:0 20px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- NAVBAR ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 24px;background:var(--paper);
  border-bottom:1px solid var(--carbon);
  position:sticky;top:0;z-index:50;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-family:var(--font-display);font-size:20px;}
.logo__mark{
  display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-pill);
  background:var(--paper);border:2px solid var(--carbon);font-size:14px;
}
.nav__links{display:flex;gap:8px;flex-wrap:wrap;}
.nav__actions{display:flex;gap:8px;align-items:center;}

/* ---------- BUTTONS & PILLS ---------- */
.pill, .btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:var(--r-pill);font-weight:700;font-size:13px;
  border:1px solid var(--carbon);cursor:pointer;font-family:inherit;transition:all .2s ease;
}
.pill{background:var(--paper);color:var(--carbon);}
.pill:hover{background:var(--sky);}
.btn--fill{background:var(--carbon);color:var(--paper);}
.btn--fill:hover{background:#333;transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--carbon);}
.btn--ghost:hover{background:var(--mist);}
.btn--sm{padding:6px 12px;font-size:12px;}

/* ---------- HERO SECTION ---------- */
.hero{
  position:relative; background:var(--sky);
  border-radius:var(--r-card-lg); border:2px solid var(--carbon);
  padding:48px 32px; margin-bottom:40px; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero__content{position:relative; z-index:2; max-width:600px;}
.hero__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(36px, 6vw, 64px); line-height:.95; margin:0 0 16px;
}
.hero__desc{font-size:clamp(14px, 2vw, 16px); line-height:1.5; margin-bottom:24px; color:#333;}
.hero__bg-shape{
  position:absolute; right:-10%; bottom:-20%; width:50%; aspect-ratio:1;
  background:var(--blue); border:2px solid var(--carbon); border-radius:50%;
  opacity:0.6; z-index:0; animation:float 8s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(20px,-20px) rotate(5deg)}}

/* Search Bar */
.search-bar{
  display:flex; width:100%; max-width:500px; background:var(--paper);
  padding:6px; border-radius:var(--r-pill); border:2px solid var(--carbon);
  position:relative; z-index:2;
}
.search-bar input{
  flex:1; border:none; background:transparent; padding:8px 16px;
  font-family:inherit; font-size:14px; outline:none; min-width:0;
}
.search-bar .btn{border-radius:var(--r-pill); padding:10px 20px;}

/* ---------- SECTION TITLES ---------- */
.section{margin:48px 0;}
.section-header{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px;}
.section__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(24px, 4vw, 36px); margin:0;
  text-transform:uppercase;
}

/* ---------- KATEGORI GRID ---------- */
.category-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:12px;
}
.category-card{
  background:var(--paper); border:1px solid var(--carbon); border-radius:var(--r-card);
  padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:all .2s var(--ease-bounce);
}
.category-card:hover{background:var(--sun); transform:translateY(-4px); border-width:2px;}
.category-card i{font-size:28px; color:var(--carbon);}
.category-card__name{font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; text-align:center;}

/* ---------- PRODUCT GRID ---------- */
.grid{
  display:grid; 
  grid-template-columns:repeat(4, 1fr); 
  gap:20px;
}

.card{
  background:var(--paper); border:1px solid var(--carbon); border-radius:var(--r-card);
  padding:12px; display:flex; flex-direction:column; position:relative;
  transition:all .3s ease;
}
.card:hover{transform:translateY(-4px); border-width:2px; box-shadow:4px 4px 0 var(--carbon);}

.card__thumb{
  width:100%; aspect-ratio:1; border-radius:calc(var(--r-card) - 6px);
  background:var(--lav); border:1px solid var(--carbon); overflow:hidden; position:relative;
}
.card__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.card:hover .card__thumb img{transform:scale(1.08);}

.card__badge{
  position:absolute; top:8px; left:8px; background:var(--mint);
  border:1px solid var(--carbon); padding:4px 10px; border-radius:var(--r-pill);
  font-size:10px; font-weight:700; text-transform:uppercase; z-index:2;
}

.card__info{display:flex; flex-direction:column; gap:4px; margin-top:12px; flex:1;}
.card__name{font-weight:700; font-size:14px; margin:0; line-height:1.3;}
.card__meta{font-size:11px; color:#666;}
.card__price{font-weight:800; font-size:16px; margin-top:8px;}

.card__footer{
  display:flex; align-items:center; justify-content:space-between; 
  margin-top:12px; padding-top:12px; border-top:1px solid var(--mist);
}
.card__btn{
  background:var(--carbon); color:var(--paper); width:36px; height:36px;
  border-radius:50%; display:grid; place-items:center; transition:background .2s;
}
.card:hover .card__btn{background:var(--ember);}
.card__btn i{font-size:16px;}

/* ---------- FORMS & AUTH ---------- */
.form-card{
  background:var(--paper); border:1px solid var(--carbon); border-radius:var(--r-card-lg);
  padding:32px; max-width:480px; margin:0 auto;
}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.field label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;}
.field input, .field textarea{
  padding:12px 16px; border-radius:12px; border:1px solid var(--carbon);
  font-family:inherit; font-size:14px; background:var(--paper);
}
.field input:focus, .field textarea:focus{background:var(--sky); outline:none;}

/* ---------- FOOTER ---------- */
.footer{border-top:2px solid var(--carbon); background:var(--sky); padding:40px 24px 20px; margin-top:60px;}
.footer__inner{max-width:1200px; margin:0 auto; display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr;}
.footer__brand{font-family:var(--font-display); font-size:28px; margin-bottom:8px;}
.footer__col strong{display:block; font-size:14px; margin-bottom:12px; text-transform:uppercase;}
.footer__col a{display:block; margin-bottom:8px; font-size:14px; color:#333;}
.footer__copy{text-align:center; margin-top:40px; font-size:12px; border-top:1px solid var(--carbon); padding-top:20px;}

/* ---------- MOTION (Reveal) ---------- */
[data-reveal]{opacity:0; transform:translateY(20px); transition:all .6s var(--ease) var(--delay,0ms);}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

/* ============================================================
   RESPONSIVE (MOBILE FIXES)
   ============================================================ */
@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hero { padding: 32px 20px; }
  .hero__bg-shape { display: none; } /* Hilangkan shape di HP agar bersih */
  .nav__links { display: none; } /* Sembunyikan menu tengah di HP */
  .search-bar { flex-direction: column; border-radius: var(--r-card); }
  .search-bar input { padding: 12px; }
  .search-bar .btn { width: 100%; border-radius: var(--r-card); }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 480px) {
  .nav { padding: 12px 16px; }
  .logo__mark { width: 32px; height: 32px; font-size: 12px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .category-card { padding: 12px 8px; }
  .category-card i { font-size: 24px; }
  .category-card__name { font-size: 11px; }
  
  .card { padding: 8px; border-radius: 16px; }
  .card__badge { padding: 2px 6px; font-size: 9px; top: 4px; left: 4px; }
  .card__name { font-size: 12px; }
  .card__price { font-size: 14px; }
  .card__btn { width: 28px; height: 28px; }
  .card__btn i { font-size: 12px; }
  
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
}

/* ============================================================
   Vall Soft — Slush theme
   Motion layer: reveal, stagger, sticker float, ribbon blob,
   card tilt, shine sweep, char reveal, scroll progress.
   ============================================================ */


:root{
  --carbon:#000; --paper:#fff; --sky:#dceeff; --concrete:#cccccc;
  --mist:#e9e9e9; --blue:#4da2ff; --mint:#55db9c; --lav:#e9ccff;
  --ember:#fb4903; --sun:#ffd731; --violet:#5c4ade;
  --font-display:'Antonio','Bowlby One',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --r-card:20px; --r-card-lg:40px; --r-pill:1600px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:500;
  color:var(--carbon);
  background:var(--paper);
  letter-spacing:-.01em;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
main.page{max-width:1440px;margin:0 auto;padding:24px 24px 80px}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--carbon);
  z-index:9999;
  transition:width .1s linear;
  pointer-events:none;
}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--carbon);color:#fff;overflow:hidden;
  font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase;
  position:relative;
}
.marquee::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(77,162,255,.25),transparent);
  transform:translateX(-100%);
  animation:marquee-shine 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes marquee-shine{
  0%,60%{transform:translateX(-100%)}
  100%  {transform:translateX(100%)}
}
.marquee__track{
  display:inline-flex;white-space:nowrap;padding:10px 0;
  animation:scroll 25s linear infinite;
  will-change:transform;
}
.marquee__track span{margin:0 24px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- NAV ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 24px;background:var(--paper);
  border-bottom:1px solid var(--carbon);
  position:sticky;top:0;z-index:10;
  transition:padding .3s var(--ease), background .3s ease;
}
.nav.is-scrolled{
  padding:8px 24px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.logo{display:flex;align-items:center;gap:8px;font-weight:800}
.logo__mark{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--carbon);
  font-family:var(--font-display);font-size:14px;
  transition:transform .3s var(--ease);
}
.logo__mark:hover{animation:wobble .5s ease}
.nav__links{display:flex;gap:4px;flex-wrap:wrap}
.nav__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- BUTTONS & PILLS ---------- */
.pill{
  display:inline-flex;align-items:center;
  padding:9px 14px;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--carbon);
  font-weight:700;font-size:12px;letter-spacing:.032em;
  transition:transform .15s ease, background .2s ease;
  position:relative;overflow:hidden;
}
.pill:hover{transform:translateY(-1px);background:var(--sky)}
.pill:active{transform:scale(.96)}
.pill--ghost{background:var(--mist)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;border-radius:var(--r-pill);
  font-weight:700;font-size:13px;letter-spacing:.032em;
  border:1px solid var(--carbon);
  cursor:pointer;font-family:inherit;
  transition:transform .15s ease, background .2s ease, color .2s ease;
  position:relative;overflow:hidden;
  isolation:isolate;
}
/* Shine sweep */
.btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s var(--ease);
  z-index:1;
  pointer-events:none;
}
.btn:hover::before{transform:translateX(120%)}
.btn > *{position:relative;z-index:2}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.96)}
.btn--fill{background:var(--carbon);color:var(--paper)}
.btn--fill:hover{background:#1a1a1a}
.btn--ghost{background:var(--paper);color:var(--carbon)}
.btn--ghost:hover{background:var(--sky)}
.btn--sm{padding:8px 12px;font-size:12px}

/* ---------- ALERTS ---------- */
.alert{
  max-width:1440px;margin:16px auto 0;
  padding:12px 16px;border-radius:var(--r-card);
  border:1px solid var(--carbon);font-weight:500;font-size:14px;
  animation:alert-in .5s var(--ease-bounce) both;
}
@keyframes alert-in{
  from{opacity:0;transform:translateY(-12px) scale(.96)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
.alert--error{background:var(--ember);color:#fff}
.alert--success{background:var(--mint);color:var(--carbon)}
.alert--info{background:var(--sun);color:var(--carbon)}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:var(--sky);
  border-radius:var(--r-card-lg);
  border:1px solid var(--carbon);
  padding:60px 40px;
  overflow:hidden;
  margin-bottom:48px;
}
.hero__display{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(72px,12vw,200px);
  line-height:.8;
  letter-spacing:-.02em;
  margin:0;
}
/* Split chars — diisi JS */
.hero__display .char{
  display:inline-block;
  opacity:0;
  transform:translateY(40%) rotate(6deg);
  animation:char-drop .7s var(--ease-bounce) forwards;
  animation-delay:calc(var(--ci,0) * 60ms + 100ms);
}
@keyframes char-drop{
  to{opacity:1; transform:translateY(0) rotate(0)}
}

.hero__tag{
  font-size:clamp(16px,2vw,24px);
  max-width:720px;margin:24px 0 32px;
  line-height:1.35;
}
.hero__actions{display:flex;gap:8px;flex-wrap:wrap}

.hero__sticker{
  position:absolute;border:1px solid var(--carbon);
  border-radius:20px;padding:14px 18px;
  font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase;
  --rot:0deg;
  transform:rotate(var(--rot));
  animation:float 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.8s);
  will-change:transform;
  user-select:none;
  transition:transform .3s var(--ease-bounce);
  cursor:default;
}
.hero__sticker:hover{
  animation:wobble-scale .6s var(--ease-bounce);
  transform:rotate(var(--rot)) scale(1.1);
}
@keyframes wobble-scale{
  0%,100%{transform:rotate(var(--rot)) scale(1.1)}
  25%    {transform:rotate(calc(var(--rot) - 8deg)) scale(1.15)}
  75%    {transform:rotate(calc(var(--rot) + 8deg)) scale(1.15)}
}
.hero__sticker--a{background:var(--ember);color:#fff;top:24px;right:40px;--rot:6deg}
.hero__sticker--b{background:var(--sun);top:120px;right:160px;--rot:-8deg}
.hero__sticker--c{background:var(--violet);color:#fff;bottom:24px;right:24px;--rot:4deg}

/* Ribbon blob dekoratif */
.hero__ribbon{
  position:absolute;
  right:-10%;bottom:-30%;
  width:55%;aspect-ratio:1;
  background:var(--blue);
  border:1px solid var(--carbon);
  border-radius:50%;
  opacity:.55;
  pointer-events:none;
  z-index:0;
  animation:ribbon-float 9s ease-in-out infinite;
  will-change:transform;
}
.hero > *:not(.hero__ribbon){position:relative;z-index:1}

/* ---------- SECTIONS ---------- */
.section{margin:48px 0}
.section--gray{background:var(--concrete);border-radius:var(--r-card-lg);border:1px solid var(--carbon);padding:40px 32px}
.section--sky{background:var(--sky);border-radius:var(--r-card-lg);border:1px solid var(--carbon);padding:40px 32px}
.section__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(40px,6vw,80px);line-height:.85;margin:0 0 24px;
  position:relative;
  display:inline-block;
}
/* Underline reveal di bawah judul */
.section__title::after{
  content:'';
  position:absolute;
  left:0;bottom:-8px;height:4px;width:0;
  background:var(--carbon);
  border-radius:4px;
  transition:width .7s var(--ease) .2s;
}
.section__title.is-visible::after{width:100%}

/* ---------- CATEGORY CHIPS ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--carbon);background:var(--paper);
  font-size:12px;font-weight:700;letter-spacing:.032em;text-transform:uppercase;
  transition:transform .2s var(--ease-bounce), background .2s ease;
  display:inline-block;
}
.chip:hover{
  transform:translateY(-2px) scale(1.05);
  background:var(--mist);
}
.chip:active{transform:scale(.95)}
.chip--active{background:var(--blue);color:#fff}
.chip--active:hover{background:var(--blue)}

/* ---------- PRODUCT GRID (3 kolom) ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}
@media (max-width:960px){
  .grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
}
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
}
@media (max-width:380px){
  .grid{grid-template-columns:1fr}
}

/* ---------- CARD ---------- */
.card{
  background:var(--paper);border:1px solid var(--carbon);
  border-radius:var(--r-card);padding:16px;
  display:flex;flex-direction:column;gap:10px;
  transition:
    transform .35s var(--ease),
    background .3s ease,
    border-color .3s ease;
  will-change:transform;
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
}
/* Shine sweep halus */
.card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(77,162,255,.18) 50%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
  pointer-events:none;
  z-index:1;
}
.card:hover::before{transform:translateX(120%)}

/* Content wrapper di atas shine */
.card > *{position:relative;z-index:2}

.card:hover{
  transform:translateY(-6px) rotate(-.4deg);
  background:var(--sky);
  border-color:var(--carbon);
}
.card:active{transform:translateY(-2px) rotate(0) scale(.98)}
.card__thumb{
  aspect-ratio:1;border-radius:var(--r-card);
  background:var(--lav);border:1px solid var(--carbon);
  overflow:hidden;display:grid;place-items:center;
  font-family:var(--font-display);font-size:32px;color:var(--carbon);
  transition:border-radius .4s var(--ease);
}
.card:hover .card__thumb{border-radius:calc(var(--r-card) - 4px)}
.card__thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease), filter .4s ease;
}
.card:hover .card__thumb img{
  transform:scale(1.1) rotate(1.5deg);
  filter:saturate(1.15);
}
.card__name{
  font-weight:700;font-size:15px;margin:0;
  transition:letter-spacing .3s ease;
}
.card:hover .card__name{letter-spacing:.01em}
.card__meta{font-size:12px;color:#333}
.card__price{
  font-weight:700;font-size:16px;margin-top:auto;
  transition:transform .3s var(--ease-bounce), color .3s ease;
  display:inline-block;
  transform-origin:left center;
}
.card:hover .card__price{
  transform:scale(1.08);
  color:var(--ember);
}
.card__cat{
  align-self:flex-start;font-size:10px;font-weight:700;
  letter-spacing:.032em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-pill);
  border:1px solid var(--carbon);background:var(--mint);
  transition:transform .3s var(--ease-bounce), background .3s ease;
}
.card:hover .card__cat{
  transform:translateX(2px) rotate(-2deg);
  background:var(--sun);
}

/* ---------- CARD MOBILE (kecil) ---------- */
@media (max-width:600px){
  .card{padding:10px;gap:6px;border-radius:16px}
  .card__thumb{font-size:20px;border-radius:12px}
  .card__name{font-size:13px;line-height:1.2}
  .card__meta{font-size:10px}
  .card__price{font-size:14px}
  .card__cat{font-size:9px;padding:3px 6px}
}

/* ---------- FORMS ---------- */
.form{max-width:520px;margin:0 auto}
.form-card{
  background:var(--paper);border:1px solid var(--carbon);
  border-radius:var(--r-card-lg);padding:32px;
}
.form-card h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(40px,5vw,64px);line-height:.85;margin:0 0 24px;
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:12px;font-weight:700;letter-spacing:.032em;text-transform:uppercase}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:15px;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--carbon);background:var(--paper);
  outline:none;width:100%;
  transition:background .2s ease, transform .2s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  background:var(--sky);
  transform:translateY(-1px);
}
.field textarea{min-height:80px;resize:vertical}
.field__hint{font-size:12px;color:#555}
.field__err{font-size:12px;color:var(--ember);font-weight:700}
.radio-group{display:flex;gap:8px;flex-wrap:wrap}
.radio-group label{
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--carbon);background:var(--paper);
  cursor:pointer;font-size:12px;font-weight:700;
  letter-spacing:.032em;text-transform:uppercase;
  transition:background .2s ease, color .2s ease, transform .2s var(--ease-bounce);
}
.radio-group label:hover{transform:translateY(-1px)}
.radio-group input{display:none}
.radio-group input:checked + span{background:var(--carbon);color:#fff}
.radio-group label:has(input:checked){background:var(--carbon);color:#fff}

/* ---------- PROFILE ---------- */
.profile{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:900px){.profile{grid-template-columns:320px 1fr}}
.profile__side{
  background:var(--sky);border:1px solid var(--carbon);
  border-radius:var(--r-card-lg);padding:24px;
}
.avatar{
  width:128px;height:128px;border-radius:var(--r-pill);
  border:1px solid var(--carbon);overflow:hidden;
  background:var(--lav);display:grid;place-items:center;
  margin:0 auto 12px;font-family:var(--font-display);font-size:40px;
  transition:transform .4s var(--ease-bounce);
}
.avatar:hover{transform:scale(1.05) rotate(-3deg)}
.avatar img{width:100%;height:100%;object-fit:cover}
.profile__side h2{margin:8px 0 4px;text-align:center;font-size:20px}
.profile__side .handle{text-align:center;color:#333;font-size:14px;margin-bottom:16px}
.kv{display:grid;grid-template-columns:1fr;gap:8px;margin-top:16px}
.kv div{
  background:var(--paper);border:1px solid var(--carbon);
  border-radius:14px;padding:10px 12px;
  display:flex;justify-content:space-between;gap:8px;
  font-size:13px;
  transition:transform .2s var(--ease), background .2s ease;
}
.kv div:hover{transform:translateX(2px);background:var(--mist)}
.kv strong{font-weight:700}
.kv span{word-break:break-all;text-align:right}

/* ---------- TABLE (admin) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--carbon);border-radius:var(--r-card)}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper)}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--carbon)}
th{background:var(--mist);font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase}
tbody tr{transition:background .2s ease}
tbody tr:hover{background:var(--sky)}
tr:last-child td{border-bottom:none}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--carbon);background:var(--concrete);margin-top:80px}
.footer__inner{
  max-width:1440px;margin:0 auto;
  padding:40px 24px;
  display:grid;grid-template-columns:1fr;gap:24px;
}
@media(min-width:720px){.footer__inner{grid-template-columns:2fr 1fr 1fr}}
.footer__brand{font-family:var(--font-display);font-size:32px;line-height:.9;margin-bottom:8px}
.footer p{font-size:14px;max-width:400px}
.footer__col{display:flex;flex-direction:column;gap:6px;font-size:14px}
.footer__col a{transition:transform .2s var(--ease), color .2s ease;display:inline-block;width:fit-content}
.footer__col a:hover{transform:translateX(4px);color:var(--ember)}
.footer__col strong{font-size:12px;letter-spacing:.032em;text-transform:uppercase;margin-bottom:4px}
.footer__copy{
  text-align:center;padding:16px;font-size:12px;
  border-top:1px solid var(--carbon);
  letter-spacing:.032em;text-transform:uppercase;
}

/* ============================================================
   MOTION LAYER
   ============================================================ */

@keyframes float{
  0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}
  50%    {transform:rotate(var(--rot,0deg)) translateY(-6px)}
}

@keyframes wobble{
  0%,100%{transform:rotate(0)}
  25%    {transform:rotate(-6deg)}
  75%    {transform:rotate(6deg)}
}

@keyframes ribbon-float{
  0%,100%{transform:translate(0,0) rotate(0) scale(1)}
  50%    {transform:translate(24px,-24px) rotate(8deg) scale(1.06)}
}

/* Reveal on scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s var(--ease) var(--delay, 0ms),
    transform .7s var(--ease) var(--delay, 0ms);
  will-change:opacity, transform;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Stagger — anak-anak otomatis delay bertingkat */
.stagger > :nth-child(1){--delay:0ms}
.stagger > :nth-child(2){--delay:70ms}
.stagger > :nth-child(3){--delay:140ms}
.stagger > :nth-child(4){--delay:210ms}
.stagger > :nth-child(5){--delay:280ms}
.stagger > :nth-child(6){--delay:350ms}
.stagger > :nth-child(n+7){--delay:420ms}

/* Card entrance — slide + rotate */
.stagger > .card{
  opacity:0;
  transform:translateY(28px) scale(.96) rotate(-1deg);
  transition:
    opacity .6s var(--ease) var(--delay, 0ms),
    transform .6s var(--ease-bounce) var(--delay, 0ms);
}
.stagger > .card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1) rotate(0);
}

/* Floating dots latar (dekoratif — tambahkan ke body jika perlu) */
.bg-dots{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.bg-dots span{
  position:absolute;
  width:8px;height:8px;
  border:1px solid var(--carbon);
  border-radius:50%;
  background:var(--sun);
  opacity:.6;
  animation:dot-drift 12s ease-in-out infinite;
}
.bg-dots span:nth-child(1){top:10%;left:8%;background:var(--ember);animation-delay:0s}
.bg-dots span:nth-child(2){top:30%;left:92%;background:var(--mint);animation-delay:-3s}
.bg-dots span:nth-child(3){top:60%;left:5%;background:var(--violet);animation-delay:-6s}
.bg-dots span:nth-child(4){top:80%;left:88%;background:var(--sun);animation-delay:-9s}
.bg-dots span:nth-child(5){top:45%;left:50%;background:var(--blue);animation-delay:-2s}
@keyframes dot-drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(20px,-20px) scale(1.3)}
  66%    {transform:translate(-20px,15px) scale(.8)}
}

/* Page fade-in */
main.page{
  animation:page-in .6s var(--ease) both;
}
@keyframes page-in{
  from{opacity:0; transform:translateY(8px)}
  to  {opacity:1; transform:translateY(0)}
}

/* Prefers-reduced-motion — matikan semua animasi */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important; transform:none !important}
  .hero__display .char{opacity:1 !important; transform:none !important; animation:none !important}
  .stagger > .card{opacity:1 !important; transform:none !important}
}