/* ============================================================
   NAVBAR — DESKTOP ONLY
   Save to: public/css/navbar-desktop.css
   Load SETELAH navbar-base.css, SEBELUM navbar-mobile.css
   ============================================================ */

/* ── Nav links (Home, Categories, Articles, dst — desktop menu) ── */
.nav-link-item {
  font-family: var(--nav-font);
  color: var(--nav-fg-soft);
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  text-decoration: none;
  height: 30px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0;
  gap: 6px;
  position: relative;
  transition: color 0.2s;
}
.nav-link-item::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--nav-fg);
  transform: scaleX(0);
  transform-origin: right center;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease;
}
.nav-link-item:hover::after,
.nav-link-item.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav-link-item:hover,
.nav-link-item.active {
  color: var(--nav-fg);
}

/* Slot machine hover */
.nav-link-item span.nav-label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
}
.nav-link-item span.nav-label::before,
.nav-link-item span.nav-label::after {
  content: attr(data-text);
  display: block;
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav-link-item span.nav-label::before {
  transform: translateY(0);
}
.nav-link-item span.nav-label::after {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  color: var(--nav-fg);
}
.nav-link-item:hover span.nav-label::before {
  transform: translateY(-100%);
}
.nav-link-item:hover span.nav-label::after {
  transform: translateY(0);
}

/* ── Jembatan hover: .nav-dropdown & leluhurnya dipaksa setinggi
   penuh navbar (bukan cuma setinggi tombol). Sebelumnya .nav-dropdown
   cuma sebesar tombolnya sendiri (~46px) padahal navbar tingginya
   68px/92px (state intro) — jadi ada spasi kosong di atas & bawah
   tombol yang BUKAN bagian dari area :hover. Begitu kursor turun
   lurus dari tombol ke arah menu (yang mulai persis di top:100% dari
   #mainNav), kursor sempat keluar dari .nav-dropdown dulu sebelum
   nyampe menu → dropdown ke-close di tengah jalan. Dengan bikin
   seluruh rantai leluhurnya setinggi 100%, area hover jadi nyambung
   rapat tanpa celah, dari tombol sampai persis ke tepi atas menu. */
#navMiddleSlot {
  align-self: stretch;
  display: flex;
  align-items: center;
  height: 100%;
}
#desktopMenu {
  height: 100%;
}
.nav-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* ── Mega menu (Categories / Articles) — full-width panel ──
   #mainNav punya will-change:transform, yang menurut spec CSS otomatis
   menjadikannya containing block untuk descendant position:fixed.
   Makanya top:100% di bawah ini artinya "tepat di bawah navbar" —
   baik saat navbar tinggi normal (68px) MAUPUN state "intro" di hero
   (92px) — tanpa perlu hitung ulang posisi lewat JS. */
.nav-dropdown-menu {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transform-origin: top center;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}
/* ── Fix: dropdown terasa "ngambang tanpa wadah" saat navbar masih
   transparan (y=0, di atas hero). Paksa navbar jadi solid sementara
   selagi ada dropdown yang lagi dihover/dibuka — dropdown jadi
   punya "pondasi" bar yang jelas, bukan nongol di ruang kosong.
   Transisinya otomatis smooth karena #mainNav sudah punya
   transition: background-color 0.32s ease bawaan. ── */
@media (min-width: 901px) {
  #mainNav.nav-transparent:has(.nav-dropdown:hover),
  #mainNav.nav-transparent:has(.nav-dropdown:focus-within) {
    --nav-bg: var(--clr-forest);
    --nav-border: rgba(255, 255, 255, 0.07);
    --nav-fg: #ffffff;
    --nav-fg-soft: rgba(255, 255, 255, 0.75);
    --nav-fg-dim: rgba(255, 255, 255, 0.45);
  }
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-chevron {
  font-size: 0.55rem;
  transition: transform 0.2s;
  flex-shrink: 0;
  opacity: 0.6;
}
.nav-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
}

/* Isi mega menu — 2 kolom: kiri foto kategori (isi ruang kosong yang
   dulu mubazir), kanan list link. max-width dilebarin & di-center
   biar panelnya proporsional, gak mepet tepi layar di monitor besar. */
.megamenu-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: start;
}

/* Kolom kiri — foto kategori/artikel, RASIO TETAP 1:1 (340×340).
   Sengaja gak dibikin stretch ke tinggi list lagi (align-items:start
   di atas) — supaya nambah/kurangin item dropdown gak ikut narik
   fotonya jadi persegi panjang atau kepotong aneh. Kalau list lebih
   pendek dari foto, panel ikut tinggi foto; kalau list lebih panjang,
   foto tetap persegi di atas & panelnya aja yang nambah tinggi. */
.megamenu-visual {
  position: relative;
  overflow: hidden;
  width: 340px;
  aspect-ratio: 1 / 1;
  background: #f0fdf4;
}
.megamenu-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.megamenu-content {
  padding: 28px 36px 32px 40px;
}

.megamenu-eyebrow {
  font-family: var(--nav-font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9b9388;
  margin: 0 0 14px;
}
.megamenu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Card — tanpa icon, cuma judul + deskripsi, full lebar kolom kanan */
.megamenu-card {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
}
.megamenu-card:hover {
  background: #f0fdf4;
}
.megamenu-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.megamenu-card-title {
  font-family: var(--nav-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}
.megamenu-card-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  color: #8a8a8a;
  line-height: 1.4;
}

/* Mega menu murni desktop — di mobile dropdown ini gak pernah kebuka
   karena parent-nya (#desktopMenu) sudah display:none, tapi dikunci
   lagi di sini sebagai jaring pengaman. */
@media (max-width: 900px) {
  .nav-dropdown-menu {
    display: none !important;
  }
}

/* ── NEW shimmer ──
   Shimmer gradient HANYA di ::before (teks yang kelihatan saat idle).
   ::after (duplikat teks yang muncul saat hover/slot-machine) sengaja
   dikasih warna solid tetap, TANPA animasi/gradient — supaya pas hover
   gak ada gradient/text-fill yang "geser" bareng transform, yang
   sebelumnya bikin teks sempat invisible/patah di tengah transisi. */
.nav-link-item.nav-new {
  color: #d4af6a;
  position: relative;
  padding-right: 22px;
}
.nav-link-item.nav-new .nav-label::before {
  background: linear-gradient(
    100deg,
    #b8924f 0%,
    #f3dba0 20%,
    #d4af6a 40%,
    #f3dba0 60%,
    #b8924f 80%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: newShimmer 4s linear infinite;
}
.nav-link-item.nav-new .nav-label::after {
  color: #d4af6a;
}
.nav-link-item.nav-new::after {
  background: #d4af6a;
}
.nav-link-item.nav-new::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4af6a;
  transform: translateY(-50%);
  animation: newPulse 2.2s ease-in-out infinite;
}
@keyframes newShimmer {
  0% {
    background-position: 250% 50%;
  }
  100% {
    background-position: -50% 50%;
  }
}
@keyframes newPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 106, 0.6);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 6px rgba(212, 175, 106, 0);
    opacity: 0.7;
  }
}

/* ── Search aktif: kolom tengah grid melebar (khusus desktop,
     karena di mobile search panel full-width terpisah) ── */
@media (min-width: 901px) {
  #mainNav.search-active {
    grid-template-columns: 1fr minmax(260px, 540px) 1fr;
  }
}

/* ── Hamburger disembunyikan total di desktop ── */
@media (min-width: 901px) {
  #mobileHamburger {
    display: none !important;
  }
}

/* ── Offcanvas mobile: paksa sembunyi total di desktop ── */
@media (min-width: 901px) {
  #mobileMenuOffcanvas,
  #mobileOverlay {
    display: none !important;
  }
}