/* ------------------------------------------------------------- palet SNAKYS
 *
 * Hijau neon dipakai sebagai WARNA DASAR, bukan tempelan: dia yang jadi tinta
 * seni, garis, dan tombol utama. Latarnya bukan hitam murni melainkan hitam
 * yang sudah kena warna hijau (#050807) — itu bedanya "gelap" dan "gelap yang
 * punya warna", dan itu juga yang membuat neon di atasnya tidak terlihat murah.
 *
 * Teksnya juga bukan putih murni tapi putih kehijauan (#E9FFF3). Putih murni di
 * atas hitam murni memberi kontras paling keras yang bisa dibuat layar, dan
 * yang keras terbaca kasar, bukan mahal.
 */
:root{
  --bg:#050807; --surface:#070b09; --surface-2:#00ff8c10; --surface-hover:#00ff8c0a;
  --fg:#e9fff3; --fg-soft:#e9fff3ad; --fg-dim:#e9fff380; --fg-faint:#e9fff352;
  --border:#00ff8c30; --border-soft:#00ff8c17; --dot:#00ff8c22;
  --accent:#00ff8c; --accent-soft:#00ff8c1f; --accent-fg:#04150c;
  --gain:#00ff8c; --loss:#ff4d6d; --gold:#c9ff5e;
  --ink:#00ff8c;                       /* tinta seni 1-bit */
  --glow:0 0 22px #00ff8c33;
  --font-display:"Arial Narrow","Helvetica Neue Condensed",  "Liberation Sans Narrow", Impact, system-ui, sans-serif;
  --font-ui:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --fs-micro:.6875rem; --fs-label:.75rem; --fs-fine:.8125rem; --fs-body:.9375rem; --fs-lede:1.0625rem;
  --topbar:64px;
  color-scheme:dark;
}
/* Tema terang: kertas mint, tinta hijau tua. Neon TIDAK dipakai apa adanya di
   sini — #00ff8c di atas kertas putih nyaris tak terbaca; yang dipakai hijau
   yang sama tapi digelapkan sampai kontrasnya layak. */
[data-theme=ceramic]{
  --bg:#f3f8f4; --surface:#ffffff; --surface-2:#0a3d2612; --surface-hover:#0a3d260a;
  --fg:#07231a; --fg-soft:#07231ab8; --fg-dim:#07231a8c; --fg-faint:#07231a5c;
  --border:#0a3d2636; --border-soft:#0a3d261a; --dot:#0a3d2626;
  --accent:#00a35a; --accent-soft:#00a35a1a; --accent-fg:#ffffff;
  --gain:#00794a; --loss:#c2334f; --gold:#7a6a12;
  --ink:#00a35a;
  --glow:0 0 18px #00a35a26;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-ui); font-size:var(--fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* Cahaya hijau yang sangat samar di belakang seluruh halaman.
   Ditaruh di ::before dengan "fixed" supaya dia tidak ikut menggulir dan tidak
   pernah menambah tinggi halaman — gradasi yang ikut menggulir langsung
   terbaca sebagai "gambar latar", bukan sebagai cahaya. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120vw 60vh at 50% -10%, #00ff8c14, transparent 60%),
    radial-gradient(60vw 40vh at 12% 8%, #00ff8c0d, transparent 65%);
}
/* Kisi tipis. Alpha-nya sengaja di ambang terlihat: kalau kelihatan jelas dia
   jadi wallpaper, kalau hilang sama sekali halamannya terasa kosong. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--dot) 1px, transparent 1px),
                   linear-gradient(90deg, var(--dot) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.16;
  mask-image:radial-gradient(120vw 80vh at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(120vw 80vh at 50% 0%, #000 20%, transparent 75%);
}
[data-theme=ceramic] body::before{
  background:radial-gradient(120vw 60vh at 50% -10%, #00a35a12, transparent 60%);
}
::selection{background:var(--accent); color:var(--accent-fg)}
a{color:inherit; text-decoration:none}
a:hover{color:var(--fg)}
button{font:inherit; color:inherit}
img,canvas{max-width:100%; display:block}
hr{border:0; border-top:1px solid var(--border-soft); margin:0}

/* ------------------------------------------------------------ tipografi */
.display{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:.95}
.display-hero{font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.84}
.label{font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  opacity:.72}
.fine{font-size:var(--fs-fine)}
.micro{font-size:var(--fs-micro)}
.dim{color:var(--fg-dim)} .soft{color:var(--fg-soft)} .faint{color:var(--fg-faint)}
.gain{color:var(--gain)} .loss{color:var(--loss)}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.break{word-break:break-all}

/* -------------------------------------------------------------- rangka */
.wrap{max-width:1240px; margin:0 auto; padding:0 20px}
.topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar);
  display:flex; align-items:center; gap:22px;
  border-bottom:1px solid var(--border-soft); background:var(--bg);
}
/* Tata letak bar atas ditulis DI SINI, bukan di atribut style.
   Style inline tidak bisa dibatalkan media query, dan itu yang membuat baris
   atas membungkus semaunya di layar sempit: merek terlempar ke barisnya
   sendiri, tombol turun. Di layar lebar dia satu baris; di layar sempit dia
   kisi dua baris yang posisinya PASTI — merek kiri, tombol kanan, navigasi
   di bawah. Kisi tidak bisa membungkus tak terduga seperti flex-wrap. */
.topbar-inner{display:flex; align-items:center; gap:22px; width:100%}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em; font-size:1.15rem}
/* Tanda merek di bar atas. "img" dipakai kalau berkas logo ada; kalau belum,
   kotak bertulisan tetap tampil supaya tata letaknya tidak berubah nanti. */
.brand .mark{width:26px; height:26px; border:1px solid var(--accent); display:grid; place-items:center;
  font-size:.6rem; letter-spacing:0; font-family:var(--font-ui); color:var(--accent);
  box-shadow:var(--glow); flex:none; overflow:hidden}
.brand .mark img,.brand .mark svg{width:100%; height:100%; display:block}
/* Kotak bergaris + cahaya itu wadah untuk INISIAL, bukan untuk gambar.
   Sebuah render yang detail diperas ke dalam kotak 26 piksel bercahaya
   terbaca sebagai noda, bukan lambang: yang dilihat mata cuma bingkai dan
   halo, sedangkan gambarnya sendiri hilang. Kalau isinya gambar, bingkainya
   dibuang dan gambarnya dibiarkan berdiri sendiri, sedikit lebih besar. */
.brand .mark-img{width:34px; height:34px; border:0; box-shadow:none; background:none}
.brand{color:var(--fg)}
.brand b{color:var(--accent)}
.nav{display:flex; gap:20px; align-items:center; font-size:var(--fs-fine);
  text-transform:uppercase; letter-spacing:.09em; color:var(--fg-dim)}
.nav a:hover,.nav a[aria-current=page]{color:var(--fg)}
.nav a[aria-current=page]{text-decoration:underline; text-underline-offset:6px}
.spacer{flex:1}
.topbar-right{display:flex; align-items:center; gap:10px}

/* ------------------------------------------------------------ komponen */
.card{background:var(--surface); border:1px solid var(--border-soft);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.card:hover{border-color:var(--accent); box-shadow:var(--glow)}
.chip{display:inline-flex; align-items:center; gap:.4em; padding:.15em .6em;
  border:1px solid var(--border); font-size:var(--fs-micro); letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-soft); background:none}
.chip-solid{background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:600}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.62em 1.15em; border:1px solid var(--border); background:none; color:var(--fg);
  font-size:var(--fs-fine); text-transform:uppercase; letter-spacing:.09em; font-weight:500;
  cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease)}
.btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
/* Tombol utama satu-satunya bidang neon PADAT di halaman. Kalau neon dipakai
   sebagai bidang di banyak tempat, tidak ada lagi yang menonjol. */
.btn-primary{background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:600}
.btn-primary:hover{background:var(--accent); color:var(--accent-fg); box-shadow:var(--glow)}
.btn-sm{padding:.42em .8em; font-size:var(--fs-micro)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:disabled:hover{background:none; color:var(--fg)}
.btn-primary:disabled:hover{background:var(--fg); color:var(--accent-fg)}
.field{width:100%; padding:.7em .85em; border:1px solid var(--border); background:none;
  color:var(--fg); font-family:var(--font-ui); font-size:var(--fs-fine)}
.field:focus{outline:none; border-color:var(--accent); box-shadow:var(--glow)}
.field::placeholder{color:var(--fg-faint)}
select.field{appearance:none; cursor:pointer}
select.field option{background:var(--bg); color:var(--fg)}

/* ------------------------------------------------------------- halaman */
.hero{padding:64px 0 44px; border-bottom:1px solid var(--border-soft)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero h1{margin:14px 0 0; font-size:clamp(3rem,8.5vw,6.6rem)}
.hero p.lede{max-width:52ch; color:var(--fg-soft); font-size:var(--fs-lede); margin:22px 0 0}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.dither{position:relative; width:100%; border:1px solid var(--border-soft); background:var(--bg);
  overflow:hidden; box-shadow:inset 0 0 60px #00ff8c0f}
.dither canvas{width:100%; height:auto; image-rendering:pixelated}

.stats{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border-soft)}
.stat{padding:22px 0 24px; border-left:1px solid var(--border-soft); padding-left:18px}
.stat:first-child{border-left:0; padding-left:0}
.stat .v{font-family:var(--font-display); font-weight:700; font-size:2.05rem; letter-spacing:-.02em; line-height:1}
.stat .k{margin-top:8px}

.marquee{border-bottom:1px solid var(--border-soft); overflow:hidden; white-space:nowrap; padding:11px 0}
.marquee-inner{display:inline-block; animation:slide 46s linear infinite}
.marquee span{margin:0 22px; font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim)}
.marquee span b{color:var(--fg); font-weight:500}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-inner{animation:none}}

.section{padding:52px 0}
.section-head{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.section-head h2{margin:0; font-size:clamp(1.6rem,3.4vw,2.4rem)}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.filters .chip{cursor:pointer}
.filters .chip[aria-pressed=true]{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}

.tablewrap{overflow-x:auto; border:1px solid var(--border-soft)}
table{width:100%; border-collapse:collapse; font-size:var(--fs-fine)}
thead th{
  text-align:right; padding:11px 14px; font-size:var(--fs-micro); letter-spacing:.11em;
  text-transform:uppercase; color:var(--fg-dim); font-weight:400; white-space:nowrap;
  border-bottom:1px solid var(--border-soft); cursor:pointer; user-select:none;
}
thead th:first-child{text-align:left}
thead th:hover{color:var(--fg)}
tbody td{padding:13px 14px; text-align:right; border-bottom:1px solid var(--border-soft); white-space:nowrap}
tbody td:first-child{text-align:left}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-hover)}
.tkr{display:flex; align-items:center; gap:11px}
.tkr .sq{width:30px; height:30px; border:1px solid var(--border); display:grid; place-items:center;
  font-size:.6rem; letter-spacing:0; color:var(--fg-soft); flex:none; overflow:hidden; background:var(--surface)}
/* Petak yang berisi gambar tidak perlu bingkai — bingkainya justru memotong
   lambang bundar dan membuatnya terlihat seperti tempelan. */
.tkr .sq:has(img){border-color:transparent; background:none}
.tkr .sq img{width:100%; height:100%; object-fit:contain; display:block}
.tkr .nm{display:flex; flex-direction:column; gap:2px; min-width:0}
.tkr .nm b{font-weight:500}
.tkr .nm span{font-size:var(--fs-micro); color:var(--fg-dim); overflow:hidden; text-overflow:ellipsis;
  max-width:26ch; white-space:nowrap}

.bar{position:relative; height:6px; width:112px; border:1px solid var(--border); display:inline-block; vertical-align:middle}
.bar i{position:absolute; inset:0 auto 0 0; display:block;
  background:linear-gradient(90deg, var(--accent) 0%, #c9ff5e 100%); box-shadow:var(--glow)}

.empty{padding:56px 20px; text-align:center; color:var(--fg-dim)}
.empty b{display:block; color:var(--fg); font-family:var(--font-display); text-transform:uppercase;
  font-size:1.5rem; letter-spacing:-.01em; margin-bottom:10px}
.empty p{max-width:60ch; margin:0 auto; font-size:var(--fs-fine)}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft)}
.grid3 > div{background:var(--bg); padding:26px 22px}
.grid3 h3{margin:0 0 10px; font-family:var(--font-display); text-transform:uppercase; font-size:1.35rem; letter-spacing:-.01em}
.grid3 p{margin:0; color:var(--fg-soft); font-size:var(--fs-fine)}
.step{font-size:var(--fs-micro); letter-spacing:.14em; color:var(--fg-faint); display:block; margin-bottom:14px}

.claims{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-soft);
  border:1px solid var(--border-soft); margin:0}
.claims > div{background:var(--bg); padding:22px}
.claims .v{font-family:var(--font-display); font-weight:700; font-size:1.8rem; line-height:1}
.claims .k{margin-top:8px; font-size:var(--fs-fine); color:var(--fg-soft)}

.two{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.panel{border:1px solid var(--border-soft); padding:24px}
.panel h3{margin:0 0 4px; font-family:var(--font-display); text-transform:uppercase; font-size:1.3rem}
.rows{display:flex; flex-direction:column}
.row{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--border-soft)}
.row:last-child{border-bottom:0}
.row .k{color:var(--fg-dim); font-size:var(--fs-fine)}
.row .v{font-size:var(--fs-fine); text-align:right}
.formrow{margin-bottom:16px}
.formrow label{display:block; margin-bottom:7px}
.hint{font-size:var(--fs-micro); color:var(--fg-faint); margin-top:6px}

.notice{border:1px solid var(--border); padding:16px 18px; display:flex; gap:14px; align-items:flex-start}
.notice .dot{width:7px; height:7px; background:var(--accent); flex:none; margin-top:6px;
  box-shadow:var(--glow)}
.notice p{margin:0; font-size:var(--fs-fine); color:var(--fg-soft)}
.notice b{color:var(--fg)}

.docs{max-width:74ch}
.docs h2{font-family:var(--font-display); text-transform:uppercase; font-size:1.9rem; margin:44px 0 14px}
.docs h3{font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; margin:28px 0 10px}
.docs p,.docs li{color:var(--fg-soft); font-size:var(--fs-fine)}
.docs code{background:var(--surface-2); padding:.15em .4em; font-size:.95em}
.docs table{margin:16px 0}

footer{border-top:1px solid var(--border-soft); padding:34px 0 46px; margin-top:20px}
.foot{display:flex; gap:26px; flex-wrap:wrap; align-items:center; font-size:var(--fs-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim)}

#toasts{position:fixed; right:16px; bottom:16px; z-index:90; display:flex; flex-direction:column; gap:8px;
  max-width:min(420px,86vw)}
.toast{border:1px solid var(--fg); background:var(--bg); padding:11px 14px; font-size:var(--fs-fine)}
.toast.bad{border-color:var(--loss); color:var(--loss)}

.skel{color:var(--fg-faint)}

/* ------------------------------------------------------------- kisi isi */
/* Ditaruh di CSS, BUKAN di atribut style halaman. Kisi yang ditulis inline
   tidak bisa dibatalkan media query — itu yang bikin pita aset backing tetap
   enam kolom di layar telepon dan halamannya melar ke samping. */
.strip{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.two-wide{grid-template-columns:1fr 2fr}

@media (max-width:1100px){
  .strip{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .stats,.claims{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0; padding-left:0}
  .grid3,.two,.two-wide{grid-template-columns:1fr}
  .wrap{padding:0 14px}
  .hero{padding:36px 0 30px}
  .section{padding:36px 0}

  /* Navigasi TIDAK disembunyikan di telepon — kalau disembunyikan, Assets,
     Docs dan Positions jadi tidak bisa dijangkau sama sekali dari HP. Dia
     pindah ke baris sendiri di bawah bar atas dan boleh digeser. */
  .topbar{height:auto; flex-direction:column; align-items:stretch; gap:0; padding:10px 0 0}
  /* Baris pertama HARUS memuat merek + tombol tanpa membungkus.
     Kejadian yang sudah dibayar: logo dibesarkan dari 26 ke 34 piksel, baris
     jadi kelebihan lebar beberapa piksel, flex-wrap melemparkan merek ke baris
     sendiri di atas dan tombol turun ke bawah — terlihat seperti tata letaknya
     hancur, padahal cuma satu ukuran yang kebesaran. Sekarang merek boleh
     menyusut dan tombol dipadatkan, jadi tidak ada yang perlu membungkus. */
  .topbar-inner{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"brand right" "nav nav";
    gap:8px 10px;
    align-items:center;
  }
  .brand{grid-area:brand; min-width:0; overflow:hidden; white-space:nowrap; font-size:1rem; gap:8px}
  .topbar-right{grid-area:right; gap:6px}
  .topbar-right .btn-sm{padding:.42em .62em; letter-spacing:.04em}
  .brand .mark-img{width:28px; height:28px}
  .nav{
    grid-area:nav; width:100%; gap:18px; padding:10px 0 9px; margin-top:2px;
    border-top:1px solid var(--border-soft);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .spacer{display:none}
  .topbar-right{margin-left:auto}
}

@media (max-width:640px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .claims{grid-template-columns:1fr}
  .panel{padding:18px}
  .grid3 > div{padding:20px 18px}
  /* Kolom yang bisa dikorbankan di layar sempit. Sisanya tetap bisa digeser
     mendatar DI DALAM .tablewrap — yang tidak boleh melar itu halamannya. */
  .hide-sm{display:none}
  .tkr .sq{width:26px; height:26px}
  .tkr .nm span{max-width:14ch}
  .foot{gap:14px}
}

@media (max-width:420px){
  .brand{font-size:.92rem}
  .brand .mark-img{width:26px; height:26px}
  .topbar-right{gap:5px}
  .btn-sm{padding:.38em .5em; letter-spacing:.02em; font-size:.62rem}
  .stats{grid-template-columns:1fr}
  .stat .v{font-size:1.7rem}
}