/* 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; /* Jangan membungkus elemen */
    align-items: flex-start; /* Elemen sejajar di bagian atas */
    gap: 20px; /* Tambahkan jarak antar elemen */
    margin: 0 auto; /* Pusatkan kontainer */
    max-width: 1200px; /* Batas lebar kontainer */
    padding: 20px; /* Tambahkan padding */
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi ukuran */
    background: #ffffff; /* Warna latar belakang konten utama */
}

/* Konten Utama */
.pkp_structure_main {
    flex: 1; /* Isi konten utama memanfaatkan sisa ruang */
    max-width: 70%; /* Maksimal lebar konten utama */
    padding: 20px; /* Tambahkan padding untuk kenyamanan */
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi ukuran */
    background-color: #ffffff; /* Warna latar konten utama */
}

/* Elemen Entry Details (Info Artikel) */
.entry_details {
    flex: 0 0 20%; /* Entry details mengambil 20% lebar */
    max-width: 30%; /* Batas maksimal lebar entry details */
    padding: 20px; /* Tambahkan padding untuk estetika */
    background-color: #f8f8f8; /* Warna latar untuk entry details */
    border-left: 1px solid #ddd; /* Tambahkan garis pemisah */
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi ukuran */
}

/* Sidebar */
.pkp_structure_sidebar {
    flex: 0 0 25%; /* Sidebar mengambil 25% dari lebar */
    max-width: 25%; /* Maksimal lebar sidebar */
    padding: 10px; /* Tambahkan padding */
    background-color: transparent; /* Tidak ada warna latar belakang */
    border: none; /* Hapus border */
    box-sizing: border-box;
}

/* Tombol Submit di Sidebar */
.pkp_structure_sidebar .submit-button {
    display: block;
    margin: 20px auto; /* Tengah-kan elemen tombol */
    text-align: center; /* Teks rata tengah */
}

.pkp_structure_sidebar .submit-button img {
    width: 100%; /* Gambar responsif */
    max-width: 200px; /* Batas maksimal lebar tombol */
    height: auto; /* Pertahankan proporsi gambar */
}

/* Banner Utama */
.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;
}

/* Header dengan Degradasi Warna Gold */
.pkp_structure_head, .site-header {
    background: linear-gradient(to left, #fac817, #fa6917) !important;
    border-bottom: 2px solid #fa6917;
    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 */
.pkp_structure_head + .pkp_structure_content {
    margin-top: 0; /* Hapus jarak tambahan */
    padding-top: 33px; /* Pastikan konten dimulai dengan jarak cukup */
}

/* Footer */
.pkp_footer {
    display: flex; /* Aktifkan Flexbox */
    justify-content: space-between; /* Sebar elemen kiri-kanan */
    background: linear-gradient(to right, #fac817, #fa6917); /* Degradasi horizontal */
    color: white;
    padding: 20px;
    border-top: 2px solid #fa6917;
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi ukuran */
}

/* Konten Kiri Footer */
.pkp_footer_content {
    background: linear-gradient(to right, #fa6917, #fac817);
    flex: 7; /* Gunakan rasio 7 untuk 70% */
    padding: 10px;
    text-align: left; /* Teks rata kiri */
    font-weight: bold;
    font-size: 14px;
}

/* Konten Kanan Footer */
.pkp_brand_footer {
    background: linear-gradient(to right, #fa6917, #fac817);
    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 */
}

/* Link */
a {
    color: #fa6917;
    text-decoration: none;
}

a:hover {
    color: #fac817;
}

/* Responsivitas untuk Layar Kecil */
@media (max-width: 768px) {
    .pkp_structure_content {
        flex-direction: column; /* Elemen menjadi vertikal */
    }

    .pkp_structure_main, .entry_details, .pkp_structure_sidebar {
        flex: 0 0 100%; /* Elemen mengambil lebar penuh */
        max-width: 100%; /* Maksimal lebar penuh */
    }

    .pkp_footer {
        flex-direction: column; /* Footer menjadi vertikal */
        text-align: center; /* Teks di tengah */
    }
}