/* 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: #fa6917; /* Warna teks saat hover */
}

/* Header dengan degradasi warna hijau */
.pkp_structure_head, .site-header {
    background: linear-gradient(to right, #AA08C5, #b432c9, #d677e6);
    border-bottom: 2px solid #66cc66;
    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 hijau */
.pkp_footer {
    display: flex; /* Aktifkan Flexbox */
    background: linear-gradient(to right, #AA08C5, #b432c9, #d677e6);
    color: white;
    padding: 20px; /* Tambahkan ruang di dalam footer */
    border-top: 2px solid #66cc66;
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi lebar */
}

/* Konten kiri footer */
.pkp_footer_content {
    background: linear-gradient(to right, #AA08C5, #b432c9, #d677e6);
    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, #AA08C5, #b432c9, #d677e6);
    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: #fa6917; */
    color: linear-gradient(to right, #AA08C5, #b432c9, #d677e6);
}

a:hover {
    /* color: #fac817; */
    color: linear-gradient(to right, #AA08C5, #b432c9, #d677e6);
}

/* Responsivitas untuk layar kecil */
@media (max-width: 768px) {
    .pkp_structure_content {
        flex-direction: column; /* Ubah elemen menjadi vertikal */
    }
    .homepage_image, .pkp_structure_sidebar {
        flex: 0 0 100%; /* Elemen menjadi penuh lebar */
        max-width: 100%; /* Maksimal 100% lebar */
    }
    .pkp_footer {
        flex-direction: column; /* Pada perangkat kecil, footer menjadi vertikal */
        text-align: center;
    }
}


/* Container Artikel */
.obj_article_summary {
    background-color: #f0fff0; /* Latar belakang hijau muda */
    border: 1px solid #99cc99; /* Border hijau soft */
    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 */
}

/* Efek hover pada artikel */
.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 */
}

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

.obj_article_summary .title:hover {
    color: #006600; /* Warna hijau lebih cerah saat hover */
}

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

/* Tombol PDF */
.obj_article_summary .pdf-link {
    display: inline-block;
    background-color: #004d00; /* Warna hijau 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: #006600; /* Warna hijau lebih terang saat hover */
}

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

/* detail artikel */
/* Kontainer utama untuk detail artikel dan tombol PDF */
.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 */
}

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

/* Tombol Download PDF dan metadata */
.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 */
}

/* Tombol PDF */
.obj_article_details .entry_details .obj_galley_link.pdf {
    display: inline-block;
    background-color: #004d00; /* Warna hijau 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: #006600; /* Warna hijau lebih terang saat hover */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); /* Bayangan lebih gelap saat hover */
}

/* Gaya untuk page_title dengan warna degradasi hijau */
.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, #AA08C5, #b432c9, #d677e6);
    -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 untuk layar kecil */
@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;
    }
}

/* Struktur utama pada halaman artikel detail */
.pkp_page_article .pkp_structure_content {
    display: flex; /* Gunakan Flexbox */
    flex-direction: row; /* Elemen disusun horizontal */
    justify-content: space-between; /* Jarak merata di antara elemen */
    align-items: flex-start; /* Rata atas elemen */
    gap: 15px; /* Jarak antara sidebar dan konten utama */
    margin: 0 auto; /* Pusatkan seluruh konten */
    max-width: 1200px; /* Batasi lebar konten */
    box-sizing: border-box; /* Padding tidak memengaruhi lebar total */
}

/* Sidebar (Main Menu) */
.pkp_page_article .pkp_structure_sidebar {
    flex: 0 0 300px; /* Sidebar memiliki lebar tetap */
    max-width: 300px; /* Maksimal lebar sidebar */
    padding: 10px; /* Padding internal untuk sidebar */
    margin: 0; /* Hapus margin tambahan */
    box-sizing: border-box; /* Pastikan padding termasuk dalam total lebar */
    background-color: #ffffff; /* Latar belakang putih */
}

/* Konten utama */
.pkp_page_article .pkp_structure_main {
    flex: 1; /* Konten utama menyesuaikan ruang yang tersisa */
    padding: 10px; /* Jarak internal untuk konten */
    margin: 0; /* Hapus margin */
    box-sizing: border-box; /* Pastikan padding termasuk dalam total lebar */
}

/* Atur ulang menu sidebar */
.pkp_page_article .pkp_structure_sidebar ul {
    list-style: none; /* Hapus bullet pada menu */
    padding: 0; /* Hapus padding internal */
    margin: 0; /* Hapus margin */
}

.pkp_page_article .pkp_structure_sidebar ul li {
    margin-bottom: 10px; /* Tambahkan jarak antar item menu */
}

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

    .pkp_page_article .pkp_structure_sidebar,
    .pkp_page_article .pkp_structure_main {
        flex: 0 0 100%; /* Lebar penuh untuk elemen */
        max-width: 100%; /* Maksimal lebar penuh */
        padding: 10px; /* Padding untuk jarak internal */
    }
}