/* ================================================================
   FERPEDIA — FLOATING GLASS NAVIGATION (komponen bersama)
   Nilai (ukuran, jarak, warna, animasi) disalin PERSIS dari
   .bnav pada dashboard-v4.css agar tampil identik di semua halaman.
   Token dibatasi pada .bnav sehingga tidak bentrok dengan CSS halaman.
   Dipakai oleh: produk, topup, riwayat, profile. (Dashboard memakai salinannya sendiri.)
   ================================================================ */
.bnav {
  --nav-h: 66px; --nav-gap: 14px; --gutter: 16px;
  --line: #DFE7EF; --text-2: #647789; --blue: #163B5C; --blue-2: #28577A;
  --ease: cubic-bezier(.22, .8, .24, 1);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.bnav a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.bnav svg { display: block; flex-shrink: 0; }
.bnav-item svg { width: 21px; height: 21px; }
.bnav-fab svg { width: 28px; height: 28px; }

.bnav {
  position: fixed; z-index: 9999;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-gap) + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 2 * var(--gutter)), 440px);
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr 1fr 78px 1fr 1fr; align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px -12px rgba(16,42,67,.30), 0 1px 2px rgba(16,42,67,.06);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bnav { background: rgba(255, 255, 255, .80); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); }
}

.bnav-item {
  position: relative; height: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-2); font-size: .62rem; font-weight: 600; letter-spacing: .01em;
  transition: color .25s var(--ease), transform .15s var(--ease);
}
.bnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; }
.bnav-item svg { transition: transform .3s var(--ease); }
.bnav-item:hover { color: var(--blue); }
.bnav-item:active { transform: scale(.92); }
.bnav-item.is-active { color: var(--blue); }
.bnav-item.is-active svg { transform: translateY(-1px); color: var(--blue); }
.bnav-item.is-active::after { /* indikator aktif: garis kecil bercahaya lembut */
  content: ''; position: absolute; bottom: 7px; left: 50%; width: 16px; height: 3px; margin-left: -8px;
  border-radius: 3px; background: linear-gradient(90deg, var(--blue-2), var(--blue));
  animation: bnav-pop .35s var(--ease) both;
}
@keyframes bnav-pop { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: none; } }

.bnav-fab-slot { position: relative; height: 100%; display: flex; justify-content: center; }
.bnav-fab {
  position: absolute; top: -20px; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #28577A 0%, #163B5C 100%);
  box-shadow:
    0 0 0 5px rgba(247,249,252,.98),            /* cincin pemisah dari kapsul */
    0 10px 20px -6px rgba(22,59,92,.50),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.bnav-fab svg { transition: transform .3s var(--ease); }
.bnav-fab:hover svg { transform: rotate(90deg); }
.bnav-fab:active { transform: scale(.92); box-shadow: 0 0 0 5px rgba(247,249,252,.98), 0 4px 10px -4px rgba(22,59,92,.5), inset 0 1px 0 rgba(255,255,255,.2); }

@media (max-width: 359px) {
  .bnav { --gutter: 12px; --nav-h: 62px; grid-template-columns: 1fr 1fr 66px 1fr 1fr; padding: 0 4px; }
  .bnav-fab { width: 54px; height: 54px; top: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  .bnav, .bnav * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Halaman lama (dashboard.css) memakai --bnav-h untuk ruang bawah & posisi toast.
   Kelas has-bnav menyesuaikannya dengan tinggi nav floating (66 + 14 + tonjolan FAB). */
body.has-bnav { --bnav-h: 96px; --bottom-nav-h: 96px; }