/* ortak */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; gap:12px;
  background:#25263c;
  padding:6px 12px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 8px rgba(0,0,0,.08);
  --x:0px; --w:64px; --cx:32px; --acc1:#5f6af6; --acc2:#2fd4ee;
}
.bottom-nav a{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:64px; height:44px; border-radius:12px; color:#d9e4ff; text-decoration:none;
}
.bottom-nav a:is(:hover,[aria-current="page"]){ color:#fff; }
.bottom-nav .icon{ width:24px; height:24px; }
.bottom-nav .nav-indicator{ position:absolute; left:0; pointer-events:none; }

/* underline */
.bottom-nav.nav--underline .nav-indicator{
  bottom:8px; height:3px; width:var(--w);
  transform: translateX(var(--x));
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  border-radius:3px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), width .35s cubic-bezier(.2,.7,.2,1);
}



@media (prefers-reduced-motion: reduce){
  .bottom-nav .nav-indicator{ transition:none!important; }
}