:root{--mist:#FAFAFA;--cloud:#E2E1E1;--stone:#858585;--leaf:#6DA003;--leaf-d:#4d7002;--leaf-l:#e9f2d6;--ink:#0D0101;--r:28px;--font:'Onest','Plus Jakarta Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--cloud);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{padding:14px}.panel{background:var(--mist);border-radius:36px;padding:clamp(24px,5vw,72px);margin-bottom:14px;position:relative;overflow:hidden}
.green{background:var(--leaf)}.dark{background:var(--ink);color:var(--mist)}
h1,h2,h3{font-weight:300;letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(46px,8.4vw,128px)}h2{font-size:clamp(34px,5vw,72px)}h3{font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.muted{color:var(--stone)}.lead{font-size:clamp(16px,1.4vw,19px);max-width:56ch}
.tag{font-size:14px;color:var(--stone);font-weight:400}
.nav{position:sticky;top:14px;z-index:50;margin:14px 14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(250,250,250,.88);backdrop-filter:blur(14px);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 8px 30px rgba(13,1,1,.07)}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;line-height:1.1}.brand img{width:38px;height:36px;object-fit:contain}.brand small{display:block;font-size:11px;color:var(--stone);font-weight:400}
.menu{display:flex;gap:4px;list-style:none;padding:0}
.menu>li{position:relative}.menu>li>a{display:block;padding:10px 16px;border-radius:999px;font-size:15px}
.menu>li>a:hover,.menu>li>a.on{background:var(--leaf-l)}
.menu .dd{position:absolute;top:100%;left:0;min-width:230px;background:var(--mist);border-radius:22px;padding:8px;list-style:none;box-shadow:0 20px 50px rgba(13,1,1,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
.menu li:hover .dd,.menu li:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:9px 14px;border-radius:14px;font-size:14px}.dd a:hover{background:var(--leaf-l)}
.caret{display:inline-block;width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg) translateY(-2px);margin-left:7px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--mist);border-radius:999px;padding:6px 6px 6px 24px;font-size:15px;border:0;cursor:pointer;font-family:inherit;transition:background .25s}
.btn i{width:42px;height:42px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;font-style:normal;color:var(--ink);transition:transform .3s}
.btn:hover{background:var(--leaf-d)}.btn:hover i{transform:rotate(-45deg)}
.btn.light{background:var(--mist);color:var(--ink)}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--leaf);cursor:pointer;font-size:20px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:14px;min-height:calc(100vh - 110px);padding:0;background:transparent;overflow:visible}
.hero-l{background:var(--mist);border-radius:36px;padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}.hero h1 .ln span{display:inline-block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.12s}.hero h1 .ln:nth-child(3) span{animation-delay:.24s}
@keyframes up{to{transform:none}}
.hero-r{background:var(--leaf);border-radius:36px;position:relative;overflow:hidden;display:grid;place-items:center;min-height:420px;clip-path:inset(0 0 100% 0 round 36px);animation:open 1.1s .15s cubic-bezier(.7,0,.2,1) forwards}
@keyframes open{to{clip-path:inset(0 0 0 0 round 36px)}}
.hero-r .big{width:min(62%,380px);filter:drop-shadow(0 30px 40px rgba(13,1,1,.25));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(1.5deg)}}
.ring{position:absolute;border:1px solid rgba(13,1,1,.25);border-radius:50%;width:80%;aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%)}.ring.b{width:55%}
.pill{position:absolute;background:var(--mist);border-radius:999px;padding:8px 18px;font-size:14px;box-shadow:0 10px 24px rgba(13,1,1,.12)}
.pill::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--ink);left:-18px;top:50%;margin-top:-4.5px}
.statbox{background:var(--cloud);border-radius:24px;padding:14px;display:flex;gap:16px;align-items:center;max-width:520px}
.statbox .ph{width:130px;height:92px;border-radius:16px;flex:none}
.stats{display:flex;gap:22px}.stats b{display:block;font-size:34px;font-weight:300;line-height:1;letter-spacing:-.03em}.stats span{font-size:12px;color:var(--stone);line-height:1.2;display:block}
.ph{background:linear-gradient(135deg,var(--leaf-l),#cfe3a6);position:relative;overflow:hidden;display:grid;place-items:center;color:rgba(13,1,1,.4);font-size:12px}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(109,160,3,.12) 14px 15px)}
.ph span{position:relative}.ph.g2{background:linear-gradient(135deg,#f1f1f1,var(--cloud))}.ph.g3{background:linear-gradient(135deg,var(--leaf),#a5cf4a)}.ph.g4{background:linear-gradient(135deg,#a9a9a9,var(--stone))}
.statement{text-align:center;padding-block:clamp(60px,10vw,140px)}
.statement p.big{font-size:clamp(26px,4vw,56px);font-weight:300;letter-spacing:-.025em;line-height:1.15;max-width:22em;margin:0 auto 28px}
.statement .w{color:rgba(13,1,1,.18);transition:color .4s}.statement .w.on{color:var(--ink)}
.chip{display:inline-block;vertical-align:middle;height:.78em;width:1.6em;border-radius:999px;background:var(--leaf);margin:0 .12em}
.chip.s{background:var(--cloud);width:1.2em}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.lemb{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--cloud);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px;min-height:300px;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 40px rgba(13,1,1,.08)}
.card img.lg{width:92px;height:92px;object-fit:contain}.card .more{margin-top:auto;display:flex;justify-content:space-between;font-size:14px}
.card.feat{background:var(--leaf)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.split .ph{aspect-ratio:4/3;border-radius:28px}
.list{list-style:none;padding:0;display:grid;gap:10px}.list li{padding:16px 20px;background:var(--cloud);border-radius:18px}
.list li b{font-weight:500}
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.person{border-radius:var(--r);overflow:hidden;background:var(--cloud)}.person .ph{aspect-ratio:3/4}
.person .ph svg{position:relative;width:46%;opacity:.55}.person div.t{padding:16px 18px}.person small{color:var(--stone);display:block}
.person.f{background:var(--leaf)}.person.f small{color:var(--ink)}
.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}.carousel .person{flex:0 0 min(300px,78%);scroll-snap-align:start}
.arrows{display:flex;gap:8px}.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid var(--stone);background:none;cursor:pointer;font-size:18px}.arrows button:hover{background:var(--leaf)}
.review{padding-block:clamp(60px,9vw,120px);min-height:560px;display:grid;place-items:center}
.marq{position:absolute;top:50%;left:0;transform:translateY(-50%);white-space:nowrap;font-size:clamp(90px,15vw,220px);font-weight:300;letter-spacing:-.04em;color:var(--leaf);animation:mq 26s linear infinite}
@keyframes mq{to{transform:translate(-50%,-50%)}}
.rcard{position:relative;background:var(--mist);border-radius:28px;padding:20px;max-width:420px;box-shadow:0 30px 70px rgba(13,1,1,.18)}
.rcard .ph{aspect-ratio:16/10;border-radius:18px;margin:12px 0}.rcard .who{display:flex;gap:10px;align-items:center}
.av{width:38px;height:38px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;font-weight:500;flex:none}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.art{background:var(--cloud);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:12px;transition:transform .35s}.art:hover{transform:translateY(-6px)}
.art .ph{aspect-ratio:16/10;border-radius:20px}.art div{padding:6px 10px 12px}.art small{color:var(--stone)}
.prose{max-width:70ch}.prose p{margin-bottom:1.1em}.prose h3{margin:1.6em 0 .6em}
.crumb{font-size:14px;margin-bottom:22px}.crumb a{text-decoration:underline}
.page-h{padding-block:clamp(40px,7vw,96px)}
table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:14px 16px;border-bottom:1px solid var(--cloud)}th{font-weight:500;background:var(--cloud)}
form{display:grid;gap:14px}input,textarea,select{width:100%;padding:16px 20px;border-radius:18px;border:1px solid var(--cloud);background:var(--mist);font:inherit}
input:focus,textarea:focus{outline:2px solid var(--leaf)}
.map{aspect-ratio:16/9;border-radius:28px}
footer.panel{margin-bottom:0}.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}.foot a{display:block;padding:3px 0;color:var(--cloud)}.foot a:hover{color:var(--leaf)}
.foot h2{font-size:clamp(28px,3.4vw,48px)}.copy{margin-top:40px;font-size:13px;color:var(--stone)}
.reveal{opacity:0;transform:translateY(24px);transition:.8s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}
@media(max-width:960px){.hero,.split,.foot{grid-template-columns:1fr}.hero{min-height:0}.lemb,.people{grid-template-columns:repeat(2,1fr)}.arts{grid-template-columns:1fr}
.burger{display:block}.nav .btn{display:none}.menu{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;background:var(--mist);border-radius:28px;padding:12px;display:none;max-height:75vh;overflow:auto}.menu.open{display:flex}
.menu .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0 0 0 12px;min-width:0}}
@media(max-width:560px){.lemb,.people{grid-template-columns:1fr}.statbox{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hero h1 .ln span{transform:none}.hero-r{clip-path:none}.reveal{opacity:1;transform:none}}

/* ===== v2: teks putih di hijau + animasi ===== */
.green,.green h2,.green .lead,.hero-r,.page-h,.page-h h1,.page-h .lead,.page-h .crumb a,.card.feat,.person.f{color:#fff}
.page-h h1,.green h2{text-shadow:0 2px 18px rgba(13,1,1,.18)}
.person.f small{color:rgba(255,255,255,.92)}.card.feat p{color:#fff}
.ring{border-color:rgba(255,255,255,.4)}
.prog{position:fixed;top:0;left:0;height:4px;width:0;background:var(--leaf);z-index:99;border-radius:0 4px 4px 0}
.nav{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}.nav.hide{transform:translateY(-150%)}
.wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;width:58px;height:58px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;box-shadow:0 12px 30px rgba(13,1,1,.25);transition:transform .3s}
.wa:hover{transform:scale(1.1) rotate(-6deg)}.wa svg{width:28px;fill:#fff}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--leaf);animation:pulse 2.4s infinite}
@keyframes pulse{to{transform:scale(1.7);opacity:0}}
.pg.show{animation:pgin .7s cubic-bezier(.2,.8,.2,1)}@keyframes pgin{from{opacity:0;transform:translateY(18px)}}
.hero-r{perspective:900px}
.hero-r .big{transition:transform .25s;transform:rotateY(calc(var(--mx,0)*14deg)) rotateX(calc(var(--my,0)*-14deg))}
@keyframes float{50%{translate:0 -16px}}
.pill{translate:calc(var(--mx,0)*-18px) calc(var(--my,0)*-18px);animation:bob 5s ease-in-out infinite;z-index:2}
.pill:nth-of-type(2){animation-delay:-1.2s}.pill:nth-of-type(3){animation-delay:-2.4s}.pill:nth-of-type(4){animation-delay:-3.6s}
@keyframes bob{50%{transform:translateY(-10px)}}
.orbit{position:absolute;width:92%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;border:1.5px dashed rgba(255,255,255,.65);border-radius:50%;animation:spin 40s linear infinite}
.orbit i{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:-9px;left:50%;margin-left:-9px;box-shadow:0 0 0 8px rgba(255,255,255,.25)}
@keyframes spin{to{rotate:360deg}}
.blob{position:absolute;border-radius:50%;filter:blur(46px);animation:drift 12s ease-in-out infinite alternate}
.blob.b1{width:46%;aspect-ratio:1;background:rgba(255,255,255,.3);top:-10%;left:-8%}.blob.b2{width:50%;aspect-ratio:1;background:rgba(13,1,1,.2);bottom:-14%;right:-10%;animation-delay:-5s}
@keyframes drift{to{translate:40px 30px}}
.btn{will-change:translate}
.strip{padding:28px 0;background:var(--ink);color:var(--mist);-webkit-mask:none}
.track{display:flex;width:max-content;animation:mq2 38s linear infinite}.strip:hover .track{animation-play-state:paused}
.si{display:flex;align-items:center;gap:18px;padding:0 44px;font-size:clamp(22px,2.6vw,36px);font-weight:300;letter-spacing:-.02em;white-space:nowrap}.si img{width:56px;height:56px;object-fit:contain}.si::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--leaf);margin-left:44px}
@keyframes mq2{to{transform:translateX(-50%)}}
.vals{display:flex;gap:14px;height:380px}
.val{flex:1;border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:flex .7s cubic-bezier(.2,.8,.2,1);overflow:hidden;min-width:0}
.val.on{flex:3.2}.val h3{font-size:clamp(26px,3.2vw,46px);font-weight:300;letter-spacing:-.03em}
.val p{opacity:0;transform:translateY(14px);transition:.5s .1s;max-width:30ch}.val.on p{opacity:1;transform:none}
.vg{background:var(--leaf);color:#fff}.vd{background:var(--ink);color:#fff}.vc{background:var(--cloud)}.vs{background:var(--stone);color:#fff}
.val .glyph{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:22px;transition:transform .6s}.vc .glyph{background:var(--mist)}.val.on .glyph{transform:rotate(360deg) scale(1.1)}
.card{position:relative;isolation:isolate;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--leaf);clip-path:circle(0 at 85% 100%);transition:clip-path .7s cubic-bezier(.2,.8,.2,1)}
.card.feat::before{background:var(--ink)}.card:hover::before{clip-path:circle(150% at 85% 100%)}
.card{transition:color .4s,translate .35s,box-shadow .35s}.card:hover{color:#fff;transform:none;translate:0 -8px}
.card img.lg{transition:transform .6s cubic-bezier(.2,.8,.2,1);background:#fff;border-radius:50%;padding:6px}.card:hover img.lg{transform:scale(1.14) rotate(-6deg)}
.art:hover{transform:none;translate:0 -8px}.art{transition:translate .35s}
.art .ph{transition:filter .4s}.art:hover .ph{filter:saturate(1.4)}
.reveal .card,.reveal .art,.reveal .person,.reveal .val{opacity:0}
.reveal.in .card,.reveal.in .art,.reveal.in .person,.reveal.in .val{animation:pop .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*110ms)}
@keyframes pop{from{opacity:0;transform:translateY(46px) scale(.94)}}
.reveal>*:nth-child(1){--i:0}.lemb>:nth-child(2),.arts>:nth-child(2),.people>:nth-child(2),.vals>:nth-child(2),.carousel>:nth-child(2){--i:1}.lemb>:nth-child(3),.arts>:nth-child(3),.people>:nth-child(3),.vals>:nth-child(3),.carousel>:nth-child(3){--i:2}.lemb>:nth-child(4),.people>:nth-child(4),.vals>:nth-child(4),.carousel>:nth-child(4){--i:3}.people>:nth-child(n+5),.carousel>:nth-child(5){--i:4}
.reveal.in h2{animation:hin 1s cubic-bezier(.2,.8,.2,1) both}@keyframes hin{from{opacity:0;transform:translateY(34px);filter:blur(10px)}}
.page-h h1{animation:hin 1s cubic-bezier(.2,.8,.2,1) both}
.wm{position:absolute;right:-4%;top:50%;width:min(46%,460px);translate:0 -50%;opacity:.16;filter:grayscale(1) brightness(3);animation:spin 70s linear infinite;pointer-events:none}
.page-h>*:not(.wm){position:relative}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);translate:-100% 0;animation:shine 4s infinite}
@keyframes shine{60%,100%{translate:100% 0}}
.menu>li>a{transition:background .25s}
@media(max-width:960px){.vals{flex-direction:column;height:auto}.val{flex:none;min-height:96px}.val.on{min-height:230px}.wm{width:70%}}
@media(prefers-reduced-motion:reduce){.reveal .card,.reveal .art,.reveal .person,.reveal .val{opacity:1}.val p{opacity:1;transform:none}.pill{translate:none}}
.pill{color:var(--ink)}
@keyframes pop{from{opacity:0;transform:translateY(46px) scale(.94)}to{opacity:1;transform:none}}
.val h3{transition:font-size .5s}.val:not(.on) h3{font-size:clamp(17px,1.9vw,26px)}

/* ===== v3: hero ala referensi (tokoh potong di tengah, panel hijau, pil berdot) ===== */
.hero2{padding:0;min-height:max(660px,calc(100vh - 110px));background:linear-gradient(115deg,#fff 0%,#f2f2f0 45%,#eaeee0 100%);isolation:isolate}
.h2-right{display:contents}
.h2-panel{position:absolute;top:12px;right:12px;bottom:12px;left:50%;background:var(--leaf);border-radius:32px;overflow:hidden;z-index:0;clip-path:inset(0 0 100% 0 round 32px);animation:open2 1.1s .1s cubic-bezier(.7,0,.2,1) forwards}
@keyframes open2{to{clip-path:inset(0 0 0 0 round 32px)}}
.h2-panel .wm{width:80%;right:-20%;top:60%}
.cut{position:absolute;bottom:0;left:62%;height:94%;width:auto;max-width:none;z-index:2;translate:calc(-50% + var(--mx,0)*-14px) calc(var(--my,0)*-8px);animation:rise 1.2s .45s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 30px 40px rgba(13,1,1,.28))}
@keyframes rise{from{opacity:0;transform:translateY(60px) scale(.96)}}
.h2-top{position:absolute;top:28px;right:32px;display:flex;gap:10px;align-items:center;z-index:5;color:#fff}
.loc{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.25;margin-right:14px}
.ib{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:.3s}.ib.g{background:rgba(255,255,255,.3)}.ib:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.h2-rt{position:absolute;right:5%;top:30%;width:min(25%,340px);z-index:5;color:#fff}
.h2-rt h2{font-size:clamp(26px,2.6vw,40px);line-height:1.08;margin-bottom:14px;text-shadow:0 2px 14px rgba(13,1,1,.18)}.h2-rt p{font-size:14px;line-height:1.5}
.h2-bot{position:absolute;right:4%;bottom:6%;z-index:5;display:flex;align-items:center;gap:14px;color:#fff;font-size:12px;max-width:330px;line-height:1.3}
.avs{display:flex}.avs i{width:38px;height:38px;border-radius:50%;border:2px solid var(--leaf);margin-left:-10px;background:var(--cloud);display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--ink)}.avs i:first-child{margin-left:0}
.h2-left{position:absolute;inset:0 auto 0 0;width:48%;z-index:4;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;pointer-events:none}.h2-left>*{pointer-events:auto}
.hero2 h1{font-size:clamp(46px,7.4vw,118px);font-weight:700;letter-spacing:-.05em;line-height:.92;margin-top:clamp(40px,9vh,100px)}
.hero2 h1 .ln{display:block;overflow:hidden;padding:.04em .06em .12em 0}.hero2 h1 .ln>span{display:inline-block;transform:translateY(112%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.l2{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}.l2 .ln>span{animation-delay:.14s}
.l2 p{font-size:14px;line-height:1.45;max-width:22ch;color:var(--stone);font-weight:400;letter-spacing:0;margin-bottom:1.1em;animation:hin 1s .7s both}.l2 p b{color:var(--ink);font-weight:500}
.hero2 .btn{margin-top:26px;animation:hin 1s .8s both}
.orb{display:inline-block;width:.74em;height:.74em;border-radius:50%;vertical-align:-.02em;margin:0 .03em;background:radial-gradient(circle at 34% 28%,#e2f7a6 0,var(--leaf) 42%,var(--leaf-d) 100%);box-shadow:0 0 .35em rgba(109,160,3,.7),inset -.06em -.08em .14em rgba(0,0,0,.25);animation:orb 3.6s ease-in-out infinite}
@keyframes orb{50%{transform:scale(1.08);box-shadow:0 0 .6em rgba(109,160,3,.95),inset -.06em -.08em .14em rgba(0,0,0,.25)}}
.gstat{align-self:flex-start;display:flex;align-items:center;gap:18px;padding:14px 22px 14px 14px;border-radius:26px;background:rgba(250,250,250,.78);backdrop-filter:blur(12px);border:1px solid #fff;box-shadow:0 18px 40px rgba(13,1,1,.08);animation:hin 1s .9s both}
.gthumb{position:relative;width:150px;height:104px;border-radius:18px;flex:none;overflow:hidden}.gthumb .ph{position:absolute;inset:0}.gthumb b{position:absolute;left:10px;bottom:8px;font-size:12px;font-weight:500;color:var(--ink);z-index:2}
.play{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;z-index:2;font-size:11px}
.gstat .t{font-size:12px;color:var(--stone);margin-bottom:6px}
.gnums{display:flex;gap:20px}.gnums b{display:block;font-size:34px;font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--leaf)}.gnums span{font-size:11px;line-height:1.15;color:var(--stone);display:block;margin-top:4px}
.gp{position:absolute;z-index:3;padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.66);backdrop-filter:blur(10px);font-size:15px;box-shadow:0 10px 24px rgba(13,1,1,.1);color:var(--ink);translate:calc(var(--mx,0)*-22px) calc(var(--my,0)*-14px);animation:gpop .7s both,bob 5s 1.6s ease-in-out infinite}
.gp::after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ink);top:50%;margin-top:-5.5px}.gp.r::after{right:-17px}.gp.l::after{left:-17px}
@keyframes gpop{from{opacity:0;transform:scale(.6)}}
.p1{left:38%;top:50%;animation-delay:1s,1.7s}.p2{left:70%;top:36%;animation-delay:1.15s,2s}.p3{left:68%;top:66%;animation-delay:1.3s,2.3s}.p4{left:41%;top:72%;animation-delay:1.45s,2.6s}
@media(max-width:960px){
.hero2{display:flex;flex-direction:column;min-height:0}
.h2-left{position:static;width:auto;padding:28px 22px 12px;pointer-events:auto}.hero2 h1{margin-top:12px}.gstat{flex-wrap:wrap;width:100%}
.h2-right{display:block;position:relative;order:2;margin:0 12px 12px;min-height:780px;border-radius:32px;background:var(--leaf);overflow:hidden}
.h2-panel{display:none}.h2-top{position:relative;top:auto;right:auto;padding:20px 20px 0;justify-content:space-between}.loc{margin-right:auto}
.h2-rt{position:relative;right:auto;top:auto;width:auto;padding:26px 22px 0}.cut{height:58%;left:50%}.h2-bot{display:none}
.p1{left:5%;top:52%}.p2{left:58%;top:46%}.p3{left:56%;top:70%}.p4{left:4%;top:74%}}
@media(prefers-reduced-motion:reduce){.hero2 h1 .ln>span{transform:none}.h2-panel{clip-path:none}.gp{translate:none}}
.cut{left:55%;height:100%}
.hero2 h1 .ln{padding:.2em .1em .2em 0;margin:-.14em 0}
.h2-rt{top:24%;right:4%;width:min(24%,330px)}
.h2-bot{max-width:300px}
.p1{left:27%;top:50%}.p2{left:66%;top:55%}.p3{left:64%;top:71%}.p4{left:30%;top:73%}
@media(max-width:960px){.cut{left:50%;height:58%}.p1{left:5%;top:52%}.p2{left:58%;top:46%}.p3{left:56%;top:70%}.p4{left:4%;top:74%}.h2-rt{top:auto;right:auto;width:auto}}
.p4{left:30%;top:61%}.p2{left:69%;top:52%}.p3{left:66%;top:70%}
@media(max-width:960px){.p2{left:58%;top:46%}.p3{left:56%;top:70%}.p4{left:4%;top:74%}}
@media(max-width:960px){.cut{height:60%}.p1{left:5%;top:36%}.p2{left:56%;top:41%}.p3{left:56%;top:52%}.p4{left:4%;top:55%}}

/* ===== Tambahan (konten asli, video, tabel, brosur) ===== */
.ph.img::before,.ph.img::after{display:none}
.ph.img{background:var(--cloud)}
.ph.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art .ph.img{transition:filter .4s}
.ytwrap{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(13,1,1,.18)}
.ytwrap iframe,.ytwrap .yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt{padding:0;cursor:pointer;background:#000;border:0}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:opacity .3s,transform .6s}
.yt:hover img,.yt:focus-visible img{opacity:1;transform:scale(1.03)}
.yt .yp{position:absolute;left:50%;top:50%;translate:-50% -50%;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--leaf);color:#fff;font-size:30px;padding-left:6px;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .3s}
.yt:hover .yp{transform:scale(1.1)}
.gthumb .ph.img{position:absolute;inset:0;border-radius:0;margin:0;aspect-ratio:auto}
.gthumb{display:block}
.stack{display:grid;gap:14px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--cloud)}
.tbl th{font-weight:500;color:var(--stone);width:38%}
.jadwal{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.jadwal>div{background:var(--cloud);border-radius:var(--r);padding:22px 26px}
.jadwal h3{margin-bottom:8px}
.note{background:var(--leaf-l);border-radius:18px;padding:14px 18px;font-size:14px;margin-top:18px}
.brosur{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.brosur a{display:block;border-radius:var(--r);overflow:hidden;background:var(--cloud)}
.brosur img{width:100%;height:auto;display:block}
.ctc{display:grid;gap:14px;margin:18px 0}
.ctc div{background:var(--cloud);border-radius:18px;padding:16px 20px}
.ctc small{display:block;color:var(--stone);margin-bottom:2px}
.mapframe{width:100%;aspect-ratio:16/10;border:0;border-radius:28px;background:var(--cloud)}
.sect-t{margin:44px 0 18px}
.sect-t:first-child{margin-top:0}
.people.sm{grid-template-columns:repeat(4,1fr)}
.person .ph.g2 .ini{position:relative;font-size:clamp(28px,4vw,48px);font-weight:300;color:rgba(13,1,1,.5)}
@media (max-width:760px){.jadwal,.brosur{grid-template-columns:1fr}.people.sm{grid-template-columns:repeat(2,1fr)}.yt .yp{width:68px;height:68px;font-size:24px}}
.people.sm .person .ph{aspect-ratio:1}


/* ===== v4: flat & seamless — tanpa kotak pembungkus, gutter kiri-kanan mengikuti lebar layar ===== */
:root{--gutter:clamp(20px,6vw,104px);--maxw:1360px;--line:#e4e4e1;--soft:#f4f4f1;--rad:18px}
body{background:#fff}
.wrap{padding:0}
.panel{background:transparent;border-radius:0;margin:0;overflow:visible;
  padding:clamp(56px,8vw,120px) max(var(--gutter),calc((100vw - var(--maxw))/2))}
.panel.soft{background:var(--soft)}
.panel.green{background:var(--leaf)}
.panel.dark{background:var(--ink)}
.page-h{padding-block:clamp(48px,7vw,104px);overflow:hidden}
.page-h .wm{right:max(var(--gutter),calc((100vw - var(--maxw))/2) )}
footer.panel{padding-bottom:36px}
.statement{padding-block:clamp(72px,10vw,150px)}

/* navbar: bar penuh, rata dengan gutter */
.nav{margin:0;top:0;border-radius:0;padding:10px max(var(--gutter),calc((100vw - var(--maxw))/2));background:rgba(255,255,255,.94);box-shadow:none;border-bottom:1px solid var(--line)}
.nav .btn{padding:4px 4px 4px 20px}.nav .btn i{width:36px;height:36px}

/* hero: full-bleed, panel hijau berisi foto asli */
.hero2{background:#fff;min-height:max(660px,calc(100vh - 62px));border-radius:0}
.h2-panel{top:0;right:0;bottom:0;border-radius:0;clip-path:inset(0 0 100% 0)}
@keyframes open2{to{clip-path:inset(0 0 0 0)}}
.hphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,1,1,.35),rgba(13,1,1,.05) 38%,rgba(77,112,2,.55))}
.h2-left{padding:clamp(28px,4vw,56px) 24px clamp(28px,4vw,56px) max(var(--gutter),calc((100vw - var(--maxw))/2))}
.h2-top{right:max(var(--gutter),calc((100vw - var(--maxw))/2));z-index:5}
.h2-rt{right:max(var(--gutter),calc((100vw - var(--maxw))/2));top:26%;width:min(26%,340px);text-shadow:0 2px 16px rgba(13,1,1,.45)}
.h2-bot{right:max(var(--gutter),calc((100vw - var(--maxw))/2));bottom:48px}
.p1{left:53%;top:80%}.p2{left:66%;top:72%}.p3{left:79%;top:82%}.p4{left:58%;top:64%}
.gstat{border-radius:var(--rad)}
@media(max-width:960px){
  .hero2{min-height:0}
  .h2-left{padding:28px var(--gutter) 24px}
  .h2-right{margin:0;border-radius:0;min-height:640px;background:var(--leaf)}
  .h2-panel{display:block;left:0;clip-path:none;animation:none}
  .h2-top{right:auto;padding:20px var(--gutter) 0}
  .h2-rt{padding:26px var(--gutter) 0;width:auto;right:auto;top:auto}
  .p1{left:var(--gutter);top:66%}.p2{left:52%;top:60%}.p3{left:48%;top:78%}.p4{left:var(--gutter);top:84%}
}

/* strip alumni → logo universitas */
.strip{padding:34px 0 30px;background:var(--ink);color:var(--mist);overflow:hidden}
.strip-t{text-align:center;font-size:14px;color:rgba(255,255,255,.6);margin-bottom:22px;padding:0 var(--gutter)}
.si{gap:16px;padding:0 36px}.si b{font-weight:300;font-size:clamp(18px,2vw,26px)}
.si .lg{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.si .lg img{width:40px;height:40px;object-fit:contain}
.si::after{margin-left:36px}

/* section tanpa kotak: kartu jadi daftar bergaris */
.card,.art,.person{background:transparent;border-radius:0}
.card{padding:22px 0 0;border-top:1px solid var(--ink);min-height:0;gap:12px;isolation:auto;overflow:visible}
.card::before{display:none}
.card.feat,.card.feat p,.card:hover{color:var(--ink)}
.card.feat{background:transparent}
.card:hover{translate:none;box-shadow:none}.card:hover h3{color:var(--leaf-d)}
.card img.lg{background:none;padding:0;border-radius:0;width:84px;height:84px}
.card:hover img.lg{transform:scale(1.06)}
.lemb{gap:clamp(20px,3vw,44px)}
.card .more{margin-top:12px}
.art{padding:0;gap:14px}.art:hover{translate:0 -4px}
.art .ph{border-radius:var(--rad)}.art div{padding:0}
.arts{gap:clamp(20px,3vw,44px)}
.split .ph,.ytwrap,.map,.mapframe{border-radius:var(--rad)}
.ph.img.portrait{aspect-ratio:4/5;max-height:620px;border-radius:var(--rad)}
.person{overflow:visible}.person .ph{border-radius:var(--rad)}.person div.t{padding:14px 0 0}
.person.f{background:transparent;color:var(--ink)}.person.f small{color:var(--stone)}
.person .ph.g2{background:var(--soft)}
.person .ph.g2 .ini{font-size:clamp(34px,4vw,56px)}
.people{gap:clamp(20px,3vw,40px)}
.jadwal>div,.ctc div,.list li{background:transparent;border-radius:0;padding:18px 0;border-top:1px solid var(--line)}
.jadwal>div{padding-inline:0}.jadwal{gap:0 clamp(24px,4vw,64px)}
.list{gap:0}.list li:last-child{border-bottom:1px solid var(--line)}
.ctc{gap:0}
.note{background:transparent;border-left:3px solid var(--leaf);border-radius:0;padding:4px 0 4px 16px}
.brosur a{border-radius:var(--rad)}
.tbl th{background:transparent}
input,textarea,select{border-radius:12px}

/* 8 permata diri GRAPIYAK */
.gems{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,48px) clamp(20px,3vw,44px)}
.gems li{position:relative;padding-top:20px;border-top:1px solid var(--ink)}
.gems .gl{display:block;font-size:clamp(64px,7vw,104px);line-height:.9;font-weight:700;letter-spacing:-.05em;color:var(--leaf);margin-bottom:14px}
.gems small{position:absolute;top:18px;right:0;font-size:13px;color:var(--stone)}
.gems h3{font-size:19px;font-weight:500;margin-bottom:8px}
.gems p{font-size:14.5px;color:var(--stone);line-height:1.5}
.gems li{transition:translate .35s}.gems li:hover{translate:0 -4px}
.reveal.in .gems li{animation:pop .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*80ms)}
.gems li:nth-child(2){--i:1}.gems li:nth-child(3){--i:2}.gems li:nth-child(4){--i:3}.gems li:nth-child(5){--i:4}.gems li:nth-child(6){--i:5}.gems li:nth-child(7){--i:6}.gems li:nth-child(8){--i:7}
.reveal .gems li{opacity:0}
@media(max-width:960px){.gems{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gems{grid-template-columns:1fr}}

/* pengasuh */
.split.pengasuh{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.pname{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;color:var(--leaf-d)}
@media(max-width:960px){.split.pengasuh{grid-template-columns:1fr}.ph.img.portrait{max-height:520px}}

/* footer + ikon sosial */
.social{list-style:none;padding:0;display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.foot .social a{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;transition:.3s}
.foot .social a:hover{background:var(--leaf);border-color:var(--leaf);color:var(--ink);transform:translateY(-3px)}
.social svg{width:21px;height:21px}
.copy{border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
@media(prefers-reduced-motion:reduce){.reveal .gems li{opacity:1}}

/* v5: hero rapi, ekskul, prestasi, alumni, detail lembaga */



.alumni{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.acard{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:26px;border:1px solid var(--line);border-radius:var(--rad);background:#fff;transition:translate .35s,box-shadow .35s}
.acard:hover{translate:0 -5px;box-shadow:0 18px 40px rgba(13,1,1,.08)}
.acard blockquote{margin:0;font-size:16.5px;line-height:1.55}
.acard figcaption{display:flex;gap:14px;align-items:flex-start}
.aph{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--leaf-l);display:grid;place-items:center}
.aph img{width:100%;height:100%;object-fit:cover}.aph b{font-size:20px;font-weight:500;color:var(--leaf-d)}
.ai{display:flex;flex-direction:column;gap:2px;min-width:0}.ai strong{font-weight:500;font-size:17px}.ai small{color:var(--stone);font-size:13px}
.ai .st{align-self:flex-start;font-style:normal;font-size:12px;padding:1px 10px;border-radius:999px;background:var(--ink);color:#fff;margin:6px 0 2px}
.ai .st.kuliah{background:var(--leaf);color:var(--ink)}.ai .st.wirausaha{background:var(--stone)}
.ai .at{font-size:14px;line-height:1.4}
.note.contoh{margin-top:28px;font-size:13px;color:var(--stone)}
.note.contoh code{font-size:12px}

.ldetail{align-items:start}
.linfo{background:var(--soft);border-radius:var(--rad);padding:28px}
.linfo .lg{width:96px;height:96px;object-fit:contain;margin-bottom:18px}
.linfo dl{display:grid;gap:0}.linfo dl>div{padding:12px 0;border-top:1px solid var(--line)}
.linfo dt{font-size:12px;color:var(--stone);text-transform:uppercase;letter-spacing:.06em}.linfo dd{margin:2px 0 0;font-weight:500}
.gems.prog4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gems.prog4 li{padding-top:46px}.gems.prog4 small{top:16px;left:0;right:auto;font-size:15px;color:var(--leaf-d)}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chips span{padding:9px 18px;border-radius:999px;background:var(--leaf-l);font-size:15px}
.lainlist li{padding:0}.lainlist a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
.lainlist small{display:block;color:var(--stone);margin-top:2px}.lainlist i{font-style:normal;font-size:20px;transition:transform .3s}.lainlist a:hover i{transform:rotate(-45deg)}.lainlist a:hover b{color:var(--leaf-d)}
.lnav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:36px;border-top:1px solid var(--line)}
.lnav a{display:flex;flex-direction:column;gap:2px}.lnav small{color:var(--stone)}.lnav a:hover b{color:var(--leaf-d)}.lnav .r{text-align:right}.lnav .all{text-decoration:underline;flex-direction:row}

@media(max-width:1100px){.alumni,.prestasi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.alumni,.prestasi{grid-template-columns:1fr}.lnav{flex-direction:column;align-items:flex-start}.lnav .r{text-align:left}}
@media(prefers-reduced-motion:no-preference){.reveal .prestasi li,.reveal .acard{opacity:0}.reveal.in .prestasi li,.reveal.in .acard{animation:pop .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*110ms)}}
/* v5.1: banner halaman dengan foto di kanan, memudar ke warna hijau */
.page-h{position:relative;isolation:isolate}
.page-h>.ph-photo{position:absolute;top:0;right:0;bottom:0;left:auto;width:min(54%,900px);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 30%,#000 70%)}
.page-h>.ph-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--leaf) 0,rgba(109,160,3,.35) 45%,rgba(77,112,2,.22) 100%)}
.page-h>.ph-photo img{width:100%;height:100%;object-fit:cover;display:block}
.page-h>*:not(.ph-photo){position:relative;z-index:1}
@media(max-width:960px){.page-h>.ph-photo{width:100%;opacity:.32;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 100%)}}

/* ekstrakurikuler: carousel kartu berfoto */
.ek-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;font-size:14px}
.ek-track{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.ek-track::-webkit-scrollbar{display:none}
.ek-track.at-start{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 91%,transparent 100%)}
.ek-track.at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 100%)}
.ek-track.at-start.at-end{-webkit-mask-image:none;mask-image:none}
.ek-card{flex:0 0 clamp(240px,24vw,310px);scroll-snap-align:start;background:var(--soft);border-radius:var(--rad);overflow:hidden;transition:translate .35s,box-shadow .35s}
.ek-card:hover{translate:0 -5px;box-shadow:0 18px 40px rgba(13,1,1,.1)}
.ek-ph{position:relative;aspect-ratio:4/3;background:var(--leaf-l)}
.ek-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ek-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,1,1,.35))}
.ek-tx{padding:18px 20px 22px}.ek-tx h3{font-size:19px;font-weight:500;margin-bottom:6px}.ek-tx p{font-size:14.5px;color:var(--stone);line-height:1.5}
.arrows button:disabled{opacity:.35;cursor:default}.arrows button:disabled:hover{background:none}

/* prestasi: showcase poster */
.pshow .head h2{color:#fff}.pshow .lead{color:rgba(255,255,255,.7)}
.pstats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,72px);padding:6px 0 34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.16)}
.pstats b{display:block;font-size:clamp(44px,6vw,84px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--leaf)}
.pstats span{display:block;margin-top:8px;font-size:13px;line-height:1.25;color:rgba(255,255,255,.65)}
.pcard{position:relative;overflow:hidden;border-radius:var(--rad);aspect-ratio:4/5;background:#1b1b18;color:#fff;isolation:isolate;transition:translate .4s,box-shadow .4s}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,1,1,.12) 25%,rgba(13,1,1,.88) 100%)}
.pcard:hover{translate:0 -6px;box-shadow:0 24px 50px rgba(0,0,0,.45)}.pcard:hover img{transform:scale(1.07)}
.pl{position:absolute;top:18px;right:14px;font-size:12px;padding:4px 12px;border-radius:999px;background:var(--leaf);color:var(--ink);font-weight:500}
.pb{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px}
.pc{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:6px}
.pb h3{font-size:clamp(16px,1.5vw,19px);font-weight:500;line-height:1.25;margin-bottom:4px}
.pb p{font-size:13.5px;color:rgba(255,255,255,.78)}
.pshow .note.contoh{color:rgba(255,255,255,.6);border-color:var(--leaf)}.pshow .note.contoh code{color:#fff}
@media(prefers-reduced-motion:no-preference){.reveal .pcard{opacity:0}.reveal.in .pcard{animation:pop .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*110ms)}}

/* prestasi: dua baris berjalan pelan, tepi kiri-kanan memudar ke warna latar */
.prows{display:grid;gap:clamp(12px,1.4vw,20px);margin-inline:calc(-1*max(var(--gutter),calc((100vw - var(--maxw))/2)))}
.pmarq{overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.ptrack{display:flex;width:max-content;animation:pmove var(--d,70s) linear infinite;will-change:transform}
.pmarq.rev .ptrack{animation-direction:reverse}
.pmarq:hover .ptrack,.pmarq:focus-within .ptrack{animation-play-state:paused}
@keyframes pmove{to{transform:translateX(-50%)}}
.pcard{flex:none;width:clamp(240px,22vw,300px);margin-right:clamp(12px,1.4vw,20px);aspect-ratio:4/5}
@media(max-width:520px){.pcard{width:72vw;aspect-ratio:4/5}}
@media(prefers-reduced-motion:reduce){.ptrack{animation:none}.pmarq{overflow-x:auto;scrollbar-width:none}.pmarq::-webkit-scrollbar{display:none}.pcard[aria-hidden]{display:none}}

/* v6: hero dengan foto 4 santri "offside" di antara bingkai putih dan hijau */
.hero2 .h2-panel{background:radial-gradient(120% 95% at 28% 100%,#86bb0c 0%,var(--leaf) 52%,#5a8503 100%)}
.hero2 .h2-panel::after{display:none}
.h2-cast{position:absolute;z-index:3;bottom:0;left:50%;height:70%;aspect-ratio:1200/896;transform:translateX(-30%);pointer-events:none;animation:castin 1.1s .55s cubic-bezier(.2,.8,.2,1) both}
.h2-cast .cast-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 22px 28px rgba(13,1,1,.24))}
@keyframes castin{from{opacity:0;translate:0 48px}}
.h2-cast .gp{font-size:clamp(13px,1.15vw,16px);padding:8px 18px}
.h2-cast .p1{left:23%;top:13%}.h2-cast .p2{left:38%;top:9%}.h2-cast .p3{left:61%;top:10%}.h2-cast .p4{left:80%;top:11%}
.hero2 .h2-rt{top:clamp(36px,7%,84px);width:min(27%,360px)}
@media(max-width:960px){
  .hero2 .h2-right{min-height:600px}
  .h2-cast{height:auto;width:min(100%,560px);left:50%;transform:translateX(-50%)}
  .h2-cast .p1{left:3%;top:9%}.h2-cast .p2{left:27%;top:1%}.h2-cast .p3{left:55%;top:2%}.h2-cast .p4{left:71%;top:11%}
  .h2-cast .gp{font-size:12px;padding:6px 12px}.h2-cast .gp::after{display:none}
  .hero2 .h2-rt{top:auto;width:auto}
}

/* GRAPIYAK dengan foto */
.gems.photo li{padding-top:0;border-top:0}
.gems.photo .gph{aspect-ratio:4/3;border-radius:var(--rad);overflow:hidden;background:var(--leaf-l);margin-bottom:16px}
.gems.photo .gph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gems.photo li:hover .gph img{transform:scale(1.07)}
.gems.photo small{top:12px;left:12px;right:auto;background:rgba(255,255,255,.92);color:var(--ink);padding:3px 10px;border-radius:999px;font-weight:500}

/* kerjasama */
.gems.prog4.kj{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.gems.prog4.kj{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gems.prog4.kj{grid-template-columns:1fr}}
.kjlist li{display:grid;gap:4px}.kjlist b{font-weight:500;font-size:18px}.kjlist span{color:var(--stone);line-height:1.5}
.list li b{display:block;font-weight:500;font-size:18px;margin-bottom:2px}.list li span:not(:empty){color:var(--stone);line-height:1.5}
.kjalur{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,36px);counter-reset:k}
.kjalur li{position:relative;padding-top:22px;border-top:1px solid var(--ink)}
.kjalur span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--leaf);color:var(--ink);font-weight:500;margin-bottom:14px}
.kjalur h3{font-size:18px;font-weight:500;margin-bottom:6px}.kjalur p{font-size:14.5px;color:var(--stone);line-height:1.5}
@media(max-width:960px){.kjalur{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kjalur{grid-template-columns:1fr}}

/* v6.1: foto santri lebih tinggi & geser kanan; panel hijau berisi foto gedung */
.hero2 .h2-panel{background:#4d7002 url(/assets/img/hero-bg.webp) center/cover no-repeat}
.hero2 .h2-panel::after{display:block;content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,76,2,.78) 0%,rgba(77,112,2,.52) 42%,rgba(109,160,3,.42) 100%)}
.h2-cast{left:auto;right:.5%;height:82%;max-width:68vw;transform:none;display:flex;align-items:flex-end;justify-content:flex-end}
.h2-cast .cast-img{object-position:right bottom}
.h2-cast .p1{left:23%;top:13%}.h2-cast .p2{left:38%;top:9%}.h2-cast .p3{left:61%;top:10%}.h2-cast .p4{left:80%;top:11%}
.hero2 .h2-rt{top:clamp(24px,4.5%,52px);width:min(34%,470px)}
.hero2 .h2-rt h2{font-size:clamp(24px,2.3vw,36px);margin-bottom:10px}
.hero2 .h2-rt p{font-size:13.5px;line-height:1.45}
@media(min-width:961px) and (max-height:780px){.hero2 .h2-rt p{display:none}.h2-cast{height:80%}}
@media(max-width:960px){
  .h2-cast{right:auto;left:50%;height:auto;max-width:none;width:min(100%,600px);transform:translateX(-50%);display:block}
  .h2-cast .p1{left:3%;top:9%}.h2-cast .p2{left:27%;top:1%}.h2-cast .p3{left:55%;top:2%}.h2-cast .p4{left:71%;top:11%}
  .hero2 .h2-rt{width:auto}.hero2 .h2-rt p{display:block}
}

/* v6.2: tanpa filter hijau (putih 30%), foto lebih "keluar" dari bingkai */
.hero2 .h2-panel{background-color:#dfe8cc}
.hero2 .h2-panel::after{background:rgba(255,255,255,.3)}
.h2-cast{right:2.5%;height:82%}
@media(min-width:961px) and (max-height:780px){.h2-cast{height:80%}}
@media(max-width:960px){.hero2 .h2-right{min-height:430px}.h2-cast{right:auto}}

/* v7: tombol tanpa gerak saat hover */
.btn:hover i,.lainlist a:hover i{transform:none}
.ib:hover,.wa:hover,.foot .social a:hover{transform:none}
.yt:hover .yp{transform:none}
.btn{will-change:auto}

/* v7: foto santri hero lebih besar & lebih keluar ke kiri */
@media(min-width:961px){
  .hero2 h1{font-size:clamp(44px,5.8vw,100px)}
  .h2-cast{right:0;height:100%;bottom:0;max-width:74vw}
}

/* v7: detail lembaga - foto di samping profil + galeri */
.linfo{padding:0;overflow:hidden}
.lfoto{position:relative;margin:0;aspect-ratio:4/5;background:var(--leaf-l)}
.lfoto .lp{width:100%;height:100%;object-fit:cover;display:block}
.linfo .lfoto .lg{position:absolute;left:16px;bottom:16px;width:68px;height:68px;margin:0;padding:7px;background:#fff;border-radius:50%;object-fit:contain;box-shadow:0 8px 22px rgba(13,1,1,.22)}
.linfo dl{padding:6px 24px 18px}
.galeri{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.galeri figure{margin:0;aspect-ratio:4/3;border-radius:var(--rad);overflow:hidden;background:var(--leaf-l)}
.galeri img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.galeri{grid-template-columns:repeat(2,1fr)}}

/* v7.1: dasar foto sejajar dasar background hero; tidak ada yang meluber ke section bawah */
.hero2{overflow:hidden}

/* ===== Prestasi: poster utuh di atas, keterangan di bawah (revisi v8) ===== */
.pcard{display:flex;flex-direction:column;aspect-ratio:auto;background:#1b1b18}
.pcard::after{display:none}
.pcard .pimg{position:relative;aspect-ratio:5/6;overflow:hidden;background:#111}
.pcard .pimg::before{content:"";position:absolute;inset:-12%;background:var(--bg) center/cover;filter:blur(22px) brightness(.55);z-index:0}
.pcard .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;transition:none}
.pcard:hover img{transform:none}
.pcard .pl{z-index:2}
.pcard .pb{position:static;padding:16px 18px 20px;min-height:132px}
@media(max-width:520px){.pcard{aspect-ratio:auto}}

/* ===== Form pendaftaran (dummy) ===== */
.dform-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);align-items:start}
.dform-side{position:sticky;top:96px}
.dform{display:grid;gap:28px}
.dform fieldset{border:0;border-top:1px solid var(--cloud);padding:22px 0 0;display:grid;gap:16px;min-width:0}
.dform legend{font-size:20px;font-weight:500;padding:0 14px 0 0;float:left;width:100%;margin-bottom:6px}
.dform legend+*{clear:both}
.dform label{display:grid;gap:6px;font-size:14px;color:var(--stone)}
.dform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dform input,.dform select,.dform textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--cloud);border:1.5px solid transparent;border-radius:16px;padding:13px 16px;width:100%;transition:border-color .2s,background .2s}
.dform textarea{resize:vertical;border-radius:20px}
.dform input:focus,.dform select:focus,.dform textarea:focus{outline:0;border-color:var(--leaf);background:var(--mist)}
.dform label.bad input,.dform label.bad select,.dform label.bad textarea{border-color:#c0392b;background:#fff6f5;box-shadow:0 0 0 4px rgba(192,57,43,.14)}
.dform label.bad{color:#c0392b}
.fe{display:block;color:#c0392b;font-size:13px;margin-top:6px;animation:feIn .25s ease}
.dform .chk .fe{grid-column:1/-1;margin-top:0}
.dform .chk.bad{outline:1.5px solid #c0392b;outline-offset:8px;border-radius:10px}
.dform label,.doc{scroll-margin-top:110px}
@keyframes feIn{from{opacity:0;transform:translateY(-4px)}}
.dform .chk{grid-template-columns:auto 1fr;align-items:start;gap:12px;color:var(--ink)}
.dform .chk input{width:20px;height:20px;margin-top:3px;accent-color:var(--leaf)}
.req{color:#c0392b}
.form-err{color:#c0392b;font-size:14px;background:#fbeaea;border-radius:14px;padding:12px 16px}
#daftar-app [hidden]{display:none!important}
@media(max-width:960px){.dform-wrap{grid-template-columns:1fr}.dform-side{position:static}}
@media(max-width:560px){.dform .row{grid-template-columns:1fr}}

/* ===== Revisi v9 ===== */
/* Strip logo universitas: diperlambat */
.track{animation-duration:110s}


/* Foto pengasuh: cutout transparan di atas latar hijau lembut */
.stage-p{position:relative;aspect-ratio:4/5;max-height:620px;width:100%;border-radius:var(--rad);overflow:hidden;
  background:radial-gradient(90% 70% at 50% 100%,#cfe3a6 0%,var(--leaf-l) 60%,#f4f8ea 100%)}
.stage-p>img{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;z-index:2;filter:drop-shadow(0 18px 22px rgba(13,1,1,.16))}
@media(max-width:960px){.stage-p{max-height:520px}}

/* Penempatan daun per konteks */

/* ===== Revisi v10: rapikan tampilan HP ===== */
@media(max-width:960px){
  /* Hero */
  .panel.hero2{padding:0}
  .hero2 .h2-left{padding:26px 16px 20px;gap:18px}
  .hero2 h1{font-size:clamp(46px,15vw,84px);margin-top:2px}
  .hero2 h1 p{max-width:34ch;font-size:15.5px;line-height:1.5;margin-top:14px}
  .hero2 .btn{margin-top:20px;width:100%;justify-content:space-between;padding-left:26px}
  .hero2 .btn i{flex:none}
  .gstat{flex-wrap:nowrap;gap:14px;padding:12px;width:100%;align-self:stretch}
  .gthumb{width:104px;height:86px;border-radius:14px}
  .gthumb b{left:8px;bottom:6px;font-size:11px}
  .gstat .t{font-size:11px;margin-bottom:4px}
  .gnums{gap:12px}.gnums b{font-size:28px}.gnums span{font-size:10px}
  .hero2 .h2-right{margin:0 16px 16px;border-radius:28px;min-height:0;height:calc(min(100vw - 32px,600px)*.7467 + 88px)}
  .hero2 .h2-cast{width:min(100%,600px)}
  .hero2 .h2-cast .gp{font-size:12px;padding:6px 12px}
}
@media(max-width:960px){
  .panel:not(.hero2):not(.page-h){padding-top:44px;padding-bottom:44px}
}
@media(max-width:520px){
  /* 8 Permata: 2 kolom ringkas */
  .gems.photo{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .gems.photo .gph{aspect-ratio:1/1;margin-bottom:10px}
  .gems.photo h3{font-size:15px;line-height:1.25;margin-bottom:4px}
  .gems.photo p{font-size:12.5px;line-height:1.45}
  .gems.photo small{top:8px;left:8px;font-size:11px;padding:2px 8px}
}
@media(max-width:700px){
  /* Alumni: geser horizontal */
  .alumni{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1*var(--gutter));padding:4px var(--gutter) 14px;scrollbar-width:none}
  .alumni::-webkit-scrollbar{display:none}
  .alumni .acard{flex:0 0 84%;scroll-snap-align:center;margin:0}
}

/* Form: tanda wajib (*) sejajar dengan teks label */
.dform label:not(.chk){display:block}
.dform label:not(.chk)>input,.dform label:not(.chk)>select,.dform label:not(.chk)>textarea{margin-top:6px}
.dform .row>label{min-width:0}

/* ===== Revisi v11 ===== */
/* Judul hero: "The" kecil di atas Prophetic Education */
.hero2 h1 .the{font-size:.36em;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--leaf-d);margin-bottom:-.1em}
/* Kartu capaian dihapus: isi hero rata tengah secara vertikal di desktop */
@media(min-width:961px){.hero2 .h2-left{justify-content:center}.hero2 h1{margin-top:0}}
/* Foto profil lembaga berupa cutout transparan: tampil utuh, tanpa crop */
.lfoto.cutout{aspect-ratio:1/1;overflow:hidden;border-radius:var(--rad);background:radial-gradient(90% 75% at 50% 100%,#cfe3a6 0%,var(--leaf-l) 62%,#f4f8ea 100%)}
.lfoto.cutout .lp{position:absolute;left:4%;right:4%;bottom:0;width:92%;height:auto;max-height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 18px rgba(13,1,1,.16))}
.linfo .lfoto.cutout .lg{left:auto;right:14px;top:14px;bottom:auto;width:56px;height:56px;padding:6px}

/* ===== v12: persebaran santri, sosial media, foto kurikulum, alumni ===== */
.stage-p.stage-k{aspect-ratio:1/1;max-height:none}
@media(max-width:960px){.stage-p.stage-k{max-height:none;aspect-ratio:1/1}}
.stage-k>img{height:100%}

/* Alumni: kartu terakhir (jumlah ganjil) tidak menggantung di kiri */
@media(min-width:1101px){.alumni .acard:last-child:nth-child(3n+1){grid-column:2}}
@media(min-width:961px) and (max-width:1100px){.alumni .acard:last-child:nth-child(2n+1){grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}}

/* Persebaran santri */
.wsec .head h2{color:#fff}.wsec .lead{color:rgba(255,255,255,.7)}
.wmap{position:relative}
.wm-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.wm-bar button{font:inherit;font-size:14px;padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:rgba(255,255,255,.8);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.wm-bar button:hover{border-color:var(--leaf);color:#fff}
.wm-bar button[aria-pressed=true]{background:var(--leaf);border-color:var(--leaf);color:var(--ink)}
.wm-scroll{border-radius:var(--rad);background:radial-gradient(80% 90% at 50% 40%,#16200a 0%,#0b0f06 70%,#080a05 100%);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.wmap svg{display:block;width:100%;aspect-ratio:1.7;height:auto}
.wm-land{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.2);stroke-width:.6px;vector-effect:non-scaling-stroke}
.wmap svg .wm-land{vector-effect:non-scaling-stroke}
.mn{transform:translate(var(--x),var(--y)) scale(var(--u,.5));cursor:default}
.mn .dot{fill:var(--leaf);stroke:#fff;stroke-width:1.5px;transition:fill .25s}
.mn .ring{fill:var(--leaf);opacity:0;transform-origin:0 0;animation:mnp 2.8s var(--d,0s) infinite ease-out}
.mn text{font-size:13px;font-weight:500;fill:#fff;paint-order:stroke;stroke:rgba(8,10,5,.85);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.mn.hot .dot{fill:#c8f05a}.mn.hot text{fill:#c8f05a}
@keyframes mnp{0%{opacity:.55;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}
.wm-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.wm-list li{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#fff;font-size:14.5px;transition:border-color .25s,background .25s}
.wm-list li span{width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.wm-list li small{color:rgba(255,255,255,.5);font-size:12px}
.wm-list li.hot{border-color:var(--leaf);background:rgba(109,160,3,.18)}
@media(max-width:700px){
  .wm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .wmap svg{min-width:680px}
}
@media(prefers-reduced-motion:reduce){.mn .ring{animation:none;opacity:.3;transform:scale(1.6)}}

/* Sosial media */
.sosmed{align-items:center}
.sbtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.sbtn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 26px 6px 6px;transition:background .25s}
.sbtn i{width:46px;height:46px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;color:var(--ink);font-style:normal;transition:background .25s}
.sbtn span{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.sbtn b{font-weight:500;font-size:16px}.sbtn small{font-size:12.5px;color:rgba(255,255,255,.65)}
.sbtn:hover{background:var(--leaf-d)}.sbtn:hover i{background:#fff}
.smock{display:flex;justify-content:center}
.smock img{display:block;width:100%;max-width:520px;height:auto;filter:drop-shadow(0 26px 34px rgba(13,1,1,.18))}
@media(max-width:960px){.sosmed .smock{order:2}.smock img{max-width:420px}}

/* ===== v12.1: foto pengasuh & kurikulum tanpa bingkai/latar, daun boleh keluar dari foto ===== */
.stage-p{background:none;overflow:visible;border-radius:0}
.stage-p>img{filter:none}
.panel:has(.stage-p){overflow-x:clip}

/* ===== v12.2: daun satu gugus per sisi, sejajar dasar foto; gradasi tipis di bawah foto ke warna latar ===== */
.stage-p{--stage-bg:#fff}
#pengasuh .stage-p{--stage-bg:var(--soft)}
.stage-p::after{content:"";position:absolute;left:-14%;right:-14%;bottom:0;height:13%;z-index:6;pointer-events:none;background:linear-gradient(to top,var(--stage-bg) 0%,color-mix(in srgb,var(--stage-bg) 55%,transparent) 45%,transparent 100%)}


/* ===== v12.3: HP sosial media melayang naik-turun (loop halus), tombol IG di detail lembaga ===== */
@keyframes phfloat{0%,100%{transform:translate3d(0,10px,0)}50%{transform:translate3d(0,-14px,0)}}
.smock img{animation:phfloat 5.5s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
@media(prefers-reduced-motion:reduce){.smock img{animation:none}}
.linfo .sbtn{margin:18px 14px 14px;display:flex;width:auto}
.linfo .sbtn span{flex:1}
.linfo .sbtn em{font-style:normal;margin-left:auto;font-size:18px;opacity:.7}

/* v13: foto kurikulum landscape, profil SMK tanpa gap atas, galeri 6 foto */
.stage-p.stage-k{aspect-ratio:838/890}
@media(max-width:960px){.stage-p.stage-k{aspect-ratio:838/890}}
.lfoto.cutout.wide{aspect-ratio:1100/890}
.lfoto.cutout.wide .lp{left:2%;right:2%;width:96%}
@media(min-width:701px){.galeri.g6,.galeri.g9{grid-template-columns:repeat(3,1fr)}}
.lfoto.cutout.tall{aspect-ratio:4/5}
.lfoto.cutout.tall .lp{left:6%;right:6%;width:88%;height:96%;max-height:none;object-position:center bottom}

/* ===== v14: chat asisten (kanan bawah) ===== */
.chat{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;font-family:var(--font)}
.chat-fab{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:var(--leaf);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 28px rgba(13,1,1,.28);transition:transform .25s,background .25s;position:relative}
.chat-fab:hover{transform:scale(1.07);background:#7ab804}
.chat-fab svg{width:26px;height:26px;fill:currentColor;grid-area:1/1;transition:opacity .2s,transform .25s}
.chat-fab .i-x{opacity:0;transform:rotate(-60deg) scale(.6)}
.chat.open .i-chat{opacity:0;transform:rotate(60deg) scale(.6)}.chat.open .i-x{opacity:1;transform:none}
.chat:not(.open) .chat-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--leaf);animation:chatpulse 2.6s ease-out infinite}
@keyframes chatpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.chat-panel{position:absolute;right:0;bottom:66px;width:min(370px,calc(100vw - 28px));height:min(540px,calc(100dvh - 110px));background:#fff;border-radius:24px;box-shadow:0 24px 60px rgba(13,1,1,.28);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;animation:chatin .22s ease-out}
.chat-panel[hidden]{display:none}
@keyframes chatin{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--mist);padding:12px 12px 12px 14px}
.chat-ava{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden}.chat-ava img{width:30px;height:30px;object-fit:contain}
.chat-ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.chat-ttl strong{font-weight:500;font-size:15px}.chat-ttl small{font-size:12px;color:#c9c9c9}
.chat-close{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}.chat-close:hover{background:rgba(255,255,255,.22)}
.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#f6f8f1;overscroll-behavior:contain}
.cm{display:flex;flex-direction:column;gap:6px;max-width:88%}.cm.u{align-self:flex-end;align-items:flex-end}.cm.b{align-self:flex-start}
.cb{padding:9px 13px;border-radius:18px;font-size:14.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.cm.u .cb{background:var(--ink);color:var(--mist);border-bottom-right-radius:6px}
.cm.b .cb{background:#fff;color:var(--ink);border:1px solid #e3e8d6;border-bottom-left-radius:6px}
.cb p+p,.cb p+ul,.cb ul+p{margin-top:6px}.cb ul{padding-left:18px}.cb li{margin:2px 0}.cb a{color:var(--leaf-d);text-decoration:underline}
.cwa{display:inline-flex;align-items:center;gap:8px;background:var(--leaf);color:var(--ink);font-size:13.5px;font-weight:500;padding:9px 14px;border-radius:999px;align-self:flex-start;transition:background .2s}
.cwa:hover{background:#7ab804}.cwa svg{width:18px;height:18px;fill:currentColor}
.typ{display:flex;gap:4px;align-items:center;padding:13px 14px}.typ i{width:7px;height:7px;border-radius:50%;background:var(--stone);animation:chatdot 1.1s infinite}.typ i:nth-child(2){animation-delay:.15s}.typ i:nth-child(3){animation-delay:.3s}
@keyframes chatdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;background:#f6f8f1}.chat-chips[hidden]{display:none}
.chat-chips button{border:1px solid #cfdcae;background:#fff;color:var(--ink);font:inherit;font-size:13px;border-radius:999px;padding:6px 12px;cursor:pointer}.chat-chips button:hover{background:var(--leaf-l)}
.chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #e8eadf;background:#fff}
.chat-form input{flex:1;min-width:0;border:1px solid #d6dac9;border-radius:999px;padding:10px 16px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.chat-form input:focus{outline:2px solid var(--leaf);outline-offset:1px;border-color:transparent}
.chat-form button{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:var(--leaf);cursor:pointer;display:grid;place-items:center}.chat-form button:disabled{opacity:.45;cursor:default}
.chat-form svg{width:20px;height:20px;fill:var(--ink)}
.chat-foot{font-size:11.5px;color:var(--stone);text-align:center;padding:0 12px 10px;background:#fff}.chat-foot a{color:var(--leaf-d);text-decoration:underline}
@media(max-width:520px){.chat{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.chat-panel{width:calc(100vw - 24px);height:min(78dvh,560px)}}
@media(prefers-reduced-motion:reduce){.chat-panel,.chat-fab::after,.typ i{animation:none}}

/* ───────── Pendaftaran: unggah berkas, cek hasil NIK, animasi ───────── */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dots::after{content:"";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
.kode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;background:var(--leaf-l);padding:2px 10px;border-radius:8px}

.docs{display:grid;gap:14px}
.doc{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;padding:16px 18px;border:1.5px dashed var(--cloud);border-radius:var(--rad);transition:border-color .2s,background .2s}
.doc-t b{display:block;font-weight:500;color:var(--ink)}.doc-t small{color:var(--stone);font-size:13px}
.doc-pick{display:block!important;cursor:pointer}.doc-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.doc-btn{display:inline-block;background:var(--ink);color:var(--mist);border-radius:999px;padding:10px 18px;font-size:14px;white-space:nowrap;transition:background .2s}
.doc-pick:hover .doc-btn,.doc-pick:focus-within .doc-btn{background:var(--leaf-d)}
.doc-s{grid-column:1/-1;font-size:13px;color:var(--stone);margin:0;word-break:break-word}
.doc.ok{border-style:solid;border-color:var(--leaf);background:var(--leaf-l)}.doc.ok .doc-s{color:var(--leaf-d)}
.doc.bad{border-color:#c0392b;background:#fbeaea;box-shadow:0 0 0 4px rgba(192,57,43,.12)}.doc.bad .fe{grid-column:1/-1;margin:0}.doc.bad .doc-s{color:#c0392b}
.doc.busy .doc-s{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
@media(max-width:560px){.doc{grid-template-columns:1fr}}

.hasil{position:relative;max-width:760px;margin:0 auto;text-align:center}
.hasil h2{font-size:clamp(28px,4.2vw,48px)}
.hform{margin:28px auto 0}
.hbox{display:flex;gap:10px;background:var(--mist);border:1.5px solid var(--cloud);border-radius:999px;padding:6px 6px 6px 22px;transition:border-color .2s,box-shadow .2s}
.hbox:focus-within{border-color:var(--leaf);box-shadow:0 0 0 5px var(--leaf-l)}
.hbox input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}.hbox input::placeholder{text-transform:none;letter-spacing:.06em}.hbox input:focus{outline:0}
.hform .form-err{margin-top:14px}
@media(max-width:480px){.hbox input{font-size:16px;letter-spacing:.06em}}

.scan{display:grid;justify-items:center;gap:18px;padding:36px 0 8px}
.scan-ring{position:relative;width:84px;height:84px}
.scan-ring span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--leaf);opacity:0;animation:ping 1.8s cubic-bezier(.2,.6,.3,1) infinite}
.scan-ring span:nth-child(2){animation-delay:.6s}.scan-ring span:nth-child(3){animation-delay:1.2s}
.scan-ring::after{content:"";position:absolute;inset:30px;border-radius:50%;background:var(--leaf);animation:pulse 1s ease-in-out infinite}
@keyframes ping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.scan p{color:var(--stone)}

#h-out{margin-top:30px;display:grid;gap:16px;text-align:left}
#h-confetti{position:absolute;inset:0;pointer-events:none;z-index:2}
.res{--c:var(--stone);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;background:var(--mist);border:1.5px solid var(--cloud);border-left:6px solid var(--c);border-radius:var(--rad);padding:26px;animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.res.ok{--c:var(--leaf);background:var(--leaf-l);border-color:var(--leaf)}
.res.no{--c:#b3261e}.res.wait{--c:#a8650a}.res.none{display:block;text-align:center}
.res h3{font-size:22px;font-weight:500;margin:0 0 8px}.res p{margin:0 0 16px;color:#3c3d38}
.res-ic{width:64px;height:64px;color:var(--c)}
.res-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.res-ic circle,.ok-mark circle{stroke-dasharray:152;stroke-dashoffset:152;animation:draw .7s .1s ease forwards}
.res-ic path,.ok-mark path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .65s ease forwards}
.res.wait .res-ic svg{animation:pulse 1.6s ease-in-out infinite}
.res-m{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 22px;border-top:1px solid rgba(13,1,1,.1);padding-top:16px}
.res-m small{display:block;color:var(--stone);font-size:12.5px}.res-m b{font-weight:500;word-break:break-word}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.ok-mark{width:72px;height:72px;color:var(--leaf);margin-bottom:18px}
.ok-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.res{grid-template-columns:1fr}.res-ic{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.res,.scan-ring span,.scan-ring::after,.dots::after,.doc.busy .doc-s,.res.wait .res-ic svg{animation:none!important}.res-ic circle,.res-ic path,.ok-mark circle,.ok-mark path{animation:none!important;stroke-dashoffset:0}.scan-ring span{opacity:.5}}

/* Kartu pendaftaran (PDF) di halaman sukses */
.kartu-act{margin-bottom:22px}

/* Tab Pendaftaran | Cek hasil — hanya warna yang berubah saat hover */
.dtabs-wrap{padding:clamp(20px,3vw,36px) max(var(--gutter),calc((100vw - var(--maxw))/2)) 0;display:flex;justify-content:center;background:#fff}
.dtabs-wrap[hidden]{display:none}
.dtabs{display:inline-flex;gap:4px;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:999px;max-width:100%}
.dtabs button{border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;padding:11px 26px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.dtabs button:hover{background:var(--cloud)}
.dtabs button[aria-selected="true"]{background:var(--ink);color:var(--mist)}
.dtabs button[aria-selected="true"]:hover{background:var(--ink)}
@media(max-width:560px){.dtabs{display:flex;width:100%}.dtabs button{flex:1;padding:11px 12px}}

/* Brosur: kartu gambar + tombol unduh */
.bro{margin:0;display:flex;flex-direction:column;gap:10px}
.bro>a{display:block;border-radius:var(--rad);overflow:hidden;background:var(--cloud)}
.bro figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--stone)}
.bro figcaption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brosur a.bro-dl{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--mist);border-radius:999px;padding:5px 5px 5px 18px;font-size:14px;overflow:visible}
.bro-dl i{width:30px;height:30px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;font-style:normal;color:var(--ink)}
.brosur a.bro-dl:hover{background:#2a2323}

/* ===== Navbar HP: tombol burger putih + garis abu, dropdown tertutup sampai diklik ===== */
.burger{background:#fff;color:#858585;border:1px solid var(--line);box-shadow:0 1px 3px rgba(13,1,1,.06);display:none;align-items:center;justify-content:center;padding:0;font-size:0;line-height:0}
.burger svg{display:block}
.menu>li>a[aria-haspopup]{cursor:pointer}
.menu>li.open>a .caret{transform:rotate(-135deg) translateY(-1px)}
.caret{transition:transform .25s}
@media(max-width:960px){
  .burger{display:inline-flex}
  .menu .dd{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding:2px 0 8px 12px;min-width:0}
  .menu li:hover>.dd,.menu li:focus-within>.dd{display:none}
  .menu>li.open>.dd{display:block}
  .menu>li>a[aria-haspopup]{display:flex;align-items:center;justify-content:space-between}
}

/* ===== Halaman Profil (memakai komponen landing: .head .split .stage-p .gems .lemb .statement) ===== */
.pf-facts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(40px,5vw,72px)}
.pf-facts li{padding-top:20px;border-top:1px solid var(--ink)}
.pf-facts b{display:block;font-size:clamp(38px,4.6vw,64px);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--leaf-d)}
.pf-facts span{display:block;margin-top:10px;font-size:14.5px;color:var(--stone);line-height:1.4}
.pf-time{list-style:none;padding:0;max-width:900px}
.pf-time li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.pf-time li:last-child{border-bottom:1px solid var(--line)}
.pf-time .yr{font-size:15px;font-weight:500;color:var(--leaf-d)}
.pf-time h3{margin-bottom:6px}.pf-time p{color:var(--stone);max-width:62ch;font-size:15.5px}
.pf-addr{list-style:none;padding:0;margin-top:26px}
.pf-addr li{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.pf-addr li:last-child{border-bottom:1px solid var(--line)}
.pf-addr b{font-weight:500}.pf-addr a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:960px){.pf-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pf-time li{grid-template-columns:1fr;gap:4px}.pf-addr li{grid-template-columns:1fr;gap:2px}}


/* ===== Halaman Pengurus Yayasan ===== */
.pg-sub{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf-d);margin:34px 0 8px}
.pg-sub.first{margin-top:0}
.av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--leaf-l);color:var(--leaf-d);display:grid;place-items:center;font-size:13px;font-weight:500;letter-spacing:.02em}
.av.lg{width:56px;height:56px;font-size:17px}
.pg-rows{list-style:none;padding:0}
.pg-rows li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.pg-rows li:last-child{border-bottom:1px solid var(--line)}
.pg-rows b{font-weight:400;font-size:16px}
.pg-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.pg-cards li{background:#fff;border-radius:var(--rad);padding:24px;display:flex;align-items:center;gap:18px;transition:translate .35s,box-shadow .35s}
.pg-cards li:hover{translate:0 -5px;box-shadow:0 16px 36px rgba(13,1,1,.07)}
.pg-cards small,.pg-koor small{display:block;font-size:13px;color:var(--leaf-d);font-weight:500;margin-bottom:4px}
.pg-cards h3{font-size:18px;line-height:1.3}
.pg-nav{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.pg-nav a{display:block;height:100%;padding:20px 0 0;border-top:1px solid var(--ink);font-size:18px;line-height:1.3;transition:color .25s,translate .3s}
.pg-nav a:hover{color:var(--leaf-d);translate:0 -4px}
.pg-nav small{display:block;font-size:13px;color:var(--stone);margin-bottom:8px}
.pg-bidang{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;scroll-margin-top:70px}
.pg-bl h2{font-size:clamp(30px,3.6vw,50px);margin:10px 0 26px}
.pg-koor{background:var(--leaf-l);border-radius:var(--rad);padding:20px 22px}
.pg-koor .who{display:flex;align-items:center;gap:16px}
.pg-koor .av{background:#fff}
.pg-koor h3{font-size:19px;line-height:1.3}
.pg-bidang:not(.soft) .pg-koor{background:var(--soft)}
.pg-ang{list-style:none;padding:0}
.pg-ang li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.pg-ang li:last-child{border-bottom:1px solid var(--line)}
.pg-ang small{color:var(--stone);width:18px;flex:none;padding-top:2px}
.pg-grup+.pg-grup{margin-top:30px}
.pg-grup .gt{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:4px 14px;font-size:13px;margin-bottom:10px}
.pg-unit{list-style:none;padding:0}
.pg-unit li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:15px 0;border-top:1px solid var(--line)}
.pg-unit li:last-child{border-bottom:1px solid var(--line)}
.pg-unit .u{font-weight:500}
.pg-unit .pj{color:#4b4b48}
@media(max-width:1100px){.pg-nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.pg-cards{grid-template-columns:repeat(2,1fr)}.pg-bidang{grid-template-columns:1fr}}
@media(max-width:560px){.pg-cards,.pg-nav{grid-template-columns:1fr}.pg-unit li{grid-template-columns:1fr;gap:2px}.pg-nav a{padding-top:14px}}

/* ===== Detail artikel: 2 kolom, bagikan, komentar ===== */
.btn.back{padding:6px 24px 6px 6px}
.btn.back i{order:-1}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,80px);align-items:start}
.art-main{min-width:0}
.art-cover{aspect-ratio:16/8;border-radius:28px;margin:22px 0 32px}
.art-side{position:sticky;top:96px}
.art-side h2{font-size:clamp(22px,2vw,28px);margin-bottom:6px}
.side-list{list-style:none;padding:0}
.side-list li{border-top:1px solid var(--line)}
.side-list li:first-child{border-top:0}
.side-list a{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:16px 0;align-items:center}
.side-list .ph{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--cloud)}
.side-list .ph img{width:100%;height:100%;object-fit:cover;display:block}
.side-list .st small{display:block;color:var(--stone);font-size:13px;margin-bottom:4px}
.side-list .st b{display:block;font-weight:500;font-size:15px;line-height:1.35;transition:color .2s}
.side-list a:hover .st b{color:var(--leaf-d)}
.side-all{display:inline-block;margin-top:6px;font-size:14.5px;color:var(--leaf-d)}
.side-all:hover{text-decoration:underline;text-underline-offset:3px}

.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-l{font-size:14px;color:var(--stone);margin-right:4px}
.sh{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,color .2s,border-color .2s,translate .25s}
.sh:hover{background:var(--leaf);border-color:var(--leaf);color:#fff;translate:0 -2px}
.sh[hidden],.share-ok[hidden]{display:none}
.share-ok{font-size:13px;color:var(--leaf-d);background:var(--leaf-l);border-radius:999px;padding:5px 12px}
.art-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:44px 0 56px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.kom h2{font-size:clamp(26px,3vw,38px)}
.kom-n{color:var(--stone);font-weight:300}
.kom-list{list-style:none;padding:0;margin:22px 0 36px}
.kom-empty{padding:22px 0;color:var(--stone);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kom-item{display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.kom-item:last-child{border-bottom:1px solid var(--line)}
.kom-av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--leaf-l);color:var(--leaf-d);display:grid;place-items:center;font-size:14px;font-weight:500}
.kom-main{min-width:0}
.kom-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.kom-meta b{font-weight:500}.kom-meta small{color:var(--stone)}
.kom-main p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.kom-form-wrap{background:var(--soft);border-radius:24px;padding:clamp(20px,3vw,32px)}
.kom-form-wrap h3{margin-bottom:16px}
.kom-form{display:grid;gap:14px;position:relative}
.kom-form label{display:block;font-size:14px;color:#4b4b48}
.kom-form label small{color:var(--stone)}
.kom-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kom-in{display:block;width:100%;margin-top:6px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 15px;font:inherit;font-size:15.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
textarea.kom-in{resize:vertical;min-height:110px;line-height:1.55}
.kom-in:focus{outline:0;border-color:var(--leaf);box-shadow:0 0 0 4px var(--leaf-l)}
.kom-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.kom-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.kom-msg{font-size:14.5px;border-radius:14px;padding:12px 16px;background:#fff}
.kom-msg.ok{background:var(--leaf-l);color:var(--leaf-d)}
.kom-msg.err{background:#fbeceb;color:#8c1d17}
.btn:disabled{opacity:.6;cursor:progress}
@media(max-width:960px){.art-grid{grid-template-columns:1fr}.art-side{position:static}}
@media(max-width:560px){.kom-row{grid-template-columns:1fr}.art-bar{flex-direction:column;align-items:flex-start}.kom-foot{flex-direction:column;align-items:stretch}.kom-foot .btn{justify-content:space-between}}

/* Jadwal PPDB dinamis (/prosedur, /pengumuman) */
.pj-ta{margin:34px 0 12px;font-weight:500}.pj-ta:first-child{margin-top:0}
.pj-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}.pj-h h3{margin:0}
.pj-l{font-size:14px;color:var(--stone);margin:0 0 8px}
.pj-sub{font-size:15px;font-weight:500;margin:18px 0 4px}
.pst{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--cloud);color:var(--stone);vertical-align:middle}
.pst.ok{background:var(--leaf-l);color:var(--leaf-d,#3f6212)}.pst.warn{background:#fdf1d8;color:#8a5a00}
.alink{color:var(--leaf-d,#3f6212);text-decoration:underline;word-break:break-all}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:560px){.tbl th{width:44%}}

/* Pembayaran biaya registrasi (setelah diterima) */
.pay{margin-top:20px;border-top:1px solid rgba(13,1,1,.1);padding-top:18px;display:grid;gap:16px;text-align:left}
.pay-h{font-size:18px;font-weight:500;margin:0}.pay-p{margin:6px 0 0;color:#3c3d38}
.pay-st{border-radius:18px;padding:16px 18px;background:#fff;border:1.5px solid var(--cloud)}
.pay-st b{display:block;font-weight:500;font-size:17px;margin-bottom:4px}.pay-st p{margin:0;color:#3c3d38}
.pay-st.ok{border-color:var(--leaf);background:#fff}.pay-st.wait{border-color:#e8c36a;background:#fffaf0}.pay-st.no{border-color:#e39b9b;background:#fff5f5}
.pay-grid{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:18px;align-items:start}
.qris{margin:0;display:grid;gap:8px;justify-items:center;text-align:center}
.qris-f{width:100%;aspect-ratio:3/4;border:2px dashed var(--cloud);border-radius:20px;background:#fff;display:grid;place-items:center;color:var(--stone);font-size:13px;padding:10px;overflow:hidden}
.qris-f.has{border:1px solid var(--cloud);padding:8px}.qris-f img{width:100%;height:100%;object-fit:contain}
.qris figcaption{font-size:12.5px;color:var(--stone)}
.pay-dl{font-size:13px;text-decoration:underline;color:var(--leaf-d)}
.bank{background:#fff;border:1px solid var(--cloud);border-radius:20px;padding:16px 18px;display:grid;gap:6px}
.bank small{color:var(--stone);font-size:12.5px}.bank-n{font-size:22px;font-weight:500}
.rek{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rek code{font-size:clamp(18px,2.6vw,24px);letter-spacing:.04em;font-family:inherit;font-weight:500;word-break:break-all}
.pay-copy{border:1px solid var(--cloud);background:var(--mist);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}.pay-copy:hover{border-color:var(--leaf)}
.pay-disc{margin:0;padding:12px 16px;border-radius:14px;background:#fffaf0;border:1px solid #f0dca8;font-size:14px;color:#5b4a14}
.pay-up{border:1px solid var(--cloud);border-radius:18px;background:#fff;padding:0}.pay-up>summary{cursor:pointer;padding:14px 18px;font-weight:500;list-style:none}.pay-up>summary::-webkit-details-marker{display:none}
.pay-up>summary::after{content:"＋";float:right;color:var(--leaf-d)}.pay-up[open]>summary::after{content:"−"}
.pay-form{display:grid;gap:14px;padding:4px 18px 18px}.pay-form label{display:grid;gap:6px;font-size:14px}
.pay-form input[type=text]{border:1.5px solid var(--cloud);border-radius:14px;padding:11px 14px;font:inherit;background:var(--mist);max-width:200px}
.pay-help{font-size:13.5px;color:var(--stone);margin:0}.pay-help a{text-decoration:underline}
@media(max-width:640px){.pay-grid{grid-template-columns:1fr}.qris-f{max-width:260px;margin:0 auto}}
.pay-amt{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 18px;border-radius:16px;background:#fff;border:1.5px solid var(--leaf)}
.pay-amt small{color:var(--stone);font-size:13px}.pay-amt b{font-size:clamp(22px,3.4vw,30px);font-weight:500;color:var(--leaf-d)}

/* ===== Lembaga lainnya: foto profil landscape, galeri 1-2 foto, logo di daftar ===== */
.lfoto.land{aspect-ratio:4/3}
.galeri.g1{grid-template-columns:1fr;max-width:860px;margin-inline:auto}
.galeri.g1 figure{aspect-ratio:16/9}
.galeri.g2{grid-template-columns:repeat(2,1fr)}
.galeri.g2 figure{aspect-ratio:16/10}
@media(max-width:700px){.galeri.g2{grid-template-columns:1fr}}
.lainlist a{justify-content:flex-start}
.lainlist a>span{flex:1}
.lainlist .ll{width:52px;height:52px;object-fit:contain;flex:none;background:#fff;border-radius:50%;padding:4px}
.lainlist a>i{margin-left:auto}

.galeri.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.galeri.g3{grid-template-columns:1fr}}

/* Banner halaman dengan logo (bukan foto): tampil besar & utuh, tidak dipudarkan */
.page-h>.ph-photo.logo{width:min(46%,560px);display:flex;align-items:center;justify-content:center;-webkit-mask-image:none;mask-image:none}
.page-h>.ph-photo.logo::after{display:none}
.page-h>.ph-photo.logo img{width:auto;height:84%;max-height:440px;object-fit:contain}
@media(max-width:960px){.page-h>.ph-photo.logo{width:100%;opacity:.2;justify-content:flex-end;padding-right:16px}.page-h>.ph-photo.logo img{height:70%}}