/* ═══════════ TOKENS ═══════════ */
:root{
  --void:#07090D;
  --panel:#0E1218;
  --panel-2:#151A22;
  --panel-3:#1D242E;
  --veil:rgba(14,18,24,.82);

  --champagne:#D9BE8E;
  --champagne-dim:rgba(217,190,142,.26);
  --champagne-ghost:rgba(217,190,142,.09);
  --platinum:#E9E5DC;
  --slate:#8C97A6;
  --slate-dim:#59616E;

  --signal:#5FE3B3;
  --signal-ghost:rgba(95,227,179,.12);
  --brake:#FF6B6B;

  --hairline:rgba(233,229,220,.09);
  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Bodoni Moda',Georgia,serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Cegah pull-to-refresh bawaan browser/PWA: kalau ikut terpicu, halaman benar-benar
   reload dan aplikasi kembali ke Beranda — padahal gesture-nya sudah kita tangani
   sendiri (lihat blok "TARIK UNTUK MUAT ULANG" di app.js). */
html{ scroll-behavior:smooth; overscroll-behavior-y:contain; }
body{
  margin:0; background:var(--void); color:var(--platinum);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; border-radius:4px; }
h1,h2,h3,h4,p{ margin:0; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.serif{ font-family:var(--display); font-weight:500; }

.edge{ position:relative; }
.edge::before{
  content:''; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,190,142,.5),transparent);
  pointer-events:none;
}

/* ═══════════ SHELL ═══════════ */
.app{ display:none; min-height:100dvh; }
.app.on{ display:flex; }

.rail{
  display:none; flex-direction:column; width:250px; flex-shrink:0;
  position:fixed; inset:0 auto 0 0; padding:30px 16px calc(20px + var(--safe-b));
  background:var(--panel); border-right:1px solid var(--hairline); z-index:40;
}
.rail-mark{ display:flex; align-items:center; gap:11px; padding:0 10px 30px; }
.rail-mark .glyph{ width:30px; height:30px; }
.rail-mark b{ font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:.01em; }
.rail nav{ display:flex; flex-direction:column; gap:2px; }
.navlink{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:12px; border-radius:var(--r-sm); border:1px solid transparent;
  background:none; color:var(--slate); font-size:14.5px;
}
.navlink svg{ width:19px; height:19px; flex-shrink:0; }
.navlink:hover{ color:var(--platinum); }
.navlink.on{ color:var(--platinum); background:var(--panel-2); border-color:var(--champagne-dim); }
.rail-foot{ margin-top:auto; padding:0 10px; font-size:11.5px; color:var(--slate-dim); line-height:1.6; }
.rail-foot a{ color:var(--platinum); text-decoration:underline; text-underline-offset:2px; }
#trbtn-overlay-container-0 a.trbtn{ font-family:var(--sans) !important; }

.stage{ flex:1; min-width:0; padding-bottom:calc(92px + var(--safe-b)); }
@media (min-width:900px){
  .rail{ display:flex; }
  .stage{ margin-left:250px; padding-bottom:40px; }
  .dock{ display:none!important; }
}

.view{ display:none; }
.view.on{ display:block; animation:enter .34s cubic-bezier(.2,.7,.3,1); }
@keyframes enter{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.bar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:16px 20px; background:var(--veil); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hairline);
}
.bar h2{ font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:.01em; }
.bar .sub{ font-size:12px; color:var(--slate-dim); margin-top:1px; }
.icon-btn{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--hairline); color:var(--platinum);
}
.notif-badge{
  position:absolute; top:-2px; right:-2px; background:var(--brake); color:#fff; font-size:9px;
  min-width:15px; height:15px; border-radius:50%; align-items:center; justify-content:center; padding:0 3px;
}
.notif-item{ padding:12px 16px; border-bottom:1px solid var(--hairline); font-size:13px; line-height:1.5; }
.notif-item:last-child{ border-bottom:none; }
.notif-item.unread{ background:var(--champagne-ghost); }
.notif-item.bisa-klik{ cursor:pointer; }
.notif-item.bisa-klik:hover{ background:var(--panel-3); }
.notif-time{ display:block; font-size:11px; color:var(--slate-dim); margin-top:4px; }
.body{ padding:20px; max-width:980px; margin:0 auto; }

/* ═══════════ DOCK ═══════════ */
.dock{
  position:fixed; inset:auto 0 0 0; z-index:50; display:flex; justify-content:space-around;
  padding:9px 6px calc(10px + var(--safe-b));
  background:var(--veil); backdrop-filter:blur(20px); border-top:1px solid var(--hairline);
}
.dock button{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; color:var(--slate-dim); font-size:10.5px; padding:5px 12px;
  letter-spacing:.02em;
}
.dock button svg{ width:21px; height:21px; }
.dock button.on{ color:var(--champagne); }
.dock .peak{
  margin-top:-20px; padding:10px 16px 8px; border-radius:18px; color:var(--void);
  background:linear-gradient(165deg,#F0DDBA,var(--champagne));
  box-shadow:0 6px 22px rgba(217,190,142,.24);
}
.dock .peak.on{ color:var(--void); }

/* ═══════════ ATOMS ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:13px; border:1px solid transparent;
  font-size:14.5px; font-weight:500; letter-spacing:.01em;
  transition:transform .14s ease, opacity .14s ease;
}
.btn:active{ transform:scale(.975); }
.btn.wide{ width:100%; }
.b-gold{ background:linear-gradient(165deg,#F0DDBA,var(--champagne)); color:#18120A; }
.b-signal{ background:linear-gradient(165deg,#8DF0CB,var(--signal)); color:#04231A; }
.b-quiet{ background:var(--panel-2); border-color:var(--hairline); color:var(--platinum); }
.b-line{ background:none; border-color:var(--champagne-dim); color:var(--champagne); }
.b-danger{ background:none; border-color:rgba(255,107,107,.34); color:var(--brake); }
.b-sm{ padding:9px 15px; font-size:13px; border-radius:10px; }
.row-btn{ display:flex; gap:10px; }

/* Kartu admin berdampingan. align-items:flex-start penting — dengan stretch (default),
   kartu pendek ikut meregang setinggi kartu tertinggi. flex-basis 260px + wrap membuat
   kartu menumpuk vertikal di layar sempit alih-alih menyusut jadi kolom satu-kata. */
.row-cards{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px; }

/* Pager daftar akun. Memakai token warna yang sama dengan komponen lain; tombol
   panahnya mengikuti gaya bulat .shot .nav di galeri foto supaya konsisten. */
.tautan-profil{
  color:var(--champagne); cursor:pointer; text-decoration:underline;
  text-decoration-color:var(--champagne-dim); text-underline-offset:2px;
}
.tautan-profil:hover{ text-decoration-color:var(--champagne); }

.pager{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:11px 0; }
.pager .info{ font-size:11.5px; color:var(--slate-dim); margin-right:auto; }
.pager button{
  min-width:32px; height:32px; padding:0 9px; border-radius:9px; cursor:pointer;
  border:1px solid var(--hairline); background:var(--panel-2); color:var(--platinum);
  font-family:inherit; font-size:12.5px; display:grid; place-items:center;
}
.pager button:hover:not([disabled]):not(.on){ border-color:var(--champagne-dim); }
.pager button[disabled]{ opacity:.32; cursor:default; }
.pager button.on{ background:var(--champagne); color:var(--void); border-color:var(--champagne); font-weight:500; }
.pager .nav-btn{ border-radius:50%; width:32px; min-width:32px; padding:0; }
.pager .nav-btn svg{ width:15px; height:15px; }
.pager .gap{ color:var(--slate-dim); font-size:12.5px; padding:0 2px; }
.row-cards > .card-admin{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:12px; }

.meta{
  display:inline-flex; align-items:center; padding:5px 10px; border-radius:7px;
  font-size:11.5px; color:var(--slate); background:var(--panel-2); border:1px solid var(--hairline);
}
.state{ display:inline-block; padding:4px 10px; border-radius:7px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.s-baru{ background:rgba(140,151,166,.14); color:var(--slate); }
.s-bid{ background:var(--champagne-ghost); color:var(--champagne); }
.s-deal{ background:var(--signal-ghost); color:var(--signal); }

.filters{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:20px; scrollbar-width:none; }
.filters::-webkit-scrollbar{ display:none; }
.filters button{
  padding:9px 17px; border-radius:100px; white-space:nowrap; font-size:13.5px;
  background:var(--panel-2); border:1px solid var(--hairline); color:var(--slate);
}
.filters button.on{ color:var(--void); background:var(--champagne); border-color:var(--champagne); font-weight:500; }

.panel{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:20px; }
.eyebrow{ font-size:12px; color:var(--slate-dim); letter-spacing:.06em; text-transform:uppercase; }

/* ═══════════ CAR MEDIA ═══════════ */
.shot{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--panel-2);
  display:grid; place-items:center;
}
/* Foto mobil dari HP sering portrait (mis. 1169x1288). Dengan object-fit:cover foto
   dipaksa masuk kotak landscape dan mobilnya kepotong. contain menjamin foto utuh;
   sisa ruang diisi versi blur foto itu sendiri supaya tidak jadi bar hitam polos. */
/* posisi absolut, bukan height:100% — .shot memakai place-items:center sehingga item grid
   tidak di-stretch dan height:100% jatuh ke tinggi intrinsik (foto meluber lalu terpotong). */
.shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; z-index:1; }
.shot .blurbg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; filter:blur(22px) saturate(1.2); transform:scale(1.18); opacity:.55;
}

/* ── galeri ── */
.shot .nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(233,229,220,.28);
  background:rgba(7,9,13,.66); backdrop-filter:blur(8px); color:var(--platinum);
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.shot .nav:hover{ background:rgba(7,9,13,.85); border-color:var(--champagne); }
.shot .nav[disabled]{ opacity:.28; cursor:default; }
.shot .nav.prev{ left:10px; } .shot .nav.next{ right:10px; }
.shot .nav svg{ width:17px; height:17px; }
.shot .dots{
  position:absolute; left:0; right:0; bottom:10px; z-index:3;
  display:flex; gap:6px; justify-content:center; pointer-events:none;
}
.shot .dots i{ width:6px; height:6px; border-radius:50%; background:rgba(233,229,220,.4); }
.shot .dots i.on{ background:var(--champagne); width:18px; border-radius:3px; }
.shot .empty{ display:grid; place-items:center; gap:8px; color:var(--slate-dim); text-align:center; padding:16px; }
.shot .empty svg{ width:30px; height:30px; opacity:.5; }
.shot .empty span{ font-size:11.5px; }
.shot .count{
  position:absolute; right:10px; bottom:10px; padding:4px 9px; border-radius:7px;
  background:rgba(7,9,13,.72); backdrop-filter:blur(6px); font-size:11px; color:var(--platinum);
  display:flex; align-items:center; gap:5px;
}
.shot .count svg{ width:12px; height:12px; }

.deck{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px; }
.auto{
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-lg);
  overflow:hidden; text-align:left; padding:0; width:100%;
  transition:border-color .2s ease, transform .2s ease;
}
.auto:hover{ border-color:var(--champagne-dim); transform:translateY(-3px); }
.auto .body-c{ padding:14px 15px 16px; }
.auto h3{ font-size:15px; font-weight:500; margin-bottom:9px; line-height:1.3; }
.auto .tags{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:11px; }
.auto .price{ font-family:var(--display); font-size:18px; font-weight:500; }
.auto .sub{ font-size:11.5px; color:var(--slate-dim); margin-top:3px; }

.strip{
  display:flex; gap:13px; align-items:stretch; width:100%; text-align:left; padding:0;
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-md);
  overflow:hidden; margin-bottom:12px;
}
.strip:hover{ border-color:var(--champagne-dim); }
.strip .shot{ width:108px; flex-shrink:0; aspect-ratio:auto; }
.strip .txt{ flex:1; min-width:0; padding:13px 14px 13px 0; }
.strip h3{ font-size:14.5px; font-weight:500; margin-bottom:7px; }
.strip .line{ font-size:12px; color:var(--slate); margin-top:7px; }

/* ═══════════ HUD ═══════════ */
.hud{
  position:relative; background:radial-gradient(120% 90% at 50% 0%,rgba(217,190,142,.10),transparent 62%), var(--panel);
  border:1px solid var(--champagne-dim); border-radius:var(--r-xl); padding:26px 22px 24px;
  margin:20px 0; overflow:hidden;
}
.gauge-wrap{ display:flex; justify-content:center; }
.gauge{ position:relative; width:210px; height:190px; }
.gauge svg{ width:210px; height:210px; display:block; transform:translateY(-4px); }
.gauge .core{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:5px;
  align-items:center; justify-content:center; padding:0 18px 16px; pointer-events:none;
}
.gauge .cap{ font-size:9.5px; color:var(--slate-dim); letter-spacing:.05em; text-transform:uppercase; text-align:center; line-height:1.3; margin:0; }
.gauge .fig{ font-family:var(--display); font-weight:500; font-size:27px; color:var(--signal); line-height:1.1; margin:0; }
.gauge .fig.down{ color:var(--brake); }
.gauge .pct{ font-size:12px; color:var(--slate); margin:0; }

.dial-head{ display:flex; justify-content:space-between; align-items:baseline; }
.dial-head span{ font-size:12.5px; color:var(--slate); }
.dial-head b{ font-family:var(--display); font-size:19px; font-weight:500; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--champagne),var(--signal)); margin:16px 0 5px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--platinum); border:3px solid var(--champagne); box-shadow:0 2px 12px rgba(217,190,142,.4);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--platinum);
  border:3px solid var(--champagne); box-shadow:0 2px 12px rgba(217,190,142,.4);
}
.dial-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--slate-dim); }

.ledger{ border-top:1px solid var(--hairline); margin-top:22px; padding-top:16px; }
.ledger div{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; font-size:13.5px; color:var(--slate); }
.ledger div.sum{
  border-top:1px solid var(--hairline); margin-top:8px; padding-top:14px;
  color:var(--platinum); font-weight:500; font-size:15px;
}
.ledger .num{ color:var(--platinum); }
.ledger .sum .num{ font-family:var(--display); font-size:18px; }

/* ═══════════ FORM ═══════════ */
.fset{ margin-bottom:26px; }
.fset > .eyebrow{ display:block; margin-bottom:14px; }
.f{ margin-bottom:15px; }
.f label{ display:block; font-size:13px; color:var(--slate); margin-bottom:7px; }
.f input, .f select, .f textarea{
  width:100%; padding:13px 14px; border-radius:12px;
  background:var(--panel-2); border:1px solid var(--hairline); color:var(--platinum); font-weight:500;
}
.f textarea{ resize:vertical; font-weight:400; }
.f input::placeholder, .f textarea::placeholder{ color:var(--slate-dim); font-weight:400; font-style:italic; opacity:.85; }
.f input:focus, .f select:focus, .f textarea:focus{ border-color:var(--champagne-dim); outline:none; }
.f .hint{ font-size:11.5px; color:var(--slate-dim); margin-top:6px; line-height:1.45; }
.f-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rp{ position:relative; }
.rp span{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--slate-dim); font-size:14px; pointer-events:none; }
.rp input{ padding-left:38px; }

.seg{ display:flex; gap:8px; }
.seg button{
  flex:1; padding:13px 10px; border-radius:12px; font-size:14px;
  background:var(--panel-2); border:1px solid var(--hairline); color:var(--slate);
}
.seg button.on{ color:var(--platinum); background:var(--champagne-ghost); border-color:var(--champagne-dim); }

/* ═══════════ UPLOADER ═══════════ */
.up-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-bottom:12px; }
.up-tile{ position:relative; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--panel-2); }
.up-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.up-tile .kill{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%;
  background:rgba(7,9,13,.78); backdrop-filter:blur(4px); border:none; color:var(--platinum);
  display:grid; place-items:center; font-size:13px; line-height:1;
}
.up-tile .lead{
  position:absolute; left:6px; bottom:6px; padding:3px 7px; border-radius:6px;
  background:var(--champagne); color:#18120A; font-size:9.5px; font-weight:600; letter-spacing:.04em;
}
.up-add{
  aspect-ratio:1; border-radius:var(--r-md); border:1px dashed var(--champagne-dim);
  background:var(--panel-2); color:var(--slate); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; font-size:11.5px; padding:8px;
}
.up-add svg{ width:22px; height:22px; opacity:.7; }
.up-actions{ display:flex; gap:10px; }
.up-actions .btn{ flex:1; }
.up-note{ font-size:11.5px; color:var(--slate-dim); margin-top:10px; line-height:1.5; }
.up-drop{ border-color:var(--signal)!important; background:var(--signal-ghost)!important; }
input[type=file]{ display:none; }

/* ═══════════ GATE ═══════════ */
.gate{ display:none; min-height:100dvh; flex-direction:column; }
.gate.on{ display:flex; animation:enter .4s ease; }
.gate-top{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:56px 28px 30px; position:relative; overflow:hidden;
}
.beam{
  position:absolute; inset:-30% -10% auto -10%; height:130%;
  background:radial-gradient(52% 42% at 50% 34%,rgba(217,190,142,.20),transparent 68%),
             radial-gradient(46% 36% at 50% 72%,rgba(95,227,179,.10),transparent 66%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.62;} 50%{opacity:1;} }
.gate-art{ position:relative; width:min(300px,74vw); margin-bottom:22px; }
.gate h1{ position:relative; font-family:var(--display); font-weight:500; font-size:46px; letter-spacing:.015em; }
.gate .claim{ position:relative; color:var(--slate); font-size:15px; margin-top:12px; max-width:300px; line-height:1.55; }
.gate-form{ padding:8px 28px calc(46px + var(--safe-b)); width:100%; max-width:440px; margin:0 auto; position:relative; }
.google{
  display:flex; align-items:center; justify-content:center; gap:11px; width:100%;
  padding:15px; border-radius:13px; border:none; background:var(--platinum); color:#141210;
  font-weight:500; font-size:15px;
}
.gate-note{ text-align:center; font-size:12.5px; color:var(--slate-dim); margin-top:15px; }
.gsi-slot{ display:flex; justify-content:center; }
.track{ display:flex; gap:6px; margin-bottom:26px; }
.track i{ flex:1; height:3px; border-radius:2px; background:var(--panel-3); }
.track i.done{ background:var(--champagne); }

/* ═══════════ INSTALL ═══════════ */
.install{
  position:fixed; inset:0 0 auto 0; z-index:70; display:none; align-items:center; gap:13px;
  padding:12px 16px; background:var(--panel-2); border-bottom:1px solid var(--champagne-dim);
}
.install.on{ display:flex; }
.install .mk{
  width:40px; height:40px; border-radius:11px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(165deg,#F0DDBA,var(--champagne)); color:#18120A;
}
.install .tx{ flex:1; min-width:0; }
.install .tx b{ display:block; font-size:13.5px; font-weight:500; }
.install .tx span{ display:block; font-size:11.5px; color:var(--slate); line-height:1.4; }
.install .x{ background:none; border:none; color:var(--slate-dim); font-size:17px; padding:5px; }

/* ═══════════ STATS ═══════════ */
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
.tri > div{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-md); padding:15px 13px; }
.tri span{ display:block; font-size:11px; color:var(--slate-dim); margin-bottom:7px; line-height:1.3; }
.tri b{ font-family:var(--display); font-size:20px; font-weight:500; }
.chart{ margin-bottom:24px; }
.chart h3{ font-size:14px; font-weight:600; margin-bottom:14px; letter-spacing:.01em; }
.chart .r{ margin-bottom:12px; }
.chart .r .lb{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--slate); margin-bottom:6px; }
.chart .r .tr{ height:7px; border-radius:4px; background:var(--panel-2); overflow:hidden; }
.chart .r .fl{ height:100%; border-radius:4px; background:linear-gradient(90deg,var(--champagne),var(--signal)); }

/* ═══════════ AKUN ═══════════ */
.who{ display:flex; align-items:center; gap:15px; }
/* Jarak antara blok identitas dan tombol-tombol di bawahnya. Ditaruh pada pembungkus
   supaya tetap berlaku walau salah satu tombol di dalamnya disembunyikan (tombol
   "Pasang" hilang saat aplikasi dibuka sebagai PWA). gap mengatur jarak antar tombol,
   jadi menambah/menghapus tombol tidak merusak tata letaknya. */
.akun-aksi{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.orb{
  width:60px; height:60px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(165deg,#F0DDBA,var(--champagne)); color:#18120A;
  font-family:var(--display); font-size:24px; font-weight:500;
}
.who h3{ font-size:17px; font-weight:600; margin-bottom:6px; }
.head{ font-size:13px; font-weight:600; color:var(--slate); margin:30px 0 13px; letter-spacing:.03em; }
.refbox{
  display:flex; align-items:center; gap:11px; padding:13px 15px; margin-bottom:12px;
  background:var(--panel-2); border:1px dashed var(--champagne-dim); border-radius:12px;
}
.refbox code{ flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--sans); }
.docrow{ display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--hairline); }
.docrow:last-child{ border-bottom:none; }
.docrow .pip{ width:8px; height:8px; border-radius:50%; background:var(--slate-dim); flex-shrink:0; }
.docrow .pip.ok{ background:var(--signal); }
.docrow .pip.rejected{ background:var(--brake); }
.docrow .pip.pending{ background:var(--champagne); }
.docrow .t{ flex:1; min-width:0; }
.docrow .t b{ display:block; font-size:14px; font-weight:500; }
.docrow .t span{ font-size:11.5px; color:var(--slate-dim); line-height:1.45; }
.jar{
  background:radial-gradient(110% 80% at 50% 0%,rgba(217,190,142,.14),transparent 64%), var(--panel);
  border:1px solid var(--champagne-dim); border-radius:var(--r-xl); padding:24px 20px; text-align:center;
}
.jar h3{ font-family:var(--display); font-weight:500; font-size:21px; }
.jar p{ font-size:13px; color:var(--slate); margin:10px auto 18px; max-width:340px; line-height:1.55; }

/* ═══════════ KENDALI ═══════════ */
.quad{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin-bottom:24px; }
.quad > div{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-md); padding:16px 15px; }
.quad span{ display:block; font-size:11px; color:var(--slate-dim); margin-bottom:8px; letter-spacing:.03em; }
.quad b{ display:block; font-family:var(--display); font-size:25px; font-weight:500; line-height:1.1; }
.quad i{ display:block; font-style:normal; font-size:11px; color:var(--slate-dim); margin-top:7px; line-height:1.45; }
.quad i.up{ color:var(--signal); }

.fn{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.fn .fn-lb{ width:104px; flex-shrink:0; font-size:12.5px; color:var(--slate); }
.fn .fn-tr{ flex:1; height:26px; border-radius:7px; background:var(--panel-2); overflow:hidden; }
.fn .fn-fl{ height:100%; border-radius:7px; background:linear-gradient(90deg,var(--champagne),var(--signal)); opacity:.85; }
.fn .fn-n{ width:56px; text-align:right; flex-shrink:0; font-size:13px; font-weight:500; }

.spark{ display:flex; align-items:flex-end; gap:6px; height:112px; }
.spark div{ flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--champagne),rgba(217,190,142,.22)); min-height:5px; }
.spark div:last-child{ background:linear-gradient(180deg,var(--signal),rgba(95,227,179,.22)); }
.spark-x{ display:flex; gap:6px; margin-top:9px; }
.spark-x span{ flex:1; text-align:center; font-size:10.5px; color:var(--slate-dim); }

/* ═══════════ TOAST ═══════════ */
.toasts{ position:fixed; inset:auto 0 calc(104px + var(--safe-b)) 0; display:flex; justify-content:center; z-index:90; pointer-events:none; padding:0 20px; }
@media (min-width:900px){ .toasts{ bottom:28px; } }
.toast{
  background:var(--platinum); color:#141210; padding:12px 20px; border-radius:100px;
  font-size:13.5px; font-weight:500; box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; transform:translateY(14px); transition:all .3s cubic-bezier(.2,.7,.3,1); text-align:center;
}
.toast.on{ opacity:1; transform:none; }


/* Tarik-untuk-muat-ulang. Di PWA standalone, pull-to-refresh bawaan browser tidak ada,
   jadi disediakan sendiri. Hanya aktif kalau halaman benar-benar di posisi paling atas. */
#ptr{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:0; overflow:hidden; opacity:0;
  background:var(--panel-2); border-bottom:1px solid var(--hairline);
  color:var(--slate); font-size:12.5px;
  transition:height .18s ease, opacity .18s ease;
}
#ptr.tarik{ opacity:1; }
#ptr .ptr-spin{
  width:15px; height:15px; border-radius:50%;
  border:2px solid var(--hairline); border-top-color:var(--champagne);
}
#ptr.muat .ptr-spin{ animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ #ptr .ptr-spin{ animation:none; } }

/* ═══════════ HALAMAN PUBLIK (SSR — src/routes/public.ts) ═══════════
   Reuse token & pola di atas (.btn, .panel, .eyebrow, .serif) apa adanya —
   ini cuma layout tambahan untuk landing/bursa/detail publik, bukan sistem desain baru. */
body.pub{ padding-bottom:calc(64px + var(--safe-b)); }
.pub-nav{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px;
  padding:14px 20px; background:var(--veil); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.pub-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--platinum); margin-right:auto; }
.pub-brand b{ font-size:19px; }
.pub-nav-links{ display:flex; gap:18px; }
.pub-nav-links a{ color:var(--slate); text-decoration:none; font-size:13.5px; }
.pub-nav-links a:hover{ color:var(--platinum); }
@media (max-width:720px){ .pub-nav-links{ display:none; } }

main{ max-width:980px; margin:0 auto; padding:0 20px; }
.pub-hero{ padding:48px 0 36px; text-align:left; }
.pub-hero h1{ font-size:clamp(26px,4.4vw,40px); font-weight:500; line-height:1.18; margin:10px 0 14px; }
.pub-hero-sub{ color:var(--slate); font-size:15.5px; line-height:1.6; max-width:640px; margin-bottom:22px; }
.pub-cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.pub-block{ padding:32px 0; border-top:1px solid var(--hairline); }
.pub-block h2{ font-size:22px; font-weight:500; margin-bottom:14px; }
.pub-block-alt{ background:var(--panel); border-radius:var(--r-lg); border:1px solid var(--hairline); padding:28px; margin:0 -1px; }
.pub-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:720px){ .pub-steps{ grid-template-columns:1fr; } }
.pub-steps.auto{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.pub-steps > div{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px; }
.pub-step-n{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--champagne-ghost); color:var(--champagne); font-weight:600; font-size:13px; margin-bottom:10px; }
.pub-steps b{ display:block; margin:2px 0 6px; }
.pub-steps p{ color:var(--slate); font-size:13.5px; line-height:1.55; }
.pub-faq{ padding:32px 0; border-top:1px solid var(--hairline); }
.pub-faq h2{ font-size:22px; font-weight:500; margin-bottom:14px; }
.pub-faq details{ border-bottom:1px solid var(--hairline); padding:14px 0; }
.pub-faq summary{ cursor:pointer; font-weight:500; list-style:none; }
.pub-faq summary::-webkit-details-marker{ display:none; }
.pub-faq summary::before{ content:'+ '; color:var(--champagne); }
.pub-faq details[open] summary::before{ content:'– '; }
.pub-faq p{ color:var(--slate); font-size:13.5px; line-height:1.6; margin-top:8px; }
.pub-support{ color:var(--slate-dim); font-size:12.5px; }
.pub-support a{ color:var(--champagne); }

.pub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:8px; }
.pub-card{ display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; }
.pub-card-img{ aspect-ratio:16/10; background:var(--panel-2); }
.pub-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pub-card-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--slate-dim); font-size:12px; text-align:center; padding:10px; }
.pub-card-body{ padding:12px 14px; display:flex; flex-direction:column; gap:3px; }
.pub-card-body b{ font-size:14px; }
.pub-card-price{ color:var(--signal); font-weight:600; font-variant-numeric:tabular-nums; }
.pub-card-meta{ color:var(--slate-dim); font-size:12px; }

.pub-pager{ display:flex; align-items:center; gap:14px; justify-content:center; padding-top:22px; font-size:13px; }
.pub-pager a{ color:var(--champagne); text-decoration:none; }

.pub-breadcrumb{ padding:16px 0 0; font-size:12.5px; color:var(--slate-dim); }
.pub-breadcrumb a{ color:var(--slate); text-decoration:none; }
.pub-detail{ display:grid; grid-template-columns:1.3fr 1fr; gap:26px; padding:20px 0 32px; }
@media (max-width:760px){ .pub-detail{ grid-template-columns:1fr; } }
.pub-detail-gallery{ display:flex; flex-direction:column; gap:8px; }
.pub-detail-gallery img{ width:100%; border-radius:var(--r-md); border:1px solid var(--hairline); object-fit:cover; }
.pub-detail-info h1{ font-size:26px; font-weight:500; margin-bottom:6px; }
.pub-detail-price{ color:var(--signal); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; margin-bottom:16px; }
.pub-spec{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-bottom:20px; }
.pub-spec > div{ border-bottom:1px solid var(--hairline); padding-bottom:8px; }
.pub-spec dt{ font-size:11.5px; color:var(--slate-dim); text-transform:uppercase; letter-spacing:.04em; }
.pub-spec dd{ margin:2px 0 0; font-size:14px; }

.pub-footer{ border-top:1px solid var(--hairline); margin-top:20px; padding:32px 0 90px; }
.pub-footer-cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; }
@media (max-width:640px){ .pub-footer-cols{ grid-template-columns:1fr; } }
.pub-footer-cols h3{ font-size:12px; color:var(--slate-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.pub-footer-cols a{ display:block; color:var(--slate); text-decoration:none; font-size:13px; margin-bottom:7px; }
.pub-footer-cols a:hover{ color:var(--platinum); }
.pub-footer-cols p{ color:var(--slate-dim); font-size:13px; line-height:1.6; margin-top:8px; max-width:340px; }
.pub-footer-copy{ color:var(--slate-dim); font-size:11.5px; margin-top:24px; }

.pub-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none; gap:10px; padding:10px 14px calc(10px + var(--safe-b));
  background:var(--veil); backdrop-filter:blur(10px); border-top:1px solid var(--hairline);
}
@media (max-width:720px){ .pub-sticky-cta{ display:flex; } }