/* ====================================================
   PENGATURAN LOGO HEADER FULL & PAS DI TAMPILAN HP
   ==================================================== */
@media (max-width: 767px) {
  /* Buat header fleksibel dan rapi */
  .pkp_structure_head,
  .pkp_head_wrapper {
    padding: 10px 0;
  }

  /* Pusatkan area logo dan beri ruang penuh */
  .pkp_site_name {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 12px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .pkp_site_name a,
  .pkp_site_name .is_img a {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important; /* Batas lebar logo di layar HP */
    text-align: center !important;
  }

  /* Buat logo mengisi lebar header secara penuh dan proporsional */
  .pkp_site_name img {
    width: 100% !important;
    max-width: 280px !important; /* Atur antara 260px - 320px sesuai selera */
    height: auto !important;
    max-height: none !important; /* Hapus batasan tinggi kaku agar tidak mengecil */
    margin: 0 auto !important;
    display: inline-block !important;
  }

  /* Pastikan tombol menu tetap rapi dan tidak menimpa logo */
  .pkp_navigation_primary_wrapper {
    width: 100% !important;
  }
}