/* ==================================================================
   POCKETROBIN (22 Sep 2026). Konsep: PAPAN SAKU, tiap token satu kartu saku berjahit.
   Hijau pucat #F4FFD6, putih, neon #CCFF00, cokelat tua #1C180D (bentuk), teks hitam #000.
   Baloo 2 (judul) + Onest (isi) + Martian Mono (angka). Ikon garis tebal bulat.
   ================================================================== */
@font-face{font-family:"Baloo 2";src:url("/biji/baloo.woff2") format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Onest";src:url("/biji/onest.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/biji/martian.woff2") format("woff2");font-weight:400 600;font-display:swap}
:root{
  --dasar:#F4FFD6; --kartu:#FFFFFF; --garis:#DDEBB5; --tinta:#000; --tua:#1C180D; --neon:#CCFF00;
  --plus:#137A2C; --min:#B42318;
  --judul:"Baloo 2",system-ui,sans-serif; --isi:"Onest",system-ui,sans-serif; --angka:"Martian Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dasar);color:var(--tinta);font:16px/1.55 var(--isi);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--tinta)}
h1,h2{font-family:var(--judul);font-weight:800;line-height:1.02;margin:0}
p{margin:0 0 10px;text-align:justify;text-justify:inter-word;text-indent:1.3em;hyphens:manual}
p:last-child{margin-bottom:0}
.isi{max-width:1120px;margin:0 auto;padding-inline:20px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ik{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.22em}

/* kepala */
.kerah{position:sticky;top:0;z-index:20;background:var(--neon);border-bottom:3px solid var(--tua)}
.kerah .isi{display:flex;align-items:center;gap:12px;min-height:66px}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.merek img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 2.5px var(--tua)}
.merek span{font:800 26px/1 var(--judul);white-space:nowrap}
.menu{display:flex;gap:6px;margin-left:auto}
.menu a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:15px;padding:8px 13px;border-radius:999px}
.menu a[aria-current="page"]{background:var(--tua);color:var(--neon)}
.ambil{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--tua);color:var(--neon);text-decoration:none;font-weight:700;font-size:15px;padding:10px 16px;border-radius:999px}

/* pembuka */
.pembuka{display:flex;align-items:flex-end;gap:32px;padding-top:34px}
.maskot{width:170px;height:auto;flex:none}
.pembuka h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.sub{text-indent:0;text-align:left;font-size:18px;margin-top:8px}
.angka{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:8px;justify-content:start}
.angka li{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;background:var(--kartu);border:2.5px solid var(--tua);border-radius:16px;padding:10px 14px}
.angka .ik{grid-row:span 2;width:24px;height:24px}
.angka b{font:600 20px/1 var(--angka)}
.angka span{font-size:12.5px}

/* legenda + papan */
.legenda{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:30px 0 14px;padding:0;font-size:13.5px;font-weight:600}
.legenda li{display:inline-flex;align-items:center;gap:6px}
.chip{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--tua);flex:none}
.legenda .chip{width:24px;height:24px}
.legenda .chip .ik{width:14px;height:14px}
.chip.climbing{background:var(--neon)}
.chip.steady,.chip.quiet{background:#EDEDE6}
.chip.cooling{background:#FFD27A}
.chip.fading{background:#FF9C8A}
.saku-saku{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.saku{background:var(--kartu);border:3px solid var(--tua);border-radius:14px 14px 40px 40px;padding:16px 16px 18px;display:grid;gap:12px}
.saku.climbing{box-shadow:0 0 0 5px var(--neon)}
.saku-atas{display:flex;align-items:flex-start;gap:10px}
.nama{flex:1 1 auto;min-width:0}
.nama b{display:block;font:800 21px/1.12 var(--judul);overflow-wrap:anywhere}
.nama small{font:500 12px/1 var(--angka)}
.jahitan{border-top:3px dashed var(--tua);opacity:.55;margin:0 -4px}
.saku-angka{display:flex;justify-content:space-between;gap:10px;font:500 13px/1 var(--angka)}
.saku-angka span span{font-weight:600;font-size:15px}
.plus{color:var(--plus)}.min{color:var(--min)}.nol{color:var(--tinta)}
.saku-bawah{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:500 13px/1 var(--angka)}
.saku-bawah>span{display:inline-flex;align-items:center;gap:4px}
.saku-bawah .ik{width:15px;height:15px}
.salin{background:#FFE9A8;border:1.5px solid var(--tua);border-radius:999px;padding:4px 8px;cursor:help}
.saku-bawah a{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2.5px solid var(--tua)}
.saku-bawah a:hover{background:var(--neon)}
.tunggu{grid-column:1/-1;text-align:center;padding:34px}
.catatan{text-indent:0;text-align:left;font:500 12.5px/1.4 var(--angka);margin-top:14px}

/* about */
.ubin{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.ubin li{background:var(--kartu);border:2.5px solid var(--tua);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:3px}
.ubin .ik{width:30px;height:30px;margin-bottom:6px}
.ubin b{font:800 19px/1.1 var(--judul)}
.ubin span{font-size:13.5px}
.ubin li.gelap{background:var(--tua);color:var(--neon)}
.judul-kecil{display:flex;align-items:center;gap:10px;font-size:30px;margin:44px 0 14px}
.judul-kecil .ik{width:26px;height:26px}
.langkah-ikon{list-style:none;counter-reset:l;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0}
.langkah-ikon li{counter-increment:l;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:999px;background:var(--kartu);border:2.5px solid var(--tua);font-weight:700;font-size:14.5px}
.langkah-ikon li::before{content:counter(l);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tua);color:var(--neon);font:600 12px/1 var(--angka)}
.belum{display:flex;gap:14px;align-items:flex-start;border:3px dashed var(--tua);border-radius:18px;padding:18px;background:var(--kartu)}
.belum>.ik{width:32px;height:32px}
.belum b{font:800 22px/1 var(--judul)}
.belum p{margin-top:6px}
.risiko-daftar{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.risiko-daftar li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--kartu);border:2.5px solid var(--tua);font-weight:600;font-size:14.5px}
.risiko-daftar .ik{width:22px;height:22px;color:var(--min)}
.lipat{display:grid;gap:8px}
.lipat details{background:var(--kartu);border:2.5px solid var(--tua);border-radius:16px;padding:0 18px}
.lipat details[open]{padding-bottom:16px}
.lipat summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:14px 0;font:800 19px/1.2 var(--judul)}
.lipat summary::-webkit-details-marker{display:none}
.lipat summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:3px solid var(--tua);border-bottom:3px solid var(--tua);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.lipat details[open] summary::after{transform:rotate(225deg)}
.lipat summary .ik{width:22px;height:22px}
.biasa{padding-left:20px;display:grid;gap:8px;margin:0 0 10px}
.biasa li{line-height:1.5}
.hilang{text-align:center;padding-block:80px}
.hilang .maskot{margin:0 auto 18px;width:120px}
.hilang .sub{text-align:center}

/* kotak beli */
.beli-grid{display:grid;gap:14px;margin-top:6px}
@media (min-width:760px){.beli-grid{grid-template-columns:1fr 1fr}}
.kotak{border:3px solid var(--tua);border-radius:18px;padding:18px;background:var(--kartu)}
.token-kepala{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.token-gambar{width:52px;height:52px;border-radius:14px;overflow:hidden;background:var(--neon)}
.token-gambar img{width:100%;height:100%;object-fit:cover}
.token-kepala b{font:800 24px/1.1 var(--judul);overflow-wrap:anywhere}
.baris{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:2px dashed var(--garis);font-size:14.5px}
.baris span{display:inline-flex;align-items:center;gap:6px}
.baris b{font:500 13.5px/1.4 var(--angka)}
.dagang-tab{display:grid;grid-template-columns:1fr 1fr;border:2.5px solid var(--tua);border-radius:999px;overflow:hidden;margin-bottom:14px}
.dagang-tab button{border:0;padding:11px;font:700 15px/1 var(--isi);background:#fff;cursor:pointer;color:var(--tinta)}
.dagang-tab button[aria-selected="true"]{background:var(--tua);color:var(--neon)}
.label{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px}
.dagang input{width:100%;border:2.5px solid var(--tua);border-radius:14px;padding:12px;font:600 19px/1 var(--angka);background:#fff}
.dagang-cepat{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.dagang-cepat button{border:2px solid var(--tua);border-radius:999px;background:#fff;padding:6px 11px;font:500 13px/1 var(--angka);cursor:pointer}
.tombol{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--tua);color:var(--neon);font:800 17px/1 var(--judul);padding:15px 18px;cursor:pointer}
.tombol.penuh{width:100%;margin:14px 0}
.tombol[disabled]{opacity:.5;cursor:not-allowed}
.status-luncur{font-size:14px;text-indent:0;text-align:left;border:2px solid var(--garis);border-radius:12px;padding:10px 12px;background:#fff}
.status-luncur.galat{border-color:var(--min)}
.status-luncur.beres{border-color:var(--plus)}

/* kaki */
.ujung{margin-top:64px;background:var(--tua);color:#fff;padding-block:22px 28px}
.ujung .isi{display:flex;gap:16px;align-items:flex-start}
.ujung .merek span{color:var(--neon);font-size:20px}
.merek.kecil img{width:26px;height:26px;border-radius:8px}
.ujung p{font-size:13px;color:#fff;flex:1}

@media (max-width:760px){
  .menu a span,.ambil span{display:none}
  .menu a,.ambil{padding:9px}
  .merek span{font-size:22px}
  .pembuka{flex-direction:column;align-items:flex-start;gap:14px}
  .maskot{width:110px}
  .angka{grid-template-columns:repeat(2,1fr)}
  .ujung .isi{flex-direction:column}
}