/* ===== BOTTOM NAV ===== */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;

  height:70px;
  background:rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);

  border-radius:20px 20px 0 0;

  display:flex;
  justify-content:space-around;
  align-items:center;

  box-shadow:0 -5px 20px rgba(0,0,0,.08);
  z-index:9999;

  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== ITEM ===== */
.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-decoration:none !important;
  color:#b22222;
  font-size:11px;

  position:relative;
  /* Hapus overflow:hidden supaya icon tidak terpotong */
  overflow: visible;

  transition: all 0.3s ease;
}

/* ICON */
.nav-item i{
  font-size:20px;
  margin-bottom:3px;

  transition: transform 0.25s ease, color 0.25s ease;
  z-index:2; /* pastikan di atas ripple */
}

/* TEXT */
.nav-item span{
  line-height:1;
  text-decoration:none !important;
  z-index:2;
}

/* ===== ACTIVE ===== */
.nav-item.active{
  color:#ff3d00 !important;
}

.nav-item.active i{
  animation: iconPop 0.25s ease;
  transform: translateY(-3px);
  filter: drop-shadow(0 2px 6px rgba(255,61,0,0.3));
}

/* ICON POP ANIMATION */
@keyframes iconPop{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px) scale(1.2); }
  100%{ transform: translateY(-3px); }
}

/* ===== RIPPLE BULAT ONLY ===== */
.nav-item::before{
  content:'';
  position:absolute;

  width:0;
  height:0;

  background:rgba(0,0,0,0.08);
  border-radius:50%;

  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  transition: width 0.3s ease, height 0.3s ease;
  z-index:1; /* ripple dibawah icon & text */
}

.nav-item:active::before{
  width:70px;
  height:70px;
}

/* TAP EFFECT */
.nav-item:active{
  transform: scale(0.95);
}

/* ===== CENTER BUTTON ===== */
.nav-center{
  position:relative;
  top:-25px;
  text-align:center;
}

.nav-center a{
  width:65px;
  height:65px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:26px;
  color:#fff;

  background:linear-gradient(135deg,#ff6a00,#ff2d2d);
  border:4px solid #fff;

  box-shadow:0 8px 20px rgba(0,0,0,.2);

  transition: all 0.2s ease;
  z-index:2;
}

.nav-center a:active{
  transform: scale(0.9);
}

/* LABEL CENTER */
.nav-center span{
  display:block;
  font-size:11px;
  margin-top:4px;
}

/* SCROLL FIX */
.app-scroll{
  padding-bottom:90px;
}