/* Bottom Navigation (mobile) — Nihongo Pro Academy
   Tampil hanya pada layar ≤768px. Desktop tidak terpengaruh. */
.kn-bottom-nav { display: none; }

@media (max-width: 768px) {
  .kn-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 -4px 24px rgba(30, 20, 10, .08);
    justify-content: space-around;
    align-items: stretch;
  }
  .kn-bn-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: .3rem 0;
    text-decoration: none; color: #8a8175;
    font-size: .66rem; font-weight: 600;
    transition: color .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .kn-bn-item:active { transform: scale(.92); }
  .kn-bn-ic { width: 24px; height: 24px; display: inline-flex; }
  .kn-bn-ic svg { width: 100%; height: 100%; }
  .kn-bn-label { line-height: 1; }
  .kn-bn-item.is-active { color: #be3428; }
  .kn-bn-item.is-active .kn-bn-ic { transform: translateY(-1px); }

  /* beri ruang bawah agar konten & tombol back-to-top tidak tertutup */
  body.has-bottom-nav { padding-bottom: 64px; }
  body.has-bottom-nav #bttBtn,
  body.has-bottom-nav [id="bttBtn"] { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .kn-bn-item { transition: none; }
  .kn-bn-item:active { transform: none; }
}

@media (prefers-color-scheme: dark) {
  @media (max-width: 768px) {
    .kn-bottom-nav { background: rgba(28, 25, 22, .82); border-top-color: rgba(255,255,255,.08); }
    .kn-bn-item { color: #b5ada1; }
    .kn-bn-item.is-active { color: #ff6b5e; }
  }
}