/* Theme: blue→magenta, glass, rounded icons */
:root{
  --bg:#0a0f1f;
  --card:#101936cc;
  --stroke:#ffffff24;
  --txt:#eef2ff; --muted:#cbd5e1;
  --grad1:#0072ff; --grad2:#ff0057; /* primary gradient */
  --wa1:#25D366; --wa2:#128C7E;
  --ig1:#f58529; --ig2:#dd2a7b; --ig3:#8134af; --ig4:#515bd4;
  --tg1:#00b2ff; --tg2:#1e96fc;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--txt);background:var(--bg)}
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:blur(2px) saturate(110%) contrast(108%)}
.bg-overlay{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 120% at 50% 10%,rgba(21,21,38,.35) 0%,rgba(9,9,18,.75) 60%,rgba(6,6,12,.92) 100%);backdrop-filter:blur(2px)}
.grain{pointer-events:none;position:fixed;inset:0;z-index:-1;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22 viewBox=%220 0 56 56%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%2256%22 height=%2256%22 filter=%22url(%23n)%22 opacity=%220.06%22/></svg>')}
/* Topbar */
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:linear-gradient(180deg,rgba(10,10,20,.85),rgba(10,10,20,.6));backdrop-filter:blur(10px);border-bottom:1px solid #ffffff14}
.mini-brand{font-weight:800;letter-spacing:.5px}
.quick{display:flex;gap:10px}
.qbtn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--grad1),var(--grad2));border:1px solid #ffffff30;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.qbtn svg{width:22px;height:22px;fill:#fff}
.qbtn.ig{background:conic-gradient(from 200deg,var(--ig1),var(--ig2),var(--ig3),var(--ig4))}
.qbtn.tg{background:linear-gradient(135deg,var(--tg1),var(--tg2))}
/* Layout */
.wrap{width:min(94vw,760px);margin:0 auto;padding:18px 0 28px}
.header-card{background:var(--card);border:1px solid var(--stroke);border-radius:30px;padding:22px 18px;box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06)}
.avatar{display:grid;place-items:center;margin-top:6px}
.avatar img{width:112px;height:112px;border-radius:999px;object-fit:cover;border:6px solid #ffffff1f;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.title{margin:10px 0 6px;text-align:center;font-size:1.8rem;letter-spacing:.5px}
.tagline{margin:0;text-align:center;color:var(--muted)}
.cta-row{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{display:inline-block;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,var(--grad1),var(--grad2));color:#fff;text-decoration:none;font-weight:700;border:1px solid #ffffff24;box-shadow:0 10px 30px rgba(123,97,255,.3)}
.chip.outline{background:transparent}
/* Menu */
.menu{margin:18px 0 6px;display:flex;flex-direction:column;gap:12px}
.list-item{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--card);border:1px solid var(--stroke);text-decoration:none;color:var(--txt);box-shadow:0 12px 28px rgba(0,0,0,.35);transition:transform .2s ease, box-shadow .3s ease, border-color .3s ease}
.list-item:hover{transform:translateY(-2px);border-color:#ffffff3a;box-shadow:0 18px 36px rgba(0,0,0,.45)}
.icon{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;border:1px solid #ffffff30;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.35)}
.icon svg{width:22px;height:22px;fill:#fff}
.icon.wa{background:linear-gradient(135deg,var(--wa1),var(--wa2))}
.icon.ig{background:conic-gradient(from 200deg,var(--ig1),var(--ig2),var(--ig3),var(--ig4))}
.icon.tg{background:linear-gradient(135deg,var(--tg1),var(--tg2))}
.icon.info{background:linear-gradient(135deg,var(--grad1),var(--grad2))}
.arr{margin-left:auto;opacity:.8}
/* Promo */
.promo{margin-top:18px}.section-title{text-align:center;margin:0 0 12px;font-size:1.4rem}
.promo-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.promo-grid{grid-template-columns:repeat(3,1fr)}}
.promo-card{position:relative;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--stroke);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.badge{position:absolute;top:10px;left:10px;padding:6px 10px;border-radius:999px;background:#ffd43b;color:#1b1b1b;font-weight:800}
.badge.hot{background:linear-gradient(135deg,#ff7a7a,#ffd43b)}.badge.new{background:linear-gradient(135deg,#22d3ee,#8b5cf6)}
.promo-card h3{margin:10px 0 4px}.desc{margin:0 0 8px;color:#dbe4ff}.price strong{font-size:1.2rem}
.cta{display:inline-block;margin-top:8px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,var(--wa1),var(--wa2));color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 26px rgba(18,140,126,.35)}
/* Text cards + footer */
.text-card{margin-top:16px;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--stroke)}
.footer{margin-top:18px;text-align:center;color:var(--muted)}


/* --- Fallback poster if video gagal dimuat --- */
html.no-video body::before{
  content:"";
  position:fixed; inset:0; z-index:-4;
  background: url('assets/nebula.jpg') center/cover no-repeat fixed;
  filter: blur(2px) saturate(110%) contrast(108%);
}


/* v10b: perbaikan posisi badge agar tidak menimpa judul produk */
.promo-card { position: relative; padding-top: 28px; } /* beri ruang di atas judul */
.badge { position:absolute; top:8px; left:8px; z-index:2; transform:none; }


/* v10c: Sticky CTA for mobile */
.sticky-cta{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wa1), var(--wa2));
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid #ffffff30;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
@media(min-width: 760px){
  .sticky-cta{ display:none; }
}