/* === Warna utama header dan navigasi === */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_site_nav_menu,
.pkp_navigation_primary_wrapper {
    background-color: #015d6c !important;
}

/* === Kolom pencarian ikut warna sama === */
.pkp_search {
    background-color: #015d6c !important;
}

/* === Input kolom pencarian menyatu dengan header === */
.pkp_search input[type="text"] {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.pkp_search input[type="text"]::placeholder {
    color: #cce7ec !important;
}

/* === Tombol / ikon kaca pembesar === */
.pkp_search button,
.pkp_search .fa,
.pkp_search i {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}
.pkp_search input[type="text"]:focus,
.pkp_search button:hover {
    color: #aee6f2 !important;
    outline: none !important;
}

/* ========================================================= */
/* === KONTROL TINGGI HEADER (ini bagian penting) === */
/* ========================================================= */

/* Ubah nilai height di sini untuk kontrol tinggi header */
/* === Batasi area logo agar header tidak melebar === */
.pkp_head_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 5px !important;  /* ruang atas-bawah kecil saja */
    min-height: 100px !important;   /* jangan terlalu besar */
    overflow: visible !important;   /* izinkan logo keluar area header */
}

/* ========================================================= */
/* === KONTROL UKURAN DAN POSISI LOGO === */
/* ========================================================= */
.pkp_site_name img {
    width: 100% !important;   /* isi penuh container */
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* ========================================================= */
/* === ANIMASI LOGO JURNAL BERPUTAR 3D ELEGAN === */
/* ========================================================= */
.pkp_site_name img,
.pkp_brand img,
.pkp_structure_head img {
    animation: spinLogo3D 14s ease-in-out infinite !important;
    transform-origin: center !important;
    display: inline-block !important;
    perspective: 800px !important;           /* memberi kedalaman 3D */
    backface-visibility: hidden !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important; /* efek cahaya halus */
    transition: transform 0.3s ease-in-out !important;
}

/* === Efek berhenti halus saat kursor diarahkan === */
.pkp_site_name img:hover,
.pkp_brand img:hover,
.pkp_structure_head img:hover {
    animation-play-state: paused !important;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) !important; /* glow lembut */
    transform: scale(1.08) rotateY(0deg) rotateX(0deg) !important; /* sedikit membesar */
}
/* === Efek berputar 3D lembut dan berulang === */
@keyframes spinLogo3D {
    0% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
    }
    25% {
        transform: rotateY(180deg) rotateX(5deg) scale(1.05);
    }
    50% {
        transform: rotateY(360deg) rotateX(0deg) scale(1);
    }
    75% {
        transform: rotateY(540deg) rotateX(-5deg) scale(1.05);
    }
    100% {
        transform: rotateY(720deg) rotateX(0deg) scale(1);
    }
}

/* === Container Logo === */
.pkp_site_name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* logo di tengah container */
    background-color: transparent !important; /* tidak mengubah warna header */
    width: 100% !important;       /* agar mengikuti lebar header */
    max-width: 480px !important;  /* sesuaikan dengan lebar logo asli */
    height: 200px !important;     /* tinggi kontainer logo */
    overflow: hidden !important;  /* agar logo tidak keluar */
    margin: 0 auto !important;    /* posisikan di tengah header */
    padding: 10px !important;
}

/* Logo di kiri saat desktop */
@media (min-width: 990px) {
    .pkp_site_name {
        justify-content: flex-start !important;
        padding-left: 30px !important;
    }

}
/* === Pastikan struktur header vertikal (atas: logo, bawah: menu) === */
.pkp_structure_head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;   /* menu tetap lebar penuh, tidak ke tengah */
    justify-content: flex-start !important;
}

/* === Agar menu dan pencarian tetap sejajar rapi di samping === */
.pkp_navigation_primary_wrapper,
.pkp_navigation_user {
    align-self: center !important;
}
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important; /* menu di kiri */
    background: transparent !important;
}

/* ========================================================= */
/* === PENYESUAIAN UNTUK TAMPILAN HP / MOBILE === */
/* ========================================================= */
@media (max-width: 768px) {

    /* Header tetap rapi */
    .pkp_head_wrapper {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 80px !important;
        padding: 5px 10px !important;
        overflow: visible !important;
    }

    /* Kontainer logo */
    .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        justify-content: center !important;
        padding: 5px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* === LOGO === */
    .pkp_site_name img {
        width: auto !important;
        height: 80px !important;
        max-width: 90% !important;
        position: relative !important; /* pastikan bisa digeser */
        top: -62px !important;         /* naikkan logo */
        left: -30px !important;
        margin: 0 auto !important;
        display: block !important;     /* agar center */
        transform: none !important;
        z-index: 10 !important;        /* agar tidak tertutup elemen lain */
    }

    /* Menu di bawah logo */
    .pkp_navigation_primary_wrapper {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        background: transparent !important;
    }
}
/* ========================================================= */
/* === BATAS GAMBAR DI STRUKTUR BODY / HALAMAN UTAMA === */
/* ========================================================= */
.pkp_structure_main img {
  max-width: 300px !important;  /* ukuran default untuk laptop */
  width: 100% !important;
  height: auto !important;
  display: block !important;
  float: left !important;
  margin: 10px 20px 10px 10px !important;
}

.pkp_structure_main p {
  text-align: justify !important;
  line-height: 1.6 !important;
}
/* ========================================================= */
/* === COVER "TENTANG JURNAL" — TAMPILAN HP SAJA === */
/* ========================================================= */
@media (max-width: 768px) {

  /* === BAGIAN COVER === */
  .pkp_structure_main img {
    max-width: 155px !important;   /* ✅ UKURAN COVER — ubah ini kalau ingin lebih besar/kecil */
    height: auto !important;
    margin: 5px 12px 10px 5px !important; /* ✅ jarak luar: atas, kanan, bawah, kiri */
    border-radius: 6px !important; /* sudut melengkung */
  }

  /* === BAGIAN PEMBUNGKUS COVER + TEKS === */
  .pkp_structure_main {
    display: flex !important;            /* ✅ membuat cover dan teks sejajar (horizontal) */
    align-items: flex-start !important;  /* sejajarkan ke atas */
    flex-wrap: nowrap !important;        /* cegah teks turun ke bawah */
  }

  /* === BAGIAN TEKS DI SAMPING KANAN COVER === */
  .pkp_structure_main p {
    flex: 1 !important;                  /* ✅ teks otomatis di kanan gambar */
    text-align: justify !important;      /* teks rapi kiri-kanan */
    line-height: 1.6 !important;
    font-size: 15px !important;
    margin: 0 !important;                /* hapus jarak tambahan */
  }
}

/* ========================================================= */
/* === PERBAIKAN COVER TERBITAN TERKINI (TAMPILAN HP) === */
/* ========================================================= */
@media (max-width: 768px) {
  .obj_issue_toc img {
    max-width: 120px !important;   /* atur ukuran cover di HP */
    height: auto !important;
    float: left !important;        /* posisikan di kiri */
    margin: 5px 15px 10px 10px !important; /* jarak teks dari cover */
    border-radius: 6px !important; /* sedikit melengkung, biar halus */
  }

  .obj_issue_toc h2,
  .obj_issue_toc h3,
  .obj_issue_toc p {
    text-align: justify !important;
    line-height: 1.6 !important;
    margin-top: 5px !important;
  }
}

  /* === Judul dan teks keterangan === */
  .obj_issue_toc h2,
  .obj_issue_toc h3,
  .pkp_structure_main p {
    text-align: justify !important; /* teks rata kiri dan kanan */
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 8px 12px !important;   /* jarak kanan-kiri agar tidak mepet */
  }

  /* === Label seperti "Title", "ISSN", "DOI" === */
  .pkp_structure_main strong {
    display: inline-block !important;
    min-width: 85px !important; /* agar sejajar */
    color: #015d6c !important;  /* warna senada header */
  }

  /* === Link dan teks penting === */
  .pkp_structure_main a {
    word-break: break-word !important; /* biar URL panjang tidak keluar layar */
    color: #005c72 !important;
  }

/* ========================================================= */
/* === TABEL LOGO INDEKSASI (AGAR UKURAN LOGO TIDAK BERUBAH) === */
/* ========================================================= */
table.index-logos {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-bottom: 10px;
}

table.index-logos td {
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

table.index-logos img {
  width: 140px !important;
  height: 60px !important;        /* tinggi seragam */
  object-fit: contain !important; /* gambar tetap proporsional */
  padding: 10px !important;       /* beri jarak dari tepi */
  display: inline-block !important; /* pastikan logo bisa ditengah */
  background-color: #fff !important;
  border: none !important;
}
  transition: transform 0.3s ease; /* efek halus saat hover */

/* === Efek hover ringan (opsional, agar terlihat elegan) === */
table.index-logos img:hover {
  transform: scale(1.1);  /* sedikit membesar saat disentuh */
}

/* ========================================================= */
/* === TAMPILAN UNTUK HP / LAYAR KECIL === */
/* ========================================================= */
@media (max-width: 750px) {

  table.index-logos {
    border-spacing: 0 5px;
  }

  table.index-logos td {
    width: 50% !important;     /* 2 logo per baris di HP */
    display: inline-block !important;
    box-sizing: border-box;
  }

  table.index-logos img {
    width: 70px !important;   /* sedikit lebih besar agar jelas di HP */
    max-width: 70px !important;
  }
}

/* === FOOTER PENERBIT FULL LEBAR & POSISI TETAP === */
.footer-penerbit-wrapper {
  background-color: #015d6c !important; /* warna latar */
  width: 100vw !important; /* penuh kiri-kanan */
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 15px 60px !important; /* jarak kanan-kiri agar teks tidak mepet */
  text-align: left !important; /* posisi teks tetap seperti semula */
  box-sizing: border-box !important; /* supaya padding tidak ganggu lebar */
}

/* === WARNA TEKS & LINK === */
.footer-penerbit-wrapper p,
.footer-penerbit-wrapper a,
.footer-penerbit-wrapper strong {
  color: #ffffff !important; /* teks putih */
}

/* === HOVER LINK === */
.footer-penerbit-wrapper a:hover {
  text-decoration: underline;
}
/* ========================================================= */
/* === WRAPPER LISENSI: SUSUN KE BAWAH === */
/* ========================================================= */
.item.license,
.item.copyright {
    text-align: center !important;   /* pusatkan isi */
}

/* ========================================================= */
/* === LOGO DI TENGAH === */
/* ========================================================= */
.item.license img,
.item.copyright img {
    display: block !important;
    margin: 0 auto 7px auto !important;
    max-width: 130px !important;
    height: auto !important;
}

/* ========================================================= */
/* === TEKS DI BAWAH LOGO, RATA KIRI === */
/* ========================================================= */
.item.license p,
.item.copyright p {
    display: block !important;
    text-align: left !important;
    line-height: 1.4 !important;
    margin: 0 auto !important;
    max-width: 2500px; /* opsional: biar rapi */
}

@media (max-width: 750px) {
    .item.license p {
        text-align: left !important;
    }
}