*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#07111f;color:#fff}
button,input{font-family:inherit}
button{cursor:pointer}
.topbar{padding:16px 28px;display:flex;justify-content:space-between;align-items:center;background:#081729cc;border-bottom:1px solid #183150;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#009dff,#ff9f1c);display:flex;align-items:center;justify-content:center;font-weight:900;color:#07111f}
.brand h1{font-size:20px;margin:0}
.brand p{font-size:12px;margin:4px 0 0;color:#b9d9ff}
.top-actions{display:flex;gap:10px;align-items:center}
.status-pill,.pill{color:#91d4ff;background:#102d4e;border:1px solid #2b6ca8;padding:10px 14px;border-radius:999px;font-weight:bold;font-size:13px}
.top-btn,.hero-actions button,.small{border:0;background:#009dff;color:#fff;padding:12px 14px;border-radius:13px;font-weight:bold}
.ghost{background:#162944!important;border:1px solid #315378!important;color:#fff!important}
.hero{max-width:1120px;margin:24px auto 0;padding:30px;display:grid;grid-template-columns:1.5fr .8fr;gap:18px;background:linear-gradient(135deg,#0b1b33,#063b60);border:1px solid #1a4269;border-radius:26px;box-shadow:0 15px 45px #0007}
.hero h2{font-size:36px;line-height:1.1;margin:12px 0}
.hero p{color:#c9def8;line-height:1.55}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;color:#b9f7cc;font-size:14px}
.trust-row div{background:#07111f88;border:1px solid #2c5d8a;border-radius:999px;padding:8px 10px}
.hero-card{background:#07111f99;border:1px solid #2c5d8a;border-radius:22px;padding:20px}
.hero-card-top{display:flex;gap:10px;align-items:center;font-size:20px}
.hero-card p{color:#c9def8}
.mini-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.mini-stat div{background:#0c1d31;border:1px solid #25496e;border-radius:16px;padding:12px}
.mini-stat b{display:block;font-size:24px;color:#22c55e}
.mini-stat small{color:#9fbad9}
main{max-width:1120px;margin:20px auto;padding:0 14px}
.card{background:#101b2d;border:1px solid #203452;border-radius:20px;padding:18px;margin-bottom:18px;box-shadow:0 10px 30px #0005}
.section-title{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:14px}
.section-title h2{margin:0}
.section-title small{color:#8fb1d6}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
.cat{border:1px solid #1f3d61;background:#132945;color:#fff;text-align:left;padding:14px;border-radius:16px;font-weight:bold}
.cat small{display:block;color:#9fbad9;margin-top:5px}
.cat:hover{border-color:#009dff;filter:brightness(1.1)}
.search-box{display:flex;align-items:center;gap:10px;background:#07111f;border:1px solid #284668;border-radius:16px;padding:0 14px;margin-bottom:14px}
.search-box span{font-size:20px}
.search-box input{border:0;background:transparent;margin:0;padding:15px 0;color:#fff;outline:none;width:100%}
.filter-block{margin-bottom:12px}
.filter-block b{display:block;margin-bottom:8px;color:#c9def8}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid #315378;background:#132945;color:#fff;padding:10px 12px;border-radius:999px;font-weight:bold}
.chip:hover,.chip.active{background:#009dff;border-color:#009dff}
.manual-box{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;border:1px dashed #315378;border-radius:16px;padding:14px;margin:14px 0;background:#07111f88}
.manual-box small{display:block;color:#90aaca;margin-top:4px}
.row{display:flex;gap:8px}
input{width:100%;padding:13px;margin:0;border-radius:12px;border:1px solid #284668;background:#07111f;color:#fff;outline:none}
input:focus{border-color:#009dff}
.row button,.full{border:0;background:#009dff;color:#fff;padding:13px 14px;border-radius:12px;font-weight:bold}
.result-info{color:#9fbad9;margin:8px 0 12px}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:12px}
.product{background:#07111f;border:1px solid #1c3556;border-radius:18px;padding:15px;position:relative;overflow:hidden}
.product:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,#009dff33,transparent 38%);pointer-events:none}
.product h3,.product div,.product button,.product span{position:relative}
.product h3{margin:0 0 8px}
.meta{color:#9db9d8;margin-bottom:8px}
.nominal{margin:8px 0;color:#c9def8}
.nominal b{color:#fff}
.price{font-size:22px;color:#22c55e;font-weight:900;margin:8px 0}
.badge{display:inline-block;background:#ff9f1c;color:#111;padding:4px 8px;border-radius:999px;font-size:12px;margin:7px 4px 8px 0;font-weight:bold}
.badge.direct{background:#22c55e;color:#07111f}
.badge.big{background:#8b5cf6;color:#fff}
.product button{width:100%;margin-top:8px;border:0;background:#009dff;color:#fff;padding:12px;border-radius:13px;font-weight:bold}
.empty{padding:18px;border:1px dashed #315378;border-radius:14px;color:#b9d9ff;grid-column:1/-1}
.float-cs{position:fixed;right:18px;bottom:18px;z-index:30;border:0;background:#22c55e;color:#07111f;padding:14px 16px;border-radius:999px;font-weight:900;box-shadow:0 12px 40px #0008}
.modal.hidden,.hidden{display:none}
.modal{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center;padding:14px}
.modal-backdrop{position:absolute;inset:0;background:#000a;backdrop-filter:blur(7px)}
.modal-box{position:relative;width:min(540px,100%);max-height:92vh;overflow:auto;background:#0c1829;border:1px solid #2a4e78;border-radius:24px;padding:20px;box-shadow:0 25px 80px #000}
.modal-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border-radius:50%;border:0;background:#182b45;color:#fff;font-size:24px}
.modal-header{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.modal-header h2{margin:0}
.modal-header p{margin:5px 0 0;color:#9fbad9}
.modal-icon{width:48px;height:48px;border-radius:16px;background:#12385f;display:flex;align-items:center;justify-content:center;font-size:24px}
.success-icon{background:#0d3d26}
.checkout-product{background:#07111f;border:1px solid #1f3d61;border-radius:18px;padding:14px;margin-bottom:14px}
.checkout-product h3{margin:0 0 8px}
.big-price{font-size:28px;color:#22c55e;font-weight:900;margin:8px 0}
.notice{background:#3a2a0a;border:1px solid #926a17;color:#ffd98b;border-radius:14px;padding:12px;margin:12px 0}
.full{width:100%;margin-top:10px}
.success{background:#22c55e!important;color:#07111f!important}
.qris-box{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;background:#07111f;border:1px solid #1f3d61;border-radius:18px;padding:14px}
.fake-qris{width:150px;height:150px;background:#fff;color:#07111f;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:900;letter-spacing:2px}
.fake-qris small{letter-spacing:1px}
pre{white-space:pre-wrap;background:#07111f;border:1px solid #1f3d61;border-radius:16px;padding:14px;line-height:1.5;color:#e8f3ff}
.help-card{background:#07111f;border:1px solid #1f3d61;border-radius:16px;padding:14px}
.help-card li{margin:8px 0;color:#c9def8}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#102d4e;border:1px solid #2b6ca8;color:#fff;padding:12px 16px;border-radius:999px;z-index:120;box-shadow:0 10px 30px #0008}
@media(max-width:760px){
  .topbar{padding:13px;gap:10px}
  .brand p{display:none}
  .top-btn{display:none}
  .hero{grid-template-columns:1fr;margin:14px;border-radius:20px;padding:22px}
  .hero h2{font-size:27px}
  .section-title{display:block}
  .manual-box{grid-template-columns:1fr}
  .row{display:block}
  .row button{width:100%;margin-top:8px}
  .qris-box{grid-template-columns:1fr}
  .fake-qris{width:100%;height:180px}
  .products{grid-template-columns:1fr}
}

.maintenance-banner{
  max-width:1120px;
  margin:12px auto 0;
  padding:13px 16px;
  border-radius:16px;
  background:#3a2a0a;
  border:1px solid #926a17;
  color:#ffd98b;
  font-weight:bold;
  box-shadow:0 10px 30px #0005;
}
@media(max-width:760px){
  .maintenance-banner{
    margin:10px 14px 0;
  }
}

.qris-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:12px;
}