/* =========================================================
   CNFSTORE — STYLE.CSS (FINAL CLEANED)
   - Based on your last style.css, deduped & fixed.
   - Header aman (anchor tidak ketutupan)
   - Menu mobile full width, tanpa overflow
   - Anti scroll horizontal di HP
   - Hero image overlay (tetap terlihat jelas)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --purple:#8B5CF6; --purple2:#7C3AED; --emerald:#10B981; --amber:#F59E0B; --red:#EF4444;
  --bg1:#0f0f23; --bg2:#1a1a2e; --bg3:#16213e;
  --br:16px; --shadow:0 25px 50px -12px rgba(0,0,0,.25);
  --t: .25s cubic-bezier(.4,0,.2,1);
  --header-h: 80px; /* disesuaikan otomatis via JS jika perlu */
}

/* ---------- Base & Global Guards ---------- */
*{ box-sizing:border-box }
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* anchor stop di bawah header */
}
html, body{
  width:100%; max-width:100%;
  overflow-x:hidden;       /* cegah gulir kiri/kanan di HP */
  overscroll-behavior-x:none;
  touch-action:pan-y;
}
body{
  padding-top: var(--header-h);  /* dorong konten turun sesuai header */
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  color:#fff; line-height:1.6;
}
.container{max-width:1200px;margin:auto;padding:0 20px}

/* pastikan elemen besar tidak meluber viewport */
.header, .nav, .menu, .container, .hero, .hero-video,.order, .container, .grid, .overlay{ max-width:100%; }

.grid {
  align-items: start !important;
}

/* ---------- Header & Nav (single source of truth) ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(15,15,35,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(139,92,246,.25);
  transition:background .3s, box-shadow .3s;
}
.nav{
  max-width:1200px; margin:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.menu{
  display:flex; gap:22px; align-items:center; list-style:none;
  margin:0; padding:0;
}
.menu a{
  color:#fff; text-decoration:none; font-weight:600; position:relative; padding:6px 0;
  transition:color .3s;
}
.menu a:hover, .menu a.active{ color:var(--purple); }
.mobile-btn{
  display:none; background:none; border:0; color:#fff; font-size:24px; cursor:pointer;
}

/* ---------- Mobile Menu (satu versi, no overflow) ---------- */
@media (max-width: 768px){
  .menu{
    position:absolute; top:100%; left:0; right:0; width:100vw;
    background:rgba(15,15,35,.98);
    flex-direction:column; gap:18px; padding:14px 20px; display:none;
    border-bottom:1px solid rgba(139,92,246,.25);
  }
  .menu.active{ display:flex; }
  .mobile-btn{ display:block; }
  :root{ --header-h: 70px; } /* header sedikit lebih pendek di HP */
}

/* ---------- Hero (image + overlay) ---------- */
.hero{position:relative;overflow:hidden}
.hero .bg{
  position:absolute; inset:0;
  background:url('/assets/img/banner.png?v=2') center/cover no-repeat;
}



.logo-img {
  height: 32px;    /* atur sesuai desain */
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}



.hero::after{
  content:""; position:absolute; inset:0;
  /* overlay tipis agar gambar tetap jelas */
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(15,15,35,.35) 60%, rgba(15,15,35,.55) 100%);
}
.hero-txt{
  position:relative;              /* penting agar ::before layering benar */
  background: rgba(0,0,0,0.35);
  padding: 20px;
  border-radius: 12px;
  display: inline-block;
  z-index:1;
}
.hero-txt::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.4);
  filter:blur(20px);
  z-index:-1;
}

.container{max-width:1200px;margin:auto;padding:0 20px}
.hero .container{position:relative;z-index:1;padding:90px 20px 60px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{
  font-size:clamp(28px,5vw,52px);margin:0 0 12px;
  background:linear-gradient(135deg,#fff,var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:900
}
.hero p{color:#d1d5db;margin:0 0 16px;max-width:560px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:12px 20px;font-weight:700;text-decoration:none;cursor:pointer;transition:var(--t)}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;box-shadow:0 10px 25px rgba(139,92,246,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(139,92,246,.4)}
.btn-secondary{background:transparent;color:var(--purple);border:2px solid var(--purple)}
.btn-secondary:hover{background:var(--purple);color:#fff;transform:translateY(-2px)}
.stats{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}
.stats b{display:block;font-size:28px;color:var(--purple)}
.stats span{color:#9ca3af;font-size:12px;letter-spacing:.6px;text-transform:uppercase}
.hero-art{position:relative;height:280px}
.orb{
  position:absolute;inset:auto 0 0 auto;margin:auto;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,92,246,.45),transparent 70%);filter:blur(6px)
}
.card-tilt{
  position:absolute;right:40px;top:30px;background:rgba(255,255,255,.06);
  border:1px solid rgba(139,92,246,.25); border-radius:16px; backdrop-filter:blur(6px);
  padding:18px 16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start
}
.card-tilt i{font-size:22px;color:#ffd86b}
.card-tilt span{font-weight:700;color:#fff}

/* ---------- Section Heads ---------- */
.section-head{text-align:center;margin:48px 0 28px}
.section-head h2{
  font-size:36px;margin:0 0 8px;
  background:linear-gradient(135deg,#fff,var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:900
}
.section-head p{color:#9ca3af;margin:0}

/* ---------- Order ---------- */
.order{
  padding:40px 0 80px;
  background:linear-gradient(180deg,rgba(26,26,46,.8),rgba(15,15,35,.95))
}
.rating-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(139,92,246,.25);
  padding:10px 14px;border-radius:12px;margin:16px 0 20px
}
.rating-bar .score{font-size:20px;color:#F59E0B;font-weight:800;margin-right:6px}
.rating-bar .stars{color:#F59E0B;margin-right:8px}
.rating-bar .text{color:#9ca3af;font-size:13px}
.help-btn{
  border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.2);
  color:var(--purple);padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer
}
.help-btn:hover{background:var(--purple);color:#fff;transform:translateY(-1px);transition:var(--t)}

.grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
.panel{
  background:rgba(255,255,255,.04);border:1px solid rgba(139,92,246,.2);
  border-radius:20px;padding:18px;box-shadow:var(--shadow)
}
/* Summary nempel di bawah header, tingginya mengikuti konten */
.summary {
  position: sticky !important;
  top: calc(var(--header-h) + 20px) !important;
  height: max-content;              /* biar tidak stretch */
  align-self: start;                /* paksa di atas kolom */
  will-change: top;                 /* smoother */
}

/* Stepper */
.stepper{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;list-style:none;margin:0 0 16px;padding:0}
.stepper li{background:rgba(255,255,255,.06);border:1px solid rgba(139,92,246,.15);border-radius:8px;padding:8px 10px;font-size:12px;text-align:center;color:#cfd3dc}
.stepper li.done{border-color:#10B981;color:#10B981}

/* Blocks */
.block{background:rgba(255,255,255,.03);border:1px solid rgba(139,92,246,.15);border-radius:16px;padding:16px;margin-bottom:14px}
.block h3{margin:0 0 10px;font-size:18px;display:flex;gap:8px;align-items:center}

/* Inputs umum */
.label{display:block;font-weight:700;margin:6px 0 8px}
.input-group{
  display:flex;align-items:center;background:rgba(255,255,255,.05);
  border:2px solid rgba(139,92,246,.3);border-radius:12px;padding:8px;transition:var(--t)
}
.input-group:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.input-group input{flex:1;background:transparent;border:0;color:#fff;outline:none;font-size:15px}
.input-group input::placeholder{color:#9ca3af}
.btn-ghost{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  border:0;color:#fff;border-radius:8px;display:inline-grid;place-items:center;
  width:46px;height:40px;cursor:pointer
}
.cc{background:rgba(139,92,246,.2);color:var(--purple);padding:6px 10px;border-radius:8px;font-weight:800;margin-right:8px;display:flex;gap:6px;align-items:center}

.note{margin-top:8px;color:#9ca3af;font-size:13px;display:flex;gap:8px;align-items:center}
.note-green{background:rgba(16,185,129,.1);color:#10B981;border-left:3px solid #10B981;padding:10px;border-radius:8px;margin-top:10px}

/* Promo group align (tanpa ubah HTML) */
.input-group:has(#promoCode){ align-items:stretch; gap:0; padding:0; overflow:hidden; }
.input-group:has(#promoCode) #promoCode{ flex:1; padding:12px 14px; }
.input-group:has(#promoCode) #applyPromo{
  width:auto; height:auto; border-radius:0; padding:0 18px;
  border-left:2px solid rgba(139,92,246,.4);
}
#applyPromo:hover:not(:disabled){ transform:none; box-shadow:0 6px 18px rgba(139,92,246,.35); }
#applyPromo:disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(8%); }

/* Tabs */
.tabs{display:flex;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(139,92,246,.25);border-radius:12px;padding:4px;margin-bottom:12px}
.tab{flex:1;background:transparent;border:0;color:#9ca3af;font-weight:800;border-radius:8px;padding:10px;cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff}

/* Flash sale */
.flash{
  background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(249,115,22,.1));
  border:2px solid rgba(245,158,11,.3);border-radius:16px;padding:14px;margin-bottom:12px
}
.flash h4{color:#F59E0B;margin:0 0 10px;display:flex;gap:8px;align-items:center}
.flash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.flash-item{
  background:rgba(255,255,255,.05);border:2px solid rgba(245,158,11,.2);border-radius:12px;
  padding:12px;text-align:center;position:relative;transition:var(--t);cursor:pointer
}
.flash-item.selected,.flash-item:hover{border-color:#F59E0B;transform:translateY(-2px);box-shadow:0 10px 25px rgba(245,158,11,.15)}
.robux-badge{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#F59E0B,#F97316);display:grid;place-items:center;font-weight:900;margin:0 auto 6px}
.flash-price{color:#F59E0B;font-weight:900}
.old-price{color:#9ca3af;text-decoration:line-through;font-size:12px}
.discount-badge{position:absolute;top:8px;right:8px;background:#F59E0B;color:#fff;border-radius:6px;padding:2px 6px;font-size:11px;font-weight:800}
.flash-btn{margin-top:8px;width:100%;border:0;background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;border-radius:8px;padding:8px;font-weight:800;cursor:pointer}

/* Products */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.product-card{
  background:rgba(255,255,255,.05);border:2px solid rgba(139,92,246,.25);
  border-radius:12px;padding:12px;text-align:center;position:relative;transition:var(--t);cursor:pointer
}
.product-card:hover,.product-card.selected{border-color:var(--purple);transform:translateY(-2px);box-shadow:0 10px 25px rgba(139,92,246,.15)}
.robux-ic{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple2));display:grid;place-items:center;margin:0 auto 6px;font-weight:900}
.product-amount{font-weight:800}
.price-now{color:var(--emerald);font-weight:800}
.price-old{color:#9ca3af;text-decoration:line-through;font-size:12px}
.discount-tag{position:absolute;top:8px;right:8px;background:#10B981;color:#fff;border-radius:6px;padding:2px 6px;font-size:11px;font-weight:800}
.add-btn{margin-top:6px;width:100%;border:0;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;border-radius:8px;padding:8px;font-weight:800;cursor:pointer}

/* Payments */
.payments{display:flex;gap:10px;margin-top:8px}
.pay-card{
  flex:1;background:rgba(255,255,255,.05);border:2px solid rgba(139,92,246,.25);
  border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;cursor:pointer;transition:var(--t)
}
.pay-card.active,.pay-card:hover{border-color:var(--purple);background:rgba(139,92,246,.12);transform:translateY(-2px)}
.pay-card .ic{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple2));display:grid;place-items:center;color:#fff;font-size:18px}

/* summary */
.summary-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:10px}
.brand-mini{display:flex;align-items:center;gap:8px}
.mini-ic{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--purple),var(--purple2));display:grid;place-items:center}
.rate{display:flex;gap:6px;align-items:center;color:#F59E0B}
.current-product{background:rgba(255,255,255,.05);border:1px solid rgba(139,92,246,.25);border-radius:12px;padding:12px;text-align:center}
.empty{color:#9ca3af;padding:18px 6px}
.empty i{display:block;font-size:28px;margin-bottom:6px}
.item-title{font-weight:900}
.prices{margin-top:6px}
.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.row.total{border-top:2px solid rgba(245,158,11,.3);border-bottom:0;margin-top:6px;padding-top:12px}
.row b{font-weight:900}
.row .disc{color:#FF6B6B}
.qty{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qty-ctrl{display:flex;gap:6px;align-items:center}
.qbtn{width:34px;height:34px;border:1px solid var(--purple);background:rgba(139,92,246,.12);color:var(--purple);border-radius:8px;cursor:pointer}
.qbtn:disabled{opacity:.5;cursor:not-allowed}
#quantityInput{width:60px;text-align:center;border:1px solid var(--purple);background:transparent;color:#fff;border-radius:8px;padding:6px}

.btn-checkout{width:100%;background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;font-weight:900;border:0;border-radius:12px;padding:14px;box-shadow:0 10px 25px rgba(245,158,11,.3);cursor:pointer}
.btn-checkout:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}

/* Status / Toast */
.status{margin-top:8px;font-size:13px}
.status.ok{color:#10B981}
.status.err{color:#EF4444}
.status.load{color:var(--purple)}
.toast{
  position:fixed;top:100px;right:20px;z-index:3000;padding:12px 16px;background:#10B981;color:#fff;
  border-radius:10px;box-shadow:var(--shadow);transform:translateX(400px);transition:transform .3s;
  max-width:calc(100vw - 40px);
}
.toast.show{transform:translateX(0)}
.toast.error{background:#EF4444}

/* Features & FAQ */
.features{padding:70px 0;background:linear-gradient(135deg,rgba(26,26,46,.8),rgba(15,15,35,.95))}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feat{background:rgba(255,255,255,.05);border:1px solid rgba(139,92,246,.25);border-radius:16px;padding:20px;text-align:center;opacity:0;transform:translateY(24px);transition:var(--t)}
.feat.show{opacity:1;transform:translateY(0)}
.feat-ic{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple2));display:grid;place-items:center;margin:0 auto 12px;font-size:24px}
.faq{padding:70px 0;background:linear-gradient(135deg,#0f0f23,#1a1a2e)}
.faq-wrap{max-width:820px;margin:auto}
.faq-item{background:rgba(255,255,255,.05);border:1px solid rgba(139,92,246,.25);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;text-align:left;padding:14px 16px;background:transparent;border:0;color:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;background:rgba(139,92,246,.08);padding:0 16px}
.faq-item.open .faq-a{max-height:200px;padding:0 16px 14px}

/* Modal */
.modal{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.8);
  backdrop-filter:blur(10px); z-index:4000; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.modal.active{ display:flex; opacity:1; }
.modal-content{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border-radius:20px; padding:24px; max-width:520px; width:92%;
  border:1px solid rgba(139,92,246,.25); box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
}
.modal-header{text-align:center;margin-bottom:16px}
.modal-header i{font-size:38px;color:#10B981;margin-bottom:8px;display:block}
.modal-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:180px;justify-content:center}

/* footer */
.footer{background:#0f0f23;padding:40px 0 20px;border-top:1px solid rgba(139,92,246,.25)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:16px}
.footer p,.links a,.contact a{color:#cfd3dc}
.links{list-style:none;padding:0;margin:0}
.links li{margin:6px 0}
.contact{display:flex;align-items:center;gap:10px;margin:6px 0}
.foot-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.disclaimer{opacity:.7;font-size:12px}

/* Loading Overlay */
#loadingOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  color:#fff; font-weight:600; z-index:9999;
  opacity:0; visibility:hidden; transition:opacity .3s;
}
#loadingOverlay.active{ opacity:1; visibility:visible; }
#loadingOverlay .loader{
  width:60px; height:60px;
  border:5px solid rgba(255,255,255,0.2); border-top-color: var(--purple);
  border-radius:50%; animation: spin 1s linear infinite; margin-bottom:15px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Responsive Tweaks ---------- */
@media (max-width:1024px){
  .grid{grid-template-columns:1fr}
  .summary{position:static; top: auto !important;
}
} 
@media (max-width:768px){
  .hero-grid{ grid-template-columns:1fr; }
  .flash-grid{ grid-template-columns:1fr; }
}

@media (max-width: 1024px) {
  .summary {
    position: static !important;
    top: auto !important;
  }
}
/* =========================
   FIX: viewport < 480px (Order kepotong)
   ========================= */
@media (max-width: 480px) {
  /* header lebih pendek di HP kecil */
  :root { --header-h: 64px; }

  /* pastikan anchor berhenti tepat di bawah header */
  html { scroll-padding-top: var(--header-h); }
  body { padding-top: var(--header-h); }

  /* spacing section supaya nggak “ketiban” */
  .order { 
    padding: calc(24px + var(--header-h)) 14px 64px; 
  }

  /* container & panel lebih rapat */
  .container { padding: 0 14px; }
  .panel, .block { padding: 14px; }



  /* form full width & input nyaman di HP (hindari iOS auto-zoom) */
  .order form { max-width: none; width: 100%; }
  .order input, .order button { width: 100%; font-size: 16px; }

  /* kartu & list produk jadi 1 kolom */
  .product-grid, .flash-grid { grid-template-columns: 1fr; }

  /* kecilkan sedikit input qty supaya muat */
  #quantityInput { width: 56px; }

  /* jaga elemen besar tidak meluber */
  .header, .nav, .menu, .container, .order, .panel, .block { max-width: 100%; overflow-x: hidden; }
  .menu { width: 100vw; left: 0; right: 0; margin: 0; }
  html, body { overflow-x: hidden; overscroll-behavior-x: none; }
}

/* bonus: kalau section lain juga suka kepotong saat lompat anchor */
.order, .features, .faq { scroll-margin-top: var(--header-h); }

/* === USERNAME INPUT FIX (≤ 480px) === */
@media (max-width: 480px) {

  /* Jaga jarak atas section Order agar nggak ke-‘potong’ header */
  :root { --header-h: 64px; }
  html  { scroll-padding-top: var(--header-h); }
  body  { padding-top: var(--header-h); }

  /* Input group tidak ngecil sampai tak terlihat */
  .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;                 /* jangan nol, biar ada ruang */
  }

  /* Nama id/class mungkin berbeda, tapi prinsipnya: input harus bisa mengambil sisa ruang */
  .input-group input,
  #username,
  input[name="username"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;      /* penting: biar boleh mengecil tapi tidak jadi 0 */
    width: 100% !important;
    font-size: 16px;               /* hindari zoom iOS */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Tombol cek/verify ga boleh mendorong input jadi 0px */
  .input-group .btn,
  .input-group .btn-ghost,
  #verifyUsernameBtn, 
  .check-btn {
    flex: 0 0 auto !important;
    width: auto;
    min-width: 44px;              /* target sentuh aman */
    height: 40px;
  }

  /* Kalau ada ikon di dalam input-group, jangan absolute menutupi input */
  .input-group i {
    position: static;             /* hindari nutup input */
  }

  /* Kadang label disembunyikan; kita pastikan tampil */
  label[for="username"], .label.username {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 6px;
  }

  /* Jaga komponen besar supaya tidak meluber dan ‘memotong’ area input */
  .order, .container, .panel, .block {
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(15,15,35,.98);
    flex-direction: column;
    gap: 18px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(139,92,246,.25);
    display: none;
    z-index: 2000; /* penting: biar di atas konten lain */
  }
  .menu.active { display: flex; }
  .mobile-btn { display: block; }
}