header {
  width: 100%;
}

header nav {
  display: none;
  padding: 0 1.4rem;

  /* --- AWAL PERUBAHAN GLASSMORPHISM --- */
  /* Membuat latar belakang transparan dan blur */
  background: rgba(
    45,
    67,
    109,
    0.25
  ); /* Warna dasar dari tema Anda dengan transparansi */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Untuk kompatibilitas Safari */

  /* Menambahkan border tipis di atas untuk efek 3D */
  border-top: 1px solid rgba(255, 255, 255, 0.18);

  /* Menambahkan bayangan untuk memberi kedalaman */
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
  /* --- AKHIR PERUBAHAN --- */

  align-items: center;
  justify-content: space-between;
  position: fixed;
  right: 0;
  bottom: 0; /* Navbar akan selalu di bawah */
  z-index: 99;
  transition: bottom 2s ease, transform 1s ease, background-color 0.5s ease;

  max-width: 450px; /* Samakan dengan max-width .mobile-container */
  width: 100%; /* Pastikan lebar tetap penuh di HP */
  left: 50%;
  transform: translateX(-50%);
}

header nav.active {
  bottom: 0;
}

header nav.scroll {
  transform: translateY(100%);
}

header nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.1rem;
  width: 4rem;
  height: 3rem;
  color: var(--main-text-color); /* Menggunakan variabel warna teks utama */
  transition: color 0.3s ease, background-color 0.3s ease; /* Menambahkan transisi tema */
}

header nav a i {
  font-size: 1.2rem;
}

header nav a span {
  font-size: 0.6rem;
}

header nav a:hover {
  background-color: var(
    --main-text-color
  ); /* Menggunakan variabel warna teks utama saat hover */
  color: var(
    --main-bg-color
  ); /* Menggunakan variabel warna latar belakang utama saat hover */
}

header nav a.active {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px); /* Sedikit mengangkat ikon yang aktif */
  color: #ffffff; /* Membuat warna ikon dan teks menjadi putih terang */
}

header nav a.active span {
  font-weight: 600; /* Menebalkan teks pada item aktif */
}