/* ==================================================================
   SLIPWAY v2. Launchpad di Robinhood Chain, konsep dua mode peluncuran.
   Tampilan ikut logo AI user (kapal di landasan rel, biru kobalt):
   GALANGAN SIANG. Kertas pucat berkisi, garis kobalt, aksen kuning cat dok,
   kaki biru laut tua. Tiap kartu, angka, langkah dan menu pakai ikon garis.
   Huruf Times New Roman (cadangan Tinos). Aturan teks: Inggris, kalimat pendek,
   tanpa tanda pisah.
   ================================================================== */
/* Huruf: Times New Roman (permintaan user 21 Sep 2026). HP Android/Linux gak punya TNR,
   jadi dicadangin Tinos (ukuran huruf sama persis dengan TNR, lisensi Apache) yang di-host sendiri. */
@font-face{font-family:"Tinos";src:url("/dok/tinos.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tinos";src:url("/dok/tinos-700.woff2") format("woff2");font-weight:600 700;font-display:swap}

:root{
  --kertas:#F3F7FC;
  --lembar:#FFFFFF;
  --tinta:#000000;
  --abu:#000000;
  --abu-2:#8497AA;
  --garis:#D7E2EE;
  --kobalt:#1263B4;
  --kobalt-2:#0B4C8E;
  --kobalt-muda:#E7F0FA;
  --kuning:#FFC53D;
  --laut:#071A33;
  --bayang:0 1px 2px rgba(10,31,58,.05),0 8px 24px -12px rgba(10,31,58,.16);
  --judul:"Times New Roman",Tinos,Times,serif;
  --mono:"Times New Roman",Tinos,Times,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kertas);color:var(--tinta);font:17.5px/1.6 var(--judul);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--kobalt);text-underline-offset:3px}
h1,h2,h3{font-family:var(--judul);font-weight:400;line-height:1.02;letter-spacing:-.035em;margin:0}
p{margin:0 0 13px;text-align:justify;text-justify:inter-word;text-indent:1.3em;hyphens:manual}
p:last-child{margin-bottom:0}
.wadah{max-width:1200px;margin:0 auto;padding-inline:22px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--kobalt)}
.kicker:before{content:"";width:18px;height:3px;border-radius:2px;background:var(--kuning)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ikon garis */
.i{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ubin ikon: kotak kobalt muda, ikon kobalt */
.ubin{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--kobalt-muda);color:var(--kobalt);flex:0 0 auto}
.ubin .i{width:24px;height:24px}
.ubin.pekat{background:var(--kobalt);color:#fff}
.ubin.kuning{background:#FFF4D6;color:#9A6A00}

/* ---------- gambar panggung ----------
   Pola calvora: satu gambar besar di atas halaman, ikut ke-scroll, bawahnya memudar ke warna kertas.
   Gambarnya dok/latar-web.webp: foto diam kapal meluncur di slipway (render dari brand/latar/buat-latar.py, tanpa animasi). */
body{position:relative}
.seni{position:absolute;left:0;right:0;top:0;height:520px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.seni img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 42%}
.seni:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,247,252,.9),rgba(243,247,252,.72) 45%,rgba(243,247,252,.35))}
.beranda .seni{height:900px;-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
.beranda .seni:after{background:linear-gradient(90deg,rgba(243,247,252,.82),rgba(243,247,252,.5) 36%,rgba(243,247,252,0) 58%)}
@media (max-width:760px){
  .seni img{object-position:80% 42%}
  .beranda .seni{height:760px}
  .beranda .seni:after{background:linear-gradient(180deg,rgba(243,247,252,.55),rgba(243,247,252,.2) 60%,rgba(243,247,252,0))}
}
body>header,body>main,body>footer{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---------- bilah atas ---------- */
.atas{position:sticky;top:0;z-index:30;background:rgba(243,247,252,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.6)}
.atas .wadah{display:flex;align-items:center;gap:22px;min-height:70px}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.merek img{width:62px;height:auto}
.merek span{font:700 23px/1 var(--judul);letter-spacing:-.01em}
.menu{display:flex;gap:30px;margin-inline:auto}
.menu a{position:relative;color:var(--tinta);text-decoration:none;font-size:15px;padding:24px 0}
.menu a:hover{color:var(--kobalt)}
.menu a[aria-current="page"]{color:var(--kobalt)}
.menu a[aria-current="page"]:after{content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;border-radius:2px;background:var(--kuning)}
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--garis);background:var(--lembar);color:var(--tinta);
  border-radius:999px;padding:12px 22px;font:600 15px/1 var(--judul);cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.tombol .i{width:17px;height:17px}
.tombol:hover{border-color:var(--kobalt);color:var(--kobalt);transform:translateY(-1px)}
.tombol.isi{background:var(--kobalt);border-color:var(--kobalt);color:#fff;box-shadow:0 6px 16px -8px rgba(18,99,180,.8)}
.tombol.isi:hover{background:var(--kobalt-2);border-color:var(--kobalt-2);color:#fff}
.tombol[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
@media (max-width:980px){
  .atas .wadah{flex-wrap:wrap;gap:0 16px;min-height:0;padding-top:10px}
  #sambung{margin-left:auto;padding:10px 14px;font-size:13px}
  .menu{order:3;width:100%;justify-content:space-between;gap:18px;overflow-x:auto;scrollbar-width:none;margin:0}
  .menu a{padding:12px 0 13px;font-size:14px;white-space:nowrap}
  .menu a[aria-current="page"]:after{bottom:6px}
}



/* ---------- bagian ---------- */
.bagian{padding-block:76px 0}
.kepala{margin-bottom:30px}
.kepala h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:12px}
.kepala p{color:var(--abu);max-width:46ch;margin-top:12px;text-indent:0}

/* kartu */
.sifat{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kartu{background:var(--lembar);border:1px solid var(--garis);border-radius:18px;padding:26px;box-shadow:var(--bayang);transition:transform .2s,border-color .2s}
.sifat .kartu:hover{transform:translateY(-3px);border-color:rgba(18,99,180,.4)}
.kartu h3{font-size:1.15rem;margin:18px 0 8px}
.kartu p{color:var(--abu);font-size:14.5px;text-indent:0;text-align:left}
.kartu.gelap{background:var(--lembar)}
.kartu.gelap .ubin{background:var(--kobalt);color:#fff}

/* dua mode peluncuran */
.mode{display:grid;gap:18px}
@media (min-width:900px){ .mode{grid-template-columns:1fr 1fr} }
.mode .kartu{padding:32px;position:relative;overflow:hidden}
.mode .kartu.gelap{background:linear-gradient(160deg,var(--kobalt) 0%,var(--kobalt-2) 100%);border-color:var(--kobalt-2);color:#fff}
.mode .kartu.gelap li{color:#fff}
.mode .kartu.gelap li .i{background:rgba(255,255,255,.16);color:#fff}
.mode .kartu.gelap .ubin{background:rgba(255,255,255,.16);color:#fff}
.mode .kartu.gelap .tombol.isi{background:var(--kuning);border-color:var(--kuning);color:var(--laut);box-shadow:none}
.mode .kartu.gelap .tombol.isi:hover{background:#FFD36B}
.mode .kepala-mode{display:flex;align-items:center;gap:14px}
.mode h3{font-size:1.55rem;display:flex;align-items:center;gap:12px;margin:0}
.mode .lencana{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8A5F00;background:#FFF4D6;border-radius:999px;padding:6px 10px}
.mode ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:12px}
.mode li{display:flex;gap:11px;align-items:center;font-size:15px;color:var(--abu)}
.mode li .i{width:26px;height:26px;padding:5px;border-radius:8px;background:var(--kobalt-muda);color:var(--kobalt);stroke-width:2.2}

/* langkah: bernomor, disambung garis rel putus putus */
.langkah{display:grid;gap:18px;counter-reset:l}
@media (min-width:860px){ .langkah{grid-template-columns:repeat(3,1fr)} }
.langkah>div{position:relative;background:var(--lembar);border:1px solid var(--garis);border-radius:18px;padding:26px;box-shadow:var(--bayang)}
.langkah .atas-langkah{display:flex;align-items:center;justify-content:space-between}
.langkah .no{font:500 12px/1 var(--mono);color:var(--kobalt);letter-spacing:.18em;background:var(--kobalt-muda);border-radius:999px;padding:7px 11px}
.langkah h3{font-size:1.3rem;margin:18px 0 8px}
.langkah p{color:var(--abu);font-size:14.5px;text-indent:0;text-align:left}
@media (min-width:860px){
  .langkah.bersambung>div:not(:last-child):after{content:"";position:absolute;top:48px;right:-19px;width:20px;border-top:2px dashed rgba(18,99,180,.45)}
}

/* biaya / angka panel */
.biaya{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){ .biaya{grid-template-columns:repeat(4,1fr)} }
.biaya div{background:var(--lembar);border:1px solid var(--garis);border-radius:16px;padding:20px;box-shadow:var(--bayang)}
.biaya .ubin{width:40px;height:40px;margin-bottom:14px}
.biaya span:not(.ubin){display:block;font:400 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--abu)}
.biaya b{display:block;font:500 1.4rem/1.2 var(--mono);margin-top:8px}


/* halaman teks */
.tulisan{max-width:780px;padding-block:56px 0}
.tulisan h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin:14px 0 22px}
.tulisan h2{display:flex;align-items:center;gap:12px;font-size:1.45rem;margin:36px 0 12px}
.tulisan h2 .ubin{width:38px;height:38px;border-radius:10px}
.tulisan h2 .ubin .i{width:20px;height:20px}
.tulisan p,.tulisan li{color:var(--abu)}
.tabel-bungkus{overflow-x:auto;border:1px solid var(--garis);border-radius:16px;background:var(--lembar);box-shadow:var(--bayang)}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--garis);font-size:15px}
td:first-child,th:first-child{white-space:nowrap}
td .sel{display:inline-flex;align-items:center;gap:10px}
td .sel .i{color:var(--kobalt);width:19px;height:19px}
th{font:500 11px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--abu);background:#F6F9FD}
tr:last-child td{border-bottom:0}
td b{color:var(--tinta)}
.sorot-baris td{background:#FFFBEF}
.kotak{border:1px solid var(--garis);border-radius:16px;padding:22px 24px;background:var(--lembar);box-shadow:var(--bayang)}
.kotak ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.kotak li{display:flex;gap:12px;align-items:flex-start}
.kotak li .i{width:22px;height:22px;margin-top:1px;color:var(--kobalt)}

/* kaki */
.kaki{margin-top:90px;padding-block:48px;background:var(--laut);color:#fff}
.kaki .wadah{display:grid;gap:28px}
@media (min-width:900px){ .kaki .wadah{grid-template-columns:1.6fr 1fr} }
.kaki .merek{color:#fff}
.kaki p{margin-top:16px;font-size:13.5px;color:#fff}
.kaki nav{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 34px;align-content:flex-start}
.kaki nav a{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:14px}
.kaki nav a .i{color:var(--kuning);width:16px;height:16px}
.kaki nav a:hover{color:#fff}

/* dua kolom + kartu spesifikasi */
.dua-kolom{display:grid;gap:26px}
@media (min-width:920px){ .dua-kolom{grid-template-columns:1fr 1.1fr;align-items:center;gap:56px} }
.dua-kolom h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:12px}
.dua-kolom p{color:var(--abu);margin-top:14px;max-width:42ch}
.spek{border:1px solid var(--garis);border-radius:18px;background:var(--lembar);box-shadow:var(--bayang);overflow:hidden}
.spek>div{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--garis)}
.spek>div:last-child{border-bottom:0}
.spek .ubin{width:38px;height:38px;border-radius:10px}
.spek .ubin .i{width:20px;height:20px}
.spek span:not(.ubin){font-size:14.5px;color:var(--abu);flex:1}
.spek b{font:500 13.5px/1 var(--mono);color:var(--kobalt);text-align:right;background:var(--kobalt-muda);border-radius:999px;padding:7px 11px;white-space:nowrap}
@media (max-width:480px){ .spek b{white-space:normal;line-height:1.3} }

/* saring + keadaan kosong */
.saring{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.cip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--garis);background:var(--lembar);color:var(--abu);border-radius:999px;padding:9px 15px;
  font:600 13.5px/1 var(--judul);cursor:pointer}
.cip .i{width:16px;height:16px}
.cip[aria-selected="true"]{background:var(--kobalt);border-color:var(--kobalt);color:#fff}
.kosong{border:2px dashed rgba(18,99,180,.28);border-radius:20px;padding:52px 26px;text-align:center;background:rgba(255,255,255,.82)}
.kosong .ubin{width:64px;height:64px;border-radius:18px;margin:0 auto 18px}
.kosong .ubin .i{width:32px;height:32px}
.kosong h3{font-size:1.4rem;margin-bottom:10px}
.kosong p{color:var(--abu);max-width:48ch;margin:0 auto 22px;text-indent:0;text-align:center}
.kosong p:last-child{margin-bottom:0}

/* ---------- halaman Create: formulir + pratinjau ---------- */
.studio{display:grid;gap:26px}
@media (min-width:1000px){ .studio{grid-template-columns:1.15fr .85fr;gap:40px;align-items:start} }
.borang{display:grid;gap:22px;background:var(--lembar);border:1px solid var(--garis);border-radius:20px;padding:28px;box-shadow:var(--bayang)}
@media (max-width:520px){ .borang{padding:20px 16px} }
.ladang{display:grid;gap:9px}
.ladang-dua{display:grid;gap:22px}
@media (min-width:640px){ .ladang-dua{grid-template-columns:1fr 1fr} }
.label{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--abu)}
.label .i{width:15px;height:15px;color:var(--kobalt)}
.opsional{text-transform:none;letter-spacing:0;color:#000}
input[type=text],input[type=url],textarea{width:100%;background:#F8FAFD;border:1.5px solid var(--garis);border-radius:12px;
  padding:13px 15px;color:var(--tinta);font:400 15.5px/1.5 var(--judul);outline:none;transition:border-color .15s,background .15s}
input:focus,textarea:focus{border-color:var(--kobalt);background:#fff}
textarea{min-height:104px;resize:vertical}
::placeholder{color:var(--abu-2)}
.jatuh{display:block;border:2px dashed rgba(18,99,180,.3);border-radius:14px;padding:24px;cursor:pointer;background:#F8FAFD;text-align:center;transition:border-color .15s,background .15s}
.jatuh:hover{border-color:var(--kobalt);background:var(--kobalt-muda)}
.jatuh .ubin{margin:0 auto 12px}
.jatuh-isi b{display:block;font-weight:600;font-size:15px}
.jatuh-isi i{display:block;font-style:normal;font-size:13px;color:var(--abu);margin-top:5px}
.pilih-mode{display:grid;gap:12px}
@media (min-width:560px){ .pilih-mode{grid-template-columns:1fr 1fr} }
.pilih-mode button{display:flex;gap:12px;align-items:center;text-align:left;border:1.5px solid var(--garis);border-radius:14px;padding:14px 16px;background:#fff;color:var(--tinta);cursor:pointer;font-family:var(--judul)}
.pilih-mode button .ubin{width:38px;height:38px;border-radius:10px}
.pilih-mode button .ubin .i{width:20px;height:20px}
.pilih-mode button b{display:block;font-weight:600;font-size:16px}
.pilih-mode button i{display:block;font-style:normal;font-size:13px;color:var(--abu);margin-top:3px}
.pilih-mode button[aria-pressed="true"]{border-color:var(--kobalt);background:var(--kobalt-muda)}
.pilih-mode button[aria-pressed="true"] .ubin{background:var(--kobalt);color:#fff}
.pilih-mode button[disabled]{opacity:.55;cursor:not-allowed}
.urutan{margin:0;padding:0;list-style:none;display:grid;gap:12px;color:var(--abu);font-size:14.5px;counter-reset:u}
.urutan li{display:flex;gap:12px;align-items:flex-start;counter-increment:u}
.urutan li:before{content:counter(u);flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--kobalt);color:#fff;font:500 12px/1 var(--mono)}
.tombol.besar{padding:15px 26px;font-size:15px;width:100%}
.bantu{font-size:13px;color:var(--abu);text-indent:0;text-align:left}
.pratinjau{position:sticky;top:96px;display:grid;gap:10px}
.kartu-pra{border:1px solid var(--garis);border-radius:20px;padding:24px;background:var(--lembar);box-shadow:var(--bayang);position:relative;overflow:hidden}
.kartu-pra:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--kobalt),#3B8DE0 60%,var(--kuning))}
.pra-atas{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.pra-gambar{width:64px;height:64px;flex:0 0 auto;border-radius:16px;background:var(--kobalt-muda);color:var(--kobalt);
  display:grid;place-items:center;overflow:hidden}
.pra-gambar .i{width:28px;height:28px}
.pra-gambar img{width:100%;height:100%;object-fit:cover}
.pra-nama{font-size:19px;font-weight:600}
.pra-tick{font:500 13px/1 var(--mono);color:var(--kobalt);margin-top:6px}
.pra-cerita{font-size:14px;color:var(--abu);text-indent:0;text-align:left;margin:0 0 16px}
.pra-baris{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--garis);font-size:14px;color:var(--abu)}
.pra-baris span{display:inline-flex;align-items:center;gap:8px}
.pra-baris span .i{color:var(--kobalt)}
.pra-baris b{font:500 13.5px/1.4 var(--mono);color:var(--tinta);text-align:right}

/* ---------- panel analytics ---------- */
.panel{border:1px solid var(--garis);border-radius:18px;background:var(--lembar);box-shadow:var(--bayang);margin-top:22px;overflow:hidden}
.panel-kepala{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--garis)}
.panel-kepala h3{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.panel-kepala h3 .i{color:var(--kobalt)}
.panel-kepala span{font:400 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--abu)}
.grafik-kosong{height:210px;display:grid;place-items:center;align-content:center;gap:10px;color:var(--abu);font-size:14px;text-align:center;padding:0 16px;
  background:repeating-linear-gradient(90deg,rgba(18,99,180,.06) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(180deg,rgba(18,99,180,.06) 0 1px,transparent 1px 42px)}
.grafik-kosong .i{width:34px;height:34px;color:rgba(18,99,180,.45)}
.panel table{min-width:560px}
.panel th{background:#F6F9FD}
.panel .tabel-bungkus{box-shadow:none;background:transparent}

/* papan atas: judul + tombol */
.papan-atas{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}


/* ==================================================================
   v3 (21 Sep 2026): konsep panggung ala calvora.fun, identitas Slipway.
   Gambar besar di atas, judul serif tipis, dua tombol pil, statistik sebaris,
   kata sisi tegak, pil kaca, empat kartu gelap/terang selang seling yang
   numpuk di kaki gambar, lalu dua mode dan tiga langkah.
   ================================================================== */
#sambung{background:transparent;border-color:rgba(10,31,58,.35)}
.tombol{background:rgba(255,255,255,.5);border-color:rgba(10,31,58,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tombol.isi{background:linear-gradient(115deg,#0A1F3A 60%,#1263B4);border-color:#000;color:#fff;box-shadow:0 10px 24px -14px rgba(10,31,58,.9)}
.tombol.isi:hover{background:linear-gradient(115deg,#0B4C8E 50%,#1263B4);border-color:#0B4C8E}

.panggung{position:relative;padding-top:70px;padding-bottom:10px}
.hero-teks{position:relative;max-width:650px}
.hero-teks h1{font-size:clamp(3.3rem,7vw,5.9rem);line-height:.92;letter-spacing:-.05em;margin:18px 0 20px}
.hero-teks h1 em{font-style:normal;color:var(--kobalt);background:linear-gradient(transparent 72%,rgba(255,197,61,.7) 72%)}
.hero-teks .sub{font-size:21px;color:#000;text-indent:0;text-align:left;margin:0}
.aksi{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.aksi .tombol{min-height:50px;padding-inline:26px;font-size:15.5px;gap:22px}
.aksi .tombol:first-child{min-width:210px;justify-content:space-between}
.statistik{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;margin:44px 0 0;padding:0}
.statistik>div{display:flex;flex-direction:column;padding:0 24px;border-right:1px solid rgba(10,31,58,.18)}
.statistik>div:first-child{padding-left:0}.statistik>div:last-child{border:0}
.statistik dt{font-size:14px;color:#000;white-space:nowrap}
.statistik dd{order:-1;margin:0 0 2px;font-size:30px;line-height:1.1;letter-spacing:-.03em;color:var(--tinta)}
.status{font-size:13.5px;color:var(--abu);text-indent:0;text-align:left;margin:12px 0 0;max-width:52ch}

.kata-sisi{position:absolute;right:360px;top:84px;display:grid;font-size:11px;line-height:2.5;letter-spacing:.34em;text-transform:uppercase;color:#000}
.pil-kaca{position:absolute;right:22px;top:300px;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.8);background:rgba(243,247,252,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--tinta);text-decoration:none;font-size:12.5px;line-height:1.25;box-shadow:0 12px 30px -18px rgba(10,31,58,.6)}
.pil-kaca img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:#fff;padding:5px}
.pil-kaca .i{width:22px;height:22px;margin-left:10px}
.pil-kaca:hover{border-color:var(--kobalt)}

.fitur-baris{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:120px}
.fitur{min-height:190px;border-radius:16px;border:1px solid rgba(255,255,255,.75);padding:30px 30px 24px;position:relative;overflow:hidden}
.fitur>.i{width:34px;height:34px;stroke-width:1.5}
.fitur h3{font-size:25px;letter-spacing:-.03em;margin:16px 0 8px;position:relative}
.fitur p{font-size:15px;line-height:1.4;text-indent:0;text-align:left;margin:0;position:relative;max-width:22ch}
.fitur.gelap{background:radial-gradient(ellipse at 100% 0,rgba(18,99,180,.45),transparent 60%),linear-gradient(125deg,#0A1F3A,#04101F);color:#fff;border-color:rgba(255,255,255,.18)}
.fitur.gelap:before{content:"";position:absolute;inset:0;pointer-events:none;background:url("/dok/latar-web-kecil.webp") 88% 78%/260% auto no-repeat;mix-blend-mode:screen;opacity:.16}
.fitur.gelap>*{position:relative}
.fitur.gelap .i{color:var(--kuning)}
.fitur.gelap p{color:#fff}
.fitur.terang{background:rgba(243,247,252,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--tinta)}
.fitur.terang .i{color:var(--kobalt)}
.fitur.terang p{color:#000}

.mode-baris{display:grid;grid-template-columns:.9fr 1fr 1fr;gap:18px;padding-top:70px;align-items:stretch}
.mode-intro{padding:16px 22px 0 0}
.mode-intro h2{font-size:clamp(2.6rem,4.4vw,3.4rem);line-height:.98;margin:16px 0 14px}
.mode-intro p{font-size:16.5px;color:var(--abu);text-indent:0;text-align:left}
.mode-intro .tombol{margin-top:24px}
.kartu-mode{border-radius:16px;padding:32px 28px 18px;display:grid;grid-template-columns:36px 1fr;gap:16px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 100% 0,rgba(18,99,180,.5),transparent 55%),linear-gradient(135deg,#0A1F3A,#04101F);border:1px solid rgba(255,255,255,.15)}
.kartu-mode:before{content:"";position:absolute;inset:0;background:url("/dok/latar-web-kecil.webp") 80% 70%/240% auto no-repeat;mix-blend-mode:screen;opacity:.12;pointer-events:none}
.kartu-mode>*{position:relative}
.kartu-mode>.i{width:34px;height:34px;stroke-width:1.5;color:var(--kuning)}
.kartu-mode h3{font-size:27px;margin:1px 0 6px}
.kartu-mode p{font-size:14.5px;color:#fff;text-indent:0;text-align:left;margin:0}
.kartu-mode ul{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:13px;font-size:14.5px;color:#fff}
.kartu-mode li{display:flex;gap:13px;align-items:center}
.kartu-mode li:before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:rgba(255,197,61,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC53D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.tombol.terang{width:100%;background:#F3F7FC;border-color:#fff;color:var(--tinta);min-height:44px}
.tombol.terang:hover{background:#fff;color:var(--kobalt)}
.kartu-mode small{display:block;text-align:center;margin-top:9px;font-size:12px;color:#fff}

.tiga-langkah{margin-top:40px;background:rgba(255,255,255,.55);border-block:1px solid rgba(215,226,238,.8)}
.tiga-langkah .wadah{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-block:44px 50px}
.langkah-intro h2{font-size:clamp(2.2rem,3.8vw,3rem);margin:16px 0 10px}
.langkah-intro p{font-size:16px;color:var(--abu);text-indent:0;text-align:left}
.langkah-item{text-align:center;position:relative;padding-top:4px}
.langkah-item>.i{width:36px;height:36px;margin:0 auto 10px;stroke-width:1.5;color:var(--kobalt)}
.langkah-item .no{position:absolute;top:10px;left:6px;font-size:15px;color:#000}
.langkah-item h3{font-size:28px;margin:0 0 8px}
.langkah-item p{font-size:15px;color:var(--abu);text-indent:0;text-align:center;margin:0}
.langkah-item+.langkah-item:before{content:"";position:absolute;left:-15px;top:10px;height:48px;border-left:1px solid #B9C7D6}
.beranda .kaki{margin-top:0}

@media (max-width:1100px){ .kata-sisi{display:none} .pil-kaca{top:auto;bottom:250px} }
@media (max-width:980px){
  .fitur-baris{grid-template-columns:1fr 1fr;margin-top:120px}
  .mode-baris{grid-template-columns:1fr 1fr}
  .mode-intro{grid-column:1/-1;padding:0 0 8px}
  .tiga-langkah .wadah{grid-template-columns:repeat(3,1fr);gap:22px}
  .langkah-intro{grid-column:1/-1}
  .pil-kaca{display:none}
}
@media (max-width:760px){
  .panggung{padding-top:40px}
  .hero-teks h1{font-size:clamp(2.7rem,11.5vw,4rem)}
  .hero-teks .sub{font-size:18px}
  .aksi .tombol,.aksi .tombol:first-child{min-width:0;padding-inline:20px;font-size:14.5px}
  .statistik{grid-template-columns:repeat(4,1fr);margin-top:40px;background:rgba(243,247,252,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:12px 4px}
  .statistik>div{padding:0 10px}.statistik>div:first-child{padding-left:10px}
  .statistik dt{font-size:11.5px}.statistik dd{font-size:23px}
  .status{background:rgba(243,247,252,.78);border-radius:10px;padding:8px 10px}
  .fitur-baris{margin-top:40px;gap:12px}
  .fitur{padding:22px 18px;min-height:170px}
  .fitur h3{font-size:22px}
  .langkah-item h3{font-size:23px}.langkah-item p{font-size:13px}
  .langkah-item .no{position:static;display:block;margin-bottom:10px}
  .langkah-item+.langkah-item:before{top:40px}
}
@media (max-width:520px){
  .mode-baris{grid-template-columns:1fr}
  .statistik dt{font-size:10.5px}.statistik>div{padding:0 7px}.statistik>div:first-child{padding-left:8px}
  .fitur{padding:20px 16px}.fitur h3{font-size:20px}.fitur p{font-size:13.5px}
}

/* ---------- v4 (21 Sep 2026): peluncuran beneran, papan token, halaman token ---------- */
.bantu-kecil{display:block;font-size:13px;color:#000;margin-top:7px}
.status-luncur{margin:14px 0 0;padding:12px 14px;border-radius:12px;font-size:15px;text-indent:0;text-align:left;background:#fff;border:1px solid var(--garis);color:#000}
.status-luncur.jalan{border-color:rgba(18,99,180,.4);background:#EEF5FD}
.status-luncur.galat{border-color:#E3A8A0;background:#FDF0EE}
.status-luncur.beres{border-color:#9FD2B0;background:#EEF9F2}

.papan-token{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:24px}
.tok{display:block;background:#fff;border:1px solid var(--garis);border-radius:16px;overflow:hidden;color:#000;text-decoration:none;box-shadow:var(--bayang);transition:transform .2s,border-color .2s}
.tok:hover{transform:translateY(-3px);border-color:var(--kobalt)}
.tok-gambar{aspect-ratio:1.5;background:linear-gradient(135deg,#E7F0FA,#CFE1F3);display:grid;place-items:center;overflow:hidden}
.tok-gambar img{width:100%;height:100%;object-fit:cover}
.tok-huruf{font-size:40px;color:var(--kobalt)}
.tok-isi{padding:16px}
.tok-judul{display:flex;align-items:baseline;gap:8px}
.tok-judul h3{font-size:21px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok-judul span{font-size:13px;color:var(--kobalt)}
.tok-cerita{font-size:13.5px;min-height:38px;margin:6px 0 10px;text-indent:0;text-align:left;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tok-baris{display:flex;justify-content:space-between;font-size:13.5px;padding-top:6px;border-top:1px solid #EDF2F8;margin-top:6px}

.balik{display:inline-flex;align-items:center;gap:8px;color:#000;text-decoration:none;font-size:15px;margin-bottom:22px}
.balik .i{width:17px;height:17px}
.token-kepala{display:flex;align-items:center;gap:22px;margin-bottom:26px}
.token-gambar{width:108px;height:108px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#E7F0FA,#CFE1F3);display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--garis)}
.token-gambar img{width:100%;height:100%;object-fit:cover}
.token-gambar span{font-size:38px;color:var(--kobalt)}
.token-kepala h1{font-size:clamp(2.3rem,5vw,3.6rem);margin:10px 0 2px}
.token-simbol{font-size:18px;color:var(--kobalt);text-indent:0;margin:0}
.token-susun{display:grid;gap:20px}
@media (min-width:960px){ .token-susun{grid-template-columns:1.4fr 1fr;align-items:start} }
.token-angka{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--garis);border:1px solid var(--garis);border-radius:16px;overflow:hidden;margin-bottom:18px}
.token-angka>div{background:#fff;padding:18px}
.token-angka span{display:block;font-size:13px;color:#000}
.token-angka b{display:block;font-size:22px;font-weight:400;margin-top:4px}
.token-cerita,.token-detail{margin-bottom:18px}
.token-cerita h3,.token-detail h3{font-size:24px;margin:0 0 10px}
.token-cerita p{text-indent:0;text-align:left;white-space:pre-line}
.token-tautan{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.token-tautan a{border:1px solid var(--garis);border-radius:999px;padding:7px 14px;text-decoration:none;font-size:14px;color:#000}
.token-tautan a:hover{border-color:var(--kobalt);color:var(--kobalt)}
.dagang{position:sticky;top:96px}
.dagang-tab{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#EEF3F9;border-radius:999px;padding:5px;margin-bottom:18px}
.dagang-tab button{border:0;border-radius:999px;padding:10px;font:600 15px/1 var(--judul);background:transparent;color:#000;cursor:pointer}
.dagang-tab button[aria-selected="true"]{background:#fff;box-shadow:0 2px 8px -4px rgba(0,0,0,.3);color:var(--kobalt)}
.dagang input{width:100%;margin:8px 0 10px;border:1.5px solid var(--garis);border-radius:12px;padding:13px 15px;font:400 20px/1.2 var(--judul);color:#000;background:#fff;outline:none}
.dagang input:focus{border-color:var(--kobalt)}
.dagang-cepat{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.dagang-cepat button{border:1px solid var(--garis);background:#fff;border-radius:999px;padding:6px 12px;font:400 13.5px/1 var(--judul);cursor:pointer;color:#000}
.dagang-cepat button:hover{border-color:var(--kobalt)}
.dagang .tombol.besar{width:100%;margin-top:16px}
.dagang .bantu{margin-top:14px}
@media (max-width:620px){ .token-angka{grid-template-columns:1fr} .token-kepala{gap:14px} .token-gambar{width:80px;height:80px} .dagang{position:static} }