/* ====== Default / Desktop besar (≥1200px): logo “full” ====== */
.pkp_site_name .is_img{
  display: block;
  line-height: 0;
  flex: 0 0 auto;
  /* Desktop: gunakan ukuran intrinsik logo (full) tanpa batas 60vw */
  inline-size: auto;
  /* Tetap jaga rasio container agar anti-CLS jika <img> tak punya width/height */
  aspect-ratio: var(--logo-aspect-w) / var(--logo-aspect-h);
  /* Agar kontainer tidak terlalu melebar melebihi lebar gambar, biarkan auto */
  padding: .15rem;
  border-radius: .5rem;
}
.pkp_site_name .is_img img{
  display: block;
  inline-size: auto;                  /* pakai lebar intrinsik logo */
  max-inline-size: 100%;              /* aman jika parent mengecil */
  block-size: auto;
  max-block-size: var(--logo-max-h-desktop); /* kontrol tinggi maksimum */
  object-fit: contain;
  object-position: left center;
}

/* ====== Tablet landscape (992–1199px): batasi sedikit agar rapi ====== */
@media (max-width: 1199px){
  .pkp_site_name .is_img{
    inline-size: min(60vw, var(--logo-max-w-desktop)); /* aktifkan batas */
  }
  .pkp_site_name .is_img img{
    inline-size: 100%;
    max-block-size: 56px;
  }
}

/* ====== Tablet portrait (≤768px): logo menyesuaikan dengan viewport ====== */
@media (max-width: 768px){
  :root{
    --head-gap: .6rem;
  }
  .pkp_site_name{
    gap: var(--head-gap);
    padding: var(--head-pad-y) var(--head-pad-x);
  }
  .pkp_site_name .is_img{
    inline-size: var(--logo-max-w-tablet);   /* ex: 56vw */
  }
  .pkp_site_name .is_img img{
    inline-size: 100%;
    max-block-size: var(--logo-max-h-tablet); /* ex: 52px */
  }
  .pkp_site_name .site_title{
    font-size: clamp(13px, 2vw, 16px);
    max-inline-size: 50vw; /* beri ruang ke logo */
  }
}

/* ====== Mobile kecil (≤480px): logo prioritas, judul makin dibatasi ====== */
@media (max-width: 480px){
  :root{
    --head-gap: .5rem;
    --head-pad-x: .5rem;
  }
  .pkp_site_name{
    padding: var(--head-pad-y) var(--head-pad-x);
  }
  .pkp_site_name .is_img{
    inline-size: var(--logo-max-w-mobile);   /* ex: 70vw */
  }
  .pkp_site_name .is_img img{
    inline-size: 100%;
    max-block-size: var(--logo-max-h-mobile); /* ex: 38px */
  }
  .pkp_site_name .site_title{
    max-inline-size: 42vw; /* potong judul agar logo lega */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* ====== Opsi: tumpuk logo & judul di mobile sempit (aktifkan jika perlu) ====== */
/*
@media (max-width: 420px){
  .pkp_site_name{
    flex-direction: column;
    align-items: flex-start;
  }
  .pkp_site_name .site_title{
    max-inline-size: 100%;
    white-space: normal;   // izinkan wrap, tampil di bawah logo
  }
}
*/