:root{
  --bg:#0b0c0f;
  --surface:#15171b;
  --surface-2:#1b1d22;
  --border:#26282e;
  --text:#f1efe9;
  --muted:#8a8d94;
  --accent:#d8a657;
  --accent-ink:#1b1305;
  --ok:#7fc496;
  --err:#e8746b;
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.55}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:560;margin:0;letter-spacing:-.01em}
p{margin:0;color:var(--muted)}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.top{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;max-width:960px;margin:0 auto}
.brand{font-family:'Fraunces',serif;font-size:22px;font-weight:650;color:var(--text)}
.brand span{color:var(--accent)}
.cart-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);font:inherit;font-size:14px;padding:9px 16px;border-radius:999px;cursor:pointer;transition:border-color .15s ease}
.cart-btn:hover{border-color:var(--accent)}
.cart-btn b{color:var(--accent);font-weight:700;margin-left:4px}

.hero{max-width:960px;margin:0 auto;padding:40px 24px 56px}
.hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.14;max-width:15ch}
.hero p{margin-top:18px;max-width:52ch;font-size:15.5px}
.cta{display:inline-block;margin-top:26px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14.5px;padding:13px 26px;border-radius:10px;border:none;cursor:pointer;transition:transform .12s ease,filter .15s ease}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:scale(.97)}
.cta.full{display:block;width:100%;text-align:center;margin-top:16px}

.promo{max-width:960px;margin:0 auto 40px;padding:20px 24px;background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.promo.hidden{display:none}
.promo-info h2{font-size:19px}
.promo-info p{margin-top:5px;font-size:14px;max-width:46ch}
.promo-chip{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.promo-chip span{font-size:12.5px;color:var(--accent)}
.promo-chip b{font-family:'Fraunces',serif;font-size:20px;letter-spacing:.03em;border:1px dashed var(--accent);border-radius:8px;padding:4px 12px;color:var(--text)}

.section{max-width:960px;margin:0 auto;padding:8px 24px 32px}
.head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.head h2{font-size:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s ease}
.card:hover{border-color:#3a3d45}
.thumb{height:150px;border-radius:10px;background:linear-gradient(135deg,#1d2027,#0d0e11);display:grid;place-items:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .mono{font-family:'Fraunces',serif;font-size:34px;color:#3c3f47;font-weight:560}
.card h3{font-size:16px;margin-top:2px}
.card .desc{color:var(--muted);font-size:13px;line-height:1.45;min-height:18px}
.price{font-weight:700;font-size:15.5px;margin-top:auto}
.price .old{font-weight:400;color:var(--muted);text-decoration:line-through;font-size:13px;margin-left:6px}
.add{margin-top:4px;background:transparent;border:1px solid var(--border);color:var(--text);font:inherit;font-size:13.5px;padding:10px;border-radius:8px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.add:hover{border-color:var(--accent);background:rgba(216,166,87,.08)}

.steps{max-width:960px;margin:16px auto 8px;padding:36px 24px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps b{font-family:'Fraunces',serif;font-size:26px;color:var(--accent);font-weight:560}
.steps h3{font-size:16px;margin-top:8px}
.steps p{font-size:13.5px;margin-top:4px}

footer{text-align:center;color:var(--muted);font-size:13px;padding:28px 24px 48px}

.modal{position:fixed;inset:0;display:none;z-index:50}
.modal.show{display:block}
.shade{position:absolute;inset:0;background:rgba(6,7,9,.7);backdrop-filter:blur(2px)}
.sheet{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--border);padding:26px 22px;overflow-y:auto;transform:translateX(100%);animation:slideIn .22s ease forwards}
.sheet.center{right:auto;left:50%;top:50%;bottom:auto;transform:translate(-50%,-46%);width:min(380px,90vw);border-radius:16px;border:1px solid var(--border);text-align:center;animation:popIn .18s ease forwards}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes popIn{from{transform:translate(-50%,-46%) scale(.96);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1}
.sheet h2{font-size:20px;margin-bottom:16px}

.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.row b{font-size:14.5px;display:block}
.row small{color:var(--muted);font-size:12.5px}
.stepper{display:flex;align-items:center;gap:10px;flex-shrink:0}
.step{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:15px;cursor:pointer;line-height:1}

.promo-apply{display:flex;gap:8px;margin-top:16px}
.promo-apply input{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:13.5px;padding:10px 12px;text-transform:uppercase}
.promo-apply input::placeholder{text-transform:none;color:var(--muted)}
.promo-apply button{background:var(--surface-2);border:1px solid var(--accent);color:var(--accent);font:inherit;font-size:13px;font-weight:600;padding:0 16px;border-radius:8px;cursor:pointer;white-space:nowrap}
.promo-apply button:hover{background:rgba(216,166,87,.1)}
.promo-msg{min-height:16px;font-size:12.5px;margin:7px 2px 0}
.promo-msg.ok{color:var(--ok)}
.promo-msg.err{color:var(--err)}

.summary{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.sum-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--muted)}
.sum-row.discount b{color:var(--ok)}
.sum-row.total{margin-top:4px;padding-top:8px;border-top:1px solid var(--border)}
.sum-row.total span,.sum-row.total b{color:var(--text);font-size:16.5px;font-family:'Fraunces',serif;font-weight:560}

.field{display:block;font-size:12.5px;color:var(--muted);margin-top:14px}
.field input{display:block;width:100%;margin-top:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:14px;padding:11px 12px}

.amount{font-family:'Fraunces',serif;font-size:30px;margin:6px 0 18px}
.qris{width:100%;max-width:260px;border-radius:12px;border:1px solid var(--border)}
.notice{font-size:12.5px;margin:16px auto 0;max-width:32ch}

@media(max-width:640px){
  .steps{grid-template-columns:1fr;gap:22px}
  .sheet{width:100%}
}