:root{
 --bg:#08090d;--bg2:#0d0f16;--card:#11141d;--card2:#151925;--ink:#f7f7fb;--muted:#a4a9b7;
 --brand:#d8b35a;--brand2:#f4d98a;--gold:#d8b35a;--line:rgba(255,255,255,.09);
 --ok:#39d98a;--danger:#ff6b6b;--warn:#f6c85f;
 --shadow:0 18px 50px rgba(0,0,0,.28);
 --space:clamp(18px,3vw,34px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(circle at 15% -10%,rgba(216,179,90,.10),transparent 28%),
 radial-gradient(circle at 90% 15%,rgba(110,75,210,.10),transparent 25%),
 var(--bg);font-family:Inter,Arial,sans-serif;color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1240px;margin:auto;padding:0 22px}
header{background:rgba(8,9,13,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{min-height:76px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{font-size:22px;font-weight:950;letter-spacing:.2px;white-space:nowrap;color:#fff}
.logo span{color:var(--gold)}
.navlinks{display:flex;gap:6px;align-items:center;margin-left:auto}
.navlinks a{padding:10px 13px;border-radius:12px;color:#c6cad4;font-weight:750;font-size:13px;transition:.16s ease}
.navlinks a:hover{background:rgba(216,179,90,.10);color:#fff;transform:translateY(-1px)}
.balance-pill{background:linear-gradient(135deg,rgba(216,179,90,.22),rgba(244,217,138,.08))!important;color:#f4d98a!important;border:1px solid rgba(216,179,90,.28);font-weight:900!important}
.search{display:flex;flex:1;max-width:540px;margin-left:15px}
.search input{margin:0;border-radius:12px 0 0 12px}
.search button{border:0;background:linear-gradient(135deg,var(--gold),var(--brand2));color:#111;padding:0 18px;border-radius:0 12px 12px 0;font-weight:900;cursor:pointer}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#0e1118;color:#fff;margin:6px 0;font:inherit;outline:none}
input::placeholder,textarea::placeholder{color:#747b8c}
input:focus,select:focus,textarea:focus{border-color:rgba(216,179,90,.75);box-shadow:0 0 0 3px rgba(216,179,90,.10)}
textarea{min-height:110px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,var(--gold),var(--brand2));color:#121212;padding:12px 18px;border-radius:11px;font-weight:900;cursor:pointer;box-shadow:0 10px 26px rgba(216,179,90,.15);transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(216,179,90,.20);filter:brightness(1.04)}
.btn.secondary{background:rgba(255,255,255,.06);color:#e8eaf0;box-shadow:none;border-color:var(--line)}
.btn.danger{background:rgba(255,107,107,.10);color:#ff9b9b;box-shadow:none;border-color:rgba(255,107,107,.18)}
.btn.small{padding:8px 12px;font-size:12px}
main{padding:32px 0 70px}
.hero{margin-top:22px;background:
 radial-gradient(circle at 90% 10%,rgba(216,179,90,.18),transparent 30%),
 linear-gradient(135deg,#11141d,#191329 60%,#0e1017);
 color:#fff;border:1px solid rgba(216,179,90,.14);border-radius:28px;padding:56px;display:grid;grid-template-columns:1.5fr .8fr;gap:28px;align-items:center;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.hero:before{content:"";position:absolute;inset:auto auto -120px -120px;width:280px;height:280px;border-radius:50%;background:rgba(216,179,90,.08);filter:blur(3px)}
.hero:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-150px;top:-170px;background:rgba(255,255,255,.035);border:1px solid rgba(216,179,90,.08)}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.03;margin:12px 0 16px;max-width:720px;letter-spacing:-1.5px}
.hero p{color:#c3c7d2;max-width:650px;line-height:1.75}
.hero-img{width:100%;max-height:280px;object-fit:cover;border-radius:20px;position:relative;z-index:1;border:1px solid rgba(255,255,255,.1)}
.hero-card{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));padding:30px;border:1px solid rgba(255,255,255,.12);border-radius:22px;position:relative;z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.section-head{display:flex;justify-content:space-between;gap:15px;align-items:end;margin:32px 0 17px}
.section-head h1,.section-head h2{margin:0;letter-spacing:-.4px}
.muted{color:var(--muted)}
.cats{display:flex;gap:10px;overflow:auto;padding:8px 0 18px}
.cats a{background:rgba(255,255,255,.045);border:1px solid var(--line);padding:10px 16px;border-radius:999px;white-space:nowrap;color:#d7dae2;transition:.14s ease}
.cats a:hover{border-color:rgba(216,179,90,.35);color:#f4d98a;transform:translateY(-1px)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card,.panel{background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:19px;padding:19px;box-shadow:var(--shadow)}
.card{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(216,179,90,.25);box-shadow:0 24px 55px rgba(0,0,0,.34)}
.thumb{height:175px;border-radius:15px;background:linear-gradient(135deg,#171b27,#0e1118);display:grid;place-items:center;overflow:hidden;margin-bottom:15px;border:1px solid rgba(255,255,255,.06)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .placeholder{font-size:42px;color:var(--gold)}
.card h3{margin:7px 0;color:#fff}.card p{color:var(--muted);font-size:13px;line-height:1.6;min-height:42px}.card strong{font-size:18px;color:#f4d98a}
.stock{color:var(--ok);font-size:12px;margin-top:7px}.buy{width:100%;text-align:center;margin-top:11px}
.empty{padding:48px;text-align:center;background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:17px;color:var(--muted)}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:
 radial-gradient(circle at 20% 10%,rgba(216,179,90,.12),transparent 30%),
 radial-gradient(circle at 85% 90%,rgba(102,64,210,.12),transparent 30%),var(--bg)}
.auth .panel{width:min(460px,100%);padding:32px;border-color:rgba(216,179,90,.16)}
.auth .logo{display:block;margin-bottom:25px}
.error{background:rgba(255,107,107,.10);color:#ffaaa0;border:1px solid rgba(255,107,107,.15);padding:12px;border-radius:11px;margin:10px 0}
.success{background:rgba(57,217,138,.09);color:#7bf0b4;border:1px solid rgba(57,217,138,.15);padding:12px;border-radius:11px;margin:10px 0}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.formgrid textarea,.formgrid .full{grid-column:1/-1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 28px}
.stats div{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line);padding:22px;border-radius:18px;box-shadow:var(--shadow)}
.stats b{font-size:25px;display:block;color:#f4d98a}.stats small{color:var(--muted)}
.table{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:16px;overflow:auto;margin-top:20px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;color:#949baa;background:rgba(255,255,255,.025)}td{color:#dfe2e9}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.badge.ok{background:rgba(57,217,138,.10);color:#7bf0b4}.badge.warn{background:rgba(246,200,95,.10);color:#f6d77f}.badge.danger{background:rgba(255,107,107,.10);color:#ff9b9b}
.adminbar{margin:20px 0;display:flex;gap:9px;flex-wrap:wrap}
.preview{max-width:220px;max-height:130px;object-fit:contain;border-radius:10px;border:1px solid var(--line)}
.qris{max-width:320px;width:100%;border-radius:16px;border:1px solid rgba(216,179,90,.22);background:#fff;padding:10px}
.notice{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);line-height:1.6}
.checkout{max-width:760px}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.detail-img{width:100%;height:360px;object-fit:cover;border-radius:18px;background:#151925}
.payment-box{border:1px solid var(--line);padding:20px;border-radius:16px;background:rgba(255,255,255,.035)}
.footer{padding:45px 0;color:var(--muted);border-top:1px solid var(--line);margin-top:45px}
.balance-card{display:flex;flex-direction:column;gap:3px;padding:15px 19px;border-radius:16px;background:linear-gradient(135deg,#15130f,#3a2b11);color:#fff;border:1px solid rgba(216,179,90,.25);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.balance-card small{opacity:.72}.balance-card strong{font-size:19px;color:#f4d98a}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.action-row{display:flex;gap:9px;flex-wrap:wrap}
.deposit-qris{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.deposit-qris .qris{max-width:260px}
.panel{margin-bottom:var(--space)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr;padding:38px}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.two-col{grid-template-columns:1fr}.nav{gap:10px}.search{order:3;max-width:none;flex-basis:100%;margin-left:0}.navlinks{margin-left:auto;overflow:auto;max-width:100%}.section-head{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:600px){.wrap{padding:0 15px}.grid,.product-detail,.formgrid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.navlinks{width:100%;padding-bottom:10px}.navlinks a{padding:9px 10px}.hero{margin-top:15px;padding:29px 22px}.hero h1{font-size:33px}.hero-card{display:none}.stats b{font-size:21px}.card{padding:15px}.thumb{height:155px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* --- Premium separated navigation --- */
.navlinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-left:auto;
  flex-wrap:wrap;
}
.nav-group{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.nav-group + .nav-group{margin-left:2px}
.nav-group-label{
  padding:7px 9px;
  color:#777e8d;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.navlinks a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 13px;
  border:1px solid transparent;
}
.navlinks a.active{
  color:#f4d98a;
  background:rgba(216,179,90,.11);
  border-color:rgba(216,179,90,.18);
}
.navlinks .nav-primary a:first-child{border-radius:11px}
.navlinks .nav-exit a{
  color:#ffb0b0;
  border-color:rgba(255,107,107,.12);
  background:rgba(255,107,107,.045);
}
.navlinks .nav-exit a:hover{
  background:rgba(255,107,107,.10);
  color:#fff;
}
.admin-header .nav{min-height:82px}
.admin-title{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.admin-title .admin-mark{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#111;
  background:linear-gradient(135deg,var(--gold),var(--brand2));
  padding:5px 8px;
  border-radius:7px;
  font-weight:950;
}
.admin-main{padding-top:36px}
.adminbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 0 6px;
}
.page-card{
  margin-top:20px;
}
@media(max-width:1050px){
  .navlinks{width:100%;margin-left:0;justify-content:flex-start}
  .nav-group{overflow:auto}
}
@media(max-width:800px){
  .navlinks{gap:7px}
  .nav-group{width:100%;justify-content:flex-start;overflow-x:auto}
  .nav-group-label{display:none}
  .navlinks a{flex:0 0 auto}
}
@media(max-width:600px){
  .admin-header .nav{padding-top:12px;padding-bottom:10px}
  .navlinks{padding-bottom:2px}
  .nav-group{border-radius:13px}
  .navlinks a{min-height:36px;padding:8px 11px;font-size:12px}
}