:root{--serif:'Playfair Display',Georgia,'Times New Roman',serif;--sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--bg:#fbe6cf;--bg2:#fff6ea;--ink:#2b1608;--brown:#5b2c0e;--brown2:#7a3d17;--muted:#7d6450;--line:#ead2b4;--ok:#1f7a3d;--err:#b3261e;--card:#fffaf3}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans)}
img{max-width:100%}
.wrap{max-width:760px;margin:0 auto;padding:16px}
.wrap.narrow{max-width:520px}
.hero{text-align:center;padding:34px 16px 6px}
.hero h1{font:800 clamp(34px,9vw,52px)/1.05 var(--serif);margin:0 0 8px;color:#1a0d05}
.hero p{margin:0;color:var(--brown2)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;margin-top:14px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:block;text-align:center;text-decoration:none;color:inherit}
.card h2{font-size:16px;font-weight:800;margin:10px 0 2px}
.card p{font-size:13px;margin:0;color:var(--muted);line-height:1.35}
.pic{position:relative;aspect-ratio:1/1}
.imgw{position:absolute;inset:0;border-radius:999px 999px 20px 20px;overflow:hidden;background:#f1d9bd;border:3px solid #fff;box-shadow:0 4px 14px rgba(91,44,14,.15)}
.imgw img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:-6px;right:-6px;z-index:2;min-width:48px;height:48px;padding:0 12px;border-radius:999px;white-space:nowrap;background:var(--brown);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pic.big{aspect-ratio:4/3}
.pic.big .imgw{border-radius:28px}
.pic.big .badge{min-width:60px;height:52px;font-size:18px;top:-8px;right:-4px}
.foot{text-align:center;color:var(--muted);font-size:13px;padding:26px 16px 40px}
.empty{text-align:center;color:var(--muted);padding:40px 0}
.back{display:inline-block;margin:4px 0 12px;color:var(--brown2);text-decoration:none;font-weight:600}
.detail h1{font:800 28px/1.15 var(--serif);margin:16px 0 4px}
.desc{color:var(--muted);margin:0 0 8px}
.price{font-size:26px;font-weight:800;color:var(--brown);margin:6px 0 14px}
.qty{display:flex;align-items:center;gap:12px;margin:8px 0}
.qty span{flex:1;font-weight:600}
.qbtn{width:44px;height:44px;border-radius:50%;border:2px solid var(--brown);background:#fff;color:var(--brown);font-size:24px;line-height:1;cursor:pointer}
.qty output{min-width:32px;text-align:center;font-size:20px;font-weight:800}
.total-row{display:flex;justify-content:space-between;font-size:18px;margin:12px 0 16px;padding-top:12px;border-top:2px dashed var(--line)}
.btn{display:inline-block;font-family:inherit;font-weight:700;font-size:16px;line-height:1.2;border:2px solid transparent;border-radius:14px;padding:14px 18px;cursor:pointer;text-decoration:none;text-align:center}
.btn small{display:block;font-weight:500;opacity:.85;font-size:12px;margin-top:3px}
.btn-primary{background:var(--brown);color:#fff}
.btn-primary:active{background:var(--brown2)}
.btn-dark{background:#1a0d05;color:#fff}
.btn-ghost{background:#fff;color:var(--brown);border-color:var(--brown)}
.btn-block{display:block;width:100%;margin-top:10px}
.btn[disabled]{opacity:.6}
dialog{border:0;border-radius:22px;padding:0;width:min(92vw,420px);box-shadow:0 20px 60px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(30,12,2,.55)}
.pay-choice{padding:22px}
.pay-choice h3{margin:0 0 8px;font:800 22px var(--serif)}
.pay-choice textarea{width:100%;font:inherit;padding:10px;border:2px solid var(--line);border-radius:12px}
.ttl{font:800 28px/1.15 var(--serif);margin:6px 0 12px}
.summary{display:flex;gap:12px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:12px;margin-bottom:14px}
.summary img{width:72px;height:72px;object-fit:cover;border-radius:14px}
.summary.col{display:block}
.summary.col>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.summary.col>div:last-child{border:0}
.summary.col span{color:var(--muted)}
.summary.col b{text-align:right}
.total-big{font-size:22px;font-weight:800;color:var(--brown)}
.qris-box{background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px;text-align:center;margin-bottom:14px}
.qris-box img{width:min(100%,320px);height:auto;border-radius:10px}
.qris-box p{margin:8px 0 12px;color:var(--muted);font-size:14px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:block;font-weight:600;font-size:14px}
.form label small{font-weight:400;color:var(--muted)}
input,textarea,select{font:inherit;width:100%;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);margin-top:4px}
input:focus,textarea:focus{outline:none;border-color:var(--brown)}
input[type=checkbox]{width:auto;margin:0 6px 0 0}
.prev{max-height:220px;border-radius:12px;border:2px solid var(--line)}
.flash{padding:12px 14px;border-radius:12px;margin:10px 0;font-weight:600}
.flash.ok{background:#e4f5e8;color:var(--ok)}
.flash.err{background:#fde8e6;color:var(--err)}
.hint{color:var(--muted);font-size:14px;margin:6px 0}
.status{display:inline-block;padding:8px 16px;border-radius:999px;font-weight:800;margin-bottom:12px;background:#fff0c9;color:#7a5200}
.status.st-dikonfirmasi{background:#dff0ff;color:#0b4f8a}
.status.st-selesai{background:#e4f5e8;color:var(--ok)}
.status.st-ditolak{background:#fde8e6;color:var(--err)}
.balasan{background:#fff;border-left:5px solid var(--brown);border-radius:12px;padding:10px 14px;margin:0 0 14px}
.balasan p{margin:2px 0 0}
.balasan[hidden]{display:none}
/* admin */
.atop{background:var(--brown);color:#fff;position:sticky;top:0;z-index:5}
.abar{max-width:900px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between}
.abar nav{display:flex;flex-wrap:wrap;gap:4px 14px}
.abar a{color:#f6dcc0;text-decoration:none;font-weight:600;padding:4px 0}
.abar a.on{color:#fff;border-bottom:2px solid #fff}
.awrap{max-width:900px}
.sharebox{display:flex;flex-wrap:wrap;gap:8px;align-items:end;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px;margin-bottom:14px}
.sharebox>div{flex:1 1 220px}.sharebox small{color:var(--muted)}
.sharebox .btn{padding:12px 14px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tabs a{padding:8px 14px;border-radius:999px;background:#fff;color:var(--brown);text-decoration:none;font-weight:700;border:2px solid var(--line)}
.tabs a.on{background:var(--brown);color:#fff;border-color:var(--brown)}
.order{background:var(--card);border:2px solid var(--line);border-radius:18px;margin:12px 0;overflow:hidden}
.order.st-baru{border-color:#e9b44c;box-shadow:0 0 0 3px #fff0c9}
.o-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:12px 14px;background:#fff}
.rumah{color:var(--brown2);font-weight:600}
.pill{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:#fff0c9;color:#7a5200;align-self:center}
.st-dikonfirmasi .pill{background:#dff0ff;color:#0b4f8a}.st-selesai .pill{background:#e4f5e8;color:var(--ok)}.st-ditolak .pill{background:#fde8e6;color:var(--err)}
.o-body{padding:10px 14px}
.meta{color:var(--muted);font-size:13px;margin-top:2px}
.bukti{display:flex;gap:10px;align-items:center;margin-top:8px;text-decoration:none;color:var(--brown);font-size:13px;font-weight:600}
.bukti img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:2px solid var(--line)}
.reply{background:#fff;border-radius:10px;padding:8px 10px;margin-top:8px;font-size:14px}
.o-act{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px}
.o-act .btn{padding:11px 16px}
.box{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px;margin:14px 0}
.box h3{margin:0 0 8px}
.qris-prev{width:200px;border-radius:12px;border:2px solid var(--line);margin-bottom:8px}
.logrow{font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line);word-break:break-word}
.pcard{display:flex;gap:14px;flex-wrap:wrap;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;margin:12px 0}
.pimg{position:relative;width:150px;flex:0 0 150px;cursor:pointer;display:block}
.pimg img{width:150px;height:150px;object-fit:cover;border-radius:16px;border:2px solid var(--line);margin:0;display:block}
.pimg span{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--brown);margin-top:6px}
.pimg input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.pfields{flex:1 1 240px;display:flex;flex-direction:column;gap:8px}
.pfields label{font-weight:600;font-size:14px}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.chk{display:flex;align-items:center}
.pact{display:flex;gap:8px}
.sub{margin:26px 0 0}
.cartbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(92vw,480px);background:var(--brown);color:#fff;text-decoration:none;font-weight:800;padding:14px 18px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;justify-content:space-between;gap:10px;z-index:20}
.cartbar[hidden]{display:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;background:#1a0d05;color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;z-index:30}
.sum-total{border-top:2px solid var(--line);margin-top:4px;padding-top:10px !important}
.citem{display:flex;gap:12px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px;margin-bottom:10px}
.citem img{width:64px;height:64px;object-fit:cover;border-radius:12px}
.citem .ci{flex:1;min-width:0}.citem .ci b{display:block}
.citem .qbtn{width:36px;height:36px;font-size:20px}
.citem .cq{display:flex;align-items:center;gap:8px}
.citem .cq output{min-width:20px;text-align:center;font-weight:800}
.citem .del{background:none;border:0;color:var(--err);font-size:13px;cursor:pointer;padding:2px 0;font-weight:700}
.items{margin:0 0 4px;padding-left:18px}
body.shop{padding-bottom:84px}
/* kompatibel dengan markup lama (gambar langsung di dalam .pic) */
.pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:999px 999px 20px 20px;border:3px solid #fff;background:#f1d9bd;box-shadow:0 4px 14px rgba(91,44,14,.15)}
.pic.big>img{border-radius:28px}

/* tipografi & beranda */
.hero{padding:36px 16px 10px}
.eyebrow{font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brown2);margin-bottom:6px}
.hero h1{font:900 clamp(38px,10vw,60px)/1.02 var(--serif);letter-spacing:-.5px;background:linear-gradient(180deg,#2b1608,#6b3412);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 6px}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px auto 10px;max-width:260px}
.orn span{flex:1;height:2px;background:linear-gradient(90deg,transparent,#c58a55)}
.orn span:last-child{transform:scaleX(-1)}
.orn i{font-style:normal;font-size:18px}
.hero p{font:500 15px/1.5 var(--sans);color:var(--brown2);max-width:34ch;margin:0 auto}
.card h2{font:700 15.5px/1.25 var(--sans);margin:12px 0 3px;color:#2b1608}
.card p{font:400 12.5px/1.45 var(--sans);color:var(--muted)}
.price{font-family:var(--serif)}
.howto{max-width:560px;margin:30px auto 0;padding:22px 18px;background:var(--card);border:2px dashed #d9b48a;border-radius:24px;text-align:center}
.howto h3{font:800 24px/1.2 var(--serif);margin:0 0 14px;color:var(--brown)}
.howto ol{list-style:none;counter-reset:s;margin:0 0 16px;padding:0;text-align:left;display:grid;gap:12px}
.howto li{counter-increment:s;position:relative;padding-left:46px}
.howto li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--brown);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.howto li b{display:block;font-weight:700;font-size:15px}
.howto li span{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.cta{display:block;width:100%}
.foot{font-size:13px}