/* Container Utama Navigasi */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Memisahkan logo (kiri) dan grup kanan */
  padding-top: var(--gap-medium);
  padding-bottom: var(--gap-medium);
  position: fixed !important;
  top: 0;
  width: 100%;
  background-color: transparent; /* Sesuai rencana transisi navbar kamu */
  transition: var(--ease-all-fast);
  z-index: var(--z-index-nav);
}

/* Saat di-scroll (Class ini dipicu jQuery) */
.nav.scrolled {
  padding-top: var(--gap-small);
  padding-bottom: var(--gap-small);
  background-color: var(--warna-putih); /* Berubah jadi putih fill */
  box-shadow: var(--shadow-navbar);
}

#nav-btn-konsultasi {
  min-width: 0px !important;
  width: max-content !important;
}

/* Logo stick di kiri */
.nav-logo {
  display: flex;
  align-items: center;
}

/* Container untuk links dan button di sebelah kanan */
.nav-links,
.nav-btn-right {
  display: flex;
  align-items: center;
}

/* logo default */
.nav-logo-desktop,
.nav-logo-mobile {
  height: var(--size-nav-logo-height);
  transition: var(--ease-all-fast) !important;
}

/* logo saat scroll */
.nav.scrolled .nav-logo-desktop,
.nav.scrolled .nav-logo-mobile {
  height: var(--size-nav-logo-scrolled-height);
  transition: var(--ease-all-fast) !important;
  filter: none; /* Kembalikan ke warna asli logo */
}

.nav-logo-overlay {
  display: none; /* Sembunyikan di desktop */
}

/* Logo mobile di desktop */
.nav-logo-mobile {
  display: none;
}

/* Sembunyikan hamburger secara default untuk desktop */
.nav-btn-hamburger {
  display: none;
}
/* Pengaturan visual icon hamburger*/
.nav-btn-hamburger img {
  width: var(--size-icon-small);
  height: auto;
  position: absolute;
  filter: var(--lerp-putih);
}

.nav-icon-hamburger-close {
  display: none;
}

/* Mengelompokkan nav-links agar menempel ke kiri nav-btn-right */
.nav-links {
  margin-left: auto; /* Mendorong menu ke kanan mendekati tombol */
  margin-right: var(--gap-small); /* Jarak antara links dan tombol konsultasi */
  list-style: none;
}

/* --- RESPONSIVE (Mobile) --- */
@media (max-width: 1200px) {
  /* fix posisi logo overlay dan hamburger saat menu active */
  .nav.menu-active {
    height: 150px;
  }

  /* Saat menu aktif, sembunyikan logo utama agar tidak double */
  .nav.menu-active .nav-logo-main {
    opacity: 0;
    visibility: hidden;
  }
  /* menyembunyikan seluruh container button kanan kecuali hamburger */
  .nav.menu-active .nav-btn-right a {
    display: none;
  }
  /* Tampilkan Logo Overlay */
  .nav.menu-active .nav-logo-overlay {
    display: block;
    position: absolute;
    z-index: var(--z-index-nav-logo-menu-active); /* Di atas background putih menu */
  }

  .nav-logo-overlay img {
    width: var(--size-nav-logo-menu-active-width); /* Atur ukuran logo overlay di sini */
    display: block;
  }

  /* Pastikan Container Hamburger tetap aman di kanan */
  .nav-btn-right {
    position: relative;
    z-index: var(--z-index-nav-hamburger-container); /* Paling atas agar bisa diklik */
  }

  /* hilangkan nav link saat layar kecil*/
  .nav-links {
    display: none;
  }
  /* Munculkan hamburger saat layar kecil */
  .nav-btn-hamburger {
    margin-left: var(--gap-small); /* jarak kiri dari button konsultasi */
  }
  
  /* 1. Buat nav-links menjadi full screen menu */
  .nav-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    gap: var(--gap-normal); /* Memberikan jarak antar item menu active*/
    top: 0;
    left: 0; /* Tetap di 0, tidak perlu di luar layar lagi */
    width: 100%;
    height: 100vh;
    background-color: var(--warna-putih);
    
    /* GANTI BAGIAN INI UNTUK FADE IN */
    opacity: 0; /* Awalnya transparan */
    visibility: hidden; /* Benar-benar tidak bisa diklik saat tertutup */
    margin: 0;

    z-index: var(--z-index-nav-links-menu-active);
  }

  /* Saat Menu Aktif */
  .nav.menu-active .nav-links {
    opacity: 1; /* Muncul perlahan */
    visibility: visible; /* Menjadi bisa diklik */
  }

  /* Logika Toggle Ikon Hamburger */
  .nav-btn-hamburger .nav-icon-hamburger-close {
    display: none; /* Sembunyikan icon close di awal */
  }

  .nav.menu-active .nav-icon-hamburger-open {
    display: none;
  }

  .nav.menu-active .nav-icon-hamburger-close {
    display: block;
  }

  /* Pastikan hamburger tetap di atas menu full screen */
  .nav-btn-hamburger {
    z-index: var(--z-index-nav-hamburger-btn);
    display: flex;
  }

  .nav.menu-active .nav-logo-mobile {
    display: none;
  }

  .nav.menu-active .nav-btn-hamburger {
    top: 0px !important;
  }
}

@media (max-width: 825px) {
  /* toggle logo yang terlihat saat mobile */
  .nav-logo-desktop {
    display: none;
  }
  .nav-logo-mobile {
    display: block;
  }
}

/* --- TEMA HALAMAN */
/* teks link state Default */
.nav.nav-dark-theme .nav-link {
  color: var(--warna-putih);
}
.nav.nav-light-theme .nav-link {
  color: var(--warna-hitam);
}

/* teks link state Hover */
.nav.nav-dark-theme .nav-link:hover {
  color: var(--warna-hitam);
}

/* teks link state Scrolled: Kembalikan teks warna saat discroll */
.nav.nav-dark-theme.scrolled .nav-link {
  color: var(--warna-hitam);
}

/* logo */
.nav.nav-dark-theme:not(.scrolled) .nav-logo img {
  filter: var(--lerp-putih);
}
.nav.nav-dark-theme.nav.menu-active .nav-logo img {
  filter: none !important;
}

/* ikon hamburger */
.nav.nav-dark-theme .nav-btn-hamburger img {
  filter: var(--lerp-putih) !important;
}
.nav.nav-dark-theme.scrolled .nav-btn-hamburger img {
  filter: var(--lerp-hitam) !important;
}
.nav.nav-dark-theme.nav.menu-active .nav-btn-hamburger img {
  filter: var(--lerp-hitam) !important;
}

.nav.nav-light-theme .nav-btn-hamburger img {
  filter: var(--lerp-hitam) !important;
}
.nav.nav-light-theme.scrolled .nav-btn-hamburger img {
  filter: var(--lerp-hitam) !important;
}

/* Mobile Menu Active: Pastikan saat menu dibuka (overlay putih), teks tetap gelap */
@media (max-width: 1200px) {
  .nav.nav-dark-theme.menu-active .nav-links li a span {
    color: var(--warna-hitam);
  }
}