/**
 *
 * Open Journal Systems
 * Copyright (c) 2013-2016 Simon Fraser University Library
 * Copyright (c) 2003-2016 John Willinsky
 * Copyright (c) themeOJS.com | IDPublishing  | PT. Penerbit Jurnal Indonesia 
 * Designed for Jurnal Agritrop (2024-02-23) oleh Abdul Jalil
 * Designed For Jurnal TIJET (2025-05-29) Oleh Ahlal Kamal 085285123236
 * Credits:
 * Background pattern from subtlepatterns.com
 *
 **/


/* ============================================================
   1. MEMANGGIL ICON (FONT AWESOME)
   Baris ini mengambil "paket ikon" dari internet (CDN) supaya
   simbol-simbol kecil (ikon panah, ikon sosial media, dll)
   bisa tampil di halaman jurnal.
   ============================================================ */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* ============================================================
   FONT UNTUK TEMA BARU "EMERALD & GOLD" (lihat bagian paling
   bawah file untuk detail redesign-nya)
   - Sora            -> font judul (display), geometris & modern
   - Plus Jakarta Sans -> font teks bacaan (body)
   - JetBrains Mono  -> font untuk angka volume/edisi/tanggal
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Menampilkan deskripsi jurnal di daftar (list) secara sejajar/inline */
.journals ul .body .description a {
  display: inline;
}

/* ------------------------------------------------------------
   CATATAN: dua baris "background" di bawah ini akan DITIMPA
   (tidak dipakai) oleh pengaturan background lain di bagian
   bawah file ini (cari komentar "BACKGROUND UTAMA HALAMAN").
   Ini sisa pengaturan lama, dibiarkan agar riwayat perubahan
   tetap terlihat, tapi efeknya sudah tidak berlaku.
   ------------------------------------------------------------ */
body {
  background: url("https://i.ibb.co/zSshwyr/bg.png") #f5f9fbfixed !important;
  background: url(https://i.ibb.co/BGtMZfP/floral-line-bc.png) #f5f9fb fixed !important;
}

/* Mengatur tinggi maksimal kotak menu navigasi di bagian header/atas web */
#headerNavigationContainer {
  max-height: 200% !important;
}

/* ============================================================
   2. TAMPILAN DAFTAR ARTIKEL (DAFTAR ISI JURNAL)
   Mengatur jarak, garis bawah, warna background, dan bayangan
   pada setiap baris artikel di halaman daftar isi (Table of Contents)
   ============================================================ */
.obj_issue_toc .articles > li {
  margin-bottom: 20px;
  border-bottom: solid #8fbc8f;
  background: #5e17eb12;
    repeat scroll 0% 0% !important;
  padding: 1rem;
  border-radius: 0 0 2rem 0;
  box-shadow: 0.2rem 0.2rem 0.1rem #5e17eb;
}
/* ============================================================
   3. NAMA SITUS / LOGO JURNAL (BAGIAN HEADER PALING ATAS)
   ============================================================ */
.pkp_site_name {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.pkp_site_name > a {
  padding-top: 0;
  padding-bottom: 0;
}
/* Ukuran maksimal gambar logo jurnal */
.pkp_site_name .is_img img {
  max-height: 200px !important;
}
.pkp_site_name_wrapper {
  padding-left: 0;
  padding-right: 0;
}
/* Posisi tombol akun/login pengguna di pojok kanan atas */
.pkp_navigation_user_wrapper {
  top: 0;
  right: 0;
  padding-right: 30px;
}
/* Jarak (margin) untuk kerangka utama halaman */
.pkp_structure_page {
  margin-top: 20px !important;
  margin-bottom: 20 !important;
  padding-bottom: 20 !important;
}

/* Aturan dasar: semua elemen dihitung ukurannya termasuk border/padding-nya */
*,
*:before,
*:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}
.container > ul {
  list-style: none;
}

/* ============================================================
   4. MENU DROPDOWN (MENU YANG BISA DIBUKA-TUTUP)
   Bagian ini (sampai sebelum komentar "STRUKTUR GRID KOLOM")
   mengatur tampilan dan animasi menu yang muncul saat diklik/
   di-hover, misalnya menu navigasi bertingkat.
   ============================================================ */
.dropdown {
  position: relative;
}
.dropdown a {
  text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
  display: block;
  color: #fff;
  background: #4a7b90; 
  -moz-box-shadow: 0 1px 0 #1f3a93 inset, 0 -1px 0 #1f3a93 inset;
  -webkit-box-shadow: 0 1px 0 #1f3a93 inset, 0 -1px 0 #1f3a93 inset;
  box-shadow: 0 1px 0 #1f3a93 inset, 0 -1px 0 #1f3a93 inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #cd3d2e;
}
.dropdown [data-toggle="dropdown"]:before {
  position: absolute;
  display: block;
  content: "\25BC";
  font-size: 0.7em;
  color: #fff;
  top: 13px;
  right: 10px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown > .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown > .dropdown-menu li {
  padding: 0;
}
.dropdown > input[type="checkbox"] {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
  max-height: 9999px;
  display: block;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 2s ease-in-out;
  -o-transition: max-height 2s ease-in-out;
  -webkit-transition: max-height 2s ease-in-out;
  transition: max-height 2s ease-in-out;
}
.dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
/* ============================================================
   5. STRUKTUR GRID KOLOM
   Membagi halaman menjadi 3 kolom sejajar (masing-masing 33%)
   ============================================================ */
* {
  box-sizing: border-box;
}
.column2 {
  float: left;
  width: 33%;
  padding: 10px;
}
.row2:after {
  content: "";
  display: table;
  clear: both;
}
/* Di layar HP (lebar di bawah 600px), kolom jadi 100% (ditumpuk ke bawah) */
@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}

/* ============================================================
   6. FOOTER (BAGIAN PALING BAWAH HALAMAN)
   ============================================================ */
.pkp_footer_content {
  float: left;
  width: 70%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.pkp_brand_footer {
  float: right;
  width: 30%;
  padding-bottom: 10px;
  padding-top: 100px;
}
.pkp_structure_footer_wrapper {
  border-bottom: @double solid;
}

/* CATATAN: background abu-abu (#eee) di sini juga akan DITIMPA
   oleh pengaturan "BACKGROUND UTAMA HALAMAN" di bagian bawah file */
body {
  background: #eee;
  overflow-x: hidden;
  font-family: tahoma, geneva, sans-serif;
}

/* Utility "clearfix": merapikan elemen yang mengambang (float) supaya
   tidak bertabrakan/ tumpang tindih dengan elemen di bawahnya */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
obj_article_details .abstract {
  text-align: justify;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/* Lebar wadah (container) utama halaman, menyesuaikan ukuran layar di bawah */
.container {
  position: relative;
  margin: 0 auto;
  padding: 50px 0;
  clear: both;
}
@media only screen and (min-width: 1200px) {
  .container {
    width: 1210px;
  }
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .container {
    width: 1030px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container {
    width: 682px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 428px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 479px) {
  .container {
    width: 320px;
    margin: 0 auto;
  }
}
/* ============================================================
   7. MENU "MCD-MENU" (MENU SAMPING/SIDEBAR BERTINGKAT)
   Bagian panjang di bawah ini (sampai sebelum komentar
   "GAMBAR & DESKRIPSI HALAMAN DEPAN") mengatur tampilan menu
   bertingkat: warna, ukuran, animasi hover, dan tampilan
   responsive-nya di HP/tablet.
   ============================================================ */
.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  width: 250px;
}
.mcd-menu li {
  position: relative;
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #eee;
}
.mcd-menu li a i {
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
}
.mcd-menu li a p {
  float: left;
  margin: 0;
}
.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}
.mcd-menu li a i,
.mcd-menu li a strong,
.mcd-menu li a small {
  position: relative;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
  opacity: 1;
  -webkit-animation: moveFromTop 300ms ease-in-out;
  -moz-animation: moveFromTop 300ms ease-in-out;
  -ms-animation: moveFromTop 300ms ease-in-out;
  -o-animation: moveFromTop 300ms ease-in-out;
  animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
  opacity: 1;
  -webkit-animation: moveFromLeft 300ms ease-in-out;
  -moz-animation: moveFromLeft 300ms ease-in-out;
  -ms-animation: moveFromLeft 300ms ease-in-out;
  -o-animation: moveFromLeft 300ms ease-in-out;
  animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
  opacity: 1;
  -webkit-animation: moveFromRight 300ms ease-in-out;
  -moz-animation: moveFromRight 300ms ease-in-out;
  -ms-animation: moveFromRight 300ms ease-in-out;
  -o-animation: moveFromRight 300ms ease-in-out;
  animation: moveFromRight 300ms ease-in-out;
}
.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border: 0;
  box-shadow: 0 0 5px #ddd;
  -moz-box-shadow: 0 0 5px #ddd;
  -webkit-box-shadow: 0 0 5px #ddd;
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
@-webkit-keyframes moveFromTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(200%);
    -moz-transform: translateY(200%);
    -ms-transform: translateY(200%);
    -o-transform: translateY(200%);
    transform: translateY(200%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@-webkit-keyframes moveFromLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes moveFromRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(-200%);
    -moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
    transform: translateX(-200%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  z-index: 1000;
  left: 280px;
  top: 0;
  border-left: 4px solid #e67e22;
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  left: 250px;
}
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #eee;
  height: auto;
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0;
  left: 200px;
}
.mcd-menu li a.search {
  padding: 10px 10px 15px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #eee;
  padding: 10px;
  background: #fff;
  outline: none;
  color: #777;
  width: 170px;
  float: left;
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  background: #e67e22;
  outline: none;
  color: #fff;
  margin-left: -4px;
  float: left;
  padding: 10px 10px 11px;
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}
.search-mobile {
  display: none !important;
  background: #e67e22;
  border-left: 1px solid #e67e22;
  border-radius: 0 3px 3px 0;
}
.search-mobile i {
  color: #fff;
  margin: 0 !important;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .mcd-menu {
    margin-left: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .mcd-menu {
    width: 200px;
  }
  .mcd-menu li a {
    height: 30px;
  }
  .mcd-menu li a i {
    font-size: 22px;
  }
  .mcd-menu li a strong {
    font-size: 12px;
  }
  .mcd-menu li a small {
    font-size: 10px;
  }
  .mcd-menu li a.search input {
    width: 120px;
    font-size: 12px;
  }
  .mcd-menu li a.search buton {
    padding: 8px 10px 9px;
  }
  .mcd-menu li > ul {
    min-width: 180px;
  }
  .mcd-menu li:hover > ul {
    min-width: 180px;
    left: 200px;
  }
  .mcd-menu li ul li > ul,
  .mcd-menu li ul li ul li > ul {
    min-width: 150px;
  }
  .mcd-menu li ul li:hover > ul {
    left: 180px;
    min-width: 150px;
  }
  .mcd-menu li ul li ul li:hover > ul {
    left: 150px;
    min-width: 150px;
  }
  .mcd-menu li ul a {
    font-size: 12px;
  }
  .mcd-menu li ul a i {
    font-size: 14px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .mcd-menu {
    width: 50px;
  }
  .mcd-menu li a {
    position: relative;
    padding: 12px 16px;
    height: 20px;
  }
  .mcd-menu li a small {
    display: none;
  }
  .mcd-menu li a strong {
    display: none;
  }
  .mcd-menu li a:hover strong,
  .mcd-menu li a.active strong {
    display: block;
    font-size: 10px;
    padding: 3px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #e67e22;
    color: #fff;
    min-width: 100%;
    text-transform: lowercase;
    font-weight: 400;
    text-align: center;
  }
  .mcd-menu li .search {
    display: none;
  }
  .mcd-menu li > ul {
    min-width: 180px;
    left: 70px;
  }
  .mcd-menu li:hover > ul {
    min-width: 180px;
    left: 50px;
  }
  .mcd-menu li ul li > ul,
  .mcd-menu li ul li ul li > ul {
    min-width: 150px;
  }
  .mcd-menu li ul li:hover > ul {
    left: 180px;
    min-width: 150px;
  }
  .mcd-menu li ul li ul li > ul {
    left: 35px;
    top: 45px;
    border: 0;
    border-top: 4px solid #e67e22;
  }
  .mcd-menu li ul li ul li > ul:before {
    left: 30px;
    top: -9px;
    border: 0;
    border-bottom: 5px solid #e67e22;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  .mcd-menu li ul li ul li:hover > ul {
    left: 30px;
    min-width: 150px;
    top: 35px;
  }
  .mcd-menu li ul a {
    font-size: 12px;
  }
  .mcd-menu li ul a i {
    font-size: 14px;
  }
}
@media only screen and (max-width: 479px) {
  .mcd-menu {
    width: 50px;
  }
  .mcd-menu li a {
    position: relative;
    padding: 12px 16px;
    height: 20px;
  }
  .mcd-menu li a small {
    display: none;
  }
  .mcd-menu li a strong {
    display: none;
  }
  .mcd-menu li a:hover strong,
  .mcd-menu li a.active strong {
    display: block;
    font-size: 10px;
    padding: 3px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #e67e22;
    color: #fff;
    min-width: 100%;
    text-transform: lowercase;
    font-weight: 400;
    text-align: center;
  }
  .mcd-menu li .search {
    display: none;
  }
  .mcd-menu li > ul {
    min-width: 180px;
    left: 70px;
  }
  .mcd-menu li:hover > ul {
    min-width: 180px;
    left: 50px;
  }
  .mcd-menu li ul li > ul,
  .mcd-menu li ul li ul li > ul {
    min-width: 150px;
  }
  .mcd-menu li ul li:hover > ul {
    left: 180px;
    min-width: 150px;
  }
  .mcd-menu li ul li ul li > ul {
    left: 35px;
    top: 45px;
    border: 0;
    border-top: 4px solid #e67e22;
  }
  .mcd-menu li ul li ul li > ul:before {
    left: 30px;
    top: -9px;
    border: 0;
    border-bottom: 5px solid #e67e22;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  .mcd-menu li ul li ul li:hover > ul {
    left: 30px;
    min-width: 150px;
    top: 35px;
  }
  .mcd-menu li ul a {
    font-size: 12px;
  }
  .mcd-menu li ul a i {
    font-size: 14px;
  }
}



/* ============================================================
   8. GAMBAR & DESKRIPSI HALAMAN DEPAN (HOMEPAGE)
   Mengatur posisi gambar sampul jurnal dan teks "tentang jurnal"
   di halaman utama, termasuk tampilannya di HP/tablet
   ============================================================ */
.homepage_image {
    display:inline-block;
    width:28%;
    margin-left:0px;
    float:right;
}

.homepage_image img {
    margin:70px 0px 0px -20px;
    width:300px;
 }

.homepage_about {
    display:inline-block;
    width:70%;
}



.current_issue{
  display:block;
}





@media (max-width: 600px) {
/* For mobile phones: */
  .homepage_about {
    width:100%;
  }
}


@media (max-width: 991px) {
    .homepage_about{
      margin-top:30px;
    }


}


@media (max-width: 360px) {
/* For mobile phones: */
    .homepage_image {
      width:90%;
      margin:0;
    }

        .homepage_about{
      margin-top:0px;
    }
}


/* ============================================================
   9. KOTAK INFO DI SAMPING (SIDEBAR BLOCK)
   Contoh: kotak "Info", "Bahasa", "Kata Kunci" yang biasa muncul
   di sisi kanan/kiri halaman jurnal
   ============================================================ */
.pkp_block {
    padding: 0px 5px 5px 5px;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    border-radius: 2px !important;
    background: white !important;
    box-shadow: 1px 3px 5px #dedede;
    padding: 1px !important;
    margin: 0px 0px 15px !important;
}

.pkp_block .title {
    width: 100%;
    background-color: #5e17eb;
    height: 40px;
    font-size: 14px;
    color: #fff;
    padding-top: 10px;
    margin-bottom: 0px !important;
    border-bottom: 3px solid #7ed957;
    text-transform: uppercase;
    text-align: left;
    padding-left: 10px;
    display: block;
}

.pkp_block .content {
    background-color: #ffffffe
    padding-left: 10px 0;
    margin: 0px;
    display: block;
}

.pkp_block .content ul li {
    padding:2px 0;
    background-color: #ededed;
    padding-left: 10px;
}

.pkp_block li {
    border-radius: 0;
    position: relative;
    background-color: #fff;
    display: block;
}

.pkp_block ul>li a {
    color: #000000;
    padding: 0.5rem 0.5rem;
    display: flex;
}

.pkp_block ul>li a:hover {
    text-decoration: none;
    background-color: #d4a65e;
}
/* ============================================================
   10. DAFTAR TIM REDAKSI / DEWAN EDITORIAL
   Mengatur tata letak foto profil dan keterangan (nama, afiliasi,
   dsb) setiap anggota tim yang ditampilkan sebagai daftar
   ============================================================ */
.editorial-list{
    position: relative; 
}
.editorial-list li{
    margin-bottom: 1.125rem;
}
.editorial-list .img-profile{
    position: absolute;
    width: 95px;
    height: 105px;
    border: 1px solid #ddd;
    padding: .5rem;
}
.editorial-list .img-profile .imgthumb{ 
    width: 80px;
    height: 90px;
    overflow: hidden;
    margin: 0 auto; 
    object-fit: fill;
}
.editorial-list .img-profile img{
    width: 100%;
    height:100%;
}
.team-content{
    margin-left: 100px;
    min-height: 130px;
}
.team-content .ico-label{
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}   
.team-aff ul li{
    margin-bottom: 0;
}
.team-aff ul li .tm_label{
    display: inline-block;
    width: 80px;
}
 
.team-aff ul li .ico-label{
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}

/* ============================================================
   11. HEADER (KOP/BAGIAN ATAS WEBSITE): NAMA JURNAL + MENU UTAMA
   Bagian ini mengatur lebar, warna, dan ukuran huruf pada
   baris menu utama (Beranda, Tentang, Terbitan Terkini, dll)
   ============================================================ */
/* Struktur Header */
  .pkp_site_name_wrapper {
width: 100% !important;
}

.pkp_navigation_primary_row {
  text-align: center;
  background: 60B5FF;
  font-weight: bold;

}


.pkp_site_name {
  margin: 0 !important;
}

.pkp_site_name > a {
  padding-top: 0 !important; 
  padding-bottom: 0 !important;
}

.pkp_site_name_wrapper {
  padding-left: 0 !important; 
  padding-right: 0 !important; 
  margin: 0 !important;
}

/* Ukuran Header */

.pkp_site_name .is_img img {
  max-height: 100% !important; 
  max-width: 100% !important; 
}

/* Settingan Header */

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li {
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  margin: 0 !important; 
  padding: 0 15px !important; 
  line-height: 40px !important; 
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li, .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  font-family:tahoma,geneva,sans-serif; 
  color: #ffffff !important; 
  font-weight: bold !important
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {
  background: #d9d9dc; 
  border-radius:20px; !important; 
  color: #1f2027 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul, .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover {
  border-radius: 0 !important; 
  -webkit-border-radius: 0 !important; 
  -o-border-radius: 0 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul { 
  background: 60B5FF !important
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li { 
  border-bottom: solid 1px rgb(0 0 0) !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:last-child { 
  border-bottom: none !important;
}





/* Gambar latar belakang khusus untuk area header (di belakang logo & menu) */
.pkp_structure_head {
background:url(https://wwpublishinghouse.org/public/site/images/adminjurnal/bg-publishinghouse.png);
}

.pkp_site_nav_toggle{
background-color: 60B5FF
}

.pkp_search.pkp_search_desktop {
  color: #ffffffee;
}

.pkp_search.pkp_search_desktop:hover {
  color: #edeeee;
}

@media (min-width: 992px) {
    .pkp_navigation_primary_row {
        background: #5e17eb;
        padding-left: 2.143rem;
        padding-right: 2.143rem
    }
}

/* ============================================================
   12. BACKGROUND UTAMA HALAMAN (GAMBAR LATAR BELAKANG SELURUH SITUS)
   INI YANG SEBENARNYA TAMPIL, karena letaknya paling bawah/
   paling akhir sehingga menimpa semua pengaturan "background"
   lain di atas untuk body & html.
   - background-position: center  -> gambar diposisikan di tengah
   - background-attachment: fixed -> gambar diam saat halaman di-scroll
   - background-size: cover       -> gambar menutupi seluruh layar
   - background-repeat: no-repeat -> gambar tidak diulang-ulang
   ============================================================ */
html,body {
  height: 0%;
  margin: 0;
  background-image: url(https://publikasi.ahlalkamal.com/public/site/images/adminutama/ahlalkamal-bg1ok.jpg);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}


/* rata kiri kanan abstract */
.obj_article_details .abstract {
    text-align: justify;
}
/* judul artikel detail */
.obj_article_details .page_title {
    color: #033692;
    background: #c0ade736;
    padding: 15px;
    border-radius: 0 0 0 0;
    box-shadow: 5px 5px 5px #5e17eb, 
                -5px -5px 5px #5e17eb;
}


.obj_issue_summary .description p:first-child {
    text-align: justify
}

.obj_issue_summary .description p:last-child {
    text-align: justify
}
.obj_issue_toc .description>*:last-child {
    text-align: justify
}

/* ================================================================
   ================================================================
   13. REDESIGN "KEKINIAN" — TEMA EMERALD & GOLD (GLASSMORPHISM)
   ================================================================
   Mulai dari sini adalah TEMA VISUAL BARU. Semua warna, font,
   bentuk kartu, dan efek kaca (glass) diatur di sini dan sengaja
   diletakkan di baris PALING BAWAH supaya otomatis menang/menimpa
   gaya lama di atas, tanpa perlu menghapus kode lama satu-satu.

   Kalau suatu saat mau balik ke gaya lama: cukup hapus/comment
   seluruh Bagian 13 ini, gaya lama di atas akan aktif lagi.
   ================================================================ */

:root {
  /* --- Palet warna: Emerald (hijau zamrud) + Gold (emas) --- */
  --ek-emerald-900: #0b2e23;   /* hijau tergelap: header, footer */
  --ek-emerald-700: #12503c;   /* hijau utama: tombol, link aktif */
  --ek-emerald-500: #1e8f6b;   /* hijau menengah: hover, ikon */
  --ek-emerald-100: #e6f2ec;   /* hijau sangat muda: tint kartu */
  --ek-gold-500: #c9a227;      /* emas utama: aksen, garis, badge */
  --ek-gold-300: #e7cd84;      /* emas muda: glow, hover lembut */
  --ek-ivory: #f5f7f2;         /* warna dasar latar, krem kehijauan */
  --ek-ink: #16261f;           /* warna teks utama, hijau sangat gelap */
  --ek-ink-muted: #5c6b63;     /* warna teks sekunder/abu-abu hijau */

  /* --- Efek kaca (glassmorphism) --- */
  --ek-glass-bg: rgba(255, 255, 255, 0.55);
  --ek-glass-bg-strong: rgba(255, 255, 255, 0.72);
  --ek-glass-border: rgba(201, 162, 39, 0.35);
  --ek-glass-blur: blur(14px);
  --ek-shadow-glass: 0 10px 34px rgba(11, 46, 35, 0.14), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

  /* --- Bentuk & jarak --- */
  --ek-radius-lg: 22px;
  --ek-radius-md: 14px;
  --ek-radius-sm: 8px;

  /* --- Font --- */
  --ek-font-display: 'Sora', 'Segoe UI', sans-serif;
  --ek-font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --ek-font-mono: 'JetBrains Mono', monospace;
}

/* Menghormati pengguna yang mengaktifkan "reduce motion" di sistemnya,
   supaya animasi/transisi dimatikan untuk kenyamanan mereka */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ----------------------------------------------------------------
   13.1 LATAR BELAKANG SITUS
   Gabungan: lapisan warna gradasi emerald-emas tipis di atas foto
   yang sudah dipasang sebelumnya, supaya foto tidak "polos" dan
   tetap senada dengan tema baru
   ---------------------------------------------------------------- */
html, body {
  background-image:
    linear-gradient(160deg, rgba(11,46,35,0.55) 0%, rgba(11,46,35,0.15) 35%, rgba(245,247,242,0.55) 100%),
    url(https://publikasi.ahlalkamal.com/public/site/images/adminutama/ahlalkamal-bg1ok.jpg) !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  font-family: var(--ek-font-body) !important;
  color: var(--ek-ink) !important;
}

/* Semua judul pakai font display yang modern & geometris */
h1, h2, h3, h4, h5, h6,
.pkp_site_name, .page_title, .obj_article_details .page_title {
  font-family: var(--ek-font-display) !important;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------
   13.2 HEADER: KACA EMBUN (FROSTED GLASS) + AKSEN EMAS
   ---------------------------------------------------------------- */
.pkp_structure_head {
  background: linear-gradient(120deg, var(--ek-emerald-900), var(--ek-emerald-700)) !important;
  border-bottom: 2px solid var(--ek-gold-500);
}

.pkp_site_name_wrapper {
  background: transparent !important;
}

.pkp_site_name, .pkp_site_name > a {
  color: #ffffff !important;
}

/* Menu utama jadi bar kaca yang menempel/sticky, blur di belakangnya */
.pkp_navigation_primary_row {
  background: rgba(11, 46, 35, 0.55) !important;
  backdrop-filter: var(--ek-glass-blur);
  -webkit-backdrop-filter: var(--ek-glass-blur);
  border-top: 1px solid rgba(201, 162, 39, 0.4);
  border-bottom: none !important;
}

@media (min-width: 992px) {
  .pkp_navigation_primary_row {
    background: rgba(11, 46, 35, 0.55) !important;
  }
}

/* Setiap item menu dibuat seperti "pil" dengan transisi halus,
   garis bawah emas muncul saat item di-hover (menandakan lokasi aktif) */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  font-family: var(--ek-font-body) !important;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {
  background: var(--ek-gold-500) !important;
  color: var(--ek-emerald-900) !important;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.45);
}

/* Submenu (dropdown menu utama) jadi panel kaca dengan garis emas tipis di atas */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  background: var(--ek-glass-bg-strong) !important;
  backdrop-filter: var(--ek-glass-blur);
  -webkit-backdrop-filter: var(--ek-glass-blur);
  border-top: 3px solid var(--ek-gold-500) !important;
  border-radius: 0 0 var(--ek-radius-md) var(--ek-radius-md);
  box-shadow: var(--ek-shadow-glass);
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a {
  color: var(--ek-ink) !important;
}

.pkp_search.pkp_search_desktop {
  color: var(--ek-gold-300) !important;
}
.pkp_search.pkp_search_desktop:hover {
  color: #ffffff !important;
}

/* ----------------------------------------------------------------
   13.3 KARTU ARTIKEL (DAFTAR ISI) — KACA + GARIS EMAS DI KIRI
   Setiap artikel tampil seperti kartu kaca melayang, dengan
   garis gradasi emerald->emas di sisi kiri sebagai penanda,
   dan sedikit terangkat (hover lift) saat disorot kursor
   ---------------------------------------------------------------- */
.obj_issue_toc .articles > li {
  background: var(--ek-glass-bg) !important;
  backdrop-filter: var(--ek-glass-blur);
  -webkit-backdrop-filter: var(--ek-glass-blur);
  border: 1px solid var(--ek-glass-border) !important;
  border-left: 5px solid var(--ek-gold-500) !important;
  border-radius: var(--ek-radius-lg) !important;
  box-shadow: var(--ek-shadow-glass);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.obj_issue_toc .articles > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 46, 35, 0.2);
}

/* ----------------------------------------------------------------
   13.4 KOTAK SIDEBAR (INFO, KATA KUNCI, DLL) — KARTU KACA
   ---------------------------------------------------------------- */
.pkp_block {
  background: var(--ek-glass-bg) !important;
  backdrop-filter: var(--ek-glass-blur);
  -webkit-backdrop-filter: var(--ek-glass-blur);
  border: 1px solid var(--ek-glass-border) !important;
  border-radius: var(--ek-radius-md) !important;
  box-shadow: var(--ek-shadow-glass);
}

.pkp_block .title {
  background: linear-gradient(100deg, var(--ek-emerald-700), var(--ek-emerald-500)) !important;
  border-bottom: 3px solid var(--ek-gold-500) !important;
  border-radius: var(--ek-radius-md) var(--ek-radius-md) 0 0 !important;
  font-family: var(--ek-font-display) !important;
  letter-spacing: 0.04em;
}

.pkp_block .content,
.pkp_block .content ul li,
.pkp_block li {
  background: transparent !important;
}

.pkp_block ul > li a:hover {
  background: var(--ek-emerald-100) !important;
  color: var(--ek-emerald-900) !important;
}

/* Judul halaman detail artikel: kartu kaca elegan dengan garis emas */
.obj_article_details .page_title {
  background: var(--ek-glass-bg-strong) !important;
  border: 1px solid var(--ek-glass-border);
  border-left: 5px solid var(--ek-gold-500) !important;
  box-shadow: var(--ek-shadow-glass) !important;
  border-radius: var(--ek-radius-md) !important;
  color: var(--ek-emerald-900) !important;
}

/* ----------------------------------------------------------------
   13.5 TIM REDAKSI / DEWAN EDITORIAL — BINGKAI FOTO "MEDALI EMAS"
   ---------------------------------------------------------------- */
.editorial-list .img-profile {
  border: 2px solid var(--ek-gold-500) !important;
  border-radius: var(--ek-radius-sm);
  background: var(--ek-glass-bg-strong);
  box-shadow: 0 6px 16px rgba(11, 46, 35, 0.15);
}

.editorial-list .img-profile .imgthumb {
  border-radius: 6px;
}

/* ----------------------------------------------------------------
   13.6 FOOTER — GRADASI EMERALD GELAP DENGAN GARIS EMAS TIPIS
   ---------------------------------------------------------------- */
.pkp_structure_footer_wrapper {
  background: linear-gradient(160deg, var(--ek-emerald-900), #071a14) !important;
  border-top: 2px solid var(--ek-gold-500) !important;
  border-bottom: none !important;
  color: #d9e6df !important;
}

.pkp_structure_footer_wrapper a {
  color: var(--ek-gold-300) !important;
}

/* ----------------------------------------------------------------
   13.7 SENTUHAN KEKINIAN LAIN: SCROLLBAR & SELEKSI TEKS
   ---------------------------------------------------------------- */
::selection {
  background: var(--ek-gold-300);
  color: var(--ek-emerald-900);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ek-ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--ek-emerald-500);
  border-radius: 999px;
  border: 2px solid var(--ek-ivory);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ek-gold-500);
}


/* ================================================================
   13.8 TAMPILAN MOBILE / RESPONSIVE UNTUK TEMA BARU
   Semua penyesuaian di bawah ini KHUSUS untuk layar kecil (HP/tablet),
   supaya tema kaca (glass) tetap enak dilihat & tidak berat/nge-lag,
   karena efek blur & background gambar diam (fixed) sering bermasalah
   di HP (apalagi iPhone/Safari).
   ================================================================ */

/* Tablet & HP: layar 991px ke bawah (menu utama biasanya sudah
   berubah jadi menu hamburger/toggle di OJS) */
@media (max-width: 991px) {
  /* Background foto: di HP diganti "scroll" (bukan "fixed") karena
     background fixed sering menyebabkan lag/blank saat di-scroll
     di HP, terutama iPhone */
  html, body {
    background-attachment: scroll, scroll !important;
  }

  /* Menu utama: blur kaca diringankan supaya HP low-end tidak lag,
     warna dibuat solid/pekat supaya teks menu tetap kebaca jelas */
  .pkp_navigation_primary_row {
    background: var(--ek-emerald-900) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Tombol toggle (hamburger) menu diberi warna senada tema */
  .pkp_site_nav_toggle {
    background-color: var(--ek-emerald-700) !important;
    color: #ffffff !important;
  }

  /* Logo jurnal disesuaikan agar tidak memenuhi layar kecil */
  .pkp_site_name .is_img img {
    max-height: 90px !important;
  }
}

/* HP (lebar layar 768px ke bawah) */
@media (max-width: 768px) {
  /* Kartu artikel: sudut & jarak dikecilkan, blur diringankan
     supaya tetap ringan & enak disentuh (tombol/link lebih lega) */
  .obj_issue_toc .articles > li {
    border-radius: var(--ek-radius-md) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.85rem !important;
  }

  /* Efek "terangkat saat hover" dimatikan di HP, karena di layar
     sentuh efek hover tidak relevan (malah kadang nyangkut/aneh) */
  .obj_issue_toc .articles > li:hover {
    transform: none;
  }

  /* Kotak sidebar: blur diringankan juga */
  .pkp_block {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Judul artikel detail: ukuran font & padding menyesuaikan layar kecil */
  .obj_article_details .page_title {
    padding: 12px !important;
    font-size: 1.05rem;
  }

  /* Foto profil tim redaksi dibuat proporsional di layar sempit,
     supaya tidak keluar dari kartunya */
  .editorial-list .img-profile {
    width: 78px;
    height: 88px;
  }
  .team-content {
    margin-left: 88px;
  }
}

/* HP kecil (lebar layar 480px ke bawah) */
@media (max-width: 480px) {
  /* Jarak antar kartu artikel dirapatkan supaya lebih banyak
     konten yang muat tanpa perlu scroll berlebihan */
  .obj_issue_toc .articles > li {
    border-left-width: 4px !important;
    padding: 0.7rem !important;
  }

  /* Menu utama: ukuran huruf sedikit dikecilkan supaya tidak
     terpotong/bertumpuk di layar sempit */
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
    font-size: 0.85rem !important;
    padding: 0 10px !important;
  }

  /* Kotak sidebar: judul kotak dikecilkan hurufnya */
  .pkp_block .title {
    font-size: 12px;
  }
}

/* Sentuhan tambahan: pastikan semua gambar & video di dalam
   konten artikel tidak melebar keluar layar HP (anti "geser ke samping") */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ================================================================
   FIX HEADER FULL WIDTH (MENUTUPI MASALAH HEADER TERPOTONG)
   ================================================================ */

/* 1. Paksa kontainer logo & header menjadi lebar 100% */
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 2. Paksa gambar header/logo agar memenuhi lebar wadah di semua ukuran layar */
.pkp_site_name .is_img img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important; /* Menghapus batasan 90px / 200px dari CSS lama */
  object-fit: contain !important;
  display: block !important;
}

/* 3. Penyesuaian khusus tampilan mobile */
@media (max-width: 991px) {
  .pkp_site_name .is_img img {
    max-height: none !important; /* Menimpa aturan max-height: 90px !important */
    width: 100% !important;
  }
}