/* =====================================================================
   Hero "Profil Pendiri" — versi baru (potret mihrab + papan nama)
   Dimuat SETELAH style.css, jadi aman menimpa gaya hero lama.
   Ubah satu baris ini bila posisi wajah di foto perlu digeser:
   --fokus: <kiri-kanan> <atas-bawah>   (0% = tepi, 50% = tengah, 100% = tepi lain)
   ===================================================================== */
.ph{--fokus:50% 40%;--emas:#e9c46a;--emas-muda:#f6e3a1;--emas-tua:#c9a227;
  background:
    radial-gradient(620px 460px at 80% 38%,#e9c46a2e,transparent 70%),
    radial-gradient(520px 420px at 4% 105%,#10b98138,transparent 70%),
    linear-gradient(135deg,#021a11 0%,#054230 55%,#0a6a4a 125%);
  padding:3.2rem 1.5rem 7.5rem}

.ph-latar{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ph-latar::before{content:"";position:absolute;right:-14%;top:50%;width:880px;height:880px;margin-top:-440px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#e9c46a22 0 3deg,transparent 3deg 12deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);
  animation:ph-putar 160s linear infinite}
.ph-latar::after{content:"";position:absolute;left:-90px;bottom:-110px;width:360px;height:360px;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23e9c46a' stroke-opacity='.35' stroke-width='1.2'%3E%3Crect x='40' y='40' width='120' height='120'/%3E%3Crect x='40' y='40' width='120' height='120' transform='rotate(45 100 100)'/%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

.ph-isi{position:relative;z-index:2;max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.ph-teks{min-width:0}

/* ---------- Potret mihrab ---------- */
.ph-potret{position:relative;margin:0 auto;width:min(390px,100%);padding:0 0 84px;animation:ph-masuk 1s .15s cubic-bezier(.2,.8,.2,1) both}
.ph-halo{position:absolute;left:50%;top:40%;width:128%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#e9c46a3d 0%,#e9c46a14 38%,transparent 66%);pointer-events:none}
.ph-arch{position:relative;aspect-ratio:4/5;padding:10px;border-radius:999px 999px 30px 30px;
  background:linear-gradient(160deg,var(--emas-muda),var(--emas-tua) 48%,#f3d98b);
  box-shadow:0 44px 70px -30px #000c,0 0 0 8px #ffffff10}
.ph-arch::before{content:"";position:absolute;inset:-16px;border-radius:999px 999px 42px 42px;border:1px solid #e9c46a66;pointer-events:none}
.ph-arch::after{content:"";position:absolute;inset:-28px;border-radius:999px 999px 54px 54px;border:1px dashed #e9c46a38;pointer-events:none}
.ph-dalam{position:relative;width:100%;height:100%;overflow:hidden;border-radius:999px 999px 21px 21px;background:#0b2a1c}
.ph-dalam img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fokus);
  filter:saturate(1.06) contrast(1.03);transform:scale(1.02)}
.ph-dalam::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 60%,#02150e4d 100%)}
.ph-logo{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 50% 35%,#fffdf6,#f3ecd4)}
.ph-logo img{width:52%;height:auto;object-fit:contain;filter:none;transform:none}

/* papan nama */
.ph-nama{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:88%;z-index:3;text-align:center;
  padding:.85rem 1rem .9rem;border-radius:18px;background:#032619d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid #e9c46a77;box-shadow:0 20px 36px -18px #000d}
.ph-nama small{display:inline-flex;align-items:center;gap:.6rem;font:700 .66rem/1 'DM Sans',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--emas)}
.ph-nama small::before,.ph-nama small::after{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.ph-nama b{display:block;margin:.5rem 0 .2rem;font:700 clamp(1.1rem,2.1vw,1.38rem)/1.2 'Playfair Display',Georgia,serif;color:#fff}
.ph-nama span{display:block;font-size:.8rem;color:#cfe3d8;letter-spacing:.02em}

/* hiasan */
.ph-bulan{position:absolute;top:-6px;right:-4%;width:50px;color:var(--emas);z-index:4;filter:drop-shadow(0 0 14px #e9c46a99);animation:ph-apung 6s ease-in-out infinite}
.ph-bintang{position:absolute;z-index:4;color:var(--emas);opacity:.9;animation:ph-kedip 4s ease-in-out infinite}
.ph-bintang.b1{left:-6%;top:16%;width:20px}
.ph-bintang.b2{right:-9%;top:46%;width:13px;animation-delay:1.4s}
.ph-potret .pd-satelit{z-index:4}
.ph-potret .pd-satelit.s1{left:-10%;bottom:26%}
.ph-potret .pd-satelit.s2{right:-9%;top:24%}

@keyframes ph-masuk{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ph-putar{to{transform:rotate(360deg)}}
@keyframes ph-apung{50%{transform:translateY(-9px) rotate(-4deg)}}
@keyframes ph-kedip{50%{opacity:.35;transform:scale(.8)}}

/* ---------- Layar kecil ---------- */
@media(max-width:900px){
  .ph{padding:2.2rem 1.2rem 6.5rem}
  .ph-isi{grid-template-columns:1fr;gap:2.4rem}
  .ph-potret{order:-1;width:min(300px,78%)}
  .ph-latar::before{right:50%;margin-right:-440px;top:26%}
  .ph-nama{width:94%}
}
@media(max-width:420px){.ph-potret{width:min(270px,80%);padding-bottom:78px}.ph-nama b{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){.ph-latar::before,.ph-potret,.ph-bulan,.ph-bintang{animation:none!important}}