/* 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 biru */
.pkp_structure_head, .site-header {
    background: linear-gradient(to right, #1e3c72, #2a5298, #00c6ff); /* Biru gelap ke biru cerah */
    border-bottom: 2px solid #2a5298;
    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 layout kanan-kiri */
.pkp_footer {
    display: flex; /* Aktifkan Flexbox */
    background: linear-gradient(to right, #fac817, #fa6917); /* Degradasi horizontal */
    color: white;
    padding: 20px; /* Tambahkan ruang di dalam footer */
    border-top: 2px solid #fa6917;
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi lebar */
}

/* Footer dengan degradasi warna biru */
.pkp_footer {
    display: flex; /* Aktifkan Flexbox */
    background: linear-gradient(to right, #00c6ff, #2a5298, #1e3c72); /* Biru cerah ke biru gelap */
    color: white;
    padding: 20px; /* Tambahkan ruang di dalam footer */
    border-top: 2px solid #2a5298;
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi lebar */
}

/* Konten kiri footer */
.pkp_footer_content {
    background: linear-gradient(to right, #00c6ff, #2a5298, #1e3c72); /* Biru cerah ke biru gelap */
    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, #00c6ff, #2a5298, #1e3c72); /* Biru cerah ke biru gelap */
    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, #00c6ff, #2a5298, #1e3c72); /* Biru cerah ke biru gelap */
}

a:hover {
    /* color: #fac817; */
    color: linear-gradient(to right, #00c6ff, #2a5298, #1e3c72); /* Biru cerah ke biru gelap */
}

/* 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: #ffffff; /* Latar belakang putih */
    border: 1px solid #e0e0e0; /* Border abu-abu muda */
    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: #004080; /* Warna biru */
    margin-bottom: 10px; /* Jarak bawah */
    text-decoration: none; /* Hapus garis bawah pada tautan */
}

.obj_article_summary .title:hover {
    color: #0066cc; /* Warna biru 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: #004080; /* Warna biru 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: #0066cc; /* Warna biru lebih terang saat hover */
}

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