/* STATUS: LEGACY (struktur dock ponsel) — dipakai oleh: partials/member-styles. Kulit warna dock ada di member/shell.css; jangan definisikan token di sini. */
/* ═══════════════════════════════════════════════════════════════════════════
   Nav bawah member — DOCK MENGAMBANG
   ───────────────────────────────────────────────────────────────────────────
   HANYA MENGUBAH TAMPILAN. Tidak menambah, menghapus, atau memindah satu pun
   elemen, data, atau tautan.

   BERKAS SENDIRI, BUKAN DITEMPEL KE member-hijau.css. Dua alasan yang keduanya
   pernah menggigit repo ini:

   1. JANGKAUANNYA BEDA. member-hijau.css dikurung .tema-hijau dan hanya dimuat
      Beranda & Program; nav duduk DI LUAR pembungkus itu dan harus sama di
      SELURUH member area. Nav yang berbeda bentuk antar-halaman terbaca seperti
      dua aplikasi.

   2. URUTAN MUATNYA BEDA. Berkas ini dimuat dari <head> user.master, sedangkan
      member-hijau.css dimuat di dalam <body> tiap halaman yang memakainya —
      jadi apa pun yang ditulis di sini akan KALAH oleh member-hijau untuk
      selektor dengan spesifisitas sama. Karena itu di sini tidak ada satu pun
      aturan .tema-hijau; yang menyentuh kartu Program & Arena tinggal di
      member-hijau.css sendiri.

   Pasangannya untuk halaman di luar kerangka member (/chart,
   /terminal-trading) ada di member-nav-luar.css, dan KEDUANYA HARUS DIUBAH
   BERSAMA — kalau tidak, mengetuk Chart terasa seperti pindah aplikasi.

   TIDAK BUTUH BUILD VITE: preseden 20+ berkas lain di public/assets/css yang
   ter-track git dan disajikan lewat asset(). Edit, commit, tayang.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Member area — lapisan tampilan "dock & kartu", 2026
   ───────────────────────────────────────────────────────────────────────────
   HANYA MENGUBAH TAMPILAN. Tidak menambah, menghapus, atau memindah satu pun
   elemen, data, atau tautan. Seluruhnya penimpaan gaya di atas member-tema.css.

   DUA BAGIAN, DUA JANGKAUAN YANG SENGAJA BERBEDA:

   1. NAV BAWAH (.st-tabs) — berlaku di SELURUH member area. Nav yang berbeda
      bentuk antar-halaman terbaca seperti dua aplikasi, jadi ia tidak boleh
      dikurung di dalam .tema-hijau seperti kartu-kartu di bawahnya. Pasangannya
      untuk halaman di luar kerangka member (/chart, /terminal-trading) ada di
      member-nav-luar.css, dan KEDUANYA HARUS DIUBAH BERSAMA — kalau tidak,
      mengetuk Chart terasa seperti pindah aplikasi.

   2. KARTU PROGRAM & ARENA — dikurung .tema-hijau, sama seperti member-hijau.css,
      jadi halaman member lain tidak ikut berubah.

   TIDAK BUTUH BUILD VITE. Mengikuti preseden 20+ berkas lain di
   public/assets/css yang ter-track git dan disajikan lewat asset(): edit,
   commit, tayang. Kelas Tailwind BARU tidak dipakai sama sekali — hasil build
   di repo ini ikut di-commit dan tidak pernah dibangun ulang di server, jadi
   kelas baru mati diam-diam di produksi.

   Dimuat SESUDAH member-tema.css di user/master.blade.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   NAV BAWAH — dari bilah menempel jadi DOCK MENGAMBANG
   ───────────────────────────────────────────────────────────────
   Yang lama: bilah rata selebar layar, bergaris tipis di atas, dan satu-satunya
   tanda tab aktif adalah warna teks. Di HP dengan latar putih, garis setipis itu
   nyaris tidak ada, jadi nav-nya menempel pada isi halaman dan tab aktif harus
   dicari.

   Yang baru: satu permukaan mengambang bersudut besar, dengan bayangan yang
   memisahkannya dari isi halaman, dan tab aktif memakai PIL berlatar — bukan
   cuma pergantian warna. Pil bisa dilihat dari sudut mata; warna teks 9px tidak.

   Nol perubahan markup: permukaan mengambangnya digambar ::before milik nav
   sendiri, dan tautannya diangkat ke atasnya dengan z-index. */
.st-tabs{
  /* Aksen nav = HIJAU SETRA, bukan biru bawaan member-tema.css.
     Alasannya bukan selera: dua halaman member yang paling sering dibuka
     (Beranda & Program) sudah memakai lapisan putih-hijau, sedangkan nav duduk
     DI LUAR pembungkus .tema-hijau — jadi tab aktifnya tetap biru di atas
     halaman hijau, dan yang terlihat cuma bahwa keduanya tidak nyambung.
     Nav itu chrome, dan chrome memakai warna merek; hijau/merah tetap disimpan
     khusus untuk untung-rugi, biru tetap jadi aksen isi halaman lain.
     Mau dikembalikan ke biru? Hapus dua baris ini, tidak ada yang lain. */
  /* #0C7C3D, bukan #12A150. Teks tab 9,5px di atas pil hijau tipis cuma 2,91:1
     dengan hijau muda — di bawah ambang 4,5:1, dan justru label inilah yang
     memberi tahu kamu sedang di halaman mana. Hijau tua ini 4,58:1 di atas
     pilnya. Pilnya sendiri tetap hijau merek. */
  /* --st-accent dihapus: aksen dock kini dari member/tokens.css */

  position:relative;
  background:transparent;
  border-top:0;
  /* Ruang di kiri-kanan-bawah inilah yang membuatnya "mengambang". Safe-area
     ditambahkan ke padding bawah, bukan ke tinggi permukaan — kalau ditambahkan
     ke permukaannya, dock jadi terlalu tinggi di iPhone berponi dan pendek di
     yang tidak. */
  /* --st-dock-gap DITAMBAHKAN ke safe-area, bukan lagi dijumlahkan dengannya.
     calc(10px + safe-area) menumpuk dua hal yang tujuannya SAMA — menjauhkan
     dock dari tepi fisik layar. Di iPhone berponi hasilnya 10 + 34 = 44px ruang
     kosong di bawah dock, dan itulah "masih ada space" yang dikeluhkan. Di HP
     tanpa poni tidak kelihatan sama sekali, jadi cacat ini cuma muncul di
     sebagian perangkat — kelas cacat yang paling lama tidak ketahuan.

     max() memilih yang lebih besar: 8px di perangkat biasa, 34px di yang
     berponi (angka yang memang dituntut sistemnya, bukan tambahan kita). */
  --st-dock-gap:8px;
  padding:0 10px max(var(--st-dock-gap), env(safe-area-inset-bottom, 0px));
  /* Isi halaman lewat DI BAWAH dock, jadi tepinya tidak terpotong garis keras. */
  z-index:1;
}

/* Permukaan dock. Digambar sebagai lapisan sendiri supaya sudut, bayangan, dan
   blur-nya tidak perlu diwariskan ke tiap tautan. */
.st-tabs::before{
  content:"";
  position:absolute;
  inset:0 10px max(var(--st-dock-gap), env(safe-area-inset-bottom, 0px));
  border-radius:22px;
  background:color-mix(in srgb, var(--st-page) 86%, transparent);
  border:1px solid var(--st-hair);
  box-shadow:0 1px 2px rgba(10,20,30,.05), 0 10px 30px rgba(10,20,30,.10);
  /* TANPA backdrop-filter. Isi halaman tidak pernah lewat di belakang dock —
     .st-tabs baris kedua di grid #st-app, bukan pelapis — jadi tidak ada apa
     pun untuk diburamkan, sementara deklarasinya tetap memaksa lapisan komposit
     sendiri di halaman yang dibuka tiap member tiap hari. */
  pointer-events:none;
}

/* Peramban tanpa color-mix() (Safari lawas) menerima seluruh deklarasi
   background sebagai tidak sah dan menggambarnya transparan — dock jadi kaca
   tanpa isi. Nilai padat ditulis lebih dulu sebagai cadangan; yang di atas
   menimpanya hanya kalau didukung. */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .st-tabs::before{ background:var(--st-page) }
}

.st-tab{
  position:relative;
  z-index:1;
  gap:4px;
  /* TINGGINYA DITETAPKAN, bukan dihitung dari padding + tinggi baris label.
     Tinggi yang lahir dari isi bergantung pada line-height font yang sedang
     terpakai — terukur 54,5px di sini, dan 54,0px pada nav /chart yang
     tingginya memang ditulis. Setengah piksel itu tidak terlihat sendirian,
     tapi ia membuat kedua dock TIDAK PERNAH bisa dijamin sama, dan "hampir
     sama" adalah persis yang terbaca sebagai berkedip saat berpindah halaman.

     54px, naik dari 52px: keluhannya "bottombar terlalu kecil", dan tinggi itu
     sudah termasuk label — jadi ikonnya sendiri jauh di bawah ambang sentuh
     yang nyaman. Ikonnya ikut naik 19 → 20px.

     ANGKA INI KEMBAR dengan --st-luar-row di member-nav-luar.css. Berkas itu
     tidak dimuat di halaman member dan berkas ini tidak dimuat di /chart, jadi
     variabel bersama tidak mungkin. Yang menjaga keduanya tetap sama uji
     tests/js/uji-nav-dock.mjs — ia membaca angka dari kedua berkas dan menolak
     kalau berbeda. */
  height:68px;
  padding:0;
  box-sizing:border-box;
  border-radius:16px;
  font-size:12px;
  font-weight:700;
  /* Transisi pendek: nav yang beranimasi lama terasa lambat, bukan halus. */
  transition:color .16s ease, transform .16s ease;
}
/* .st-tabs .st-tab svg, BUKAN .st-tab svg. member-tema.css punya pagar
   `.st-tabs svg:not([class]){width:16px}` (0,2,0) yang menang atas 0,1,1 meski
   dimuat lebih dulu — jadi versi pertama aturan ini mati diam-diam dan ikonnya
   tetap 16px. Pagar itu sengaja ada; yang dilakukan di sini menyamai
   spesifisitasnya lalu menang lewat urutan, bukan membongkarnya dengan
   !important. */
.st-tabs .st-tab svg{ width:22px;height:22px;transition:transform .16s ease }

/* Pil tab aktif. Digambar ::before supaya tidak menambah elemen dan tidak
   mengubah tinggi baris. */
.st-tab::before{
  content:"";
  position:absolute;
  inset:4px 8px;
  border-radius:14px;
  background:var(--st-accent-soft);
  opacity:0;
  transform:scale(.86);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.st-tab.on::before{ opacity:1;transform:none }
.st-tab.on{ font-weight:800 }
.st-tab.on svg{ transform:translateY(-1px) scale(1.06) }

/* Umpan balik sentuh. Di HP tidak ada hover, jadi tanpa ini ketukan tidak punya
   jawaban apa pun sampai halaman berikutnya selesai dimuat. */
.st-tab:active{ transform:scale(.94) }

@media (hover:hover){
  .st-tab:hover{ color:var(--st-ink-2) }
  .st-tab.on:hover{ color:var(--st-accent) }
}

/* Di layar lebar dock dirapatkan ke tengah, tidak melar selebar jendela —
   aturan yang sudah ada di member-tema.css, tinggal permukaannya yang ikut. */
@media (min-width:768px){
  .st-tabs{ padding-left:0;padding-right:0 }
  .st-tabs::before{
    left:50%;right:auto;
    width:min(680px, 100% - 20px);
    transform:translateX(-50%);
  }
}

/* Tema gelap: bayangan hitam tidak terlihat di atas latar hitam, jadi yang
   memisahkan dock dari isi halaman adalah garis tepinya yang sedikit lebih
   terang — bukan bayangannya. */

body.tema-gelap .st-tabs::before{
  background:color-mix(in srgb, var(--st-panel) 88%, transparent);
  border-color:var(--st-hair-2);
  box-shadow:0 -1px 0 rgba(255,255,255,.03), 0 12px 34px rgba(0,0,0,.55);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  body.tema-gelap .st-tabs::before{ background:var(--st-panel) }
}

/* ── Penanda "uji coba" pada tab Analisa ──────────────────────────────────
   Fitur yang masih diuji harus MENGATAKANNYA di tempat orang menemukannya,
   bukan cuma di halamannya. Yang mengetuk tab ini perlu tahu sebelum ia
   menaruh kepercayaan pada angkanya.

   Di nav bawah ruangnya 64px per kolom pada layar 320px, jadi teksnya
   dipendekkan jadi "uji" — bukan dibuang. Rail sidebar punya ruang, jadi di
   sana ia lengkap: "uji coba". */
.st-uji-w{display:inline-flex;align-items:center;gap:3px;min-width:0}
.st-uji{flex:none;font-style:normal;font-size:7.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;line-height:1;
  padding:2px 3px;border-radius:4px;
  background:var(--st-warn-soft,rgba(201,133,0,.16));
  color:var(--st-warn,#B4700A)}

/* Rail sidebar memakai lencana yang sama, dengan ukuran yang sedikit lebih
   besar — di sana tidak ada tekanan lebar kolom. */
.st-rail .st-uji{font-size:8.5px;padding:2px 5px;margin-left:2px}

/* Di bawah 360px lencana teksnya TIDAK MUAT — terukur: label + lencana butuh
   62px sementara kolomnya cuma 60px. Yang meluber di nav bawah bukan sekadar
   jelek, ia menggeser tetangganya.

   Jadi di sana ia menyusut jadi TITIK. Tandanya tetap ada, tetap berwarna
   peringatan, dan teksnya tetap di DOM sehingga pembaca layar tetap
   membacanya — yang hilang cuma piksel yang memang tidak ada. */
@media (max-width:359px){
  .st-uji{
    width:5px;height:5px;padding:0;border-radius:50%;
    font-size:0;line-height:0;
    background:var(--st-warn,#B4700A);
  }
  .st-uji-w{gap:4px}
}

/* Navigasi Beranda menjadi satu-satunya bentuk untuk seluruh member area.
   Chart tetap menjadi aksi tengah yang terangkat, sementara tab aktif ditandai
   lewat bobot dan warna. Tidak ada lagi override khusus halaman Beranda. */
.st-tabs{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center; gap:0; width:min(680px,100%); margin:0 auto;
  padding-left:8px; padding-right:8px; overflow:visible;
}
.st-tabs::before{
  inset:0; width:auto; transform:none; border-radius:24px 24px 0 0;
  background:oklch(99% .004 125); border:1px solid oklch(92% .012 125);
  box-shadow:0 -5px 22px oklch(30% .025 125 / .06);
}
.st-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:0; gap:5px; padding:0; border-radius:20px;
  color:#7B8276; font-size:12px; line-height:16px; font-weight:600;
  transition:color 140ms ease;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.st-tab::before,.st-tab.on::before{display:none}
.st-tab.on{padding:0;color:#30372C;font-weight:800}
.st-tab.on svg{transform:none;fill:currentColor}
.st-tab svg{position:relative;z-index:1}
.st-tab .st-tab-l, .st-tab.on .st-tab-l{
  position:static; z-index:1; width:auto; height:auto; overflow:visible;
  clip-path:none; white-space:nowrap; font-size:12px; line-height:16px;
  letter-spacing:-.02em;
}
.st-tab .st-uji, .st-tab.on .st-uji{
  position:absolute; top:7px; left:calc(50% + 8px);
  width:auto; height:auto; padding:1px 3px; border-radius:4px;
  font-size:7px; line-height:10px; font-weight:800; font-style:normal;
  color:#573800; background:#FFE6A7;
}
.st-tab:focus-visible{outline:2px solid #12643F;outline-offset:-3px}
.st-tab:active{transform:scale(.97)}
.st-tab:nth-child(3){position:relative;justify-content:flex-end;padding-bottom:10px}
.st-tab:nth-child(3) svg{position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:26px;height:26px;box-sizing:content-box;padding:17px;border:5px solid oklch(97% .01 125);border-radius:50%;background:#88D875;color:#263D20;fill:none;box-shadow:inset 0 2px 3px oklch(100% 0 0 / .38),0 5px 12px oklch(55% .12 135 / .14)}
.st-tab:nth-child(3) .st-tab-l{font-size:11px;color:#49643B}
@media (hover:hover) and (pointer:fine){
  .st-tab:hover,.st-tab.on:hover{color:#405B34}
}
@media (prefers-reduced-motion:reduce){
  .st-tab, .st-tab::before, .st-tab svg{transition:none}
  .st-tab:active{transform:none}
}
@media (min-width:768px){
  .st-tabs{width:min(680px, 100%);margin:0 auto;padding-left:8px;padding-right:8px}
  .st-tabs::before{left:0;right:0;width:auto;transform:none}
}

body.tema-gelap .st-tabs::before{background:oklch(99% .004 125);border-color:oklch(92% .012 125);box-shadow:0 -5px 22px rgba(0,0,0,.2)}
body.tema-gelap .st-tabs .st-tab{color:#7B8276}body.tema-gelap .st-tabs .st-tab.on{color:#30372C}