/* ==========================================================================
   Menu "Berita" pada navbar halaman publik iplusnet.

   Ditaruh di berkas BERSAMA, bukan di <style> tiap halaman, karena menu ini
   muncul di enam halaman sekaligus. Menyalinnya ke enam tempat berarti enam
   peluang untuk melenceng saat salah satunya direvisi.

   Nilai warna sengaja ditulis apa adanya, BUKAN lewat var(--brand) dan
   kawan-kawannya: tiap halaman publik punya kumpulan variabelnya sendiri
   dengan nama yang berbeda (index.html memakai --text-muted, nilai-kami.html
   memakai --text-3), sehingga variabel yang sama belum tentu ada di semuanya.

   Berkas ini dimuat SETELAH <style> bawaan tiap halaman, jadi aturan di sini
   menang tanpa perlu !important.
   ========================================================================== */

/* ===== Pemicu di navbar (desktop) ===== */

.nav-links .nav-dd {
  position: relative;
}

/* Disamakan dengan .nav-links a di tiap halaman supaya tidak terlihat sebagai
   elemen asing di antara tautan lain. Memakai <button> (bukan <a>) karena
   fungsinya membuka menu, bukan berpindah halaman, dan pembaca layar perlu
   tahu bedanya. */
.nav-links .nav-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: inherit;
  color: #64748b;
  background: none;
  border: 0;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.nav-links .nav-dd-btn .nav-dd-caret {
  font-size: 10px;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
}

.nav-links .nav-dd:hover .nav-dd-btn,
.nav-links .nav-dd-btn:focus-visible,
.nav-links .nav-dd-btn[aria-expanded="true"] {
  color: #0f172a;
  background: rgba(2,132,199,0.08);
}

.nav-links .nav-dd-btn[aria-expanded="true"] .nav-dd-caret,
.nav-links .nav-dd:hover .nav-dd-caret {
  transform: rotate(180deg);
}

/* Halaman yang sedang dibuka memang salah satu isi menu ini. */
.nav-links .nav-dd-btn.active {
  color: #0284c7;
  background: rgba(2,132,199,0.08);
}

.nav-links .nav-dd-btn:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

/* ===== Panel menu (desktop) ===== */

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 290px;
  padding: 7px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.13), 0 2px 8px rgba(15,23,42,0.06);
  /* Tetap di alur dokumen (bukan display:none) supaya bisa dianimasikan dan
     supaya pembaca layar tahu menunya ada. visibility+pointer-events yang
     menutupnya dari tetikus maupun tab. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  /* visibility DITUNDA saat menutup (0s linear 0.18s) supaya pudarnya sempat terlihat,
     tetapi saat membuka ia berganti SEKETIKA (lihat aturan .open di bawah). Dulu
     visibility ikut dianimasikan selama 0.18s, akibatnya panel masih berstatus hidden
     pada saat skrip memindahkan fokus ke tautan pertama, dan elemen tersembunyi menolak
     focus() tanpa memberi tanda gagal. Pemakaian lewat papan ketik jadi mentok diam. */
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1),
              transform 0.18s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0.18s;
  z-index: 1001;
}

/* Jembatan tak terlihat selebar panel di celah antara tombol dan panel.
   Tanpa ini, menu tertutup begitu tetikus menyeberangi jarak 10px tadi,
   yang terasa seperti menu yang rewel dan sulit diraih. */
.nav-dd-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

/* :focus-within SENGAJA TIDAK dipakai di sini. Dengan aturan itu, panel tetap
   terbuka selama fokus masih berada di dalamnya, sehingga menekan Escape tidak
   menutup apa pun selama fokus kembali ke tombolnya sendiri. Pembukaan lewat
   papan ketik diurus nav-berita.js yang memasang kelas .open, dan Escape bisa
   mencabutnya kembali. */
.nav-links .nav-dd:hover .nav-dd-menu,
.nav-dd-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1),
              transform 0.18s cubic-bezier(.4,0,.2,1),
              visibility 0s;
}

/* Pengguna yang MENUTUP menu dengan menekan tombolnya hampir pasti masih menaruh
   tetikus di atas tombol itu. Tanpa aturan ini, :hover di atas langsung membuka
   panel itu kembali, sehingga tombolnya terasa macet dan menu tidak bisa ditutup
   sama sekali selama kursor belum dijauhkan. Kelas .hover-mati dipasang skrip saat
   menutup lewat tekanan, lalu dicabut begitu tetikus meninggalkan area menu. */
.nav-links .nav-dd.hover-mati:hover .nav-dd-menu:not(.open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1),
              transform 0.18s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0.18s;
}

.nav-dd-menu a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 10px;
  color: #334155;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}

.nav-dd-menu a:hover,
.nav-dd-menu a:focus-visible {
  background: rgba(2,132,199,0.08);
  color: #0f172a;
  outline: none;
}

.nav-dd-menu a.active {
  background: rgba(2,132,199,0.08);
  color: #0284c7;
}

.nav-dd-ico {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(2,132,199,0.1);
  color: #0284c7;
  font-size: 13px;
}

.nav-dd-txt b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.nav-dd-txt small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #64748b;
}

/* ===== Versi ponsel: lipatan di dalam menu geser ===== */

.mobile-menu .nav-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  background: none;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.mobile-menu .nav-dd-btn[aria-expanded="true"] {
  color: #0284c7;
  background: rgba(2,132,199,0.08);
}

.mobile-menu .nav-dd-btn .nav-dd-caret {
  font-size: 11px;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
}

.mobile-menu .nav-dd-btn[aria-expanded="true"] .nav-dd-caret {
  transform: rotate(180deg);
}

/* Tinggi dianimasikan lewat grid-template-rows supaya tidak perlu menebak
   tinggi isinya dengan angka tetap, yang pasti salah begitu teksnya berubah. */
.mobile-menu .nav-dd-menu {
  position: static;
  width: auto;
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: grid-template-rows 0.22s cubic-bezier(.4,0,.2,1);
}

.mobile-menu .nav-dd-menu::before { content: none; }

.mobile-menu .nav-dd-menu > .nav-dd-wrap {
  overflow: hidden;
  min-height: 0;
}

.mobile-menu .nav-dd-menu.open {
  grid-template-rows: 1fr;
}

/* Hover pada ponsel tidak ada; yang membuka menu hanyalah ketukan (kelas
   .open dari skrip). Tanpa penegasan ini, aturan :hover di atas sempat
   membuat menu terbuka sendiri dan tidak bisa ditutup pada perangkat sentuh. */
.mobile-menu .nav-dd:hover .nav-dd-menu:not(.open) {
  grid-template-rows: 0fr;
}

/* Selektor ditulis dengan .mobile-menu di depan BUKAN demi rapi, melainkan karena
   tiap halaman punya aturan `.mobile-menu ul a { display: block; }` yang bobotnya
   lebih tinggi daripada `.nav-dd-menu a`. Tanpa penegasan ini, ikon dan teks
   menumpuk ke bawah alih-alih berjajar. */
.mobile-menu .nav-dd-menu a {
  display: flex;
  align-items: center;
  padding: 9px 12px 9px 22px;
  font-size: 14px;
}

.mobile-menu .nav-dd-ico {
  width: 27px;
  height: 27px;
  font-size: 12px;
  border-radius: 8px;
}

.mobile-menu .nav-dd-txt small { display: none; }

/* ===== Penghormatan terhadap preferensi "kurangi gerak" ===== */

@media (prefers-reduced-motion: reduce) {
  .nav-dd-menu,
  .nav-dd-btn .nav-dd-caret,
  .mobile-menu .nav-dd-menu {
    transition-duration: 0.01ms;
  }
}