:root{
  --bg:#0b0e14; --panel:#12161f; --panel2:#171c28; --line:#232a3a;
  --txt:#e8ecf4; --mut:#9aa3b5; --acc:#2E7CF6; --acc2:#1f5fd6;
  --ok:#34d399; --radius:14px;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;overflow:hidden}
*{box-sizing:border-box}

/* ---------- header ---------- */
.hdr{display:flex;align-items:center;gap:26px;padding:12px 22px;border-bottom:1px solid var(--line);background:#0d1119;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;white-space:nowrap}
.logo .cube{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#12315e,#2E7CF6);display:flex;align-items:center;justify-content:center;font-size:18px}
.logo b{color:var(--acc)}
.nav{display:flex;gap:6px;margin-left:8px}
.nav a{color:var(--mut);text-decoration:none;font-size:14px;padding:8px 14px;border-radius:9px}
.nav a.on{background:var(--panel2);color:var(--txt)}
.hdr .sp{flex:1}
.hdr .tag{font-size:12px;color:var(--mut);border:1px solid var(--line);padding:7px 12px;border-radius:999px}

/* ---------- layout ---------- */
.wrap{display:grid;grid-template-columns:250px 1fr 270px;grid-template-rows:1fr auto;height:calc(100vh - 64px)}
.side{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:16px 12px}
.side h4{margin:4px 8px 10px;font-size:12px;letter-spacing:1.5px;color:var(--mut)}
.vsec{font-size:12px;font-weight:700;color:var(--acc);margin:14px 8px 6px;letter-spacing:1px}
.vitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:1px solid transparent;color:var(--txt);padding:10px;border-radius:10px;cursor:pointer;font-family:inherit;font-size:13px}
.vitem:hover{background:var(--panel2)}
.vitem.on{background:#1a2742;border-color:var(--acc)}
.vitem .ic{font-size:20px;width:28px;text-align:center;flex:none}
.vitem small{display:block;color:var(--mut);font-size:11px}
.vitem .nm{line-height:1.3}

/* ---------- viewport ---------- */
.view{position:relative;background:radial-gradient(1200px 600px at 50% 30%,#141a26,#0b0e14);overflow:hidden}
#scene{position:absolute;inset:0}
#scene canvas{display:block}
.vbadge{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(10,13,20,.75);border:1px solid var(--line);padding:8px 16px;border-radius:999px;font-size:13px;backdrop-filter:blur(6px);pointer-events:none}
.vbadge b{color:var(--acc)}
.vctrl{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.vctrl button{background:rgba(18,22,31,.9);border:1px solid var(--line);color:var(--txt);font-family:inherit;font-size:13px;padding:9px 15px;border-radius:10px;cursor:pointer}
.vctrl button:hover{border-color:var(--acc)}
.vctrl button.on{background:var(--acc);border-color:var(--acc)}

/* ---------- panel kanan ---------- */
.cfg{border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:16px}
.cfg h4{margin:4px 0 12px;font-size:12px;letter-spacing:1.5px;color:var(--mut)}
.cfg h5{margin:16px 0 10px;font-size:14px}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;font-family:inherit;color:var(--mut);font-size:11px;padding:4px}
.sw .dot{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);transition:.15s}
.sw.on .dot{border-color:var(--acc);box-shadow:0 0 0 3px rgba(46,124,246,.25)}
.sw.on{color:var(--txt)}
.fin{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fin button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-family:inherit;font-size:13px;padding:11px 6px;border-radius:10px;cursor:pointer}
.fin button small{display:block;color:var(--mut);font-size:10px;margin-top:2px}
.fin button.on{background:var(--acc);border-color:var(--acc)}
.fin button.on small{color:#dbe7ff}
.note{margin-top:14px;font-size:12px;color:var(--mut);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;line-height:1.5}

/* ---------- foto spin 360° ---------- */
#spinViewer{position:absolute;inset:0;cursor:grab;user-select:none;touch-action:none;overflow:hidden;background:radial-gradient(900px 500px at 50% 40%,#ffffff,#e8ecf2)}
#spinViewer.grabbing{cursor:grabbing}
#spinImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#spinCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#spinDots{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
#spinDots span{width:10px;height:10px;border-radius:50%;background:#2a3350;cursor:pointer;border:1px solid #3a4666}
#spinDots span.on{background:var(--acc);border-color:var(--acc)}
.vitem .ph{font-size:10px;background:#12315e;color:#9cc2ff;border-radius:6px;padding:2px 6px;margin-left:6px;white-space:nowrap}
.cfg .photoNote{display:none}
.cfg.photo .photoNote{display:block;margin:0 0 4px}
.cfg.photo #finishes,.cfg.photo #finishNote{opacity:.35;pointer-events:none}

/* ---------- bottom bar ---------- */
.bbar{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:14px 22px;border-top:1px solid var(--line);background:#0d1119}
.price small{display:block;color:var(--mut);font-size:12px}
.price b{font-size:30px;font-weight:700}
.price .det{font-size:11px;color:var(--mut)}
.bbar .sp{flex:1}
.btn{font-family:inherit;font-size:15px;font-weight:600;padding:13px 26px;border-radius:11px;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--txt)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-size:16px;padding:14px 34px}
.btn.primary:hover{background:var(--acc2)}
.btn:hover{border-color:var(--acc)}
.guar{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:8px}

/* ---------- modal ---------- */
.mback{position:fixed;inset:0;background:rgba(4,6,10,.7);display:none;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(3px)}
.mback.show{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(480px,92vw);max-height:90vh;overflow-y:auto;padding:24px}
.modal h3{margin:0 0 4px;font-size:18px}
.modal p.sub{margin:0 0 16px;color:var(--mut);font-size:13px}
.frow{margin-bottom:12px}
.frow label{display:block;font-size:12px;color:var(--mut);margin-bottom:6px}
.frow input,.frow textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--txt);font-family:inherit;font-size:14px;padding:11px 12px}
.frow input:focus,.frow textarea:focus{outline:none;border-color:var(--acc)}
.mrow{display:flex;gap:10px;margin-top:18px}
.mrow .btn{flex:1}
.sum{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:13px;line-height:1.7;margin-bottom:6px}
.sum b{color:var(--acc)}
.wa{display:block;text-align:center;background:#25D366;color:#062b16 !important;font-weight:700;text-decoration:none;padding:14px;border-radius:11px;margin-top:12px;font-size:15px}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a2742;border:1px solid var(--acc);color:var(--txt);padding:12px 22px;border-radius:12px;font-size:14px;opacity:0;transition:.25s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:1080px){
  .wrap{grid-template-columns:1fr;grid-template-rows:auto 46vh auto auto;overflow-y:auto}
  body{overflow:auto}
  .side{border-right:none;border-bottom:1px solid var(--line);max-height:220px}
  .cfg{border-left:none;border-top:1px solid var(--line)}
  .nav{display:none}
  .bbar{flex-wrap:wrap}
}