/* ============================================================
   REKADATA - Journal Style Sheet
   Unggah lewat: Settings > Website > Appearance > Advanced
   Slot Journal Style Sheet hanya menampung SATU file.
   Semua aturan CSS jurnal harus digabung di sini.
   ============================================================ */


/* ============================================================
   1. HEADER PENUH SELEBAR HALAMAN
   ============================================================ */

.pkp_structure_head .pkp_head_wrapper {
  padding-left: 0;
  padding-right: 0;
}

.pkp_head_wrapper .pkp_site_name_wrapper {
  width: 100%;
  float: none;
  padding: 0;
}

.pkp_head_wrapper .pkp_site_name {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

.pkp_head_wrapper .pkp_site_name .is_img {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.pkp_head_wrapper .pkp_site_name .is_img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
}


/* ============================================================
   2. REKADATA MENU (sidebar)
   ============================================================ */

.rd-menu {
  margin: 0 0 15px 0;
  overflow: hidden;
}

.rd-menu .rd-title {
  padding: 10px 8px;
  background: #dc143c;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.rd-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #001f86;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
  border-left: 4px solid transparent;
  transition: background 0.3s ease, padding-left 0.3s ease, border-left-color 0.3s ease;
}

.rd-menu a:hover,
.rd-menu a:focus {
  background: #dc143c;
  padding-left: 20px;
  border-left-color: #ffd700;
  color: #ffffff;
}

.rd-menu a:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: -2px;
}

.rd-menu .rd-arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-weight: bold;
}

.rd-menu a:hover .rd-arrow,
.rd-menu a:focus .rd-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .rd-menu a,
  .rd-menu .rd-arrow { transition: none; }
}


/* ============================================================
   3. MENU NAVIGASI ATAS (Home, About the Journal, Current, dst.)
   Efek hover: isian merah naik dari bawah + garis emas.
   ============================================================ */

/* Item level pertama */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary_row .pkp_navigation_primary > li > a {
  position: relative;
  display: block;
  padding: 12px 16px;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 3px solid transparent;

  /* isian merah dibuat dari background-image, bukan pseudo-element,
     supaya tidak bentrok dengan z-index tema bawaan OJS */
  background-color: transparent;
  background-image: linear-gradient(#dc143c, #dc143c);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0;

  transition: background-size 0.3s ease,
              color 0.3s ease,
              border-bottom-color 0.3s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.in_focus > a,
.pkp_navigation_primary > li:hover > a {
  background-size: 100% 100% !important;
  border-bottom-color: #ffd700;
  color: #ffffff !important;
  text-decoration: none;
}

/* Halaman yang sedang dibuka */
.pkp_navigation_primary > li.current > a {
  border-bottom-color: #ffd700;
}

/* Aksesibilitas keyboard */
.pkp_navigation_primary > li > a:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: -2px;
}

/* Ikon/tombol pencarian di ujung kanan */
.pkp_navigation_search_wrapper a,
.pkp_search a {
  color: #ffffff;
  border-bottom: 3px solid transparent;
  transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_search a:hover,
.pkp_search a:focus {
  background-color: #dc143c;
  border-bottom-color: #ffd700;
  color: #ffffff;
}


/* ---- Submenu / dropdown (misalnya di bawah Submissions) ---- */

.pkp_navigation_primary > li > ul {
  background: #001f86;
  border: none;
  padding: 0;
}

.pkp_navigation_primary > li > ul > li > a {
  display: block;
  padding: 8px 14px;
  background: #001f86;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  border-left: 4px solid transparent;
  transition: background 0.3s ease, padding-left 0.3s ease, border-left-color 0.3s ease;
}

.pkp_navigation_primary > li > ul > li > a:hover,
.pkp_navigation_primary > li > ul > li > a:focus {
  background: #dc143c !important;
  padding-left: 24px;
  border-left-color: #ffd700;
  color: #ffffff !important;
}


/* ---- Tampilan mobile (menu tumpuk ke bawah) ---- */

@media (max-width: 991px) {
  .pkp_navigation_primary > li > a {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 4px solid transparent;
    background-position: left center;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    border-left-color: #ffd700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary > li > ul > li > a,
  .pkp_navigation_search_wrapper a { transition: none; }
}


/* ============================================================
   4. LOGO INDEXING & TOMBOL SIDEBAR
   Bungkus gambar di custom block dengan <div class="rd-index">
   ============================================================ */

.rd-index {
  margin: 0 0 15px 0;
}

.rd-index a {
  display: block;
  margin-bottom: 10px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  text-align: center;
  transition: transform 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.rd-index a:last-child {
  margin-bottom: 0;
}

.rd-index a img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(55%);
  opacity: 0.85;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.rd-index a:hover,
.rd-index a:focus {
  transform: translateY(-4px);
  border-color: #dc143c;
  box-shadow: 0 6px 16px rgba(220, 20, 60, 0.28);
}

.rd-index a:hover img,
.rd-index a:focus img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

.rd-index a:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 2px;
}

/* Judul merah di atas blok, jika ingin memakai gaya yang sama */
.rd-index .rd-title,
.rd-block-title {
  padding: 10px 8px;
  margin-bottom: 10px;
  background: #dc143c;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}


/* ---- Tombol gambar tunggal, misalnya Article Template ---- */

.rd-button {
  display: block;
  margin: 0 0 15px 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.rd-button img {
  display: block;
  width: 100%;
  height: auto;
}

.rd-button:hover,
.rd-button:focus {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(220, 20, 60, 0.45));
}

.rd-button:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 3px;
}


/* ---- Cadangan: berlaku untuk semua gambar di custom block,
        tanpa perlu mengubah HTML. Hapus tanda komentar jika dipakai.

.pkp_block.custom_block .content a img {
  filter: grayscale(55%);
  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.pkp_block.custom_block .content a:hover img {
  filter: grayscale(0);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 6px 16px rgba(220, 20, 60, 0.28);
}

---- */

@media (prefers-reduced-motion: reduce) {
  .rd-index a,
  .rd-index a img,
  .rd-button { transition: none; }
}


/* ============================================================
   5. ATURAN LAMA ANDA
   Tempel sisa CSS jurnal yang sebelumnya sudah dipakai
   di bawah baris ini supaya tidak hilang lagi.
   ============================================================ */