/* === Unistore v3: styles.css === */
:root{
  --bg:#0b0f14; --panel:#0f141c; --glass:rgba(255,255,255,.03); --line:#1a2230;
  --text:#eef4ff; --muted:#9db0c7; --shadow:rgba(0,0,0,.35);
  --accent:#22c55e; --accent2:#14b8a6; --warn:#f59e0b; --radius:22px;
}
html.light{
  --bg:#f6f8fb; --panel:#ffffff; --glass:rgba(0,0,0,.02); --line:#e6eaf0;
  --text:#0b121a; --muted:#4a5a6d; --shadow:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;color:var(--text);
  font: 16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,.10), transparent),
    radial-gradient(1000px 500px at 120% 10%, rgba(244,114,182,.08), transparent),
    linear-gradient(180deg,#0a0e13,#0b1118 30%,#090d12 100%);
}
html.light body{ background:linear-gradient(180deg,#f6f8fb,#f2f6ff 40%,#eef2f9 100%); }
a{color:var(--text);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.lead{color:var(--muted)}
.mt-10{margin-top:10px}

/* Header */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px) saturate(160%);
  background:linear-gradient(180deg,rgba(9,12,17,.75),rgba(9,12,17,.35));border-bottom:1px solid var(--line)}
html.light header{ background:rgba(255,255,255,.7); }
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;font-weight:900}
.brand img{filter:drop-shadow(0 2px 8px rgba(34,197,94,.25))}
.menu{display:flex;align-items:center;gap:12px}
.pill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#0e151e}
html.light .pill{ background:#ffffff; }

/* Small button */
.btn-sm{padding:6px 10px;border-radius:10px;border:1px solid var(--line);
  background:#0b1118;color:#eaf2ff;cursor:pointer}
html.light .btn-sm{ background:#fff; color:#0b1118; }

/* Burger + drawer */
.burger{display:flex;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:#0b1118;align-items:center;justify-content:center;cursor:pointer}
html.light .burger{ background:#fff; }
.menu-links{display:flex;gap:12px}
.menu-links a{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#0b1118;font-weight:600}
.menu-links a:hover{border-color:#2b8a5d;box-shadow:0 0 0 4px rgba(34,197,94,.08)}
html.light .menu-links a{ background:#fff; color:#0b121a; }
@media (max-width:900px){.menu-links{display:none}}
.drawer{position:fixed;inset:0 auto 0 0;width:78%;max-width:320px;background:#0b1118;border-right:1px solid var(--line);
  transform:translateX(-100%);transition:transform .25s ease;z-index:80;padding:16px}
html.light .drawer{ background:#fff; color:#0b121a; }
.drawer.show{transform:none}
.drawer a,.drawer button{display:block;width:100%;text-align:left;margin:8px 0;background:#0c1117;
  border:1px solid var(--line);color:#eaf2ff;padding:10px 12px;border-radius:12px}
html.light .drawer a, html.light .drawer button { background:#fff; color:#0b121a; }

/* Theme toggle */
.theme-toggle{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 10px;border-radius:10px;background:#0b1118;color:#eaf2ff;cursor:pointer}
html.light .theme-toggle{ background:#fff; color:#0b121a; }

/* Stepper */
.stepper{position:sticky;top:64px;z-index:55;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(34,197,94,.07),rgba(96,165,250,.05))}
html.light .stepper{ background:rgba(255,255,255,.8); }
.steps{display:flex;gap:26px;align-items:center;padding:12px 0}
.node{display:flex;align-items:center;gap:10px;color:var(--muted)}
.dot{width:26px;height:26px;border-radius:999px;border:2px solid var(--muted);display:grid;place-items:center;font-weight:800;font-size:12px}
.node.active{color:#fff}.node.active .dot{border-color:var(--accent);background:var(--accent);color:#03150c}
.node.done{color:#9cf2be}.node.done .dot{border-color:var(--accent);background:transparent;color:var(--accent)}
html.light .node.active{ color:#0b121a; }
.line{height:2px;background:#2e3a4e;flex:1;border-radius:2px;opacity:.6}
html.light .line{ background:#e6eaf0; }

/* Loader */
#loader{position:fixed;inset:0;background:rgba(6,9,13,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100}
#loader.show{display:flex}
.loader-box{display:grid;place-items:center;animation:pop .25s ease}
.spinner{width:58px;height:58px;border:5px solid rgba(255,255,255,.12);border-top-color:#22c55e;border-radius:999px;animation:spin 1s linear infinite}
.loading-text{margin-top:14px;color:var(--muted);font-weight:600;text-align:center}
@keyframes spin{to{transform:rotate(360deg)}} @keyframes pop{from{transform:scale(.95);opacity:.8}to{transform:none;opacity:1}}

/* Content */
.wizard{min-height:100svh;display:grid;place-items:center}
.card{backdrop-filter:blur(8px);background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 10px 40px var(--shadow);animation:fadeIn .45s ease}
.grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.view{display:none;padding:48px 0}
.view.show{display:block;animation:slideIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.why{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
html.light .why{ background:#fff; }

/* Inputs */
.ig{position:relative}
.ig .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.8}
.ig input,.ig select,.ig textarea{width:100%;padding:12px 14px 12px 38px;border-radius:14px;border:1px solid var(--line);background:#0c1117;color:#eef4ff;outline:none;transition:border-color .2s, box-shadow .2s}
html.light .ig input,html.light .ig select,html.light .ig textarea{background:#fff;color:#0b121a}
.ig textarea{padding-left:14px}
.ig:focus-within input,.ig:focus-within select,.ig:focus-within textarea{border-color:#2b8a5d;box-shadow:0 0 0 4px rgba(34,197,94,.08)}

/* Chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.chip{user-select:none;cursor:pointer;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:#0c1117;color:#eaf2ff;transition:all .15s}
html.light .chip{background:#fff;color:#0b121a}
.chip.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#03150c;border-color:transparent;box-shadow:0 6px 18px rgba(34,197,94,.25)}
.chip:active{transform:translateY(1px)}

/* Buttons */
.btn{position:relative;overflow:hidden;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:#0d141b;color:#eaf2ff;cursor:pointer;font-weight:800;transition:transform .1s ease}
.btn:active{transform:scale(.98)} .btn[disabled]{opacity:.6;cursor:not-allowed}
.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#03150c;border:0}
.ghost{background:#0b1118;color:#eaf2ff}
html.light .ghost{ background:#fff; color:#0b121a; }
.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* Preview & table */
.preview{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px dashed var(--line);border-radius:18px;padding:16px}
html.light .preview{ background:#fff; }
.item{display:flex;gap:10px;align-items:flex-start;margin:6px 0}
.bullet{width:8px;height:8px;background:var(--accent);border-radius:999px;margin-top:8px;box-shadow:0 0 12px rgba(34,197,94,.6)}

.table-wrap{width:100%;overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.pillstatus{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;background:#2a1f07;color:#f5d08b;border-color:#4d3a10}

/* Paket grid */
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr}}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 10px;margin-bottom:8px}
.badge-green{border-color:#284432;background:#0a1611;color:#9cf2be}
.badge-purple{border-color:#3a2944;background:#12121a;color:#f9d3ff}
html.light .badge-green{ background:#ebfff2; color:#0f5c34; }
html.light .badge-purple{ background:#f6ebff; color:#4a2d68; }
.price{font-size:30px;font-weight:900}
.price-green{background:linear-gradient(90deg,#fff,#b3f1c9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.price-purple{background:linear-gradient(90deg,#fff,#e0c2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* QR */
.qrbox{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.qrbox img{width:180px;height:180px;background:#fff;border-radius:16px;border:1px solid var(--line)}

/* Toast */
.toast-wrap{position:fixed;right:14px;bottom:14px;display:grid;gap:8px;z-index:120}
.toast{background:#0e151e;color:#eaf2ff;border:1px solid var(--line);padding:10px 12px;border-radius:12px;box-shadow:0 10px 30px var(--shadow)}
html.light .toast{ background:#fff; color:#0b121a; }

/* Footer */
footer{padding:24px 0;border-top:1px solid var(--line)}
.muted{color:var(--muted)}