/* Beranda: hero teknologi (gambar + tulisan, tepi bawah melengkung) dan Sambutan Ketua YP */
.ht,.hs{--ht-krem:#faf7f0;--ht-navy:#0c1a43;--ht-emas:#c9a24a;--ht-emas-t:#f0dca0;--ht-taup:#9b8672}
.ht-skrip{display:block;font:italic 600 clamp(1.5rem,3vw,2.1rem)/1.1 'Playfair Display',Georgia,serif;letter-spacing:.01em}
.ht-ornamen{display:block;width:74px;height:auto;margin-bottom:.5rem;opacity:.9}
.ht-garis{display:block;width:46px;height:3px;margin:.9rem 0 1.1rem;border-radius:3px;background:linear-gradient(90deg,var(--ht-emas),var(--ht-emas-t));transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .45s}

/* ---------- Hero ---------- */
.ht{position:relative;isolation:isolate;overflow:hidden;color:#fff;min-height:clamp(430px,62vh,620px);display:flex;align-items:center;padding:clamp(4rem,9vw,6.5rem) clamp(1rem,6vw,4rem) clamp(7rem,12vw,9rem);
  background:linear-gradient(135deg,#050a26 0,#0c1a43 55%,#14295f 100%)}
.ht-latar{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ht-gambar{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.06);will-change:transform}
.ht-tutup{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,38,.86) 0,rgba(5,10,38,.55) 48%,rgba(5,10,38,.15) 100%)}
.ht:not(.ada-foto) .ht-tutup{background:radial-gradient(700px 400px at 18% 60%,rgba(5,10,38,.65),transparent 70%)}
.ht-sirkuit{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.ht-dasar path{stroke:#4f6bff;stroke-opacity:.28}
.ht-jejak path{stroke:#8da2ff;stroke-opacity:.9;stroke-linecap:round;stroke-dasharray:.05 .95;animation:ht-alir 5s linear infinite}
.ht-jejak path:nth-child(2n){stroke:#f0dca0;animation-duration:7s}
.ht-jejak path:nth-child(3n){animation-duration:9s;animation-direction:reverse}
@keyframes ht-alir{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ht-simpul circle{fill:#0c1a43;stroke:#f0dca0;stroke-width:1.6;animation:ht-denyut 3.4s ease-in-out infinite}
.ht-simpul circle:nth-child(3n){animation-delay:-1s}.ht-simpul circle:nth-child(3n+1){animation-delay:-2s}
@keyframes ht-denyut{50%{fill:#f0dca0;transform:scale(1.4);transform-box:fill-box;transform-origin:center}}
.ht-cip{stroke:#f0dca0;stroke-opacity:.7;animation:ht-cip 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ht-cip{50%{stroke-opacity:1;filter:drop-shadow(0 0 14px #c9a24acc)}}
.ht-isi{position:relative;max-width:1120px;width:100%;margin:0 auto;padding-inline:clamp(0rem,3vw,2rem)}
.ht-isi>*{max-width:560px}
.ht-isi{color:#fff}.ht-ornamen{color:var(--ht-emas-t)}
.ht-skrip{color:var(--ht-emas-t)}
.ht h2{margin:.15rem 0 0;font:700 clamp(1.8rem,4.4vw,3rem)/1.15 'Playfair Display',Georgia,serif;color:#fff}
.ht p{margin:0;font:400 1.05rem/1.75 'DM Sans',sans-serif;color:#e6ebff}
.ht-tombol{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;padding:.8rem 1.5rem;border-radius:999px;background:linear-gradient(135deg,#e9c46a,#c9a24a);color:#1c1400;font:700 .92rem 'DM Sans',sans-serif;letter-spacing:.04em;
  box-shadow:0 14px 28px -14px #e9c46acc;transition:transform .3s,box-shadow .3s,background .3s}
.ht-tombol span{transition:transform .3s}
.ht-tombol:hover{transform:translateY(-3px);background:#fff;box-shadow:0 18px 30px -14px #e9c46a}
.ht-tombol:hover span{transform:translateX(5px)}
.ht-lengkung{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(70px,10vw,120px);display:block}
.ht-lengkung-b{fill:var(--ht-taup)}.ht-lengkung-a{fill:var(--ht-krem)}

/* ---------- Sambutan ---------- */
.hs{position:relative;overflow:hidden;background:var(--ht-krem);padding:clamp(1rem,3vw,2rem) clamp(1rem,6vw,4rem) clamp(4rem,8vw,6rem);color:#1d2a52}
.hs.tanpa-hero{padding-top:clamp(3.5rem,7vw,5.5rem)}
.hs-daun{position:absolute;width:clamp(120px,16vw,230px);color:#c9bfae;opacity:.55;top:12%;pointer-events:none}
.hs-daun.kiri{left:-30px;animation:hs-ayun 11s ease-in-out infinite alternate;transform-origin:50% 100%}
.hs-daun.kanan{right:-30px;animation:hs-ayun 13s ease-in-out -4s infinite alternate-reverse;transform-origin:50% 100%}
@keyframes hs-ayun{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
.hs-isi{position:relative;max-width:1060px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.hs .ht-ornamen{color:#b79a58}
.hs .ht-skrip{color:#7a6230}
.hs h2{margin:.15rem 0 0;font:700 clamp(1.6rem,3.4vw,2.35rem)/1.2 'Playfair Display',Georgia,serif;color:#14295f}
.hs-kutip{margin:0}
.hs-kutip p{margin:0;font:italic 400 clamp(1.05rem,1.8vw,1.22rem)/1.8 'Playfair Display',Georgia,serif;color:#3a4668}
.hs-nama{margin:1.2rem 0 0;display:grid;gap:.15rem}
.hs-nama b{font:700 1.05rem 'DM Sans',sans-serif;color:#14295f}
.hs-nama small{font:500 .86rem 'DM Sans',sans-serif;color:#7a6230;letter-spacing:.03em}
.hs-lanjut{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;font:700 .92rem 'DM Sans',sans-serif;color:#14295f;border-bottom:2px solid var(--ht-emas);padding-bottom:.2rem;transition:gap .3s,color .3s}
.hs-lanjut:hover{gap:.9rem;color:#7a6230}
.hs-foto{position:relative;margin:0;justify-self:center;width:min(100%,380px);aspect-ratio:1}
.hs-lingkar{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#14295f,#0c1a43);box-shadow:0 30px 50px -28px rgba(12,26,67,.65);border:6px solid #fff;display:grid;place-items:center}
.hs-lingkar img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hs-lingkar img.logo{width:46%;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.hs-foto:hover .hs-lingkar img:not(.logo){transform:scale(1.07)}
.hs-cincin{position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--ht-emas);opacity:.7;animation:hs-putar 40s linear infinite}
@keyframes hs-putar{to{transform:rotate(360deg)}}

/* ---------- Muncul saat terlihat ---------- */
.ht-isi>*,.hs-teks>*,.hs-foto{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.ht-isi>:nth-child(2),.hs-teks>:nth-child(2){transition-delay:.1s}.ht-isi>:nth-child(3),.hs-teks>:nth-child(3){transition-delay:.2s}
.ht-isi>:nth-child(4),.hs-teks>:nth-child(4){transition-delay:.3s}.ht-isi>:nth-child(5),.hs-teks>:nth-child(5){transition-delay:.4s}
.hs-teks>:nth-child(6),.hs-teks>:nth-child(7){transition-delay:.5s}.hs-foto{transform:scale(.9);transition-delay:.25s}
.ht.tampil .ht-isi>*,.hs.tampil .hs-teks>*,.hs.tampil .hs-foto{opacity:1;transform:none}
.ht.tampil .ht-garis,.hs.tampil .ht-garis{transform:none}
.ht-isi>.ht-garis,.hs-teks>.ht-garis{opacity:1}
.no-js .ht-isi>*,.no-js .hs-teks>*,.no-js .hs-foto{opacity:1;transform:none}

@media (max-width:820px){
  .hs-isi{grid-template-columns:1fr;text-align:center}
  .hs-teks .ht-ornamen,.hs-teks .ht-garis{margin-inline:auto}
  .hs-teks .ht-garis{transform-origin:center}
  .hs-foto{order:-1;width:min(70%,280px)}
  .hs-lanjut{justify-content:center}
  .ht-tutup{background:linear-gradient(180deg,rgba(5,10,38,.6),rgba(5,10,38,.85))}
  .ht-isi>*{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .ht *,.hs *{animation:none!important;transition:none!important}
  .ht-isi>*,.hs-teks>*,.hs-foto{opacity:1;transform:none}.ht-garis{transform:none}
  .ht-gambar{transform:scale(1.02)}
}