/* Hero halaman Tentang: hijau-emas, judul serif, tiap halaman punya bentuk dan gerak sendiri */
.hz{--g1:#032619;--g2:#064b32;--g3:#0b7a4d;--em:#e9c46a;--em2:#f6e3a1;position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:3.4rem 1.5rem 7.6rem;background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}
.hz-latar{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.1'%3E%3Cpath d='M45 5l10 20 20-10-10 20 20 10-20 10 10 20-20-10-10 20-10-20-20 10 10-20-20-10 20-10-10-20 20 10z'/%3E%3Ccircle cx='45' cy='45' r='10'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 75%);mask-image:linear-gradient(100deg,transparent 4%,#000 75%)}
.hz-isi{position:relative;max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;min-height:440px}
.hz-teks{min-width:0}
.hz-teks>*{animation:hzNaik .8s cubic-bezier(.2,.8,.2,1) both}
.hz-teks>:nth-child(2){animation-delay:.08s}.hz-teks>:nth-child(3){animation-delay:.16s}.hz-teks>:nth-child(5){animation-delay:.3s}.hz-teks>:nth-child(n+6){animation-delay:.4s}
.hz h1{font-family:var(--pd-serif,'Playfair Display',Georgia,serif);font-weight:700;font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.06;letter-spacing:-.015em;margin:1.1rem 0 .7rem;color:#fff}
.hz-garis-emas{display:block;width:96px;height:3px;border-radius:3px;margin:0 0 1.3rem;background:linear-gradient(90deg,var(--em2),var(--em));transform-origin:left;animation:hzGaris .9s .45s both!important}
.hz-visual{position:relative;display:grid;place-items:center;min-width:0}

/* latar tiap halaman */
.hzs-mimbar{background:radial-gradient(520px 520px at 78% 0,#e9c46a3d,transparent 70%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}
.hzs-waktu{background:radial-gradient(480px 360px at 85% 25%,#e9c46a2e,transparent 70%),linear-gradient(135deg,#032114 0%,#064b32 60%,#0a6b45 130%)}
.hzs-kompas{background:radial-gradient(560px 560px at 76% 50%,#0f9a6b55,transparent 70%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 62%,#0a6b45 130%)}
.hzs-pohon{background:radial-gradient(620px 420px at 78% 105%,#e9c46a47,transparent 70%),linear-gradient(160deg,var(--g1) 0%,var(--g2) 55%,#0b7a4d 135%)}
.hzs-musyawarah{background:radial-gradient(500px 500px at 76% 50%,#e9c46a26,transparent 68%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}
.hzs-jaringan{background:linear-gradient(#ffffff08 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/44px 44px,linear-gradient(135deg,var(--g1) 0%,var(--g2) 60%,var(--g3) 135%)}
.hzs-dinding{background:radial-gradient(520px 420px at 80% 40%,#e9c46a2e,transparent 70%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}
.hzs-pita{background:radial-gradient(700px 360px at 50% 100%,#e9c46a33,transparent 70%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}

/* 1. Sambutan: mihrab bercahaya, lentera berayun */
.hz-mimbar{position:relative;width:min(100%,380px);aspect-ratio:4/5.3;margin:0 auto;display:grid;place-items:end center}
.hz-sinar{position:absolute;left:-30%;right:-30%;top:-14%;height:96%;transform-origin:50% 0;background:conic-gradient(from 158deg at 50% 0,transparent 0 6deg,#f6e3a14d 15deg,transparent 25deg,#f6e3a138 37deg,transparent 47deg,#f6e3a14d 60deg,transparent 72deg,transparent 360deg);-webkit-mask-image:radial-gradient(closest-side at 50% 0,#000 30%,transparent);mask-image:radial-gradient(closest-side at 50% 0,#000 30%,transparent);animation:hzSapu 9s ease-in-out infinite alternate}
.hz-lengkung{position:relative;width:78%;aspect-ratio:3/4;border-radius:999px 999px 16px 16px;padding:9px;border:2px solid var(--em);background:#0000;box-shadow:0 0 60px -10px #e9c46a77,0 40px 70px -35px #000;animation:hzBuka 1.5s .2s cubic-bezier(.2,.8,.2,1) both}
.hz-lengkung::before{content:"";position:absolute;inset:-13px;border-radius:999px 999px 22px 22px;border:1px solid #e9c46a66}
.hz-lengkung-dalam{display:grid;place-items:center;width:100%;height:100%;border-radius:999px 999px 8px 8px;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#0f8a66,#075a3b 60%,#032419)}
.hz-lengkung-dalam img{width:100%;height:100%;object-fit:cover;display:block}
.hz-lengkung-dalam img.hz-logo-kecil{width:50%;height:auto;aspect-ratio:1;object-fit:contain;padding:.9rem;border-radius:50%;background:#fff;box-shadow:0 0 0 8px #ffffff14,0 0 0 9px #e9c46a77}
.hz-lentera{position:absolute;z-index:3;left:50%;top:-1%;width:15%;margin-left:-7.5%;transform-origin:50% 0;filter:drop-shadow(0 0 16px #e9c46a99);animation:hzAyun 4.6s ease-in-out infinite alternate}
.hz-api{animation:hzApi 2.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.hz-salam{position:absolute;z-index:4;left:50%;bottom:-1.1rem;translate:-50% 0;margin:0;padding:.3rem 1.2rem .15rem;white-space:nowrap;font:700 clamp(1.05rem,2.4vw,1.4rem)/1.7 Amiri,serif;color:var(--em2);background:#032619;border:1px solid #e9c46a88;border-radius:999px;box-shadow:0 14px 26px -12px #000;animation:hzNaik .9s 1.1s both}

/* 2. Sejarah: tahun berjalan dan penggaris waktu */
.hz-waktu{position:relative;width:100%;max-width:470px;display:grid;justify-items:center;gap:1.1rem}
.hz-foto-tua{margin:0;justify-self:end;width:44%;padding:7px 7px 22px;background:#f4ecd2;border-radius:3px;transform:rotate(4deg);box-shadow:0 26px 40px -22px #000;animation:hzFotoMasuk 1s .5s cubic-bezier(.2,.8,.2,1) both}
.hz-foto-tua img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.5) contrast(1.05)}
.hz-angka{text-align:center;margin-top:-.6rem}
.hz-angka b{display:block;font:700 clamp(5.2rem,13vw,9.8rem)/.92 var(--pd-serif,'Playfair Display',Georgia,serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff3c4,#e9c46a 55%,#a8801f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 18px 24px #0007)}
.hz-angka small{display:block;margin-top:.4rem;font:italic 500 1.15rem var(--pd-serif,'Playfair Display',Georgia,serif);color:var(--em2)}
.hz-penggaris{position:relative;width:100%;height:50px;border-top:2px solid #e9c46a}
.hz-penggaris i{position:absolute;left:0;right:0;top:0;height:16px;background:repeating-linear-gradient(90deg,#f6e3a1 0 2px,transparent 2px 12px);opacity:.75;animation:hzTik 5s linear infinite}
.hz-penggaris::after{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--em2);box-shadow:0 0 0 5px #e9c46a44,0 0 18px #e9c46a;animation:hzTitik 2.4s .2s cubic-bezier(.215,.61,.355,1) both}
.hz-penggaris span{position:absolute;top:24px;font:600 .9rem 'DM Sans',sans-serif;color:var(--em2)}
.hz-penggaris .a{left:0}.hz-penggaris .b{right:0}

/* 3. Tujuan pendidikan: kompas, jarum menemukan arah */
.hz-kompas{width:min(100%,430px);height:auto;filter:drop-shadow(0 30px 40px #0009)}
.hz-ring-putar{animation:hzRot 90s linear infinite}
.hz-jarum{animation:hzJarum 3.6s .3s cubic-bezier(.3,.7,.3,1) both}
.hz-bintang-utara{animation:hzKilau 2.6s ease-in-out infinite}

/* 4. Filosofi lulusan: pohon digambar garis demi garis */
.hz-pohon{width:min(100%,440px);height:auto}
.hz-akar path{stroke-dasharray:1;stroke-dashoffset:0;animation:hzGambar 1.5s var(--t,0s) cubic-bezier(.4,.1,.3,1) both}
.hz-daun ellipse,.hz-buah circle{transform-box:fill-box;transform-origin:center}
.hz-daun ellipse{animation:hzTumbuh .7s var(--d,3s) cubic-bezier(.3,1.5,.5,1) both,hzGoyang 5s calc(var(--d,3s) + .9s) ease-in-out infinite alternate}
.hz-buah circle{filter:drop-shadow(0 0 7px #f6e3a1);animation:hzTumbuh .6s var(--d,4s) cubic-bezier(.3,1.5,.5,1) both,hzKilau 2.8s calc(var(--d,4s) + .7s) ease-in-out infinite}

/* 5. Pimpinan: lingkaran musyawarah */
.hz-musyawarah{position:relative;container-type:inline-size;width:min(100%,440px);aspect-ratio:1;margin:0 auto}
.hz-garis-ring{position:absolute;inset:12%;border:1.5px dashed #e9c46a88;border-radius:50%;animation:hzRot 70s linear infinite}
.hz-garis-ring.dua{inset:-1%;border:1px solid #ffffff1f;animation-direction:reverse}
.hz-meja{position:absolute;inset:32%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 30%,#0f8a66,#032619);box-shadow:0 0 0 8px #ffffff10,0 0 0 9px #e9c46a77,0 30px 60px -22px #000}
.hz-meja img{width:58%;aspect-ratio:1;object-fit:contain;padding:7%;border-radius:50%;background:#fff}
.hz-ring{position:absolute;inset:0;margin:0;padding:0;list-style:none;animation:hzRot 80s linear infinite}
.hz-orang{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-35cqw)}
.hz-balik{position:absolute;left:0;top:0;width:22cqw;height:22cqw;margin:-11cqw 0 0 -11cqw;transform:rotate(calc(-1 * var(--a)));animation:hzRotBalik 80s linear infinite}
.hz-wajah{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:50%;border:3px solid var(--em);background:linear-gradient(150deg,#0f8a66,#032619);box-shadow:0 14px 26px -12px #000;animation:hzMuncul .7s calc(var(--a-i,0) * 1s + .3s) both}
.hz-wajah img{width:100%;height:100%;object-fit:cover}
.hz-wajah b{font:700 1.8rem var(--pd-serif,'Playfair Display',Georgia,serif);color:var(--em2)}
.hz-balik figcaption{position:absolute;top:calc(100% + .3rem);left:50%;transform:translateX(-50%);width:max-content;max-width:30cqw;text-align:center;line-height:1.25}
.hz-balik strong{display:block;font:700 .78rem 'DM Sans',sans-serif;color:#fff}
.hz-balik small{display:block;font-size:.66rem;color:var(--em2)}
.hz-musyawarah:hover .hz-ring,.hz-musyawarah:hover .hz-balik{animation-play-state:paused}

/* 6. Struktur organisasi: jaringan hidup */
.hz-jaringan{width:100%;max-width:540px;height:auto}
.hz-aliran{fill:none;stroke:#e9c46a;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:7 9;animation:hzFade .6s calc(.25s * var(--i,0) + .2s) both,hzAlir 1.5s linear infinite}
.hz-simpul{transform-box:fill-box;transform-origin:center;animation:hzMuncul .6s calc(.28s * var(--i,0) + .15s) cubic-bezier(.3,1.4,.5,1) both}

/* 7. Guru dan tendik: dinding kartu bergulir */
.hz-dinding{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;width:min(100%,420px);height:450px;margin:0 auto;transform:rotate(-7deg) scale(1.04);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.hz-kol{overflow:hidden}
.hz-kol.k2{margin-top:-3.5rem}
.hz-jalur{display:grid;gap:.9rem;animation:hzGulung 36s linear infinite}
.k2 .hz-jalur{animation-direction:reverse;animation-duration:44s}.k3 .hz-jalur{animation-duration:30s}
.hz-kartu{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border-radius:18px;border:1px solid #ffffff28;color:#fff}
.hz-kartu.tinggi{aspect-ratio:3/4}
.hz-kartu svg{width:46%;height:auto}
.hz-kartu img{width:100%;height:100%;object-fit:cover;display:block}
.hz-kartu.teks{aspect-ratio:4/3;padding:.8rem;text-align:center}
.hz-kartu.teks span{font:italic 600 1.08rem/1.25 var(--pd-serif,'Playfair Display',Georgia,serif)}
.hz-kartu.wa{background:linear-gradient(145deg,#0f8a66,#064b32)}
.hz-kartu.wb{background:linear-gradient(145deg,#f3d98b,#c9a227);color:#2b2102;border-color:#f6e3a1}
.hz-kartu.wc{background:#ffffff14;backdrop-filter:blur(6px)}
.hz-kartu.wd{background:linear-gradient(145deg,#0a5a45,#032619);border-color:#e9c46a99;color:var(--em2)}

/* 8. Ekstrakurikuler: pita huruf raksasa */
.hz-lebar .hz-isi{grid-template-columns:1fr;min-height:0;padding-bottom:12.5rem}
.hz-pita-bungkus{position:absolute;left:-6%;right:-6%;bottom:2.6rem;display:grid;gap:.55rem;transform:rotate(-3.5deg)}
.hz-pita{overflow:hidden}
.hz-pita-jalan{display:flex;align-items:center;gap:1.5rem;width:max-content;animation:hzPita 40s linear infinite}
.hz-pita span{font:italic 700 clamp(1.6rem,3.6vw,2.6rem)/1.5 var(--pd-serif,'Playfair Display',Georgia,serif);white-space:nowrap}
.hz-pita em{font-style:normal;font-size:1rem;color:var(--em)}
.hz-pita.p1{background:linear-gradient(90deg,#f3d98b,#e9c46a);color:#2b2102}
.hz-pita.p1 em{color:#6b4e00}
.hz-pita.p2{border-block:1.5px solid #e9c46a88}
.hz-pita.p2 span{font-size:clamp(2.4rem,6vw,4.4rem);color:transparent;-webkit-text-stroke:1.4px var(--em2)}
.hz-pita.p2 .hz-pita-jalan{animation-direction:reverse;animation-duration:56s}
.hz-pita.p3{background:#ffffff14;backdrop-filter:blur(6px);border-block:1px solid #ffffff22}
.hz-pita.p3 .hz-pita-jalan{animation-duration:46s}

/* gerak */
@keyframes hzNaik{from{opacity:0;transform:translateY(22px)}}
@keyframes hzGaris{from{transform:scaleX(0)}}
@keyframes hzRot{to{rotate:360deg}}
@keyframes hzRotBalik{to{rotate:-360deg}}
@keyframes hzSapu{from{rotate:-5deg}to{rotate:5deg}}
@keyframes hzBuka{from{clip-path:inset(100% 0 0 0 round 999px 999px 16px 16px)}to{clip-path:inset(-20px round 999px 999px 16px 16px)}}
@keyframes hzAyun{from{rotate:-6deg}to{rotate:6deg}}
@keyframes hzApi{from{opacity:.65;scale:.9}to{opacity:1;scale:1.1}}
@keyframes hzFotoMasuk{from{opacity:0;transform:translateY(-40px) rotate(-8deg)}}
@keyframes hzTik{to{background-position:-24px 0}}
@keyframes hzTitik{from{left:0}to{left:100%}}
@keyframes hzJarum{0%{rotate:-150deg}22%{rotate:34deg}40%{rotate:-18deg}56%{rotate:9deg}72%{rotate:-4deg}86%{rotate:1.6deg}100%{rotate:0deg}}
@keyframes hzKilau{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes hzGambar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hzTumbuh{from{scale:0;opacity:0}}
@keyframes hzGoyang{from{rotate:-5deg}to{rotate:7deg}}
@keyframes hzMuncul{from{opacity:0;scale:.6}}
@keyframes hzFade{from{opacity:0}}
@keyframes hzAlir{to{stroke-dashoffset:-32}}
@keyframes hzGulung{to{transform:translateY(calc(-50% - .45rem))}}
@keyframes hzPita{to{transform:translateX(-25%)}}

/* layar kecil */
@media (max-width:900px){
  .hz{padding:2.6rem 1.2rem 6.6rem}
  .hz-isi{grid-template-columns:1fr;gap:2.2rem;min-height:0}
  .hz-mimbar{width:min(86%,320px);margin-bottom:1.4rem}
  .hz-waktu{max-width:360px}
  .hz-dinding{height:330px;gap:.65rem}
  .hz-jalur{gap:.65rem}
  .hz-lebar .hz-isi{padding-bottom:10rem}
  .hz-pita-bungkus{bottom:2rem;left:-12%;right:-12%}
}
@media (prefers-reduced-motion:reduce){
  .hz *,.hz *::before,.hz *::after{animation:none!important}
  .hz-pita-jalan{transform:none}
  .hz-penggaris::after{left:100%}
}

/* ===== Lapisan mewah: bingkai emas, judul berkilau, debu emas ===== */
.hz::before{content:"";position:absolute;inset:14px 14px 58px;z-index:0;pointer-events:none;border:1px solid #e9c46a59;border-radius:4px;box-shadow:inset 0 0 0 5px #0000,inset 0 0 0 6px #e9c46a1f,inset 0 0 120px #0000008c}
.hz-isi{z-index:1}
.hz-latar::after{content:"";position:absolute;inset:0;background:radial-gradient(1.6px 1.6px at 12% 22%,#f6e3a1,transparent),radial-gradient(1.2px 1.2px at 28% 70%,#f6e3a1,transparent),radial-gradient(1.8px 1.8px at 46% 14%,#f6e3a1,transparent),radial-gradient(1.2px 1.2px at 63% 82%,#f6e3a1,transparent),radial-gradient(1.6px 1.6px at 78% 30%,#f6e3a1,transparent),radial-gradient(1.2px 1.2px at 90% 64%,#f6e3a1,transparent),radial-gradient(1.4px 1.4px at 6% 88%,#f6e3a1,transparent);animation:hzDebu 6s ease-in-out infinite alternate}
.hz h1{background-image:linear-gradient(105deg,transparent 42%,#e9c46a 50%,transparent 58%),linear-gradient(180deg,#ffffff 20%,#fbefc8 100%);background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:130% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 22px #0006);animation:hzNaik .8s .08s cubic-bezier(.2,.8,.2,1) both,hzFoil 3.2s 1.1s ease-in-out both}
.hz-garis-emas{width:130px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--em2),var(--em),var(--em2),transparent);box-shadow:0 0 16px #e9c46a99}
.hz .pd-label{background:linear-gradient(90deg,#e9c46a26,#ffffff0d);border-color:#e9c46a99}
.hz .pd-tb:not(.garis){background:linear-gradient(135deg,#fff3c4,#e9c46a 45%,#b98c1e);box-shadow:0 14px 30px -12px #e9c46acc,inset 0 1px 0 #fffbe6}
.hz .pd-stat li{background:linear-gradient(150deg,#ffffff1c,#ffffff08);border-color:#e9c46a55}
@keyframes hzFoil{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
@keyframes hzDebu{from{opacity:.35;translate:0 0}to{opacity:1;translate:0 -14px}}

/* Struktur organisasi */
.hz-jaringan{filter:drop-shadow(0 30px 40px #0008)}
.hz-aliran{stroke-width:2;stroke-opacity:.95}
.hz-titik-cahaya{filter:drop-shadow(0 0 6px #fff3c4)}

/* Pimpinan */
.hz-musyawarah::before{content:"";position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(closest-side,#e9c46a33,transparent 70%);animation:hzDenyut 5s ease-in-out infinite}
.hz-meja{inset:30%;background:radial-gradient(circle at 50% 30%,#0f8a66,#021a11);box-shadow:0 0 0 1px #e9c46a,0 0 60px -6px #e9c46a99,0 34px 60px -24px #000}
.hz-meja svg{position:absolute;inset:0;width:100%;height:100%}
.hz-teks-ring{animation:hzRot 60s linear infinite}
.hz-meja img{position:relative;width:42%;padding:5%;box-shadow:0 0 0 3px #e9c46a,0 10px 24px -8px #000}
.hz-wajah{border:0;padding:4px;background:conic-gradient(from 20deg,#fff3c4,#c9a227,#fff3c4,#a8801f,#fff3c4);box-shadow:0 0 22px -4px #e9c46aaa,0 16px 28px -12px #000}
.hz-wajah-i{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:50%;border:2px solid #032619;background:linear-gradient(150deg,#0f8a66,#032619)}
.hz-wajah-i img{width:100%;height:100%;object-fit:cover}
.hz-wajah-i b{font:700 1.8rem var(--pd-serif,'Playfair Display',Georgia,serif);color:var(--em2)}
.hz-balik strong{font-family:var(--pd-serif,'Playfair Display',Georgia,serif);font-size:.86rem;text-shadow:0 2px 8px #000}
.hz-balik small{text-shadow:0 2px 8px #000}
@keyframes hzDenyut{0%,100%{scale:.96;opacity:.7}50%{scale:1.04;opacity:1}}

/* Sejarah */
.hz-astro{position:absolute;left:50%;top:45%;width:118%;max-width:560px;translate:-50% -50%;z-index:-1;opacity:.7;pointer-events:none}
.hz-astro-putar{animation:hzRot 120s linear infinite}
.hz-sejak{margin:0;display:flex;align-items:center;gap:.9rem;width:100%;justify-content:center;font:italic 500 1.05rem var(--pd-serif,'Playfair Display',Georgia,serif);color:var(--em2)}
.hz-sejak::before,.hz-sejak::after{content:"";flex:1;max-width:84px;height:1px;background:linear-gradient(90deg,transparent,var(--em))}
.hz-sejak::after{transform:scaleX(-1)}
.hz-foto-tua{padding:0;background:none;box-shadow:0 30px 44px -22px #000}
.hz-foto-emas{display:block;padding:7px;background:linear-gradient(135deg,#fff3c4,#c9a227 40%,#fff3c4 60%,#a8801f)}
.hz-foto-emas img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.45) contrast(1.05);border:3px solid #032619}
.hz-angka b{background:linear-gradient(105deg,transparent 40%,#fffbe6 50%,transparent 60%) no-repeat 130% 0/260% 100%,linear-gradient(180deg,#fff3c4 0,#e9c46a 48%,#8f6b12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:hzFoil 2.2s 2.7s ease-in-out both}
.hz-penggaris{border-top:2px solid #e9c46a;box-shadow:0 -1px 14px #e9c46a66}
.hz-penggaris i{background:repeating-linear-gradient(90deg,#fff3c4 0 2px,transparent 2px 12px),repeating-linear-gradient(90deg,#fff3c4 0 3px,transparent 3px 60px);background-size:auto,auto;height:16px}

/* Visi dan misi: gerbang berlapis */
.hzs-cakrawala{background:radial-gradient(560px 460px at 76% 60%,#e9c46a3d,transparent 70%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}
.hz-cakrawala{position:relative;width:min(100%,400px);margin:0 auto;padding-bottom:1rem}
.hz-cakrawala svg{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px #0009)}
.hz-gerbang{transform-box:fill-box;transform-origin:50% 100%;animation:hzGerbang 1s calc(.18s * var(--i,0) + .2s) cubic-bezier(.2,.9,.3,1) both}
.hz-matahari{filter:drop-shadow(0 0 14px #fff3c4) drop-shadow(0 0 30px #e9c46a);animation:hzDenyutSvg 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.hz-sinar-gerbang{animation:hzRot 24s linear infinite}
.hz-kerlip{animation:hzKilau 2.4s ease-in-out infinite}
@keyframes hzGerbang{from{scale:.5;opacity:0}}
@keyframes hzDenyutSvg{0%,100%{scale:.9}50%{scale:1.15}}

/* Misi keberadaan: mushaf terbuka */
.hzs-mushaf{background:radial-gradient(520px 520px at 76% 40%,#e9c46a40,transparent 70%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}
.hz-mushaf{position:relative;width:min(100%,440px);margin:0 auto;padding-top:3.6rem}
.hz-mushaf svg{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 40px #000a)}
.hz-iqra{position:absolute;left:50%;top:0;translate:-50% 0;margin:0;font:700 clamp(2.6rem,6vw,3.8rem)/1.2 Amiri,serif;color:var(--em2);text-shadow:0 0 22px #e9c46a,0 0 50px #e9c46a99;animation:hzNaik 1s .6s both,hzCahaya 3.6s 1.6s ease-in-out infinite}
.hz-balok{animation:hzCahaya 4s ease-in-out infinite}
.hz-halaman-balik{animation:hzBalik 7s 1.4s ease-in-out infinite;opacity:0}
.hz-partikel{position:absolute;inset:0;pointer-events:none}
.hz-partikel i{position:absolute;bottom:42%;left:var(--x);width:5px;height:5px;border-radius:50%;background:#fff3c4;box-shadow:0 0 10px #e9c46a;animation:hzPartikel var(--dur,5s) var(--d,0s) ease-out infinite;opacity:0}
@keyframes hzBalik{0%,8%{scale:1 1;opacity:0}10%{opacity:1}48%{scale:-1 1;opacity:1}52%{scale:-1 1;opacity:0}100%{scale:-1 1;opacity:0}}
@keyframes hzCahaya{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes hzPartikel{0%{translate:0 0;opacity:0}15%{opacity:1}100%{translate:0 -250px;opacity:0}}

@media (max-width:900px){
  .hz::before{inset:10px 10px 50px}
  .hz-astro{width:130%}
}
@media (prefers-reduced-motion:reduce){
  .hz-titik-cahaya{display:none}
  .hz-halaman-balik{opacity:0}
  .hz h1{color:#fff;-webkit-text-fill-color:#fff;background:none}
  .hz-angka b{color:#f6e3a1;-webkit-text-fill-color:#f6e3a1;background:none}
}

/* ===== Perapian tipografi semua hero Tentang ===== */
.hz h1{font-size:clamp(2.15rem,4.3vw,3.6rem);line-height:1.14;letter-spacing:-.01em;text-wrap:balance;padding-bottom:.1em;margin:1rem 0 .55rem}
.hz .pd-label{font-size:.72rem;letter-spacing:.16em;line-height:1}
.hz .pd-sub{max-width:36ch;margin:0 0 1.5rem;font:italic 500 clamp(1.05rem,1.7vw,1.25rem)/1.5 var(--pd-serif,'Playfair Display',Georgia,serif);letter-spacing:0;color:#fbefc8;opacity:1;text-wrap:balance}
.hz .pd-stat{gap:.7rem;margin-bottom:1.6rem}
.hz .pd-stat li{min-width:104px;padding:.65rem 1rem}
.hz .pd-stat b{font-family:var(--pd-serif,'Playfair Display',Georgia,serif);font-size:1.7rem;font-weight:700;letter-spacing:0}
.hz .pd-stat span{font:600 .7rem/1.3 'DM Sans',sans-serif;letter-spacing:.1em}
.hz .pd-tb{font:700 .92rem/1 'DM Sans',sans-serif;letter-spacing:.01em;padding:.85rem 1.4rem}
.hz .pd-krum{font:500 .85rem/1.4 'DM Sans',sans-serif}

/* Struktur organisasi: bagan HTML */
.hzs-jaringan .hz-isi{grid-template-columns:.82fr 1.18fr}
.hz-org{width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hz-o-akar{text-align:center;max-width:420px;padding:.85rem 1.9rem .95rem;border-radius:16px;color:#2b2102;background:linear-gradient(135deg,#fff3c4,#e9c46a 50%,#b98c1e);outline:1px solid #7a5a0a77;outline-offset:-7px;box-shadow:0 24px 40px -20px #000,0 0 44px -6px #e9c46a88;animation:hzMuncul .7s .2s both}
.hz-o-akar small{display:block;font:700 .68rem/1 'DM Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.hz-o-akar strong{display:block;margin-top:.35rem;font:700 clamp(1.05rem,1.8vw,1.3rem)/1.3 var(--pd-serif,'Playfair Display',Georgia,serif);text-wrap:balance}
.hz-o-batang{display:block;width:2px;height:30px;background:linear-gradient(180deg,#fff3c4,#e9c46a,#fff3c4) 0 0/2px 200%;box-shadow:0 0 10px #e9c46a;animation:hzAliranV 1.6s linear infinite}
.hz-o-baris{list-style:none;margin:0;padding:16px 0 0;display:flex;justify-content:center;gap:.7rem;width:100%}
.hz-o-baris li{position:relative;flex:1 1 0;min-width:0;max-width:210px;padding:.85rem .7rem .9rem;text-align:center;border-radius:14px;background:linear-gradient(180deg,#0d6a47f2,#042d1ff2);border:1px solid #e9c46a88;box-shadow:0 18px 30px -18px #000;animation:hzMuncul .6s calc(.18s * var(--n,0) + .4s) both}
.hz-o-baris li::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:16px;margin-left:-1px;background:#e9c46a;box-shadow:0 0 8px #e9c46a99}
.hz-o-baris li::after{content:"";position:absolute;top:-16px;left:-.35rem;right:-.35rem;height:2px;background:#e9c46a;box-shadow:0 0 8px #e9c46a99}
.hz-o-baris li:first-child::after{left:50%}
.hz-o-baris li:last-child::after{right:50%}
.hz-o-baris li:only-child::after{display:none}
.hz-o-baris.pim b{display:block;font:700 1rem/1.3 var(--pd-serif,'Playfair Display',Georgia,serif);color:#fff;text-wrap:balance}
.hz-o-baris.pim span{display:block;margin-top:.3rem;font:500 .78rem/1.35 'DM Sans',sans-serif;color:#f6e3a1}
.hz-o-baris.unit li{border-color:var(--w,#34d399);border-top-width:3px}
.hz-o-baris.unit b{display:block;font:700 1.15rem/1.2 Sora,sans-serif;color:#fff;letter-spacing:-.01em}
.hz-o-baris.unit b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.5rem;background:var(--w,#34d399);transform:rotate(45deg);vertical-align:.12em}
.hz-o-baris.unit span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.3rem;font:500 .72rem/1.35 'DM Sans',sans-serif;color:#cfe5da}
.hz-o-bagian{margin:1.5rem 0 0;font:500 .92rem/1.4 'DM Sans',sans-serif;color:#d7e8de;text-align:center}
.hz-o-bagian span{margin-right:.4rem;font:700 1.4rem var(--pd-serif,'Playfair Display',Georgia,serif);color:var(--em2)}
@keyframes hzAliranV{to{background-position:0 -200%}}

/* Profil: masjid berkubah di cahaya fajar */
.hzs-kubah{background:radial-gradient(620px 520px at 74% 58%,#e9c46a40,transparent 70%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 130%)}
.hz-kubah{width:min(100%,470px);margin:0 auto}
.hz-kubah svg{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px #0009)}
.hz-fajar{animation:hzDenyutSvg 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.hz-kubah-badan{animation:hzKubah 1.1s .2s cubic-bezier(.2,.9,.3,1) both}
.hz-jendela{animation:hzKilau 3.2s calc(var(--i,0) * .45s) ease-in-out infinite}
.hz-unit-baris{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.hz-unit-baris li{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .95rem;border-radius:999px;border:1px solid #e9c46a88;background:linear-gradient(150deg,#ffffff1c,#ffffff08);font:700 .85rem/1 Sora,sans-serif;color:#fff}
.hz-unit-baris i{width:8px;height:8px;background:var(--w,#34d399);transform:rotate(45deg)}
.hz-unit-ket{margin:.7rem 0 0;text-align:center;font:italic 500 1rem var(--pd-serif,'Playfair Display',Georgia,serif);color:var(--em2)}
@keyframes hzKubah{from{opacity:0;translate:0 36px}}

@media (max-width:900px){
  .hzs-jaringan .hz-isi{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hz-o-baris{flex-direction:column;align-items:center;gap:.6rem;padding-top:0}
  .hz-o-baris li{width:100%;max-width:340px}
  .hz-o-baris li::before,.hz-o-baris li::after{display:none}
}

/* Medali logo di kubah (hero Profil) dan di bingkai "Mengenal" */
.hz-rosette{transform-box:view-box;transform-origin:220px 207px;animation:hzPutarMedali 80s linear infinite}
.hz-medali-cahaya{transform-box:fill-box;transform-origin:center;animation:hzDenyutSvg 5s ease-in-out infinite}
@keyframes hzPutarMedali{to{transform:rotate(360deg)}}
.pd-bingkai .pd-logo-bingkai{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 44%,#13a273 0,#075a3b 50%,#032419 100%)!important;border-color:#fbf6e4}
.pd-bingkai .pd-logo-bingkai::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23e9c46a' stroke-opacity='.18' stroke-width='1'%3E%3Crect x='21' y='21' width='42' height='42'/%3E%3Crect x='21' y='21' width='42' height='42' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='13'/%3E%3C/g%3E%3C/svg%3E") center/84px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 25%,transparent 78%);mask-image:radial-gradient(circle at 50% 50%,#000 25%,transparent 78%)}
.pd-bingkai .pd-logo-bingkai::after{content:"";position:absolute;left:50%;top:50%;width:84%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed #e9c46aaa;animation:hzPutarMedali 60s linear infinite}
.pd-bingkai .pd-logo-bingkai img{position:relative;z-index:2;width:64%!important;height:auto!important;aspect-ratio:1;object-fit:contain!important;padding:.9rem;background:#fff;border:0!important;border-radius:50%!important;box-shadow:0 0 0 5px #fff3c4,0 0 0 6.5px #b98c1e,0 0 0 18px #ffffff10,0 0 70px #e9c46a77,0 24px 40px -12px #000b!important;filter:saturate(.9)}
@media (prefers-reduced-motion:reduce){.hz-rosette,.hz-medali-cahaya,.pd-bingkai .pd-logo-bingkai::after{animation:none!important}}

/* ===== Profil Yayasan: medali bintang khatam emas (menggantikan gambar masjid) ===== */
.hz-khatam{width:min(100%,480px)}
.hz-khatam svg{overflow:visible;animation:hzKhMasuk 1.2s .15s cubic-bezier(.2,.9,.3,1) both}
.hz-kh-luar{transform-box:view-box;transform-origin:220px 228px;animation:hzPutarMedali 140s linear infinite}
.hz-kh-besar{transform-box:view-box;transform-origin:220px 228px;animation:hzPutarMedali 220s linear infinite}
.hz-kh-dalam{transform-box:view-box;transform-origin:220px 228px;animation:hzPutarMedali 90s linear infinite reverse}
@keyframes hzKhMasuk{from{opacity:0;scale:.86}}
@media (prefers-reduced-motion:reduce){.hz-kh-luar,.hz-kh-besar,.hz-kh-dalam,.hz-khatam svg{animation:none!important}}

/* Sambutan Ketua: foto potret, tanda tangan, keterbacaan */
.hzs-mimbar .hz-lengkung-dalam img:not(.hz-logo-kecil){object-position:50% 16%;filter:saturate(1.04) contrast(1.03)}
.hzs-mimbar .hz-lengkung-dalam::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 62%,#032419aa);pointer-events:none}
.hzs-mimbar .hz-lengkung-dalam{position:relative}
.hzs-mimbar .pd-chip-nama a{background:#e9c46a1f;border-color:#e9c46a99;font-family:var(--pd-serif,'Playfair Display',serif);font-size:.95rem;padding:.4rem 1rem}
.pd-bingkai img{object-position:50% 16%}
.pd-bio p:first-child{font-size:1.08em;font-weight:500;padding-left:1rem;border-left:3px solid var(--pd-emas,#c9a227)}
.pd-bio{max-width:68ch;text-align:left}
.pd-ttd{display:grid;gap:.1rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px dashed var(--garis)}
.pd-ttd small{color:var(--redup);font-size:.9rem}
.pd-ttd b{font:600 1.35rem/1.3 var(--pd-serif,'Playfair Display',serif);color:var(--hijau-tua)}
.pd-ttd span{color:var(--redup);font-size:.9rem}
[data-tema=gelap] .pd-ttd b,[data-tema=dark] .pd-ttd b{color:var(--pd-emas,#e9c46a)}

/* Profil Pendiri: potret tunggal -> bingkai lengkung, wajah diperbesar */
.pd-orbit.tunggal{--zoom:1.55;--fokus-x:50%}
.pd-orbit.tunggal .pd-cincin{inset:6%}
.pd-orbit.tunggal .pd-pusat{width:60%;aspect-ratio:3/4;border-radius:999px 999px 22px 22px;border:4px solid var(--pd-emas,#e9c46a);box-shadow:0 0 0 9px #ffffff12,0 0 0 10px #e9c46a77,0 36px 60px -26px #000c;background:#032419}
.pd-orbit.tunggal .pd-pusat>img{object-position:var(--fokus-x) 100%;transform:scale(var(--zoom));transform-origin:var(--fokus-x) 100%}
.pd-orbit.tunggal .pd-pusat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#032419b3);pointer-events:none}
.pd-plat{position:absolute;z-index:4;left:50%;bottom:6%;translate:-50% 0;display:grid;justify-items:center;gap:.15rem;padding:.55rem 1.5rem .6rem;border-radius:14px;background:#032619ee;border:1px solid #e9c46a99;box-shadow:0 14px 28px -14px #000;white-space:nowrap}
.pd-plat small{font:700 .62rem/1 'DM Sans',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#e9c46a}
.pd-plat b{font:600 1.05rem/1.3 'Playfair Display',Georgia,serif;color:#fff}
/* foto di kartu pendiri: perbesar wajah juga */
.pd-bingkai{overflow:hidden}
.pd-bingkai>img{object-position:50% 100%;transform:scale(1.3);transform-origin:50% 100%}
@media(max-width:600px){.pd-orbit.tunggal .pd-pusat{width:66%}.pd-plat{padding:.45rem 1.1rem}}