/* ============================================
   Blok Main Menu — versi modern & kekinian
   Palet: navy header (#16324f) + teal aksen (#2f7a8c)
   ============================================ */

/* Import font modern (fallback ke sans-serif sistem kalau gagal load) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.pkp_block {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(22, 50, 79, 0.10) !important;
  border: none !important;
  margin-bottom: 24px !important;
  background: #ffffff !important;
}

/* Judul bar "..:: MAIN MENU ::.." — flat gradient modern, tanpa border kaku */
.pkp_block .title,
.pkp_block > h2,
.pkp_block .widget_title,
.pkp_block h4 {
  background: linear-gradient(120deg, #16324f 0%, #2f7a8c 100%) !important;
  color: #ffffff !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  text-align: left !important;
  border: none !important;
}

.main-menu-block {
  list-style: none !important;
  padding: 10px !important;
  margin: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.main-menu-block li {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Item menu — gaya pill modern, flat, hover mengambang halus */
.main-menu-block li a {
  display: block !important;
  background: #f4f7f9 !important;
  color: #16324f !important;
  font-family: 'Poppins', -apple-system, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  border: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.main-menu-block li a:hover {
  background: #2f7a8c !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(47, 122, 140, 0.35) !important;
}

/* ============================================
   Blok Information & Visitors — gaya sama, modern flat
   ============================================ */
.pkp_block .content {
  padding: 10px !important;
}

.pkp_block .content ul {
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.pkp_block .content ul li a {
  display: block;
  background: #f4f7f9 !important;
  color: #16324f !important;
  font-family: 'Poppins', -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 11px 16px;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pkp_block .content ul li a:hover {
  background: #2f7a8c !important;
  color: #ffffff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(47, 122, 140, 0.35) !important;
}

/* ============================================
   Header dengan 2 gambar bergantian (crossfade)
   ============================================ */
#headerNavigationContainer.pkp_structure_head,
.pkp_structure_head {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1920 / 300 !important;
  min-height: 150px !important;
  background: none !important;
  background-color: transparent !important;
}

.pkp_structure_head::before,
.pkp_structure_head::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  z-index: 0 !important;
}

.pkp_structure_head::before {
  background-image: url('https://journal.diginus.id/public/site/images/dani_journal/desainnew.jpg') !important;
  animation: crossfade1 12s ease-in-out infinite !important;
}

.pkp_structure_head::after {
  background-image: url('https://journal.diginus.id/public/site/images/dani_journal/desainnew3.jpg') !important;
  animation: crossfade2 12s ease-in-out infinite !important;
}

.pkp_structure_head > * {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes crossfade1 {
  0%, 40%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes crossfade2 {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}

.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name a,
.pkp_structure_head h1 {
  display: none !important;
}

/* ============================================
   Nav transparan supaya gambar terlihat penuh
   ============================================ */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_head_wrapper .pkp_navigation_primary_row,
nav.pkp_navigation_primary,
.pkp_structure_head nav,
.pkp_structure_head .navbar,
.pkp_navigation_primary_row ul,
.pkp_site_nav_menu ul {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.pkp_navigation_primary_row > ul > li > a,
.pkp_navigation_primary_row > ul > li > button,
.pkp_site_nav_menu > ul > li > a {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.pkp_navigation_primary_row ul ul a,
.pkp_navigation_primary_row .sub_menu a,
.pkp_navigation_primary_row .submenu a {
  color: #1c3d5a !important;
  text-shadow: none !important;
}