/* ===================================================================
   Switch lintas-situs Anava <-> Griyanava
   Dipakai bareng dua situs. Dimuat SESUDAH griya.css dan sesudah <style>
   in-page Anava, jadi tidak perlu !important untuk menang cascade.

   Kenapa ada file ini: sebagai <a> biasa di dalam .main-nav, switch ikut
   mewarisi `border-bottom` hover milik menu — garis bawah muncul di bawah
   pil dan terlihat seperti dua komponen bertumpuk. Owner minta 02 Sep 2026:
   hover jadi fill + glow, garis bawah dimatikan, warna teks disesuaikan.

   Fill dipasang sebagai background-image yang lebarnya dianimasikan, bukan
   pseudo-element ber-transform: background otomatis mengikuti border-radius
   pil, jadi ::before tetap bebas dipakai untuk garis pemisah.
   =================================================================== */

/* --- desktop: pil di ujung kanan menu ---------------------------- */
.main-nav .nav-cross {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* padding menggantikan padding-left:26px versi lama; jarak ke menu
     sebelahnya sekarang urusan `gap` .main-nav, bukan padding elemen */
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    background-size .28s cubic-bezier(.4, 0, .2, 1),
    color .2s ease .04s,
    border-color .28s ease,
    box-shadow .28s ease;
}

/* Garis pemisah "keluar dari situs ini" dipertahankan, tapi digeser ke
   tengah gap .main-nav (26px) supaya tidak menempel di tepi pil. */
.main-nav .nav-cross::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 1px;
  height: 18px;
  transform: translateY(-50%);
  background: var(--line);
}

/* Garis bawah menu tidak berlaku di sini — itu sumber keluhannya.
   Selektor 0,2,1 mengalahkan `.main-nav a:hover` (0,1,1) tanpa !important. */
.main-nav .nav-cross,
.main-nav .nav-cross:hover,
.main-nav .nav-cross:focus-visible {
  border-bottom-color: var(--line);
  text-decoration: none;
}

.main-nav .nav-cross:hover,
.main-nav .nav-cross:focus-visible {
  background-size: 100% 100%;
  color: var(--paper);
  border-color: var(--accent);
  /* dua lapis: halo rapat + sebaran lembut ke bawah */
  box-shadow:
    0 0 0 3px rgba(30, 77, 59, .13),
    0 6px 18px rgba(30, 77, 59, .3);
}

.main-nav .nav-cross:active {
  background-size: 100% 100%;
  color: var(--paper);
  box-shadow: 0 0 0 2px rgba(30, 77, 59, .18);
}

/* Ring fokus keyboard tetap terlihat di atas fill hijau. */
.main-nav .nav-cross:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Header menyusut jadi pil saat scroll; gap mengecil, garis ikut geser. */
@media (max-width: 1024px) {
  .main-nav .nav-cross::before { left: -9px; }
}

/* --- menu mobile: baris penuh, bukan pil ------------------------- */
/* Baris di .mobile-menu rata kanan dan berhairline; pil di sini akan
   terbaca sebagai elemen nyasar. Yang dipakai efek fill yang sama pada
   seluruh lebar baris, arah kanan-ke-kiri mengikuti arah bacanya. */
.mobile-menu .mm-cross {
  color: var(--muted);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0% 100%;
  transition:
    background-size .3s cubic-bezier(.4, 0, .2, 1),
    color .2s ease .04s,
    padding-right .3s cubic-bezier(.4, 0, .2, 1);
}

.mobile-menu .mm-cross:hover,
.mobile-menu .mm-cross:focus-visible,
.mobile-menu .mm-cross:active {
  background-size: 100% 100%;
  color: var(--paper);
  /* teks rata kanan menempel di tepi fill; beri ruang sambil menjaga
     tinggi baris tetap sama seperti tetangganya */
  padding-right: 12px;
}

/* --- gerak dikurangi -------------------------------------------- */
/* Fill tetap ada karena dia yang membawa informasi (ini switch, dan ini
   keadaan hover-nya); yang dihilangkan hanya animasinya. */
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-cross,
  .mobile-menu .mm-cross {
    transition: none;
  }
}