/* ===== Enhancement layer — tidak mengubah struktur/JS asli, cuma mempercantik ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --biru-tua:#0a2f6b;
  --biru:#1656c9;
  --emas:#f0b429;
}

body{
  font-family:'Poppins', sans-serif !important;
  background:linear-gradient(160deg,#eef3fb 0%, #f6f8fc 60%, #eef3fb 100%) !important;
}

/* Header banner baru (ditambahkan di atas grid kartu, tidak mengubah kartu yang ada) */
.pp-banner{
  background:linear-gradient(120deg, var(--biru-tua) 0%, var(--biru) 100%);
  color:#fff; text-align:center; padding:2.2rem 1.5rem 3.2rem;
  position:relative; overflow:hidden; margin-bottom:-1.6rem;
  width:100%; box-sizing:border-box;
}
.pp-banner::after{ content:""; position:absolute; right:-50px; top:-50px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.08); }
.pp-banner-eyebrow{ display:inline-block; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.35); padding:0.3rem 1.1rem; border-radius:999px; font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:0.7rem; position:relative; }
.pp-banner h1{ font-size:1.6rem; font-weight:800; position:relative; margin:0; }
.pp-banner p{ opacity:0.9; margin-top:0.35rem; font-size:0.92rem; position:relative; }

/* Kartu: shadow lembut + radius supaya tidak terasa flat */
.card__container--closed{
  border-radius:14px;
  box-shadow:0 10px 26px -10px rgba(10,47,107,0.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card__container--closed:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px -10px rgba(10,47,107,0.38);
}

/* Name tag: dari maroon polos -> biru gradasi + aksen emas, font lebih rapi */
.card__container--closed .card__caption{
  background:linear-gradient(120deg, var(--biru-tua) 0%, var(--biru) 100%) !important;
  border-bottom:3px solid var(--emas);
  border-radius:12px;
  box-shadow:0 6px 16px -4px rgba(10,47,107,0.4);
}
.card__container--closed .card__title{
  font-weight:700;
  font-family:'Poppins', sans-serif !important;
}
.card__container--closed .card__subtitle{
  font-family:'Poppins', sans-serif !important;
  opacity:0.92;
}

/* Saat kartu dibuka (klik foto) — bikin caption & isi lebih rapi juga */
.card__caption{ font-family:'Poppins', sans-serif; }
.card__title{ font-weight:700; color:var(--biru-tua); }
.card__btn-close{ background:rgba(10,47,107,0.75); color:#fff; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; top:20px; right:20px; padding:0 !important; }

hr{ border-color:rgba(10,47,107,0.15) !important; margin:2rem 0 !important; }

/* FIX responsif mobile — Bootstrap yang di-load di bawah bentrok dengan grid
   kartu asli (col-md-3 dkk), bikin kartu jadi kolom sempit di HP. Paksa jadi
   1 kolom penuh khusus di layar kecil supaya nama/NIP/jabatan kebaca normal. */
/* FIX responsif mobile — Bootstrap yang di-load di bawah bentrok dengan grid
   kartu asli (col-md-3 dkk di dalam .row), bikin kartu jadi kolom sempit di HP.
   Cukup netralkan grid Bootstrap-nya saja; biarkan sistem aspect-ratio kartu
   asli (card.css) yang sudah punya breakpoint sendiri bekerja seperti semula. */
@media (max-width:700px){
  html, body{ overflow-x:hidden !important; }
  .pp-banner h1{ font-size:1.35rem !important; }
  .row, .row > [class*="col-"]{
    display:block !important; float:none !important;
    width:100% !important; max-width:100% !important; flex:none !important;
  }
}