:root {
  --primary: #006798;
  --primary-light: #0082c0; /* Tambahan untuk efek gradien/hover */
  --white: #ffffff;
  --gray-text: #475569;
  --gray-border: #e2e8f0;
  --gray-hover: #f1f5f9; /* Dibuat sedikit lebih kontras */

  /* Shadow yang lebih premium dan hidup */
  --shadow-sm:
    0 4px 12px rgba(100, 116, 139, 0.06), 0 1px 4px rgba(0, 67, 152, 0.04);
  --shadow-md:
    0 12px 30px rgba(100, 116, 139, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04);

  /* Timing function biar animasi terasa "organik" */
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

header#headerNavigationContainer.pkp_structure_head {
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    #004d73 100%
  ) !important; /* Sentuhan gradien halus */
  border: none !important;
}

header#headerNavigationContainer .pkp_head_wrapper {
  background: transparent !important;
}

header#headerNavigationContainer .pkp_site_name_wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 40px !important; /* Sedikit lebih lega */
}

header#headerNavigationContainer .pkp_navigation_primary_wrapper {
  background: var(--white) !important;
  border-bottom: 1px solid var(--gray-border) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 40px !important;
}

.top-bar-auth {
  box-sizing: border-box !important;
}

.top-bar-auth a {
  transition: var(--transition-smooth) !important;
}

ul.custom-ojs-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.custom-ojs-menu > li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 65px !important;
  margin-right: 18px !important; /* DIKECILKAN: Dari 30px ke 18px agar muat satu baris */
}

ul.custom-ojs-menu > li > a {
  color: var(--gray-text) !important;
  font-size: 12px !important; /* DIKECILKAN: Dari 14px ke 12px supaya lebih slim */
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  position: relative !important;
  transition: var(--transition-smooth) !important;
  letter-spacing: 0.5px;
  white-space: nowrap !important; /* KUNCI UTAMA: Memaksa teks tetap satu baris & anti-bersusun */
}

ul.custom-ojs-menu > li > a:hover {
  color: var(--primary) !important;
}

/* EFEK BEFORE: Garis bawah yang melebar dari tengah ke samping */
ul.custom-ojs-menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 0;
  height: 3px; /* Sedikit tebal agar tegas */
  background: var(--primary);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: var(--transition-smooth);
}

ul.custom-ojs-menu > li > a:hover::after {
  width: 100%; /* Melebar sempurna saat di-hover */
}

ul.custom-ojs-menu li ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 250px !important;
  background: var(--white) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 12px !important; /* Lebih rounded modern */
  box-shadow: var(--shadow-md) !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(15px) scale(0.95) !important; /* Efek pop-up halus */
  transition: var(--transition-smooth) !important;
  z-index: 9999 !important;
  overflow: hidden;
}

ul.custom-ojs-menu li:hover > ul {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

ul.custom-ojs-menu li ul li {
  margin: 0 !important;
  padding: 0 !important;
}

ul.custom-ojs-menu li ul li a {
  display: block !important;
  padding: 12px 20px !important;
  color: var(--gray-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
  position: relative !important;
  transition: var(--transition-smooth) !important;
}

/* EFEK BEFORE/AFTER SUBMENU: Memunculkan indikator panah kecil bergeser */
ul.custom-ojs-menu li ul li a::before {
  content: "▸" !important;
  position: absolute !important;
  left: 10px !important;
  opacity: 0 !important;
  color: var(--primary) !important;
  transition: var(--transition-smooth) !important;
  transform: translateX(-5px) !important;
}

ul.custom-ojs-menu li ul li a:hover {
  background: var(--gray-hover) !important;
  color: var(--primary) !important;
  padding-left: 26px !important; /* Menggeser teks saat di-hover untuk memberi ruang bagi panah */
}

ul.custom-ojs-menu li ul li a:hover::before {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

ul.custom-ojs-menu li ul li a::after {
  display: none !important;
}

/* SIDEBAR / ADDITIONAL MENU */
.additional-menu-container,
#customBlock_additionalmenu,
[id*="customBlock_additional"] {
  width: 100% !important;
  background: var(--white) !important;
  border: none !important; /* Hapus border kaku */
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 30px !important;
  overflow: hidden !important; /* Memastikan sudut rounded rapi */
}

.additional-menu-header {
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-light) 100%
  ) !important;
  color: var(--white) !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.additional-menu-list,
[id*="customBlock_additional"] ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.additional-menu-list li,
[id*="customBlock_additional"] ul li {
  border-bottom: 1px solid rgba(222, 232, 240, 0.5) !important;
}

.additional-menu-list li:last-child,
[id*="customBlock_additional"] ul li:last-child {
  border-bottom: none !important;
}

.additional-menu-list li a,
[id*="customBlock_additional"] ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px !important;
  color: var(--gray-text) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: var(--transition-smooth) !important;
  position: relative !important;
}

/* EFEK BEFORE: Mengubah dot list bawaan menjadi dot yang membesar dan berubah warna */
.additional-menu-list li a::before,
[id*="customBlock_additional"] ul li a::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important; /* Warna default abu-abu soft */
  margin-right: 12px !important;
  transition: var(--transition-smooth) !important;
  display: inline-block !important;
}

.additional-menu-list li a:hover,
[id*="customBlock_additional"] ul li a:hover {
  background: var(--gray-hover) !important;
  color: var(--primary) !important;
  padding-left: 25px !important; /* Efek teks sedikit terdorong ke kanan */
}

/* Efek lingkaran membesar saat hover */
.additional-menu-list li a:hover::before,
[id*="customBlock_additional"] ul li a:hover::before {
  background: var(--primary) !important;
  transform: scale(1.4) !important;
  box-shadow: 0 0 8px rgba(0, 103, 152, 0.4) !important;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
  header#headerNavigationContainer .pkp_navigation_primary_wrapper {
    flex-direction: column !important;
    padding: 15px 20px !important;
  }

  ul.custom-ojs-menu {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px;
  }

  ul.custom-ojs-menu > li {
    height: auto !important;
    margin-right: 0 !important;
  }

  ul.custom-ojs-menu > li > a {
    padding: 10px 15px !important;
    background: var(--gray-hover) !important;
    border-radius: 20px !important; /* Mengubah menu mobile jadi tab pil yang cantik */
  }

  ul.custom-ojs-menu > li > a::after {
    display: none !important; /* Matikan efek garis bawah di mobile */
  }
}

/* 1. EFEK UNTUK BLOK KARTU UTAMA (DOWNLOAD TEMPLATE, CONTACT, VISITORS) */
.additional-menu-container,
#customBlock_additionalmenu,
[id*="customBlock_additional"],
.pkp_block {
  /* Tambahkan selektor block bawaan OJS jika diperlukan */
  position: relative !important;
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform, box-shadow;
  overflow: hidden !important; /* Wajib agar efek kilatan cahaya tidak keluar jalur */
}

/* KETIKA KURSOR MENGENAI KOLOM (HOVER) */
.additional-menu-container:hover,
#customBlock_additionalmenu:hover,
[id*="customBlock_additional"]:hover,
.pkp_block:hover {
  transform: translateY(-6px) !important; /* Kolom sedikit terangkat ke atas */
  box-shadow:
    0 16px 36px rgba(100, 116, 139, 0.16),
    0 8px 16px rgba(0, 103, 152, 0.06) !important; /* Bayangan melebar & hidup */
}

/* 2. EFEK BEFORE/AFTER: Efek Kilatan Cahaya Modern (Shimmer Effect) */
.additional-menu-container::after,
#customBlock_additionalmenu::after,
[id*="customBlock_additional"]::after,
.pkp_block::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -150% !important; /* Sembunyikan di sebelah kiri luar */
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: skewX(-25deg) !important; /* Membuat garis cahaya miring */
  transition: none !important;
  pointer-events: none !important;
}

/* PICU KILATAN CAHAYA SAAT HOVER */
.additional-menu-container:hover::after,
#customBlock_additionalmenu:hover::after,
[id*="customBlock_additional"]:hover::after,
.pkp_block:hover::after {
  left: 150% !important; /* Cahaya melintas cepat ke kanan */
  transition: left 0.8s ease-in-out !important;
}

/* 3. VARIASI KHUSUS UNTUK TOMBOL "CHAT VIA WHATSAPP" */
.additional-menu-container a.btn,
.pkp_block button,
.pkp_block .status a,
header#headerNavigationContainer + main .pkp_block a[href*="wa.me"] {
  /* Jika ada tombol hijau WhatsApp di dalam sidebar, beri transisi scale */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.additional-menu-container a.btn:hover,
.pkp_block button:hover,
header#headerNavigationContainer + main .pkp_block a[href*="wa.me"]:hover {
  transform: scale(1.04) !important; /* Tombol sedikit membesar secara elegan */
  filter: brightness(1.05) !important; /* Warna sedikit lebih cerah */
}