/* Background umum */
html, body {
    background-image: url("https://img.freepik.com/free-vector/seamless-tiled-decorative-pattern-design_1048-12401.jpg");
    margin: 0;
    padding: 0;
    background-color: transparent; /* Pastikan latar belakang transparan */
}

/* Kontainer utama dengan Flexbox */
.pkp_structure_content {
    display: flex; /* Gunakan Flexbox untuk tata letak horizontal */
    flex-wrap: nowrap; /* Sidebar tetap berada di samping */
    align-items: flex-start; /* Sejajarkan elemen di bagian atas */
    gap: 20px; /* Tambahkan jarak antara banner dan sidebar */
    margin: 0 auto; /* Pusatkan kontainer */
    max-width: 1200px; /* Batas lebar kontainer */
    padding: 0; /* Hapus padding untuk kontainer utama */
    background: #ffffff; /* Warna latar belakang untuk konten utama */
}

/* Banner utama (Homepage Image) */
.homepage_image {
    flex: 1; /* Banner mengambil ruang yang tersedia */
    display: block;
    margin: 0; /* Hapus margin default */
}

.pkp_site_name .is_img img {
	display: inline-block;
	max-height: 165px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Sidebar (Menu tambahan dari Block Manager) */
.pkp_structure_sidebar {
    flex: 0 0 25%; /* Sidebar mengambil 25% dari lebar */
    max-width: 25%; /* Maksimal lebar sidebar adalah 25% */
    padding: 0; /* Hapus padding untuk penggunaan penuh */
    background-color: transparent; /* Tidak ada warna latar belakang */
    border: none; /* Hapus border */
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi ukuran */
    margin-top: 0; /* Pastikan posisi sejajar dengan atas */
}

/* Gaya untuk daftar menu Block Manager */
.pkp_structure_sidebar ul {
    list-style: none; /* Hapus bullet list */
    padding: 0;
    margin: 0;
}

.pkp_structure_sidebar ul li {
    margin-bottom: 0; /* Hapus jarak antar item */
}

.pkp_structure_sidebar ul li a {
    display: block;
    color: #333; /* Warna teks default */
    text-decoration: none; /* Hapus garis bawah */
    padding: 10px;
    text-align: left; /* Teks rata kiri */
    font-weight: bold;
}

.pkp_structure_sidebar ul li a:hover {
    color: #015256; /* Warna teks saat hover */
}

/* Header dengan degradasi warna */
.pkp_structure_head, .site-header {
    background: linear-gradient(to right, #013c3c, #015256, #017a7a); /* Degradasi warna utama */
    border-bottom: 2px solid #015256;
    color: white;
    padding: 10px 20px;
    max-width: 1200px; /* Batasi header ke area tengah */
    margin: 0 auto; /* Pusatkan header */
    border-radius: 5px; /* Tambahkan sudut melengkung */
    position: relative; /* Atur layering */
    z-index: 2; /* Prioritaskan lapisan header */
}

/* Menambahkan jarak di bawah header untuk elemen berikutnya */
.pkp_structure_head + .pkp_structure_content {
    margin-top: 0; /* Hapus jarak tambahan */
    padding-top: 33px; /* Pastikan konten dimulai dengan jarak cukup */
}

/* Footer dengan degradasi warna */
.pkp_footer {
    display: flex; /* Aktifkan Flexbox */
    background: linear-gradient(to right, #017a7a, #015256, #013c3c); /* Degradasi warna utama */
    color: white;
    padding: 20px; /* Tambahkan ruang di dalam footer */
    border-top: 2px solid #015256;
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi lebar */
}

/* Konten kiri footer */
.pkp_footer_content {
    background: linear-gradient(to right, #017a7a, #015256, #013c3c); /* Degradasi warna utama */
    flex: 7; /* Gunakan rasio 7 untuk 70% */
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left; /* Teks rata kiri */
    font-weight: bold;
    font-size: 14px;
}

/* Konten kanan footer */
.pkp_brand_footer {
    background: linear-gradient(to right, #017a7a, #015256, #013c3c); /* Degradasi warna utama */
    flex: 3; /* Gunakan rasio 3 untuk 30% */
    text-align: right; /* Teks rata kanan */
    font-size: 14px;
    display: flex;
    align-items: center; /* Selaraskan teks secara vertikal */
    justify-content: center; /* Selaraskan konten di tengah */
    padding: 10px; /* Opsional: ruang tambahan di kanan */
}

/* Warna link */
a {
    color: #015256; /* Warna utama */
}

a:hover {
    color: #013c3c; /* Warna lebih gelap */
}

/* Daftar Artikel */
.obj_article_summary {
    background-color: #e5f6f5; /* Latar belakang biru kehijauan muda */
    border: 1px solid #015256; /* Border warna utama */
    border-radius: 8px; /* Sudut melengkung */
    padding: 15px; /* Spasi di dalam box */
    margin-bottom: 20px; /* Jarak antar artikel */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan ringan */
    transition: transform 0.2s, box-shadow 0.2s; /* Animasi saat hover */
}

.obj_article_summary:hover {
    transform: translateY(-5px); /* Artikel naik sedikit saat hover */
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.15); /* Bayangan lebih gelap saat hover */
}

.obj_article_summary .title {
    font-size: 18px; /* Ukuran font untuk judul */
    font-weight: bold; /* Huruf tebal */
    color: #015256; /* Warna utama */
    margin-bottom: 10px; /* Jarak bawah */
    text-decoration: none; /* Hapus garis bawah pada tautan */
}

.obj_article_summary .title:hover {
    color: #013c3c; /* Warna lebih gelap saat hover */
}

.obj_article_summary .authors {
    font-size: 14px;
    font-weight: normal;
    color: #555555; /* Warna abu-abu untuk penulis */
    margin-bottom: 10px;
}

.obj_article_summary .pdf-link {
    display: inline-block;
    background-color: #015256; /* Warna utama untuk tombol */
    color: #ffffff; /* Warna teks putih */
    padding: 8px 12px; /* Padding dalam tombol */
    border-radius: 4px; /* Sudut melengkung */
    text-decoration: none; /* Hapus garis bawah */
    font-size: 14px;
    font-weight: bold;
}

.obj_article_summary .pdf-link:hover {
    background-color: #013c3c; /* Warna lebih gelap saat hover */
}

.obj_article_summary .info {
    font-size: 12px;
    color: #777777; /* Warna abu-abu muda */
    margin-top: 10px;
}

/* Detail Artikel */
.obj_article_details .row {
    display: flex; /* Menggunakan Flexbox untuk tata letak horizontal */
    flex-direction: row; /* Mengatur elemen dalam satu baris */
    justify-content: space-between; /* Memberi jarak di antara elemen */
    align-items: flex-start; /* Rata atas untuk elemen */
    gap: 20px; /* Jarak antar elemen */
}

.obj_article_details .main_entry {
    flex: 3; /* Area detail mengambil lebih banyak ruang */
}

.obj_article_details .entry_details {
    flex: 1; /* Area tombol mengambil ruang lebih kecil */
    max-width: 250px; /* Lebar maksimal untuk tombol dan metadata */
    text-align: center; /* Rata tengah konten di dalamnya */
}

.obj_article_details .entry_details .obj_galley_link.pdf {
    display: inline-block;
    background-color: #015256; /* Warna utama untuk tombol */
    color: #ffffff; /* Warna teks putih */
    padding: 10px 15px; /* Padding dalam tombol */
    border-radius: 4px; /* Sudut melengkung */
    text-decoration: none; /* Hapus garis bawah */
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px; /* Jarak atas dengan elemen lain */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
}

.obj_article_details .entry_details .obj_galley_link.pdf:hover {
    background-color: #013c3c; /* Warna lebih gelap saat hover */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); /* Bayangan lebih gelap saat hover */
}

.obj_article_details .page_title {
    font-size: 24px; /* Ukuran font untuk judul */
    font-weight: bold; /* Huruf tebal */
    text-align: center; /* Rata tengah */
    background: linear-gradient(to right, #013c3c, #015256, #017a7a); /* Degradasi warna utama */
    -webkit-background-clip: text; /* Klip latar belakang ke teks (untuk browser berbasis Webkit) */
    -webkit-text-fill-color: transparent; /* Isi teks transparan */
    color: transparent; /* Isi teks transparan untuk browser lainnya */
    margin-bottom: 20px; /* Jarak bawah dari elemen lain */
    padding: 10px; /* Tambahkan sedikit ruang di sekitar teks */
}

/* Responsivitas */
@media (max-width: 768px) {
    .obj_article_details .row {
        flex-direction: column; /* Susun vertikal untuk layar kecil */
        gap: 10px; /* Kurangi jarak antar elemen */
    }

    .obj_article_details .entry_details {
        max-width: 100%; /* Lebar penuh pada layar kecil */
        text-align: center;
    }
}