/* === 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; /* jaga proporsi gambar */
    transform: none !important;     /* jangan keluar container */
}

/* === 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;  /* batasi lebar maksimal gambar */
  width: 100% !important;       /* tetap responsif */
  height: auto !important;      /* jaga proporsi gambar */
  display: block !important;
  float: left !important;       /* gambar di sisi kiri teks */
  margin: 10px 20px 10px 20px !important; /* atas, kanan, bawah, kiri */
}

.pkp_structure_main p {
  text-align: justify !important;  /* teks rata kiri dan kanan */
  line-height: 1.6 !important;     /* jarak antarbaris agar mudah dibaca */
}

/* ========================================================= */
/* === 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;
}