@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,600,700&display=swap");

/* =========================
   RESET & BODY
   ========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  background: #ffffff;
  padding-bottom: 90px; /* ruang untuk bottom nav mobile */
  -webkit-font-smoothing: antialiased;
}

/* =========================
   TAB BAR IMALAH
   ========================= */
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;

  background: #ffffff;
  padding: 10px 0 12px;

  box-shadow: 0 -6px 25px rgba(0,0,0,0.06);
  z-index: 9999;
}

.nav-item {
  width: 44px;
  height: 44px;
  border-radius: 50%;

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

  color: #9ca3af;
  text-decoration: none;

  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover & Tap */
.nav-item:hover {
  transform: scale(1.08);
     border-radius: 50px;
     background-color: #5e5e5e1f;
}
.nav-item:active {
  transform: scale(1.5);
  background-color: rgba(0, 119, 255, 0.74);
     border-radius: 50px;
}

/* ACTIVE */
.nav-item.active {
  background-color: rgb(0, 119, 255);
  color: white;
 
  box-shadow: 0 8px 18px rgba(0,119,255,0.25);
}
.nav-item span {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item.active span {
  transform: scale(1.1);
}



/* =========================
   TAB BAR MOBILE FLOATING
   ========================= */
/* TAB BAR MOBILE FLOATING FIX */
@media (max-width: 767px) {
  body {
    padding-bottom: 120px; /* beri ruang cukup agar konten tidak nutup nav */
  }

  .nav {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 360px;
    border-radius: 50px;
    padding: 10px 0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .nav-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 22px;
  }
}
/* =========================
   DESKTOP FLOATING MODE
   ========================= */
@media (min-width: 768px) {
  .nav {
    max-width: 700px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    border-radius: 50px;
    padding: 14px 25px;
    box-shadow: 0 15px 45px rgba(25,118,210,0.15);
  }

  body {
    padding-bottom: 120px; /* tambah ruang desktop */
  }

  .nav-item span {
    font-size: 22px;
  }
}