/* ==========================================================================
   Labs.ai Store — satu file CSS, tanpa framework, tanpa build step.
   Palet: dark tech. Satu tema (gelap), satu aksen (hijau #3ddc97).
   Skala radius tunggal: 12px (kartu), 10px (input/tombol), 999px (pill).
   ========================================================================== */

:root{
  --bg:#FBF9F5;
  --bg2:#F3EFEA;
  --panel:#FFFFFF;
  --panel2:#F7F4EE;
  --line:rgba(31,31,31,0.08);
  --line2:rgba(31,31,31,0.15);
  --teks:#1F1E1D;
  --teks2:#5E5D59;
  --teks3:#8C887F;
  --aksen:#D97757;
  --aksen2:#C96442;
  --aksen-lembut:rgba(217,119,87,0.10);
  --aksen-garis:rgba(217,119,87,0.28);
  --merah:#ff6b6b;
  --kuning:#f0b429;
  --r-kartu:12px;
  --r-kecil:10px;
  --r-pill:999px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Copernicus","Tiempos Headline",Georgia,Cambria,"Times New Roman",Times,serif; --sans-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lebar:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Halaman tidak boleh bisa digeser mendatar. Kalau ada isi yang lebih lebar dari
   layar (mis. tabel admin), yang bergeser hanya isi di dalam kotaknya
   (.tabel-bungkus / .side), bukan seluruh halaman berikut kepala & tombol menu.
   Dipakai overflow-x:clip, bukan hidden, supaya tidak terbentuk scroll container
   baru sehingga .side yang sticky dan geser-mendatar di dalam kotak tetap jalan.
   Browser lama yang belum mengenal clip akan mengabaikan baris ini. */
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--teks);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--aksen);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.15;letter-spacing:-.02em;font-weight:650}
h1{font-size:clamp(1.9rem,5.2vw,3.1rem)}
h2{font-size:clamp(1.35rem,3.2vw,1.95rem)}
h3{font-size:1.05rem}
p{margin:0 0 1rem}
code,kbd,pre{font-family:var(--mono);font-size:.875em}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

.wrap{width:100%;max-width:var(--lebar);margin:0 auto;padding:0 20px}
.sempit{max-width:820px}
.tengah{text-align:center}

/* ------------------------------------------------------------------ navbar */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(251,249,245,0.92);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:18px;height:64px;max-width:var(--lebar);margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;color:var(--teks);font-size:1.02rem;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .titik{width:9px;height:9px;border-radius:var(--r-pill);background:var(--aksen);flex:none}
.nav-menu{display:flex;align-items:center;gap:20px;margin-left:auto}
.nav-menu a{color:var(--teks2);font-size:.9rem;white-space:nowrap}
.nav-menu a:hover{color:var(--teks);text-decoration:none}
.nav-menu a.aktif{color:var(--teks)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line2);color:var(--teks);border-radius:var(--r-kecil);width:40px;height:36px;cursor:pointer;font-size:1rem;line-height:1}

/* ------------------------------------------------------------------ tombol */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--r-kecil);border:1px solid transparent;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-utama{background:var(--aksen);color:#04150d}
.btn-utama:hover{background:var(--aksen2);text-decoration:none}
/* Di dalam navbar, pemilih .nav-menu a (0,1,1) lebih kuat dari .btn-utama (0,1,0)
   sehingga warna tombol perlu ditegaskan ulang di sini; tanpa ini teks
   "Daftar gratis" jatuh ke abu-abu terang di atas hijau (tidak kontras). */
.nav-menu a.btn-utama,.nav-menu a.btn-utama:visited{color:#04150d}
.nav-menu a.btn-utama:hover{color:#04150d;background:var(--aksen2)}
.btn-garis{background:transparent;color:var(--teks);border-color:var(--line2)}
.btn-garis:hover{border-color:var(--aksen-garis);background:var(--aksen-lembut);text-decoration:none}
.btn-kecil{padding:7px 12px;font-size:.82rem}
.btn-blok{width:100%}
.btn[disabled],.btn.nonaktif{opacity:.5;cursor:not-allowed}

/* -------------------------------------------------------------------- hero */
.hero{padding:64px 0 48px;border-bottom:1px solid var(--line)}
/* min-width:0 wajib: tanpa ini kolom grid menolak menyusut dan blok kode
   berisi URL panjang akan mendorong lebar halaman di layar ponsel. */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero-grid > *{min-width:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--aksen);
  background:var(--aksen-lembut);border:1px solid var(--aksen-garis);
  padding:5px 11px;border-radius:var(--r-pill);margin-bottom:18px;
}
.hero h1{margin-bottom:14px}
.hero .sub{color:var(--teks2);font-size:1.02rem;max-width:46ch;margin-bottom:24px}
.hero-aksi{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------- kartu / panel */
.kartu{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-kartu);padding:20px;min-width:0;max-width:100%}
.kartu2{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-kartu);padding:18px;min-width:0;max-width:100%}
.grid{display:grid;gap:16px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.seksi{padding:56px 0;border-bottom:1px solid var(--line)}
.seksi:last-of-type{border-bottom:0}
.judul-seksi{margin-bottom:26px}
.judul-seksi p{color:var(--teks2);max-width:62ch;margin:0}

/* ------------------------------------------------------------------ kode */
/* Blok kode: yang bergeser hanya isi kotaknya, bukan halamannya.
   Di ponsel kotak dibatasi tinggi lalu bisa digeser dua arah di dalamnya. */
pre.kode,pre.terminal{
  background:#0b0f16;border:1px solid var(--line);border-radius:var(--r-kartu);
  padding:16px;overflow:auto;max-width:100%;margin:0 0 12px;line-height:1.7;color:#cfe3f5;
  font-size:.82rem;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
@media (max-width:760px){
  pre.kode,pre.terminal{max-height:260px;font-size:.78rem;padding:12px}
}
pre.terminal .pr{color:var(--aksen)}
pre.terminal .dim{color:var(--teks3)}
.kode-inline{background:#0b0f16;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:#cfe3f5}

/* ------------------------------------------------------------------ tabel */
.tabel-bungkus{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r-kartu);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table.tabel{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
table.tabel th,table.tabel td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table.tabel th{background:var(--panel2);color:var(--teks2);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
table.tabel tr:last-child td{border-bottom:0}
table.tabel td.kanan,table.tabel th.kanan{text-align:right}

/* --------------------------------------------------------------- form */
.label{display:block;font-size:.82rem;font-weight:600;color:var(--teks2);margin-bottom:6px}
.input,select.input,textarea.input{
  width:100%;padding:10px 12px;border-radius:var(--r-kecil);
  border:1px solid var(--line2);background:#0b0f16;color:var(--teks);
  font:inherit;font-size:.9rem;
}
.input::placeholder{color:var(--teks3)}
.input:focus{outline:2px solid var(--aksen-garis);outline-offset:1px;border-color:var(--aksen-garis)}
textarea.input{min-height:96px;resize:vertical}
.bantuan{font-size:.78rem;color:var(--teks3);margin-top:5px}
.galat{font-size:.78rem;color:var(--merah);margin-top:5px}
.field{margin-bottom:14px}

/* ------------------------------------------------------------- peringatan */
.notice{padding:12px 14px;border-radius:var(--r-kecil);border:1px solid var(--line2);background:var(--panel2);font-size:.88rem;margin-bottom:16px}
.notice-ok{border-color:var(--aksen-garis);background:var(--aksen-lembut);color:#bff5dd}
.notice-err{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.1);color:#ffd2d2}
.notice-warn{border-color:rgba(240,180,41,.35);background:rgba(240,180,41,.1);color:#ffe6b0}

/* --------------------------------------------------------------- lencana */
.lencana{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font-size:.72rem;font-weight:600;border:1px solid var(--line2);color:var(--teks2);white-space:nowrap}
.lencana-ok{border-color:var(--aksen-garis);color:var(--aksen);background:var(--aksen-lembut)}
.lencana-merah{border-color:rgba(255,107,107,.4);color:var(--merah);background:rgba(255,107,107,.1)}
.lencana-kuning{border-color:rgba(240,180,41,.4);color:var(--kuning);background:rgba(240,180,41,.1)}

/* ------------------------------------------------------------------ copy */
.copy-baris{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.copy-baris .input{flex:1 1 220px;min-width:0;font-family:var(--mono);font-size:.82rem}
.kunci-tutup{-webkit-text-security:disc;text-security:disc}

/* ------------------------------------------------------------------ model */
.model-kartu{display:flex;flex-direction:column;gap:8px}
.model-atas{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.model-nama{font-family:var(--mono);font-size:.9rem;font-weight:600;word-break:break-all}
.model-meta{font-size:.8rem;color:var(--teks3)}
.bar{height:6px;border-radius:var(--r-pill);background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.bar > i{display:block;height:100%;background:var(--aksen);border-radius:var(--r-pill)}

/* ------------------------------------------------------------------ chart */
.chart-box{position:relative;width:100%;height:220px}
.chart-box svg{display:block;width:100%;height:100%}
.chart-tip{
  position:absolute;pointer-events:none;background:#0b0f16;border:1px solid var(--line2);
  border-radius:8px;padding:6px 9px;font-size:.76rem;white-space:nowrap;opacity:0;
  transform:translate(-50%,-115%);transition:opacity .12s ease;z-index:5;
}
.chart-tip.tampil{opacity:1}

/* ------------------------------------------------------------------ stat */
.stat{display:flex;flex-direction:column;gap:4px}
.stat .angka{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.stat .label-stat{font-size:.78rem;color:var(--teks3);text-transform:uppercase;letter-spacing:.05em}

/* ------------------------------------------------------------------ steps */
.langkah{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:l}
.langkah > div{position:relative;padding-top:16px;border-top:2px solid var(--line2)}
.langkah > div::before{counter-increment:l;content:"0" counter(l);font-family:var(--mono);font-size:.78rem;color:var(--aksen);display:block;margin-bottom:6px}
.langkah h3{font-size:.98rem;margin-bottom:4px}
.langkah p{font-size:.85rem;color:var(--teks2);margin:0}

/* ------------------------------------------------------------------ paket */
.paket{display:flex;flex-direction:column;gap:6px;position:relative}
.paket .nominal{font-size:1.35rem;font-weight:700}
.paket .token{font-size:1.02rem;color:var(--aksen);font-weight:650}
.paket .ket{font-size:.8rem;color:var(--teks3)}
.paket.dipilih{border-color:var(--aksen-garis);background:var(--aksen-lembut)}
.harga-coret{color:var(--teks3);text-decoration:line-through;font-size:.85rem;margin-left:6px}

/* ------------------------------------------------------------------ footer */
.footer{border-top:1px solid var(--line);padding:28px 0;color:var(--teks3);font-size:.85rem}
.footer-in{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.footer a{color:var(--teks2)}

/* ------------------------------------------------------------------ side */
.app-grid{display:grid;grid-template-columns:232px 1fr;gap:26px;align-items:start;padding:26px 0 56px;max-width:100%}
/* WAJIB: tanpa min-width:0, tabel lebar di dalam <main> memaksa kolom grid
   melebihi lebar layar sehingga browser ponsel mengecilkan SELURUH halaman
   (tampilan desktop dikecilkan). Dengan aturan ini halaman pas di layar dan
   hanya isi tabel yang bergeser di dalam kotaknya sendiri. */
.app-grid > *{min-width:0}
.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px}
.side a{padding:9px 12px;border-radius:var(--r-kecil);color:var(--teks2);font-size:.89rem}
.side a:hover{background:var(--panel);color:var(--teks);text-decoration:none}
.side a.aktif{background:var(--panel);color:var(--teks);box-shadow:inset 2px 0 0 var(--aksen)}
.side .judul-side{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teks3);padding:14px 12px 6px}

/* ------------------------------------------------------------------ utilitas */
.mt0{margin-top:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}.mt4{margin-top:36px}
.mb0{margin-bottom:0}.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:24px}
.remuk{color:var(--teks2);font-size:.87rem}
.remuk3{color:var(--teks3);font-size:.8rem}
.mono{font-family:var(--mono)}
.potong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Teks panjang tanpa spasi (URL, nama model) tidak boleh melebarkan halaman. */
.remuk,.remuk3,.bantuan,.notice,.kosong,.model-meta,.model-nama{overflow-wrap:anywhere}
.flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.antar{justify-content:space-between}
.kosong{padding:34px 18px;text-align:center;color:var(--teks3);border:1px dashed var(--line2);border-radius:var(--r-kartu)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ modal bayar */
.modal-bayar{
  position:fixed;inset:0;z-index:100;background:rgba(4,7,10,.78);
  display:flex;align-items:center;justify-content:center;padding:16px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal-kartu{
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-kartu);
  padding:20px;width:100%;max-width:360px;text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.55);margin:auto;
}
.modal-kartu h3{margin-bottom:10px}
.hitung{
  font-family:var(--mono);font-size:2rem;font-weight:700;letter-spacing:.04em;
  color:var(--aksen);margin-bottom:12px;
}
.hitung.habis{color:var(--merah)}
.qr-box{background:#fff;border-radius:var(--r-kecil);padding:10px;margin:0 auto 12px;max-width:240px}
.qr-box svg{display:block;width:100%;height:auto}
.rincian-bayar{font-size:.85rem;color:var(--teks2);margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.rincian-bayar > div:first-child{color:var(--teks);font-weight:600}
.modal-kartu .btn + .btn{margin-top:10px}

/* ---------------------------------------------------- kartu plan di form */
.plan-baris{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.plan-baris label,.paket-grid label{cursor:pointer}
.plan-baris .paket,.paket-grid .paket{margin:0}
.form-bayar-ringkas{border-top:2px solid var(--aksen);padding-top:8px;font-weight:600}
@media (max-width:760px){
  .plan-baris{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ statistik */
.stat .masa-habis{color:var(--merah)}
.stat .masa-ok{color:var(--aksen)}

/* ================================================================ responsif */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .langkah{grid-template-columns:repeat(2,1fr)}
  .app-grid{grid-template-columns:1fr;gap:18px}
  .side{position:static;flex-direction:row;overflow-x:auto;min-width:0;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .side .judul-side{display:none}
  .side a{white-space:nowrap;box-shadow:none}
  .side a.aktif{box-shadow:inset 0 -2px 0 var(--aksen)}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-menu{
    display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;
    align-items:stretch;gap:0;background:var(--bg2);border-bottom:1px solid var(--line);padding:8px 20px 16px;
  }
  .nav-menu.buka{display:flex}
  .nav-menu a{padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem}
  .nav-menu .btn{margin-top:12px;width:100%;text-align:center}
  .hero{padding:36px 0 32px}
  .seksi{padding:40px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .langkah{grid-template-columns:1fr}
  .chart-box{height:180px}
  .stat .angka{font-size:1.3rem}
  /* Ruang lebih lega di ponsel: padding kartu & jeda grid dirapatkan supaya
     isi admin (form & tabel) muat tanpa perlu digeser sesering sebelumnya. */
  .kartu{padding:14px}
  .kartu2{padding:13px}
  .grid{gap:12px}
  .app-grid{gap:14px;padding:16px 0 40px}
  .seksi{padding:32px 0}
  /* Tabel di ponsel: rapat supaya kolom penting muat, dan yang melebar
     digeser di dalam kotaknya (tabel-bungkus), bukan memotong halaman. */
  table.tabel{min-width:420px;font-size:.8rem}
  table.tabel th,table.tabel td{padding:9px 10px}
  /* Lebar kolom dalam piksel (halaman "Harga & multiplier" punya 10 kolom
     bertotal ~918px) membuat tabel jauh lebih lebar dari layar ponsel. Di
     ponsel lebar tetap itu dilepas supaya tabel lebih muat dan sisa geseran di
     dalam kotaknya sekecil mungkin. */
  table.tabel th[style]{width:auto !important}
  table.tabel th{white-space:normal}
  table.tabel .input{padding:7px 8px;font-size:.78rem}
}
@media (max-width:420px){
  .wrap,.nav-in{padding:0 14px}
  .btn{padding:9px 13px}
  /* Kolom tabel dirapatkan lagi untuk layar kecil (iPhone SE/Android kecil). */
  table.tabel th,table.tabel td{padding:8px 8px}
  .kartu{padding:12px}
  .modal-kartu{padding:14px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}


/* Claude Design System Additions */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background-color: #FBF9F5;
  color: #1F1E1D;
}

h1, h2, .judul-seksi h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.terminal {
  background: #191817 !important;
  color: #ECE9E2 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px;
}

.terminal .pr {
  color: #E27D60 !important;
  font-weight: 700;
}

.terminal .dim {
  color: #8C887F !important;
}

.btn-utama {
  background: #D97757 !important;
  color: #FFFFFF !important;
  border-color: #D97757 !important;
  box-shadow: 0 1px 2px rgba(217, 119, 87, 0.2);
}
.btn-utama:hover {
  background: #C96442 !important;
  border-color: #C96442 !important;
}

.btn-garis {
  border-color: rgba(31, 31, 31, 0.18) !important;
  color: #1F1E1D !important;
  background: #FFFFFF !important;
}
.btn-garis:hover {
  background: #F3EFEA !important;
  border-color: rgba(31, 31, 31, 0.28) !important;
}

.kartu, .kartu2 {
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 31, 31, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
}

.eyebrow {
  color: #D97757 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
}

.lencana {
  background: rgba(217, 119, 87, 0.08) !important;
  color: #D97757 !important;
  border: 1px solid rgba(217, 119, 87, 0.22) !important;
  font-weight: 600;
}

.lencana-ok {
  background: rgba(34, 197, 94, 0.08) !important;
  color: #16a34a !important;
  border: 1px solid rgba(34, 197, 94, 0.22) !important;
}

.footer {
  border-top: 1px solid rgba(31, 31, 31, 0.08) !important;
  background: #F3EFEA !important;
}