/* ===== Tema Madrasah — hijau (identitas), kuning (aksen), Poppins ===== */
:root{--hijau:#087653;--hijau2:#16A34A;--emas:#F5B800;--gelap:#064E3B;--abu:#5F716A;--bg:#FAFCF9;--card:#fff;--ink:#10261E;--line:#E1ECE6;--r:16px;
--sh:0 1px 2px rgba(6,78,59,.06),0 10px 28px rgba(6,78,59,.08);--sh2:0 2px 4px rgba(6,78,59,.08),0 16px 36px rgba(6,78,59,.14);
--font:'Plus Jakarta Sans',Poppins,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--pola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3C/svg%3E")}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;font:400 16px/1.7 var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}.narrow{max-width:780px}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.01em;font-weight:600;margin:0 0 .5em}
section{padding:36px 0}a{color:var(--hijau);text-underline-offset:3px}img{max-width:100%}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
:focus-visible{outline:3px solid var(--emas);outline-offset:2px;border-radius:6px}
/* top bar & header */
.topbar{background:var(--gelap);color:#d7efe4;font-size:.8rem}.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.sos{display:flex;gap:6px}.sos a{color:#d7efe4;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;transition:.2s}.sos a:hover{background:rgba(255,255,255,.14);color:#fff}
.top{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.top a{text-decoration:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.logo{display:flex;align-items:center;gap:12px;color:var(--gelap)}
.mark{width:44px;height:44px;flex:none;filter:drop-shadow(0 2px 4px rgba(11,125,88,.3))}
.nm{display:flex;flex-direction:column;line-height:1.2}.nm b{font-size:1.15rem;font-weight:700;color:var(--hijau)}.nm small{font-size:.75rem;color:var(--abu);font-weight:400}
nav{display:flex;align-items:center;gap:2px;font-size:.92rem;font-weight:500}
nav a{color:var(--ink);padding:8px 14px;border-radius:10px;position:relative;transition:.2s}
nav a:hover{background:#E8F5EE;color:var(--hijau)}
nav a.on{color:var(--hijau);font-weight:600}nav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;border-radius:3px;background:var(--emas)}
nav .adm{background:var(--hijau);color:#fff;margin-left:8px;padding:8px 18px}nav .adm:hover{background:var(--gelap);color:#fff}nav .adm.on::after{display:none}
.burger{display:none;font-size:1.5rem;cursor:pointer;padding:4px 10px;border-radius:10px;color:var(--hijau)}
/* buttons */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--hijau);color:#fff;border:2px solid var(--hijau);padding:11px 22px;border-radius:12px;font:600 .95rem var(--font);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:var(--gelap);border-color:var(--gelap);transform:translateY(-2px);box-shadow:var(--sh2)}
.btn.emas{background:var(--emas);border-color:var(--emas);color:#3b2a00}.btn.emas:hover{background:#f5ad0b;border-color:#f5ad0b}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}.btn.ghost:hover{background:#fff;color:var(--gelap);border-color:#fff}
.btn.ghost-d,.ghost-d{background:transparent;color:var(--hijau);border-color:var(--hijau)}.ghost-d:hover{background:var(--hijau)!important;color:#fff!important}
.btn.block{width:100%}
/* hero */
.hero{position:relative;color:#fff;padding:72px 0 110px;background:var(--pola),linear-gradient(135deg,#064E3B 0%,#087653 62%,#16A34A 120%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-img,none) right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 80%);mask-image:linear-gradient(90deg,transparent 30%,#000 80%);opacity:.9}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--emas),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:center}
.kicker{margin:0;font-size:1.05rem;opacity:.9}
.hero h1{font-size:clamp(2.3rem,5.6vw,3.8rem);font-weight:700;margin:.1em 0 .2em;letter-spacing:-.02em}
.lead2{font-size:clamp(1.2rem,2.6vw,1.65rem);font-weight:600;line-height:1.35;margin:0 0 14px}.lead2 em{font-style:normal;color:var(--emas)}
.sub{max-width:34em;opacity:.92;margin:0 0 24px}.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.ppdb{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);border-radius:20px;padding:24px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.akr{display:inline-flex;gap:6px;align-items:center;background:var(--emas);color:#3b2a00;font-size:.78rem;font-weight:600;padding:4px 12px;border-radius:99px;margin-bottom:12px}
.ppdb h2{font-size:1.4rem;margin:0 0 12px}
.ppdb dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 18px;font-size:.92rem}.ppdb dt{opacity:.8}.ppdb dd{margin:0;font-weight:600;text-align:right}
/* quick menu */
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:-62px;position:relative;z-index:2;padding:0}
.quick a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:var(--card);border-radius:var(--r);padding:20px 12px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.quick a:hover{transform:translateY(-5px);box-shadow:var(--sh2)}.quick b{font-weight:600}.quick small{color:var(--abu);font-size:.76rem;line-height:1.4}
.qi{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#E3F4EB;color:var(--hijau);margin-bottom:8px;font-size:1.3rem}
/* section head */
.eyebrow{margin:0 0 4px;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hijau2)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:22px}.sec-head h2{margin:0;font-size:1.6rem}
.sec-head>a{font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap}.sec-head>a:hover{text-decoration:underline}
/* about */
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}.about h2{font-size:1.8rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:22px}
.stats>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center}
.stats .ic{color:var(--hijau);width:1.5em;height:1.5em;margin-bottom:4px}.stats b{font-size:1.5rem;font-weight:700;line-height:1.2}.stats span{font-size:.78rem;color:var(--abu)}
.motto{min-height:260px;border-radius:24px;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;background:var(--pola),linear-gradient(140deg,var(--gelap),var(--hijau));box-shadow:var(--sh2);position:relative;overflow:hidden}
.motto::after{content:"";position:absolute;left:30px;right:30px;bottom:26px;height:3px;border-radius:3px;background:var(--emas)}
.bsm{font:400 1.7rem/1.8 'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;color:var(--emas)}.motto p{margin:6px 0 0;font-size:1.25rem;font-weight:600}
/* PPDB band */
.band{background:linear-gradient(135deg,var(--gelap),var(--hijau));background-image:var(--pola),linear-gradient(135deg,var(--gelap),var(--hijau));color:#fff;margin:24px 0;padding:52px 0}
.band .eyebrow{color:var(--emas)}.band h2{font-size:1.8rem}
.ppdb-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin-top:20px}
.jalur{display:grid;gap:12px}.jl{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:14px 18px}
.jl .qi{background:rgba(255,255,255,.16);color:var(--emas);margin:0}.jl b{display:block}.jl small{opacity:.85;font-size:.85rem;line-height:1.4;display:block}
.info-penting{background:#fff;color:var(--ink);border-radius:var(--r);padding:24px;box-shadow:var(--sh2)}.info-penting h3{font-size:1.1rem}
.info-penting dl{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;margin:0 0 20px;font-size:.9rem}.info-penting dt{color:var(--abu)}.info-penting dd{margin:0;font-weight:600;text-align:right}.info-penting dt .ic{color:var(--hijau)}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.card h3{margin:2px 0 6px;font-size:1.05rem}.card h3 a{color:var(--ink);text-decoration:none}.card h3 a:hover{color:var(--hijau)}.card p{margin:0;color:var(--abu);font-size:.92rem}.card small{color:var(--abu);font-size:.8rem}
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.news .card{margin:0}
.post{padding:0;overflow:hidden;display:flex;flex-direction:column}.post:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.thumb{display:grid;place-items:center;height:150px;background:var(--pola),linear-gradient(135deg,#087653,#16A34A);color:rgba(255,255,255,.85);font-size:2.4rem}
.pb{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}.pb p{flex:1;margin-bottom:10px}
.more{font-weight:600;font-size:.85rem;text-decoration:none}.more:hover{text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.grid .card{margin:0}
.teacher{display:flex;gap:14px;align-items:center}.teacher:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.ava{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--hijau),var(--hijau2));color:#fff;font-weight:600;font-size:.95rem}
.teacher h3{font-size:.98rem;margin:0}.teacher p{margin:0}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--pola),linear-gradient(120deg,var(--hijau),var(--gelap));color:#fff;border-radius:24px;padding:34px 38px;box-shadow:var(--sh2)}
.cta-band h2{font-size:1.5rem;margin:0 0 4px}.cta-band p{margin:0;opacity:.9}
/* inner pages */
.pagehead{background:var(--pola),linear-gradient(135deg,var(--gelap),var(--hijau));color:#fff;padding:46px 0 52px;border-bottom:5px solid var(--emas)}
.pagehead h1{font-size:clamp(1.6rem,4vw,2.3rem);margin:0 0 4px}.pagehead p{margin:0;opacity:.9}
.article h1{font-size:clamp(1.6rem,4vw,2.2rem)}.crumb{font-size:.85rem;color:var(--abu);margin-bottom:10px}.crumb a{text-decoration:none}
.meta{color:var(--abu);font-size:.88rem}.isi{font-size:1.05rem;line-height:1.85}
.search{display:flex;gap:10px;margin:0 0 20px;flex-wrap:wrap}.search input,.search select{flex:1;min-width:160px}.search.filter a{align-self:center}
.hint{color:var(--abu);font-size:.9rem}
.empty{text-align:center;color:var(--abu);padding:36px 18px;background:var(--card);border:1px dashed #b9d4c5;border-radius:var(--r)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:24px;flex-wrap:wrap}.pager a{min-width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:#fff;text-decoration:none;font-weight:500}
.pager a:hover{border-color:var(--hijau)}.pager a.on{background:var(--hijau);border-color:var(--hijau);color:#fff}
/* forms */
input,textarea,select{font:inherit;color:var(--ink);background:#fff;border:1.5px solid #cfe0d6;border-radius:12px;padding:11px 14px;transition:border-color .2s,box-shadow .2s;max-width:100%}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--hijau);box-shadow:0 0 0 4px rgba(11,125,88,.15)}
.form{display:grid;gap:14px}.form label{display:grid;gap:6px;font-weight:500;font-size:.92rem}.form input,.form textarea{width:100%}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.notice{background:#E3F4EB;border:1px solid #b8dfc9;color:var(--gelap);border-radius:12px;padding:12px 16px;margin:0 0 16px}.notice.err{background:#FDECEC;border-color:#f3b8b8;color:#8a1c1c}
.contact{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
.info{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh);align-self:start}.info h2{font-size:1.15rem}
.info dl{display:grid;gap:2px;margin:0}.info dt{font-size:.78rem;color:var(--abu);text-transform:uppercase;letter-spacing:.08em;margin-top:12px}.info dd{margin:0;font-weight:500}
.notfound{text-align:center;padding:70px 0}.kode{font-size:6rem;font-weight:700;line-height:1;margin:0;color:var(--hijau);letter-spacing:-.04em}
/* admin */
.adminbar{background:#fff;border-bottom:1px solid var(--line)}.adminbar .wrap{display:flex;gap:4px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.adminbar a{padding:8px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:500;font-size:.9rem}.adminbar a:hover{background:#E8F5EE}
.adminbar a.on{background:var(--hijau);color:#fff}.adminbar .out{margin-left:auto;color:#b42318}
.badge{background:var(--emas);color:#3b2a00;border-radius:99px;padding:1px 8px;font-size:.72rem;font-weight:700}
.kpi{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.kpi .card{text-decoration:none;color:var(--ink);text-align:center}.kpi b{display:block;font-size:2rem;color:var(--hijau);line-height:1.2}.kpi span{color:var(--abu);font-size:.85rem}.kpi .hot b{color:#b42318}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px}.row>span:last-child{white-space:nowrap}
button.link{background:none;border:0;padding:0;font:inherit;color:#b42318;cursor:pointer;text-decoration:underline}button.link.ok{color:var(--hijau);margin-right:10px}
.msg.unread{border-left:5px solid var(--emas)}
/* footer */
.foot{background:var(--gelap);color:#cfe7da;margin-top:56px;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:30px;padding-top:44px;padding-bottom:30px}
.foot .logo{color:#fff}.foot .nm b{color:#fff}.foot .nm small{color:#9fd0b9}.foot h4{color:#fff;font-size:1rem}
.foot a{display:block;color:#cfe7da;text-decoration:none;padding:3px 0}.foot a:hover{color:var(--emas)}
.foot p{margin:8px 0;display:flex;gap:10px;align-items:flex-start}.foot .ic{margin-top:.3em;color:var(--emas)}
.copy{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:.82rem;color:#9fd0b9}
/* responsive */
@media(max-width:900px){
.hero-grid,.about,.ppdb-grid,.contact{grid-template-columns:1fr}.news{grid-template-columns:1fr 1fr}.quick{grid-template-columns:repeat(3,1fr)}
.fgrid{grid-template-columns:1fr 1fr}.hero{padding:48px 0 96px}}
@media(max-width:720px){
.burger{display:block}nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:#fff;padding:10px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--sh2)}
#burger:checked~nav{display:flex}nav .adm{margin:6px 0 0;text-align:center}nav a.on::after{display:none}.top{position:sticky}
.news,.fgrid{grid-template-columns:1fr}.quick{grid-template-columns:repeat(2,1fr)}.topbar .wrap>span:first-child{font-size:.72rem}
.cta-band{padding:26px}.sec-head{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* ===== Tahap 2: gambar, kategori, agenda ===== */
.thumb{overflow:hidden}.thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}.post:hover .thumb img{transform:scale(1.05)}
.kat{display:inline-block;background:#E3F4EB;color:var(--hijau);font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 10px;border-radius:99px;margin-right:6px}
.pb .kat{align-self:flex-start;margin:0 0 6px}
.cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);margin:6px 0 20px;box-shadow:var(--sh)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tabs a{padding:7px 16px;border-radius:99px;border:1px solid var(--line);background:#fff;text-decoration:none;font-size:.88rem;font-weight:500;color:var(--ink);transition:.2s}
.tabs a:hover{border-color:var(--hijau);color:var(--hijau)}.tabs a.on{background:var(--hijau);border-color:var(--hijau);color:#fff}
.ag{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:12px;box-shadow:var(--sh);transition:transform .25s}
.ag:hover{transform:translateX(4px)}.ag h3{font-size:1rem;margin:0 0 2px}.ag small{color:var(--abu);font-size:.82rem}.ag small .ic{color:var(--hijau)}
.tgl{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:58px;height:62px;border-radius:14px;background:linear-gradient(160deg,var(--hijau),var(--gelap));color:#fff;line-height:1.1}
.tgl b{font-size:1.4rem;font-weight:700}.tgl span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--emas);font-weight:600}
.agenda-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.agenda-grid .ag{margin-bottom:12px}.agenda-grid .empty{grid-column:1/-1}
.lewat .ag{opacity:.62;box-shadow:none}.lewat .tgl{background:#9aa8a1}.lewat .tgl span{color:#fff}.mt{margin-top:34px}
.row.lewat{opacity:.65}
.prev{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.prev img{width:150px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.form .cek{display:flex;align-items:center;gap:8px;font-weight:400}.form .cek input{width:auto}
input[type=file]{padding:9px 12px;background:#F3F8F5}
@media(max-width:720px){.agenda-grid{grid-template-columns:1fr}}
/* ===== Tahap 3: galeri & lightbox ===== */
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.galeri.mini{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.gi{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#d9e8df;box-shadow:var(--sh);transition:transform .3s,box-shadow .3s}
.gi:hover{transform:translateY(-4px);box-shadow:var(--sh2)}.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.gi:hover img{transform:scale(1.07)}
.gi span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:.82rem;font-weight:500;line-height:1.35;background:linear-gradient(transparent,rgba(3,30,22,.82));opacity:0;transform:translateY(6px);transition:.3s}
.gi:hover span,.gi:focus-visible span{opacity:1;transform:none}
.lb{position:fixed;inset:0;z-index:100;background:rgba(3,30,22,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.lb.on{opacity:1;pointer-events:auto}.lb figure{margin:0;text-align:center;max-width:92vw}.lb img{max-width:92vw;max-height:80vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb figcaption{color:#e8f5ee;font-size:.9rem;margin-top:12px}
.lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:46px;height:46px;border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer;transition:background .2s}
.lb button:hover{background:var(--emas);color:#3b2a00}.lb-x{top:16px;right:16px}.lb-p{left:16px;top:50%;margin-top:-23px}.lb-n{right:16px;top:50%;margin-top:-23px}
.gadm{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.gcard{margin:0;padding:10px;display:flex;flex-direction:column;gap:8px}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}.gcard form{display:grid;gap:6px}.gcard input,.gcard select{width:100%;padding:8px 10px;font-size:.85rem}.gcard .btn{padding:7px 12px;font-size:.82rem}
@media(max-width:960px){.burger{display:block}nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:#fff;padding:10px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--sh2)}#burger:checked~nav{display:flex}nav .adm{margin:6px 0 0;text-align:center}nav a.on::after{display:none}}
@media(max-width:600px){.lb-p{left:6px}.lb-n{right:6px}.galeri{grid-template-columns:repeat(2,1fr);gap:10px}}
/* ===== Tahap 4: profil & PPDB ===== */
.vm{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;align-items:stretch}
.visi{background:var(--pola),linear-gradient(140deg,var(--gelap),var(--hijau));color:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--sh2)}.visi h3{color:var(--emas);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem}.visi p{margin:0;font-size:1.2rem;font-weight:500;line-height:1.6}
.misi{margin:0}.misi ol{margin:8px 0 0;padding-left:1.3em;display:grid;gap:8px}.misi li::marker{color:var(--hijau);font-weight:700}
.prosa p{color:var(--ink);font-size:1rem;margin:0 0 1em}.prosa p:last-child{margin:0}.prosa{padding:26px 30px}
.org{display:flex;gap:14px;align-items:center}.org h3{margin:0;font-size:1rem}.org p{margin:0}
.band.flat{margin:0;padding:34px 0}.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}.duo .card{margin:0}.duo h2{font-size:1.3rem}
.syarat{list-style:none;margin:0;padding:0;display:grid;gap:10px}.syarat li{display:flex;gap:10px;align-items:flex-start}.syarat .ic{color:var(--hijau2);margin-top:.3em}
.alur{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:12px}.alur li{counter-increment:s;display:flex;gap:12px;align-items:flex-start}
.alur li::before{content:counter(s);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hijau);color:#fff;font-weight:600;font-size:.85rem}
.form.cols{grid-template-columns:1fr 1fr}.form.cols .full{grid-column:1/-1}.form.cols p{margin:0}
.nomor{font-size:1.15rem;letter-spacing:.04em}#formulir{scroll-margin-top:90px}
.pend .ph{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:8px}
.stf{display:flex;gap:6px}.stf select{padding:7px 10px}.stf .btn{padding:7px 14px;font-size:.85rem}
.dd{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:8px 0 12px;font-size:.9rem}.dd dt{color:var(--abu)}.dd dd{margin:0}
@media(max-width:900px){.vm,.duo{grid-template-columns:1fr}}
@media(max-width:600px){.form.cols{grid-template-columns:1fr}}
/* nav 9 item: hamburger lebih awal */
@media(max-width:1100px){.burger{display:block}nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:#fff;padding:10px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--sh2)}#burger:checked~nav{display:flex}nav .adm{margin:6px 0 0;text-align:center}nav a.on::after{display:none}}
@media(max-width:1280px){nav a{padding:8px 10px;font-size:.88rem}}

/* tahap 5: halaman Cek Peluncuran */
.cekl{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}.cekl li{display:grid;grid-template-columns:26px 1fr;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.cekl .s{font-weight:700;text-align:center}.cekl .ok .s{color:var(--hijau)}.cekl .warn .s{color:#b45309}.cekl .bad .s{color:#b91c1c}.cekl .info .s{color:var(--abu)}
.cekl small{display:block;color:var(--abu);line-height:1.5}.cekl .bad{background:#FDECEC;border-color:#f3b8b8}.cekl .warn{background:#FFF8E6;border-color:#f3dd9a}
.cekrank{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.cekrank span{border-radius:99px;padding:4px 14px;font-weight:600;font-size:.88rem;background:#E3F4EB;color:var(--gelap)}.cekrank .b{background:#FDECEC;color:#8a1c1c}.cekrank .w{background:#FFF8E6;color:#8a5a00}
.form h2{grid-column:1/-1;margin:14px 0 0;font-size:1.15rem}.form.cols h2:first-child{margin-top:0}

/* ===== Tahap 6: tampilan baru mengikuti desain (hero foto, menu dropdown, kartu akses cepat, panel berita & agenda) ===== */
:root{--r:18px;--sh:0 1px 2px rgba(6,78,59,.05),0 8px 24px rgba(6,78,59,.07)}
body{background:#FAFCF9}
/* top bar */
.topbar .slg{letter-spacing:.02em;font-weight:500}.sos{align-items:center}
.sos a svg{width:16px;height:16px}.sos .admlink{width:auto;padding:0 12px;border-radius:99px;font-size:.78rem;font-weight:500;margin-left:6px;border:1px solid rgba(255,255,255,.25)}
/* header & menu */
.top{background:#fff;box-shadow:0 2px 14px rgba(6,78,59,.06)}.bar{min-height:72px}
.mark{filter:none}.nm b{font-size:1.3rem;letter-spacing:-.01em}
nav{gap:0}nav>a,nav .dd>a{padding:10px 14px;display:inline-flex;align-items:center;gap:4px}
nav .dd{position:relative}nav .dd>a .ic{width:.9em;height:.9em;stroke-width:2.2;opacity:.7;transition:transform .2s}
nav .dd:hover>a .ic,nav .dd:focus-within>a .ic{transform:rotate(180deg)}
nav .dd.on>a{color:var(--hijau);font-weight:600}nav .dd.on>a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;border-radius:3px;background:var(--emas)}
nav .dd:hover>a,nav .dd:focus-within>a{background:#E8F5EE;color:var(--hijau)}
nav .sub{position:absolute;left:0;top:100%;min-width:200px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);display:none;z-index:30}
nav .dd:hover .sub,nav .dd:focus-within .sub{display:block}
nav .sub a{display:block;padding:9px 14px;border-radius:9px;font-weight:500;font-size:.9rem}nav .sub a.on{color:var(--hijau);background:#E8F5EE;font-weight:600}
nav .sbtn{background:var(--hijau);color:#fff;width:42px;height:42px;padding:0;justify-content:center;border-radius:11px;margin-left:10px}nav .sbtn:hover{background:var(--gelap);color:#fff}
nav .sbtn::after{display:none}nav .sbtn .ic{width:1.2em;height:1.2em}
.crumb2{font-size:.85rem;opacity:.9;margin-bottom:8px}.crumb2 a{color:#fff;text-decoration:none;opacity:.85}.crumb2 a:hover{opacity:1;text-decoration:underline}.crumb2 i{font-style:normal;margin:0 4px;color:var(--emas)}
/* hero */
.hero{padding:84px 0 130px;min-height:520px;display:flex;align-items:center;background:var(--pola),linear-gradient(100deg,#053d2e 0%,#087653 70%,#16A34A 130%)}
.hero::before{background:var(--hero-img,none) right center/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 66%);mask-image:linear-gradient(90deg,transparent 34%,#000 66%);opacity:1}
.hero::after{height:auto;top:0;background:linear-gradient(90deg,rgba(5,61,46,.55) 0%,transparent 55%)}
.hero .wrap{width:100%}.hero-grid{display:block;max-width:1120px;z-index:1}
.hero-txt{max-width:560px}.kicker{font-size:1.15rem;font-weight:400;margin-bottom:2px}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.5rem);line-height:1.08;letter-spacing:-.025em;margin:.05em 0 .25em}
.lead2{font-size:clamp(1.3rem,2.8vw,1.9rem);font-weight:600}.sub{font-size:1rem;opacity:.95}
.akr-badge{position:absolute;top:0;right:20px;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;background:rgba(6,40,30,.55);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.akr-badge .seal{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--emas);color:var(--emas)}.akr-badge .seal .ic{width:1.5em;height:1.5em}
.akr-badge b{display:block;font-size:1rem;line-height:1.25}.akr-badge small{display:block;font-size:.72rem;opacity:.8}
/* akses cepat: satu kartu putih 6 kolom */
.quick{grid-template-columns:repeat(6,1fr);gap:0;margin-top:-66px;background:#fff;border-radius:22px;box-shadow:var(--sh2);padding:12px 8px;border:1px solid var(--line)}
.quick a{border:0;box-shadow:none;border-radius:16px;padding:16px 10px;background:transparent;position:relative}
.quick a+a::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.quick a:hover{transform:translateY(-3px);background:#F1F8F4;box-shadow:none}.quick a:hover::before,.quick a:hover+a::before{opacity:0}
.quick .qi{background:var(--hijau);color:#fff;border-radius:14px;width:52px;height:52px;box-shadow:0 6px 14px rgba(11,125,88,.28)}.quick .qi .ic{width:1.35em;height:1.35em}
.quick b{font-size:.95rem}
/* tentang */
.about{grid-template-columns:1.05fr 1fr 1fr;gap:28px;align-items:center}.about h2{font-size:1.9rem}
.about .stats{grid-template-columns:1fr 1fr;margin:0}.about .stats>div{padding:18px 10px;border-radius:16px}.about .stats b{font-size:1.6rem}
.vid{position:relative;margin:0;min-height:260px;border-radius:20px;overflow:hidden;display:flex;align-items:flex-end;background:linear-gradient(transparent 35%,rgba(3,40,28,.82)),var(--vid) center/cover;box-shadow:var(--sh2)}
.vid figcaption{position:relative;z-index:1;color:#fff;font-weight:600;font-size:.92rem;padding:16px 18px;width:100%}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--emas);color:#3b2a00;box-shadow:0 0 0 8px rgba(245,184,0,.3);transition:transform .2s}.play:hover{transform:translate(-50%,-50%) scale(1.08)}.play .ic{width:1.6em;height:1.6em;fill:currentColor;stroke:none;margin-left:3px}
/* berita + agenda berdampingan */
.home2{display:grid;grid-template-columns:1.75fr 1fr;gap:22px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}.panel .sec-head{margin-bottom:16px}.panel .sec-head h2{font-size:1.3rem}
.news.n3{grid-template-columns:repeat(3,1fr);gap:14px}.n3 .card{box-shadow:none}.n3 .thumb{height:118px}.n3 .pb{padding:12px 14px 14px}.n3 h3{font-size:.92rem;line-height:1.4}.n3 .pb p{font-size:.8rem;line-height:1.5}
.more.go{align-self:flex-end;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#E3F4EB;color:var(--hijau);margin-top:6px}.more.go:hover{background:var(--hijau);color:#fff}
.agenda-list .ag{box-shadow:none;padding:10px 12px;margin-bottom:10px;border-radius:14px}.agenda-list .ag:hover{transform:none;border-color:#b8dfc9}
.agenda-list .tgl{width:52px;height:54px;border-radius:12px;background:var(--gelap)}.agenda-list .tgl b{font-size:1.2rem}
/* PPDB: panel terang seperti contoh */
.band,.band.flat{background:none;color:var(--ink);margin:0;padding:36px 0}.band .eyebrow{color:var(--hijau2)}
.jl{background:#fff;border:1px solid var(--line);box-shadow:var(--sh);color:var(--ink)}.jl .qi{background:#E3F4EB;color:var(--hijau)}.jl small{opacity:1;color:var(--abu)}
.info-penting{border:1px solid var(--line);box-shadow:var(--sh)}
/* header halaman dalam */
.pagehead{position:relative;overflow:hidden;border-bottom:0;padding:50px 0 56px;background:var(--pola),linear-gradient(100deg,#053d2e,#087653 75%)}
.pagehead::before{content:"";position:absolute;inset:0;background:var(--hero-img,none) right center/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 85%);mask-image:linear-gradient(90deg,transparent 40%,#000 85%);opacity:.85}
.pagehead .wrap{position:relative}.pagehead h1{font-size:clamp(1.8rem,4.4vw,2.6rem);font-weight:700}
.tabs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--sh);display:inline-flex}.tabs a{border:0;background:transparent}.tabs a.on{box-shadow:0 4px 10px rgba(11,125,88,.25)}
/* kontak */
.info dl{gap:0}.info .ir{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}.info .ir:first-of-type{border-top:0}
.info .ir .qi{margin:0;width:42px;height:42px;border-radius:12px;font-size:1.1rem;flex:none}.info .ir small{display:block;color:var(--abu);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}.info .ir span.v{font-weight:500}
.info .btn{margin-top:14px}
/* footer */
.fgrid{grid-template-columns:1.5fr .8fr .8fr 1.3fr}.slg2{display:block!important;margin:12px 0!important;color:var(--emas);font-weight:500}
.fsos{display:flex;gap:8px;margin-top:6px}.foot .fsos a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);padding:0}.foot .fsos a:hover{background:var(--emas);color:#3b2a00}
/* responsif */
@media(max-width:1100px){
.home2,.about{grid-template-columns:1fr}.about .stats{grid-template-columns:repeat(4,1fr)}.quick{grid-template-columns:repeat(3,1fr);gap:4px}.quick a+a::before{display:none}
nav .dd{display:flex;flex-direction:column}nav .dd>a .ic{display:none}nav .sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 4px 14px;min-width:0}nav .dd:hover>a,nav .dd:focus-within>a{background:transparent}
nav .sbtn{width:auto;margin:6px 0 0;height:auto;padding:10px}nav .dd.on>a::after{display:none}
.fgrid{grid-template-columns:1fr 1fr}.akr-badge{position:static;margin-top:22px;display:inline-flex}.hero{padding:56px 0 100px}.hero::before{background-size:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 120%);mask-image:linear-gradient(90deg,transparent 0,#000 120%);opacity:.5}}
@media(max-width:720px){
.news.n3{grid-template-columns:1fr}.about .stats{grid-template-columns:1fr 1fr}.quick{grid-template-columns:repeat(2,1fr);margin-top:-48px}.fgrid{grid-template-columns:1fr}
.topbar .slg{font-size:.7rem}.sos .admlink{display:none}.hero{min-height:0}.pagehead::before{opacity:.35}.tabs{display:flex}}
/* perbaikan jarak & footer */
section.wrap{padding-top:26px;padding-bottom:26px}.quick+*{margin-top:0}#tentang{padding-top:40px}
.foot .logo{display:flex;align-items:center;padding:0}
.hero::before{-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 64%);mask-image:linear-gradient(90deg,transparent 40%,#000 64%)}
nav .dd{display:flex;align-items:center}nav.crumb2{display:block}.crumb2 a{padding:0;display:inline}
@media(max-width:1100px){nav .dd{display:flex;flex-direction:column;align-items:stretch}}

/* ===== Tahap 7: beranda mengikuti desain terbaru (hero foto gedung, kurva kuning, akses cepat, tentang, 3 panel, strip nilai) ===== */
.topbar{font-size:.78rem;background:#064E3B}.topbar .wrap{min-height:34px;max-width:1180px}.sos a svg{width:15px;height:15px}
.top .bar{max-width:1180px}.mark{width:46px;height:46px}.nm b{font-size:1.4rem;color:#087653}.nm small{font-size:.74rem}
nav{font-size:.9rem}nav>a,nav .dd>a{font-weight:500}
/* hero */
.hero{position:relative;min-height:470px;padding:70px 0 120px;display:flex;align-items:center;color:#fff;overflow:hidden;background:#075a43}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,62,45,.96) 0%,rgba(7,90,65,.86) 30%,rgba(8,100,72,.35) 50%,rgba(8,100,72,0) 66%),var(--hero-img,none) 12% center/cover no-repeat;-webkit-mask-image:none;mask-image:none;opacity:1}
.hero::after{display:none}
.hero .hero-grid{position:relative;z-index:1;max-width:1180px;width:100%}
.hero-txt{max-width:600px}.kicker{font-size:1.15rem;margin:0 0 2px;font-weight:400}
.hero h1{font-size:clamp(2.5rem,4.7vw,4.1rem);line-height:1.05;letter-spacing:-.025em;font-weight:700;margin:0 0 14px}
.lead2{margin:0 0 14px;font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.22;font-weight:700}.lead2 span,.lead2 em{display:block}.lead2 em{color:var(--emas);font-style:normal}
.sub{max-width:30em;font-size:1rem;line-height:1.55;opacity:.95;margin:0 0 22px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}.cta .btn{border-radius:10px;padding:11px 24px}
.akr-badge{position:absolute;z-index:2;top:-4px;right:20px;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;border-radius:14px;background:rgba(5,50,38,.68);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.akr-badge .seal{display:grid;place-items:center;width:42px;height:42px;color:var(--emas);border:0}.akr-badge .seal .ic{width:2.4em;height:2.4em;stroke-width:1.5}
.akr-badge b{display:block;font-size:1.05rem;line-height:1.2}.akr-badge small{display:block;font-size:.72rem;opacity:.85}
.hero-curve{position:absolute;left:0;right:0;bottom:-1px;height:74px;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80C130 80 190 16 340 16H1100C1250 16 1310 80 1440 80V81H0z' fill=%27%23FAFCF9%27/%3E%3Cpath d='M0 73C128 73 190 8 340 8' fill='none' stroke='%23F5B800' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M1440 73C1312 73 1250 8 1100 8' fill='none' stroke='%23F5B800' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
/* kontainer beranda */
.wrap.home{max-width:1180px;padding-top:0}
.quick{grid-template-columns:repeat(6,1fr);gap:12px;margin:-58px 0 0;padding:14px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);position:relative;z-index:3}
.quick a{border:1px solid var(--line);border-radius:12px;padding:16px 8px 14px;background:#fff;box-shadow:none;gap:0}.quick a::before{display:none!important}
.quick a:hover{transform:translateY(-3px);background:#F4FAF6;border-color:#b8dfc9;box-shadow:var(--sh)}
.quick .qi{width:46px;height:46px;border-radius:12px;background:#E8F5EE;color:#087653;box-shadow:none;margin-bottom:8px}.quick .qi .ic{width:1.45em;height:1.45em;stroke-width:1.6}
.quick b{font-size:.95rem;color:#064E3B}.quick small{font-size:.72rem}
/* tentang */
.about{display:grid;grid-template-columns:1.05fr 1.05fr .9fr;gap:20px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin:18px 0;box-shadow:var(--sh)}
.about .abt-txt{align-self:center}.tag{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:.66rem;font-weight:700;letter-spacing:.1em;color:var(--hijau2);text-transform:uppercase}.tag .ic{width:1.15em;height:1.15em;color:var(--hijau)}
.about h2{font-size:1.75rem;margin:0 0 8px;color:#064E3B}.about p{font-size:.88rem;line-height:1.6;color:#44514a;margin:0 0 14px}
.btn.dark{background:#064E3B;border-color:#064E3B;color:#fff;border-radius:9px;padding:9px 20px;font-size:.88rem}.btn.dark:hover{background:var(--hijau);border-color:var(--hijau)}
.btn.sm{padding:6px 14px;font-size:.76rem;border-radius:8px;gap:6px}
.about .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;background:#F3F9F6;border:1px solid var(--line);border-radius:14px;padding:12px 6px;align-content:center}
.about .stats>div{background:none;border:0;box-shadow:none;border-radius:0;padding:12px 6px;position:relative}
.about .stats>div:not(:nth-child(3n))::after{content:"";position:absolute;right:0;top:20%;bottom:20%;width:1px;background:#d9e7df}
.about .stats .ic{width:1.9em;height:1.9em;color:#087653;margin:0 0 6px;stroke-width:1.6}.about .stats b{font-size:1.45rem;line-height:1.15;color:#10261E}.about .stats span{font-size:.72rem;color:var(--abu)}
.vidcard{position:relative}.vid{position:relative;height:100%;min-height:190px;border-radius:12px;overflow:hidden;background:#075a43 var(--hero-img,none) 30% center/cover no-repeat}
.vid::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(2,44,32,.55))}
.vid::after{content:attr(data-nm);position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.14em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.vid .play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--emas);color:#3b2a00;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,255,255,.35);z-index:1}
.vid .play .ic{width:1.5em;height:1.5em;fill:currentColor;stroke:none;margin-left:3px}.vid a.play:hover{transform:translate(-50%,-50%) scale(1.08)}
.vid.noimg{background:linear-gradient(140deg,#064E3B,#087653);display:grid;place-items:center}.vid.noimg::after{display:none}
/* 3 panel */
.home3{display:grid;grid-template-columns:2.1fr 1fr 1fr;gap:14px;align-items:stretch;margin:0 0 18px}
.home3 .panel{padding:16px 16px 18px;border-radius:14px;margin:0}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.ph h2{margin:0;font-size:1.15rem;color:#064E3B}.ph>a{font-size:.7rem;font-weight:600;white-space:nowrap;text-decoration:none;padding-top:14px}.ph>a:hover{text-decoration:underline}
.ph .tag{margin-bottom:2px}.h-ico{display:flex;align-items:center;gap:8px;font-size:1.05rem!important}.h-ico .ic{color:var(--hijau)}.ph:has(.h-ico)>a{padding-top:4px}
.home3 .news.n3{grid-template-columns:repeat(3,1fr);gap:12px}.home3 .post{border:1px solid var(--line);border-radius:10px;box-shadow:none;margin:0;padding:0;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.home3 .post .thumb{height:104px;border-radius:0}.home3 .post .pb{padding:9px 11px 11px;display:flex;flex-direction:column;flex:1}
.home3 .post small{font-size:.66rem;color:var(--abu);display:flex;align-items:center;gap:4px}.home3 .post small .ic{color:var(--hijau)}
.home3 .post h3{font-size:.82rem;line-height:1.35;margin:4px 0}.home3 .post h3 a{color:#10261E;text-decoration:none}.home3 .post h3 a:hover{color:var(--hijau)}
.home3 .post .pb p{font-size:.7rem;line-height:1.45;color:var(--abu);margin:0 0 6px;flex:1}
.home3 .go{align-self:flex-end;color:var(--hijau);display:grid;place-items:center;width:22px;height:22px;background:none}.home3 .go .ic{width:1.15em;height:1.15em;stroke-width:2.2}
.home3 .agenda-list .ag{padding:7px 8px;margin:0 0 8px;border:1px solid var(--line);border-radius:10px;box-shadow:none;gap:10px}
.home3 .agenda-list .tgl{width:40px;height:44px;border-radius:8px;background:#064E3B}.home3 .agenda-list .tgl b{font-size:1rem}.home3 .agenda-list .tgl span{font-size:.6rem}
.home3 .agenda-list .ag h3{font-size:.8rem;margin:0 0 1px}.home3 .agenda-list .ag small{font-size:.66rem;display:block}
.kl{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:9px}.kl li{display:flex;gap:10px;align-items:flex-start;font-size:.76rem;line-height:1.45;color:#2b3a33}.kl .ic{color:var(--hijau);margin-top:.15em;width:1.1em;height:1.1em}
.mapcard{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);height:112px}.mapcard svg{display:block;width:100%;height:100%}.mapcard .btn{position:absolute;left:8px;bottom:8px}
/* strip nilai */
.fstrip{display:flex;align-items:center;background:#E6F3EC;border:1px solid #d3e8dc;border-radius:14px;padding:14px 18px;margin:0 0 26px}
.fstrip .fb{display:flex;align-items:center;gap:10px;padding-right:20px;margin-right:6px;border-right:1px solid #c9ded2;flex:none}.fstrip .fb .mark{width:40px;height:40px}
.fstrip .fb b{display:block;color:#087653;font-size:1rem;line-height:1.15}.fstrip .fb small{font-size:.66rem;color:#44514a}.fstrip .fb small i{font-style:normal;color:var(--emas)}
.fstrip .fi{flex:1;display:flex;align-items:center;gap:10px;padding:0 14px;position:relative}.fstrip .fi:not(:last-child)::after{content:"";position:absolute;right:0;top:12%;bottom:12%;width:1px;background:#c9ded2}
.fstrip .fi .ic{width:1.9em;height:1.9em;color:#087653;stroke-width:1.5;flex:none}.fstrip .fi b{display:block;font-size:.74rem;line-height:1.25;color:#064E3B}.fstrip .fi small{display:block;font-size:.66rem;color:var(--abu);line-height:1.3}
.foot .adminl{display:inline;margin-left:10px;opacity:.6;padding:0}
/* responsif beranda */
@media(max-width:1100px){.home3{grid-template-columns:1fr 1fr}.home3 .pb-news{grid-column:1/-1}.about{grid-template-columns:1fr 1fr}.about .vidcard{grid-column:1/-1}.vid{min-height:220px}.quick{grid-template-columns:repeat(3,1fr)}
.fstrip{flex-wrap:wrap;gap:12px 0}.fstrip .fb{width:100%;border:0;padding:0 0 8px}.fstrip .fi{flex:1 1 33%;padding:6px 10px}.fstrip .fi::after{display:none}.akr-badge{position:static;margin-top:20px;display:inline-flex}.hero{padding:56px 0 100px}.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.94) 0%,rgba(7,90,65,.7) 60%,rgba(8,100,72,.4) 100%),var(--hero-img,none) 70% center/cover no-repeat}}
@media(max-width:720px){.home3,.about{grid-template-columns:1fr}.home3 .news.n3{grid-template-columns:1fr}.quick{grid-template-columns:repeat(2,1fr);margin-top:-46px}.about .stats{grid-template-columns:repeat(2,1fr)}.about .stats>div::after{display:none}.fstrip .fi{flex:1 1 50%}.hero-curve{height:40px}.hero{min-height:0;padding:44px 0 80px}}
/* perbaikan tahap 7 */
.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.96) 0%,rgba(7,90,65,.86) 30%,rgba(8,100,72,.35) 50%,rgba(8,100,72,0) 66%),var(--hero-img,none) 72% center/cover no-repeat}
.quick{align-items:stretch}.quick a{justify-content:flex-start}
.mapcard>svg{display:block;width:100%;height:100%}.mapcard .btn .ic{width:1em;height:1em}
.about .stats>div:last-child::after{display:none}
.copy .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}.foot .adminl{display:inline-block;margin:0}
@media(max-width:1100px){.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.94) 0%,rgba(7,90,65,.7) 60%,rgba(8,100,72,.4) 100%),var(--hero-img,none) 75% center/cover no-repeat}}
/* halaman Profil: blok tentang versi lama (tidak memakai kartu beranda) */
.about-old{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}.about-old h2{font-size:1.8rem}.about-old .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:22px}
@media(max-width:900px){.about-old{grid-template-columns:1fr}}
/* hero sedikit lebih ringkas agar proporsi mendekati desain */
.hero{min-height:440px;padding:52px 0 104px}.hero h1{font-size:clamp(2.4rem,4.4vw,3.8rem)}.lead2{font-size:clamp(1.25rem,2.1vw,1.7rem)}.sub{margin-bottom:20px}
@media(max-width:1100px){.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.95) 0%,rgba(7,90,65,.85) 70%,rgba(8,100,72,.6) 100%),var(--hero-img,none) 75% center/cover no-repeat}}
/* ===== Tahap 8: penyamaan detail dengan desain (warna judul, ikon akses cepat, statistik, agenda, ornamen hero) ===== */
.hero::after{display:block;content:"";position:absolute;left:-46px;top:18px;width:230px;height:300px;z-index:0;opacity:.2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 300' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cg transform='translate(70 110)'%3E%3Crect x='-58' y='-58' width='116' height='116'/%3E%3Crect x='-58' y='-58' width='116' height='116' transform='rotate(45)'/%3E%3Crect x='-38' y='-38' width='76' height='76' transform='rotate(22.5)'/%3E%3Crect x='-38' y='-38' width='76' height='76' transform='rotate(67.5)'/%3E%3Ccircle r='20'/%3E%3C/g%3E%3Cg transform='translate(150 232)'%3E%3Crect x='-40' y='-40' width='80' height='80'/%3E%3Crect x='-40' y='-40' width='80' height='80' transform='rotate(45)'/%3E%3Ccircle r='14'/%3E%3C/g%3E%3C/svg%3E") no-repeat}
.quick{padding:12px 12px}.quick a{padding:14px 8px 13px}
.quick .qi{width:38px;height:38px;border-radius:10px;background:#0B6B4C;color:#fff;margin-bottom:7px}.quick .qi .ic{width:1.25em;height:1.25em;stroke-width:1.7}
.quick b{font-size:.9rem;color:#064E3B}.quick small{font-size:.72rem;color:#2f6b5a}
.about p{color:#2f4f43}.about .stats{background:#EEF8F3}
.about .stats .ic{width:1.6em;height:1.6em;color:#0A5C45;stroke-width:1.9}.about .stats b{font-size:1.2rem;color:#064E3B}.about .stats span{font-size:.7rem;color:#2f6b5a}
.home3 .post h3 a{color:#064E3B}.home3 .post .pb p{color:#3b6b5c}.home3 .post small{color:#2f6b5a}.home3 .go{color:#064E3B}
.home3 .agenda-list .tgl{width:44px;height:46px;border-radius:9px;background:linear-gradient(160deg,#087653,#064E3B)}.home3 .agenda-list .tgl b{font-size:1.05rem;line-height:1.1}.home3 .agenda-list .tgl span{text-transform:none;font-size:.7rem;letter-spacing:0;color:#fff;font-weight:600}
.home3 .agenda-list .ag h3{color:#064E3B;font-size:.84rem}.home3 .agenda-list .ag small{color:#2f6b5a;display:flex;align-items:center;gap:4px}
.kl li{color:#064E3B}.kl .ic{color:#064E3B}.h-ico .ic{color:#064E3B}
.fstrip .fi b,.fstrip .fb b{color:#064E3B}

/* ===== Tahap 9: ikon solid & ornamen latar (bilah atas, header, footer) ===== */
.quick .qi{--tile:#0B6B4C;width:40px;height:40px;border-radius:10px}.quick .qi .ic{width:1.55em;height:1.55em;stroke-width:1.8}
.about .stats{--tile:#EEF8F3}.about .stats .ic{width:1.75em;height:1.75em;color:#0A5C45}
.kl{--tile:#fff}.kl .ic{width:1.15em;height:1.15em;color:#064E3B}.h-ico .ic{color:#064E3B}
.fstrip .fi .ic{width:1.8em;height:1.8em;stroke-width:1.5}
/* bilah atas: pola bintang segi delapan + garis emas tipis */
.topbar{background:var(--pola),linear-gradient(90deg,#064E3B,#0A6A4D 50%,#064E3B);border-bottom:1px solid rgba(245,184,0,.35)}
/* header: ornamen arabesque tipis di sisi kiri & kanan */
.top{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='74' viewBox='0 0 260 74' fill='none' stroke='%23087653' stroke-opacity='.16' stroke-width='1.2'%3E%3Cg transform='translate(36 37)'%3E%3Crect x='-30' y='-30' width='60' height='60'/%3E%3Crect x='-30' y='-30' width='60' height='60' transform='rotate(45)'/%3E%3Ccircle r='12'/%3E%3C/g%3E%3Cg transform='translate(104 8)'%3E%3Crect x='-22' y='-22' width='44' height='44'/%3E%3Crect x='-22' y='-22' width='44' height='44' transform='rotate(45)'/%3E%3C/g%3E%3Cg transform='translate(112 70)'%3E%3Crect x='-22' y='-22' width='44' height='44'/%3E%3Crect x='-22' y='-22' width='44' height='44' transform='rotate(45)'/%3E%3C/g%3E%3Cg transform='translate(172 37)'%3E%3Crect x='-18' y='-18' width='36' height='36'/%3E%3Crect x='-18' y='-18' width='36' height='36' transform='rotate(45)'/%3E%3C/g%3E%3C/svg%3E") left center/auto 100% no-repeat;position:sticky}
.top::after{content:"";position:absolute;right:0;top:0;bottom:0;width:260px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='74' viewBox='0 0 260 74' fill='none' stroke='%23087653' stroke-opacity='.16' stroke-width='1.2'%3E%3Cg transform='translate(224 37)'%3E%3Crect x='-30' y='-30' width='60' height='60'/%3E%3Crect x='-30' y='-30' width='60' height='60' transform='rotate(45)'/%3E%3Ccircle r='12'/%3E%3C/g%3E%3Cg transform='translate(156 8)'%3E%3Crect x='-22' y='-22' width='44' height='44'/%3E%3Crect x='-22' y='-22' width='44' height='44' transform='rotate(45)'/%3E%3C/g%3E%3Cg transform='translate(148 70)'%3E%3Crect x='-22' y='-22' width='44' height='44'/%3E%3Crect x='-22' y='-22' width='44' height='44' transform='rotate(45)'/%3E%3C/g%3E%3Cg transform='translate(88 37)'%3E%3Crect x='-18' y='-18' width='36' height='36'/%3E%3Crect x='-18' y='-18' width='36' height='36' transform='rotate(45)'/%3E%3C/g%3E%3C/svg%3E") right center/auto 100% no-repeat}
.top .bar{position:relative;z-index:1}
/* footer: pola, garis emas melengkung di atas, siluet masjid */
.foot{position:relative;overflow:hidden;margin-top:70px;background:var(--pola),radial-gradient(900px 300px at 85% 100%,rgba(22,163,74,.22),transparent 70%),linear-gradient(180deg,#064E3B,#053f31)}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 36C220 4 480 0 720 0s500 4 720 36' fill='none' stroke='%23F5B800' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center top/100% 100% no-repeat}
.foot::after{content:"";position:absolute;right:max(20px,calc(50% - 600px));bottom:46px;width:560px;height:190px;opacity:.1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 170' fill='%23fff'%3E%3Crect x='30' y='122' width='460' height='48'/%3E%3Cpath d='M180 122a80 80 0 0 1 160 0z'/%3E%3Crect x='258' y='20' width='4' height='24'/%3E%3Cpath d='M262 4a9 9 0 1 0 7 14 7 7 0 1 1-7-14z'/%3E%3Cpath d='M104 122a36 36 0 0 1 72 0z'/%3E%3Cpath d='M344 122a36 36 0 0 1 72 0z'/%3E%3Crect x='40' y='52' width='22' height='70'/%3E%3Cpath d='M36 52 51 26 66 52z'/%3E%3Crect x='458' y='52' width='22' height='70'/%3E%3Cpath d='M454 52 469 26 484 52z'/%3E%3Cpath d='M70 122v-18a14 14 0 0 1 28 0v18zM422 122v-18a14 14 0 0 1 28 0v18z' fill='%23064E3B'/%3E%3C/svg%3E") right bottom/contain no-repeat}
.fgrid,.copy{position:relative;z-index:1}.foot .copy{background:rgba(3,40,30,.35)}
@media(max-width:720px){.foot::after{width:320px;height:110px;bottom:70px}.top::after{width:120px}}

/* ===== Tahap 10: penyamaan dengan desain final (font Plus Jakarta Sans, palet baru, menu, hero, akses cepat) ===== */
:root{--hijau:#087653;--gelap:#064E3B;--emas:#F5B800;--muda:#DDF4E9;--bg:#FAFCF9;--abu:#5F716A}
body{font-family:var(--font)}
/* bilah atas */
.topbar .slg{font-size:.72rem;font-weight:500;letter-spacing:.01em}.topbar .wrap{min-height:30px}
/* header: ornamen lebih tipis, ikon cari polos, tombol PPDB kuning */
.top{background-size:auto 100%}.top::after{width:200px;opacity:.55}.top{background-blend-mode:normal}
.top .bar{min-height:64px}
nav .pill{background:var(--emas);color:#3b2a00;font-weight:700;border-radius:999px;padding:8px 22px;margin:0 6px}
nav .pill:hover{background:#e0a800;color:#3b2a00}nav .pill.on::after,nav .pill::after{display:none}
nav .sbtn{background:transparent;color:var(--gelap);width:38px;height:38px;border-radius:50%;margin-left:4px}nav .sbtn:hover{background:var(--muda);color:var(--hijau)}
nav .sbtn .ic{width:1.15em;height:1.15em}
/* hero: tanpa badge, tombol sesuai desain */
.hero .cta .btn{border-radius:999px;padding:10px 24px;font-size:.9rem}
.hero .cta .btn.ghost{border-color:rgba(255,255,255,.85)}
.hero h1{font-weight:800}
/* akses cepat: ikon polos + panah */
.quick{padding:12px;gap:12px;border-radius:20px}
.quick a{position:relative;padding:16px 26px 14px 8px;border-radius:12px;box-shadow:0 1px 2px rgba(6,78,59,.05)}
.quick .qi{--tile:#fff;width:auto;height:auto;background:transparent;box-shadow:none;color:var(--hijau);margin-bottom:6px}
.quick .qi .ic{width:2.05em;height:2.05em}
.quick .chev{position:absolute;right:9px;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--gelap);stroke-width:2.2}
.quick b{font-size:.88rem}.quick small{font-size:.68rem;color:var(--abu)}
@media(max-width:1100px){.quick .chev{display:none}.quick a{padding:16px 8px 14px}}
/* hero lebih rendah agar foto gedung terlihat utuh seperti desain */
.hero{min-height:400px;padding:44px 0 96px}
.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.95) 0%,rgba(7,90,65,.8) 28%,rgba(8,100,72,.25) 46%,rgba(8,100,72,0) 60%),var(--hero-img,none) 100% center/cover no-repeat}
.hero::after{display:none}
.hero h1{font-size:clamp(2.4rem,4.6vw,4rem)}
/* video profil: keterangan kiri-bawah */
.vid::after{display:none}.vid .vcap{position:absolute;left:16px;bottom:12px;z-index:1;color:#fff;display:flex;flex-direction:column;line-height:1.3}
.vid .vcap b{font-size:.95rem;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.5)}.vid .vcap small{font-size:.7rem;opacity:.9}
.about .stats{background:#fff}
.ph>a .ic{width:1em;height:1em;vertical-align:-.15em}
/* baris 4 kartu */
.home4{display:grid;grid-template-columns:1fr 1fr 1.25fr 1.1fr;gap:14px;margin:0 0 18px;align-items:stretch}
.home4 .panel{padding:16px 18px;border-radius:14px;margin:0}
.home4 h2.h-ico{font-size:.88rem!important;margin:0 0 10px;color:var(--gelap)}.home4 h2 .ic{width:1.1em;height:1.1em;color:var(--hijau)}
.hA{display:inline-grid;place-items:center;width:1.5em;height:1.5em;font-size:1rem;color:var(--hijau)}
.cek-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}.cek-list li{display:flex;gap:8px;align-items:center;font-size:.72rem;color:#2f4f43}.cek-list .ic{width:1.25em;height:1.25em;color:var(--hijau2)}
.pc-singkat p{font-size:.74rem;line-height:1.6;color:#2f4f43;margin:0 0 8px}.pc-singkat .script{font:600 1.35rem/1.15 'Caveat','Segoe Script',cursive;color:#D49A00;transform:rotate(-4deg);margin:14px 0 0 14px}
.ic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ic-grid a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--gelap);font-size:.62rem;font-weight:500;--tile:#fff}.ic-grid a:hover{background:#F1F8F4}.ic-grid .ic{width:1.7em;height:1.7em;color:var(--hijau)}
.pc-testi blockquote{margin:0 0 12px;font-size:.74rem;line-height:1.6;color:#2f4f43}
.testi-by{display:flex;align-items:center;gap:10px}.testi-by .ava{width:38px;height:38px;font-size:.9rem}.testi-by b{display:block;font-size:.74rem;color:var(--gelap)}.testi-by small{font-size:.66rem;color:var(--abu)}
.dots{display:flex;gap:5px;justify-content:center;margin:10px 0 0}.dots i{width:5px;height:5px;border-radius:50%;background:#c9ded2}.dots i.on{background:var(--hijau)}
@media(max-width:1100px){.home4{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.home4{grid-template-columns:1fr}}
/* footer ringkas */
.foot{margin-top:40px;background:var(--pola),linear-gradient(180deg,#064E3B,#053f31)}.foot::after{display:none}
.foot .fbar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:26px;padding-bottom:20px;flex-wrap:wrap;position:relative;z-index:1}
.foot .fnav{display:flex;gap:2px;flex:1;justify-content:center;flex-wrap:wrap;position:static;background:none;box-shadow:none;padding:0;border:0}.foot .fnav a{padding:6px 10px;font-size:.78rem;font-weight:500;color:#e7f4ed;display:inline-block}.foot .fnav a:hover{color:var(--emas);background:transparent}
.foot .fsos{margin:0}.foot .fsos a{width:30px;height:30px;background:transparent;border:1px solid rgba(255,255,255,.25)}.foot .fsos .ic{width:14px;height:14px}
.foot .slg3{margin:0;font:600 1.3rem/1 'Caveat','Segoe Script',cursive;color:var(--emas);transform:rotate(-3deg);white-space:nowrap}
.foot .copy{background:transparent;border-top:0;padding:0 0 16px;text-align:right}.foot .copy .wrap{display:block}.foot .copy span{font-size:.68rem;color:#9fd0b9}.foot .copy .adminl{display:none}
@media(max-width:900px){.foot .fbar{justify-content:center}.foot .copy{text-align:center}}
.home3 .ph h2{font-size:1.05rem;white-space:nowrap}.home3 .ph h2.h-ico{font-size:.98rem!important}.home3 .ph>a{font-size:.66rem}
.foot .fbar{flex-wrap:nowrap}.foot .fnav{flex:none;gap:0;flex-wrap:nowrap}.foot .fnav a{padding:6px 8px;font-size:.74rem;white-space:nowrap}.foot .slg3{font-size:1.15rem}
@media(max-width:1100px){.foot .fbar{flex-wrap:wrap;justify-content:center}.foot .fnav{flex-wrap:wrap;justify-content:center}}
/* ===== Tampilan mobile mengikuti desain ===== */
.wabar{display:none}
@media(max-width:720px){
.topbar{display:none}
.top .bar{min-height:58px}.mark{width:38px;height:38px}.nm b{font-size:1.12rem}
.hero{min-height:330px;padding:30px 0 84px;align-items:flex-start}
.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.92) 0%,rgba(7,90,65,.55) 45%,rgba(8,100,72,.05) 78%),var(--hero-img,none) 86% center/cover no-repeat}
.hero .kicker{font-size:.8rem}.hero h1{font-size:2.1rem;margin-bottom:6px}.lead2{font-size:1rem;margin-bottom:8px}.sub{font-size:.72rem;max-width:17em;margin-bottom:14px;line-height:1.5}
.hero .cta{flex-wrap:nowrap;gap:8px}.hero .cta .btn{padding:7px 14px;font-size:.74rem;white-space:nowrap}
.quick{margin-top:-52px;padding:10px;gap:8px;border-radius:16px}.quick a{padding:12px 6px 10px}.quick .qi .ic{width:1.8em;height:1.8em}.quick b{font-size:.78rem}.quick small{font-size:.6rem}
.home3{grid-template-columns:1fr;gap:12px}
.home3 .post .thumb{height:150px}.home3 .post h3{font-size:.95rem}.home3 .post .pb p{font-size:.78rem}
.pb-agenda{border-color:#f1dc9a!important;background:#fffdf6!important}
body{padding-bottom:78px}
.wabar{display:flex;position:fixed;left:14px;right:14px;bottom:12px;z-index:40;align-items:center;justify-content:space-between;padding:10px 12px 10px 18px;border-radius:22px;background:linear-gradient(100deg,#064E3B,#087653);color:#fff;text-decoration:none;box-shadow:0 10px 26px rgba(6,78,59,.35);border:2px solid var(--emas)}
.wabar .wl{display:flex;align-items:center;gap:10px;font-size:.9rem}.wabar .wl .ic{width:1.5em;height:1.5em;color:#fff;--tile:#064E3B}
.wabar .wi{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#25D366;color:#fff}.wabar .wi .ic{width:1.6em;height:1.6em;stroke-width:1.7}}
.foot .logo{flex:none}.foot .nm b{white-space:nowrap}
@media(max-width:720px){.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.94) 0%,rgba(7,90,65,.7) 55%,rgba(8,100,72,.1) 85%),var(--hero-img,none) 94% center/cover no-repeat}}

/* ===== Tahap 11: penyamaan detail 1:1 dengan desain (lebar, font, bilah atas, header, hero, kartu, footer) ===== */
:root{--pad:clamp(16px,4.6vw,72px);--ink2:#0B3D2C}
/* bilah atas */
.topbar{background:linear-gradient(90deg,#064E3B,#06553F 55%,#064E3B);border:0;color:#fff}
.topbar .wrap{max-width:1400px;padding:0 var(--pad);min-height:36px}
.topbar .slg{font-size:.76rem;font-weight:600;letter-spacing:0;color:#fff}
.sos{gap:16px;align-items:center}.sos a{width:auto;height:auto;border-radius:0;color:#fff;display:inline-flex}.sos a:hover{background:none;color:var(--emas)}
.sos a svg{width:18px;height:18px}.sos .sep{display:block;width:1px;height:17px;background:rgba(255,255,255,.6);margin:0 4px}
.sos a[aria-label^="Cari"] svg{width:19px;height:19px;stroke-width:2.2}
/* header: bersih tanpa ornamen, logo & menu lebih besar */
.top{background:#fff;background-image:none;box-shadow:0 3px 14px rgba(6,78,59,.08);border:0}.top::after{display:none}
.top .bar{max-width:1400px;padding:0 var(--pad);min-height:72px}
.logo{gap:14px}.mark{width:60px;height:60px}
.nm{line-height:1.12}.nm b{font-size:1.72rem;font-weight:800;color:var(--ink2);letter-spacing:-.015em}.nm small{font-size:1rem;font-weight:500;color:#0B7D5A;letter-spacing:0}
nav{font-size:.88rem;margin-right:-22px}
nav>a,nav .dd>a{padding:10px 17px;font-weight:700;color:var(--ink2)}
nav a:hover,nav .dd:hover>a{background:transparent;color:var(--hijau)}
nav a.on,nav .dd.on>a{color:var(--hijau);font-weight:700}
nav a.on::after,nav .dd.on>a::after{left:17px;right:17px;bottom:4px;height:3px;background:var(--hijau)}
nav .dd>a .ic{width:.8em;height:.8em;stroke-width:2.8;opacity:1}
nav .pill{background:linear-gradient(180deg,#FFCE1F,#F5B800);color:#2e2200;font-weight:700;padding:9px 28px;margin:0 8px;box-shadow:0 3px 10px rgba(245,184,0,.45)}
nav .pill:hover{background:#FFC400;color:#2e2200}
nav .sbtn{width:40px;height:40px;margin-left:14px;color:var(--ink2);padding:0}nav .sbtn .ic{width:1.35em;height:1.35em;stroke-width:2.2}
nav .sub{top:calc(100% + 6px)}
/* hero */
.hero{min-height:424px;padding:52px 0 104px;align-items:center}
.hero .hero-grid{max-width:1400px;padding:0 var(--pad)}
.hero-txt{max-width:820px;padding-left:74px}
.kicker{color:#F4DC78;font-size:1.25rem;font-weight:600;margin:0 0 -4px;letter-spacing:.005em}
.hero h1{font-size:clamp(2.6rem,6vw,5.1rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:.02em 0 .1em;text-shadow:0 2px 12px rgba(0,0,0,.22)}
.lead2{font-size:clamp(1.3rem,2.25vw,2.1rem);font-weight:700;line-height:1.2;margin:0 0 14px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.lead2 em{color:#F7C61A}
.sub{font-size:1.02rem;font-weight:500;line-height:1.5;max-width:27.5em;margin:0 0 22px}
.hero .cta{gap:16px}.hero .cta .btn{padding:11px 28px;font-size:.95rem;font-weight:700}
.hero .cta .btn.emas{background:linear-gradient(180deg,#FFCE1F,#F5B800);border-color:#F5B800;box-shadow:0 6px 16px rgba(245,184,0,.38)}
.hero .cta .btn.ghost{background:rgba(4,52,38,.55);border:2px solid rgba(255,255,255,.9);backdrop-filter:blur(2px)}
.hero .cta .btn.ghost:hover{background:#fff;color:var(--gelap)}
.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.97) 0%,rgba(6,84,61,.88) 30%,rgba(8,100,72,.38) 48%,rgba(8,100,72,0) 62%),var(--hero-img,none) right -130px top -34px/auto 105% no-repeat}
.hero::after{display:block;content:"";position:absolute;left:0;top:0;bottom:60px;width:210px;z-index:1;opacity:.55;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 380' fill='none' stroke='%2334C291' stroke-width='1.8' stroke-linejoin='round'%3E%3Cg transform='translate(18 70)'%3E%3Crect x='-62' y='-62' width='124' height='124'/%3E%3Crect x='-62' y='-62' width='124' height='124' transform='rotate(45)'/%3E%3Crect x='-40' y='-40' width='80' height='80' transform='rotate(22.5)'/%3E%3Crect x='-40' y='-40' width='80' height='80' transform='rotate(67.5)'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3Cg transform='translate(46 232)'%3E%3Crect x='-54' y='-54' width='108' height='108'/%3E%3Crect x='-54' y='-54' width='108' height='108' transform='rotate(45)'/%3E%3Crect x='-34' y='-34' width='68' height='68' transform='rotate(22.5)'/%3E%3Crect x='-34' y='-34' width='68' height='68' transform='rotate(67.5)'/%3E%3Ccircle r='20'/%3E%3C/g%3E%3Cpath d='M0 150c40-10 70 14 62 44M0 320c30 8 60-6 70-30'/%3E%3C/svg%3E") left top/auto 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.hero-curve{height:86px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90C120 90 180 24 330 24H1110C1260 24 1320 90 1440 90V91H0z' fill='%23FAFCF9'/%3E%3Cpath d='M0 80C120 80 180 14 330 14' fill='none' stroke='%23D99A00' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M0 77C120 77 180 11 330 11' fill='none' stroke='%23FFC928' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M1440 80C1320 80 1260 14 1110 14' fill='none' stroke='%23D99A00' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M1440 77C1320 77 1260 11 1110 11' fill='none' stroke='%23FFC928' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
/* kontainer beranda lebih lebar (seperti desain) */
.wrap.home{max-width:1400px;padding:0 clamp(16px,3vw,44px)}
.quick{margin-top:-62px;padding:14px;gap:14px;border-radius:22px;border:1px solid #e6efe9;box-shadow:0 10px 34px rgba(6,78,59,.10)}
.quick a{padding:14px 24px 12px 8px;border-radius:14px;border:1px solid #e1ece6;box-shadow:0 2px 8px rgba(6,78,59,.06)}
.quick .qi .ic{width:2.05em;height:2.05em}
.quick b{font-size:.98rem;font-weight:700;color:var(--ink2)}.quick small{font-size:.7rem;line-height:1.35;color:#4b5f57}
.quick .chev{right:11px;width:16px;height:16px;margin-top:-8px;color:var(--ink2)}
/* tentang */
.about{grid-template-columns:1.15fr .95fr 1fr;gap:22px;padding:18px 20px;margin:26px 0 22px;border-radius:18px}
.tag{font-size:.76rem;font-weight:800;letter-spacing:.02em;color:var(--ink2);text-transform:none}.tag .ic{width:1.2em;height:1.2em}.tag .ic.gold{color:var(--emas)}
.about h2{font-size:1.9rem;font-weight:800;color:var(--ink2);letter-spacing:-.02em;margin:0 0 8px;line-height:1.15}
.about p{font-size:.9rem;line-height:1.58;color:#22372e;font-weight:500;margin:0 0 14px}
.btn.dark{background:#0A5C45;border-color:#0A5C45;border-radius:12px;padding:10px 24px;font-size:.9rem;font-weight:700;box-shadow:0 4px 12px rgba(6,78,59,.25)}
.about .stats{background:linear-gradient(180deg,#F1FAF5,#fff);border:1px solid #d5e9de;border-radius:16px;padding:8px 8px}
.about .stats>div{padding:8px 6px}
.about .stats>div:last-child::after{display:block}.about .stats>div:nth-child(3n)::after{display:none}
.about .stats .ic{width:2.1em;height:2.1em;color:#0A6B4C}.about .stats b{font-size:1.3rem;font-weight:800;color:var(--ink2)}.about .stats span{font-size:.8rem;font-weight:500;color:#1D7357}
.vid{min-height:200px;border-radius:14px;box-shadow:0 6px 18px rgba(6,78,59,.18);border:1px solid #d5e9de}
.vid .vcap{left:18px;bottom:14px}.vid .vcap b{font-size:1.15rem}.vid .vcap small{font-size:.76rem}
.vid .play{width:60px;height:60px;box-shadow:0 0 0 7px rgba(255,255,255,.45),0 6px 16px rgba(0,0,0,.25)}
/* tiga panel */
.home3{grid-template-columns:3.3fr 1.28fr 1fr;gap:12px;margin:0 0 20px}
.home3 .panel{padding:18px 18px 20px;border-radius:16px}
.home3 .ph h2{font-size:1.42rem;font-weight:800;color:var(--ink2);letter-spacing:-.015em}.home3 .ph h2.h-ico{font-size:1.02rem!important}
.home3 .ph>a{font-size:.74rem;font-weight:700;padding-top:20px}.home3 .ph:has(.h-ico)>a{padding-top:4px}
.tag{margin-bottom:3px}.ph .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.01em}.ph .tag .ic{width:1.25em;height:1.25em;--tile:#fff;color:#0A6B4C}
.home3 .news.n3{gap:14px}
.home3 .post{border-radius:12px;border:1px solid #e1ece6;box-shadow:0 2px 8px rgba(6,78,59,.05)}
.home3 .post .thumb{height:106px}
.home3 .post .pb{padding:11px 13px 12px}
.home3 .post small{font-size:.7rem;font-weight:500}.home3 .post small .ic{width:1.15em;height:1.15em}
.home3 .post h3{font-size:.9rem;font-weight:700;line-height:1.32;margin:5px 0 5px}.home3 .post h3 a{color:#0A2A1F}
.home3 .post .pb p{font-size:.76rem;line-height:1.5;color:#40594e}
.home3 .go{width:24px;height:24px;color:var(--ink2)}.home3 .go .ic{width:1.3em;height:1.3em}
.home3 .agenda-list .ag{padding:8px 10px;margin:0 0 11px;border-radius:12px;box-shadow:0 2px 8px rgba(6,78,59,.06);gap:12px;border:1px solid #e1ece6}
.home3 .agenda-list .tgl{width:54px;height:52px;border-radius:10px;background:linear-gradient(160deg,#0A6B4C,#064E3B)}.home3 .agenda-list .tgl b{font-size:1.2rem;font-weight:800}.home3 .agenda-list .tgl span{font-size:.78rem}
.home3 .agenda-list .ag h3{font-size:.9rem;font-weight:700;color:var(--ink2);margin:0 0 2px}.home3 .agenda-list .ag small{font-size:.76rem;font-weight:500;color:#1D7357}
.kl{gap:11px}.kl li{font-size:.8rem;line-height:1.45;font-weight:500;color:var(--ink2)}.kl .ic{width:1.25em;height:1.25em}
.mapcard{height:118px;border-radius:10px}
.btn.sm{padding:7px 15px;font-size:.78rem;font-weight:700;border-radius:8px}
/* strip nilai */
.fstrip{background:#E4F3EB;border:1px solid #d3e8dc;border-radius:14px;padding:12px 22px;margin:0 0 22px}
.fstrip .fb b{font-size:1.1rem;font-weight:800;color:#0A5C45}.fstrip .fb small{font-size:.7rem;font-weight:500}.fstrip .fb .mark{width:44px;height:44px}
.fstrip .fi b{font-size:.78rem;font-weight:700;color:var(--ink2)}.fstrip .fi small{font-size:.7rem}.fstrip .fi .ic{width:2.1em;height:2.1em;color:#0A5C45}
/* empat kartu */
.home4{grid-template-columns:1fr 1.15fr 1.3fr .9fr;gap:14px;margin:0 0 22px}
.home4 .panel{padding:18px 20px 20px;border-radius:16px;border:1px solid #cfe6db;box-shadow:0 2px 12px rgba(6,78,59,.06)}
.home4 h2.h-ico{font-size:1.02rem!important;font-weight:800;color:var(--ink2);margin:0 0 14px;gap:10px}
.hb{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0A5C45;color:#fff;flex:none;--tile:#0A5C45}.hb .ic,.home4 h2 .hb .ic{width:15px;height:15px;color:#fff;fill:currentColor;stroke:none}
.hb.hA{background:transparent;color:var(--ink2);font:800 1.35rem/1 var(--font);width:28px}
.cek-list{gap:9px}.cek-list li{font-size:.8rem;font-weight:500;color:#22372e;gap:10px}.cek-list .ic{width:1.35em;height:1.35em;color:#0A5C45}
.pc-singkat p{font-size:.8rem;line-height:1.62;color:#22372e;font-weight:500}
.pc-singkat .script{font-size:1.75rem;line-height:1.1;color:#E3A200;margin:14px 0 0 18px;transform:rotate(-6deg)}
.ic-grid{gap:10px}.ic-grid a{padding:10px 2px 8px;border-radius:14px;border:1px solid #e1ece6;box-shadow:0 3px 10px rgba(6,78,59,.08);font-size:.72rem;font-weight:600;gap:4px;color:var(--ink2)}.ic-grid .ic{width:2em;height:2em;color:#0A5C45}
.pc-testi blockquote{font-size:.82rem;line-height:1.62;color:#22372e;font-weight:500}
.testi-by{gap:12px;margin-top:14px}.testi-by .ava{width:46px;height:46px}.testi-by .ava svg{width:100%;height:100%;display:block;border-radius:50%}.testi-by b{font-size:.8rem;font-weight:700;color:var(--ink2)}.testi-by small{font-size:.72rem}
.dots{gap:7px;margin-top:14px}.dots i{width:6px;height:6px;background:#bcd4c8}.dots i.on{background:#0A5C45}
/* footer: ringkas satu baris seperti desain */
.foot{margin-top:30px;background:var(--pola),linear-gradient(90deg,#0A5C45 0%,#064E3B 55%,#053f31 100%);border-top:0}
.foot::before{display:none}
.foot .fbar{max-width:1400px;gap:18px;padding:16px var(--pad) 16px;flex-wrap:nowrap}
.foot .logo{gap:12px}.foot .mark{width:54px;height:54px}.foot .nm b{font-size:1.45rem;color:#fff}.foot .nm small{font-size:.8rem;color:#d7efe4;font-weight:500}
.foot .fnav{flex:1;justify-content:center;gap:0}.foot .fnav a{padding:4px 14px;font-size:.78rem;font-weight:600;color:#fff;position:relative}
.foot .fnav a+a::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(255,255,255,.45)}
.foot .fright{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:none}
.foot .fsos{display:flex;gap:16px}.foot .fsos a{width:auto;height:auto;border:0;background:none;color:#fff;padding:0;display:inline-flex}.foot .fsos a:hover{color:var(--emas);background:none}.foot .fsos .ic{width:20px;height:20px}
.foot .cp{font-size:.62rem;color:#d7efe4;font-weight:500;white-space:nowrap}
.foot .slg3{font:600 1.5rem/1 'Caveat','Segoe Script',cursive;color:#F7C61A;transform:rotate(-5deg);white-space:normal;max-width:9em;text-align:center;flex:none}
.foot .copy{display:none}
@media(max-width:1280px){nav>a,nav .dd>a{padding:10px 12px}nav a.on::after,nav .dd.on>a::after{left:12px;right:12px}nav .pill{padding:9px 20px;margin:0 4px}.foot .fnav a{padding:4px 9px}}
@media(max-width:1100px){
.hero-txt{padding-left:0}.foot .fbar{flex-wrap:wrap;justify-content:center}.foot .fright{align-items:center}.foot .slg3{max-width:none}
.home3{grid-template-columns:1fr 1fr}.home4{grid-template-columns:1fr 1fr}
nav>a,nav .dd>a{padding:10px 14px}nav .pill{margin:6px 0 0;display:inline-block;text-align:center}
}
@media(max-width:720px){.home3,.home4{grid-template-columns:1fr}}
.home3{grid-template-columns:minmax(0,3.3fr) minmax(0,1.28fr) minmax(0,1fr)}
.home3 .panel{padding:16px 16px 18px}
.home3 .pb-agenda .ph h2{font-size:1.2rem}
.home3 .pb-kontak .ph h2.h-ico{font-size:.9rem!important;white-space:nowrap}.home3 .pb-kontak .ph>a{font-size:.58rem;padding-top:5px}
.home3 .pb-news .ph>a,.home3 .pb-agenda .ph>a{padding-top:22px}
/* tahap 11b: kerapatan vertikal & ukuran teks mengikuti desain */
.about{margin:20px 0 18px}
.home3{margin:0 0 16px}.home3 .post h3{font-size:.86rem}.home3 .post .pb p{font-size:.72rem}
.fstrip{padding:10px 18px;margin:0 0 18px}.fstrip .fb{padding-right:16px}
.fstrip .fi{padding:0 10px;min-width:0}.fstrip .fi b{font-size:.68rem;white-space:nowrap}.fstrip .fi small{font-size:.62rem}.fstrip .fi .ic{width:1.9em;height:1.9em}
.home4{grid-template-columns:minmax(0,1.12fr) minmax(0,1.08fr) minmax(0,1.3fr) minmax(0,.95fr);margin:0 0 18px}
.home4 .panel{padding:16px 18px 18px}
.home4 h2.h-ico{margin:0 0 12px}
.cek-list{gap:8px}.cek-list li{font-size:.76rem}
.pc-testi blockquote{font-size:.78rem}
.foot .fbar{padding-top:11px;padding-bottom:11px}.foot .mark{width:50px;height:50px}.foot .nm b{font-size:1.35rem}
/* tahap 11c: koreksi ukuran teks kartu bawah (mengikuti skala desain) */
.home4 h2.h-ico{font-size:.9rem!important;gap:9px;margin:0 0 10px}
.hb{width:26px;height:26px}.hb.hA{font-size:1.25rem;width:26px}
.cek-list li{font-size:.72rem;gap:9px}.cek-list .ic{width:1.3em;height:1.3em}
.pc-singkat p{font-size:.7rem;line-height:1.62}
.pc-testi blockquote{font-size:.74rem;line-height:1.62}
.ic-grid a{font-size:.66rem;padding:9px 2px 7px}.ic-grid .ic{width:1.9em;height:1.9em}
.testi-by b{font-size:.74rem}.testi-by small{font-size:.66rem}.testi-by .ava{width:42px;height:42px}
.fstrip .fi small{white-space:nowrap;font-size:.6rem}.fstrip .fi{flex:1 1 auto}
.home4 .panel{padding:14px 16px 16px}
/* tahap 11d */
.home3 .agenda-list .ag{padding:6px 9px;margin:0 0 9px;gap:11px}
.home3 .agenda-list .tgl{width:50px;height:46px}.home3 .agenda-list .tgl b{font-size:1.1rem}.home3 .agenda-list .tgl span{font-size:.72rem}
.home3 .agenda-list .ag h3{font-size:.86rem}.home3 .agenda-list .ag small{font-size:.72rem}
.kl{gap:9px}.kl li{font-size:.7rem;line-height:1.45}.kl .ic{width:1.2em;height:1.2em}
.mapcard{height:104px}
/* tahap 11e: jarak menu & komposisi hero */
nav>a,nav .dd>a{padding:10px 22px}nav a.on::after,nav .dd.on>a::after{left:22px;right:22px}nav .pill{margin:0 8px}
.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.97) 0%,rgba(6,84,61,.88) 30%,rgba(8,100,72,.38) 48%,rgba(8,100,72,0) 62%),var(--hero-img,none) right -136px top -30px/auto 100% no-repeat}
.hero h1{margin-bottom:.05em}.lead2{margin-bottom:8px;line-height:1.16}.sub{margin-bottom:18px;line-height:1.45}
.hero .cta .btn{padding:10px 28px}
@media(max-width:1280px){nav>a,nav .dd>a{padding:10px 12px}nav a.on::after,nav .dd.on>a::after{left:12px;right:12px}nav .pill{padding:9px 20px;margin:0 4px}}
@media(max-width:1100px){nav>a,nav .dd>a{padding:10px 14px}nav a.on::after,nav .dd.on>a::after{display:none}}
/* tahap 11f: footer & strip */
.foot .fsos .ic{color:#fff;margin:0}.foot .fsos a:hover .ic{color:var(--emas)}
.foot .fnav{justify-content:flex-start;padding-left:clamp(0px,9vw,150px)}.foot .fnav a{font-size:.72rem}
.fstrip .fb b{font-size:.95rem}.fstrip .fb .mark{width:38px;height:38px}.fstrip .fb small{font-size:.64rem}
@media(max-width:1280px){.foot .fnav{padding-left:0;justify-content:center}}

/* ===== tahap 11g: responsif final (tablet & ponsel) — sengaja diletakkan paling akhir ===== */
@media(max-width:1100px){
.top .bar{padding:0 16px}nav{margin-right:0}
nav .pill{margin:8px 0 0;display:inline-block;align-self:flex-start;padding:9px 28px}
.about{grid-template-columns:1fr 1fr}.about .vidcard{grid-column:1/-1}
.home3{grid-template-columns:1fr 1fr}.home3 .pb-news{grid-column:1/-1}
.home4{grid-template-columns:1fr 1fr}
.hero{min-height:0;padding:44px 0 100px}.hero .hero-grid{padding:0 20px}.hero-txt{padding-left:0}
.hero::before{background:linear-gradient(90deg,rgba(4,62,45,.94) 0%,rgba(7,90,65,.8) 55%,rgba(8,100,72,.35) 100%),var(--hero-img,none) right -60px top/auto 100% no-repeat}
.hero::after{opacity:.3}
.fstrip{flex-wrap:wrap;gap:12px 0}.fstrip .fb{width:100%;border:0;padding:0 0 6px}.fstrip .fi{flex:1 1 33%}.fstrip .fi::after{display:none}
.foot .fbar{flex-wrap:wrap;justify-content:center;padding:18px 20px}.foot .fnav{flex:1 1 100%;order:3;justify-content:center;padding-left:0;flex-wrap:wrap}.foot .fright{align-items:center}.foot .slg3{max-width:none;transform:none}
.quick .chev{display:none}.quick a{padding:16px 8px 14px}
}
@media(max-width:720px){
.topbar{display:none}
.top{background:linear-gradient(100deg,#064E3B,#087653);border:0;box-shadow:none}
.top .bar{min-height:76px;padding:0 16px}
.logo{gap:10px}.logo .mark{width:52px;height:52px;background:#fff;border-radius:50%;padding:6px;box-sizing:border-box;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.nm b{font-size:1.25rem;color:#fff}.nm small{font-size:.66rem;color:#d7efe4;font-weight:500}
.burger{color:#fff;font-size:1.9rem}
nav{background:#fff}
.hero{min-height:0;padding:150px 0 84px;align-items:flex-start;background:#064E3B}
.hero::before{background:linear-gradient(180deg,rgba(6,78,59,0) 0%,rgba(6,78,59,.25) 28%,rgba(6,78,59,.9) 52%,#064E3B 70%),var(--hero-img,none) right -200px top/auto 270px no-repeat}
.hero::after{display:none}
.hero .hero-grid{padding:0 18px}.hero-txt{padding-left:0;max-width:none}
.kicker{font-size:.95rem;margin:0}
.hero h1{font-size:2.35rem;margin:0 0 6px;line-height:1.05}
.lead2{font-size:1.2rem;margin:0 0 8px;line-height:1.18}
.sub{font-size:.76rem;max-width:26em;margin:0 0 14px;line-height:1.5}
.hero .cta{flex-wrap:nowrap;gap:10px}.hero .cta .btn{padding:8px 18px;font-size:.78rem;white-space:nowrap}
.hero-curve{height:34px}
.quick{margin-top:-46px;padding:12px;gap:10px;border-radius:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.quick a{padding:12px 6px 10px;border-radius:12px}.quick small{display:none}.quick b{font-size:.82rem}
.quick .qi .ic{width:1.8em;height:1.8em}
.wrap.home{padding:0 14px}
.home3{grid-template-columns:minmax(0,1fr);gap:16px;margin:18px 0 8px}
.home3 .pb-news{grid-column:auto;background:transparent;border:0;box-shadow:none;padding:0}
.home3 .ph .tag{display:none}
.home3 .ph h2{font-size:1.15rem;display:flex;align-items:center;gap:8px}
.home3 .ph>a{padding-top:4px!important;font-size:.7rem}
.pb-news .ph h2::before{content:"";width:20px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A6B4C' d='M4 5h11a3 3 0 0 1 3 3v11H7a3 3 0 0 1-3-3zm13 3h3a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.pb-agenda .ph h2::before{content:"";width:20px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0A500' d='M12 2.600 2.800 10.400h2.700V20h5v-5.600h3V20h5v-9.600h2.700z'/%3E%3C/svg%3E") center/contain no-repeat}
.home3 .news.n3{grid-template-columns:minmax(0,1fr)}
.home3 .post{border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(6,78,59,.07)}
.home3 .post .thumb{height:150px;margin:8px 8px 0;border-radius:10px;display:block}.home3 .post .thumb img{border-radius:10px}
.home3 .post .pb{padding:10px 14px 14px}.home3 .post h3{font-size:1rem}.home3 .post .pb p{font-size:.8rem}
.pb-agenda{border:1.5px solid #f1dc9a!important;background:#fffdf6!important}
.home3 .agenda-list .tgl{width:48px;height:48px}.home3 .agenda-list .ag h3{font-size:.92rem}
body{padding-bottom:84px}
.wabar{display:flex}
}
@media(max-width:720px){
.top .bar{min-height:84px}.logo .mark{width:62px;height:62px;padding:7px}.nm b{font-size:1.35rem}.nm small{font-size:.64rem}
.hero{padding:112px 0 80px}
.hero::before{background:linear-gradient(90deg,rgba(6,78,59,.78) 0%,rgba(6,78,59,.35) 50%,rgba(6,78,59,0) 75%),linear-gradient(180deg,rgba(6,78,59,0) 0,rgba(6,78,59,.1) 70px,rgba(6,78,59,.8) 160px,#064E3B 214px),var(--hero-img,none) right -138px top/auto 215px no-repeat,#064E3B}
.kicker{color:#fff;font-size:1rem;font-weight:600}
.hero h1{font-size:2.45rem}.lead2{font-size:1.22rem}
.quick a{padding:14px 6px 12px}.quick .qi .ic{width:2em;height:2em}.quick b{font-size:.84rem}
}
.foot .fnav{flex-direction:row;align-items:center}

/* tahap 11h: ponsel menampilkan SEMUA bagian beranda (sama seperti desktop), disusun menumpuk */
@media(max-width:720px){
.about{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px;margin:8px 0 16px}
.about .abt-txt{align-self:auto}.about h2{font-size:1.6rem}.about p{font-size:.9rem}
.about .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.about .stats>div:nth-child(3n)::after,.about .stats>div:last-child::after{display:none}
.about .stats>div:not(:nth-child(3n)):not(:last-child)::after{display:block}
.about .vidcard{grid-column:auto}.vid{min-height:190px}
.home3 .news.n3{gap:12px}
.home3 .post .thumb{height:150px}
.home3 .pb-kontak{display:block}
.mapcard{height:130px}.kl li{font-size:.84rem}
.fstrip{display:flex;flex-wrap:wrap;padding:14px;gap:12px 0;margin:0 0 16px}
.fstrip .fb{width:100%;border:0;padding:0 0 8px;margin:0}
.fstrip .fi{flex:1 1 50%;padding:4px 6px}.fstrip .fi small{white-space:normal}.fstrip .fi b{white-space:normal;font-size:.76rem}
.home4{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 18px}
.cek-list li{font-size:.84rem}.pc-singkat p{font-size:.84rem}.pc-testi blockquote{font-size:.86rem}
.ic-grid a{font-size:.72rem}
.foot{display:block;margin-top:20px;margin-bottom:0;padding-bottom:84px}
.foot .fbar{flex-direction:column;gap:14px;padding:22px 16px 10px;text-align:center}
.foot .fnav{padding-left:0;justify-content:center;flex-wrap:wrap;order:0}
.foot .fnav a{padding:4px 10px}
.foot .fright{align-items:center}.foot .cp{white-space:normal;text-align:center}
.foot .slg3{transform:none;max-width:none}
body{padding-bottom:0}
}

/* ===== tahap 12: header ringkas, menu jelas, pencarian berfungsi, menu mobile (drawer) — sengaja paling akhir ===== */
:root{--ink2:#0B3D2C;--muda:#E8F5EE}
html.nolock,html.nolock body{overflow:hidden}
.top{backdrop-filter:none;-webkit-backdrop-filter:none;z-index:60}
.mhead,.msearch,.mfoot,.mback,.tg,.mi,.burger,.hsearch{display:none}
.mlist{display:contents}

/* --- Topbar: lebih tipis --- */
.topbar .wrap{min-height:28px}
.topbar .slg{font-size:.72rem;font-weight:600;letter-spacing:.01em}
.sos{gap:14px}.sos a svg{width:16px;height:16px}.sos .sep{height:14px}
.sos a[aria-label^="Cari"] svg{width:17px;height:17px}

/* --- Navbar desktop: lebih tipis, nama menu jelas --- */
.top .bar{min-height:56px;gap:16px}
.logo{gap:11px}.mark{width:44px;height:44px}
.nm{line-height:1.1}.nm b{font-size:clamp(1.2rem,1.7vw,1.42rem);font-weight:800;letter-spacing:-.015em}
.nm small{font-size:clamp(.74rem,.9vw,.84rem);font-weight:600;color:#0B7D5A}
#menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;font-size:1rem}
#menu>a,#menu .dd>a,#menu .mlist>a{position:relative;display:inline-flex;align-items:center;gap:5px;padding:8px clamp(9px,1.05vw,15px);font-size:clamp(.88rem,.98vw,.96rem);font-weight:600;letter-spacing:.005em;color:var(--ink2);border-radius:10px;line-height:1.2;white-space:nowrap;transition:background .2s,color .2s}
#menu .dd{position:relative;display:flex;align-items:center;margin:0;gap:0;font-size:inherit}
#menu>a:hover,#menu .dd:hover>a,#menu .dd:focus-within>a,#menu .mlist>a:hover{background:var(--muda);color:var(--hijau)}
#menu a.on,#menu .dd.on>a{color:var(--hijau);font-weight:700}
#menu a.on::after,#menu .dd.on>a::after{content:"";position:absolute;left:clamp(9px,1.05vw,15px);right:clamp(9px,1.05vw,15px);bottom:1px;height:3px;border-radius:3px;background:var(--emas)}
#menu .dd>a .ic{width:.78em;height:.78em;stroke-width:2.8;opacity:.75;transition:transform .2s}
#menu .dd:hover>a .ic,#menu .dd:focus-within>a .ic{transform:rotate(180deg)}
#menu .pill{margin:0 6px;padding:8px 22px;background:linear-gradient(180deg,#FFCE1F,#F5B800);color:#2e2200;font-weight:800;border-radius:999px;box-shadow:0 3px 10px rgba(245,184,0,.4)}
#menu .pill:hover{background:#FFC400;color:#2e2200}#menu .pill::after{display:none}
#menu .sbtn{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:6px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink2);cursor:pointer;transition:.2s}
#menu .sbtn:hover{background:var(--muda);color:var(--hijau);border-color:#bfdccd}
#menu .sbtn .ic{width:1.15em;height:1.15em;stroke-width:2.2}
#menu .sub{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);min-width:230px;max-width:none;opacity:1;font-size:1rem;line-height:1.4;font-weight:400;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(6,78,59,.16);display:none;z-index:30}
#menu .sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
#menu .sub::after{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;margin-left:-5px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
#menu .dd:hover .sub,#menu .dd:focus-within .sub{display:block;animation:subin .18s ease-out}
#menu .sub a{display:block;padding:9px 13px;border-radius:9px;font-size:.92rem;font-weight:600;color:var(--ink2);white-space:nowrap}
#menu .sub a:hover{background:var(--muda);color:var(--hijau)}
@keyframes subin{from{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%,0)}}

/* --- Panel pencarian (semua ukuran layar) --- */
.srch{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:clamp(64px,14vh,150px) 16px 16px;background:rgba(5,38,28,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadein .18s ease-out}
.srch[hidden]{display:none}
.srch-box{width:min(680px,100%);padding:16px;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:subin2 .22s ease-out}
.srch-box form{display:flex;align-items:center;gap:8px;padding:0 6px 0 14px;border:2px solid var(--hijau);border-radius:14px;background:#fff}
.srch-box form>.ic{width:1.35em;height:1.35em;color:var(--hijau);stroke-width:2.2}
.srch-box input{flex:1;min-width:0;width:auto;margin:0;padding:14px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;font:500 1.05rem/1.3 var(--font);color:var(--ink)}
.srch-box input::-webkit-search-cancel-button{display:none}
.srch-go{padding:10px 20px;border:0;border-radius:10px;background:var(--hijau);color:#fff;font:700 .95rem var(--font);cursor:pointer}
.srch-go:hover{background:var(--gelap)}
.srch-x{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:#F1F6F3;color:var(--abu);cursor:pointer}
.srch-x:hover{background:#e2eee7;color:var(--ink2)}.srch-x .ic{width:1.1em;height:1.1em;stroke-width:2.4}
.srch-hint{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 2px 2px;font-size:.84rem;color:var(--abu)}
.srch-hint a{padding:5px 13px;border-radius:99px;background:var(--muda);color:var(--hijau);font-weight:600;text-decoration:none}
.srch-hint a:hover{background:var(--hijau);color:#fff}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes subin2{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

/* --- Halaman hasil pencarian --- */
.hasil-cari .search{max-width:680px}
.hc-h{display:flex;align-items:baseline;gap:10px;margin:28px 0 14px;font-size:1.25rem;font-weight:700;color:var(--ink2)}
.hc-h small{font-size:.8rem;font-weight:500;color:var(--abu)}
.hc-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hc-page{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:.2s}
.hc-page:hover{border-color:var(--hijau);transform:translateY(-2px)}
.hc-page b{color:var(--hijau);font-size:1rem}.hc-page span{grid-column:1;font-size:.82rem;color:var(--abu)}.hc-page .ic{grid-row:1/3;grid-column:2;color:var(--hijau)}
.hc-more{margin:12px 0 0;font-size:.9rem;font-weight:600}.hc-more a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.hc-agenda .ag{margin-bottom:10px}

/* --- Tablet & ponsel (<=1100px): drawer menu --- */
@media(max-width:1100px){
.top .bar{min-height:56px;padding:0 16px}
.hsearch{display:grid;place-items:center;width:42px;height:42px;margin-left:auto;margin-right:-4px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink2);cursor:pointer;flex:none}
.hsearch .ic{width:1.3em;height:1.3em;stroke-width:2.2}.hsearch:hover{background:var(--muda);color:var(--hijau)}
.burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;padding:0;border-radius:12px;background:var(--muda);color:var(--hijau);cursor:pointer;flex:none;transition:background .2s}
.burger span{display:block;width:20px;height:2.4px;border-radius:3px;background:currentColor;transition:transform .25s,opacity .2s}
.burger:hover{background:#d5eee2}
#burger:checked~.burger span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
#burger:checked~.burger span:nth-child(2){opacity:0}
#burger:checked~.burger span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
.mback{display:block;position:fixed;inset:0;z-index:99;background:rgba(5,38,28,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
#burger:checked~.mback{opacity:1;visibility:visible}
#menu{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:100;width:min(88vw,370px);height:100vh;height:100dvh;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow-y:auto;overscroll-behavior:contain;background:#fff;border:0;border-radius:24px 0 0 24px;box-shadow:-14px 0 40px rgba(5,38,28,.28);transform:translateX(104%);visibility:hidden;transition:transform .3s cubic-bezier(.22,.8,.3,1),visibility .3s}
#burger:checked~#menu{display:flex;transform:none;visibility:visible}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:14px 14px 14px 18px;background:var(--pola),linear-gradient(100deg,#064E3B,#087653);color:#fff;border-radius:24px 0 0 0}
.mlogo{display:flex;align-items:center;gap:10px;min-width:0}
.mlogo .mark{width:42px;height:42px;padding:5px;background:#fff;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.mlogo .nm b{font-size:1.1rem;color:#fff}.mlogo .nm small{font-size:.7rem;color:#d7efe4;font-weight:500}
.mclose{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;transition:.2s}
.mclose:hover{background:rgba(255,255,255,.28)}.mclose .ic{width:1.2em;height:1.2em;stroke-width:2.4}
.msearch{display:flex;align-items:center;gap:6px;flex:none;margin:14px 16px 6px;padding:0 5px 0 13px;background:#F4FAF6;border:1.5px solid #cfe3d8;border-radius:14px}
.msearch:focus-within{border-color:var(--hijau);background:#fff}
.msearch>.ic{color:var(--hijau);stroke-width:2.2}
.msearch input{flex:1;min-width:0;width:auto;margin:0;padding:12px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;font:500 16px/1.3 var(--font);color:var(--ink)}
.msearch input::-webkit-search-cancel-button{display:none}
.msearch button{padding:8px 16px;border:0;border-radius:10px;background:var(--hijau);color:#fff;font:700 .85rem var(--font);cursor:pointer}
.mlist{display:flex;flex-direction:column;gap:2px;padding:6px 12px 8px}
#menu>a,#menu .dd>a,#menu .mlist>a{display:flex;align-items:center;gap:13px;padding:10px 10px;font-size:1.02rem;font-weight:600;letter-spacing:0;border-radius:14px;white-space:normal}
#menu .mlist>a:hover,#menu .dd:hover>a,#menu .dd:focus-within>a{background:#F1F8F4;color:var(--ink2)}
#menu a.on::after,#menu .dd.on>a::after{display:none}
.mi{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--muda);color:var(--hijau);--tile:#E8F5EE;transition:.2s}
.mi .ic{width:1.3em;height:1.3em;margin:0}
#menu a.on,#menu .dd.on>a{background:#EAF6EF;color:var(--hijau)}
#menu a.on .mi,#menu .dd.on>a .mi{background:var(--hijau);color:#fff;--tile:#087653}
#menu .dd{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:0;margin:0}
#menu .dd>a .ic:last-child{display:none}
#menu .dd>a .mi .ic:last-child{display:block}
.tg{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--abu);cursor:pointer}
.tg .ic{width:1.1em;height:1.1em;stroke-width:2.6;transition:transform .25s}
.tg:hover{background:#F1F8F4}
#menu .dd.open .tg .ic{transform:rotate(180deg);color:var(--hijau)}
#menu .sub{position:static;transform:none;max-width:none;opacity:1;grid-column:1/-1;display:none;min-width:0;margin:2px 0 8px 29px;padding:2px 0 2px 16px;background:transparent;border:0;border-left:2px solid #d3e7db;border-radius:0;box-shadow:none;animation:none}
#menu .sub::before,#menu .sub::after{display:none}
#menu .dd:hover .sub,#menu .dd:focus-within .sub{display:none;animation:none}
#menu .dd.open .sub,html:not(.js) #menu .dd .sub{display:block}
#menu .sub a{position:relative;padding:9px 12px;font-size:.94rem;font-weight:500;color:#2c4a3e;white-space:normal}
#menu .sub a::before{content:"";position:absolute;left:-19px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#bcd9c9}
#menu .sub a:hover{background:#F1F8F4;color:var(--hijau)}#menu .sub a:hover::before{background:var(--hijau)}
#menu .pill{align-self:stretch;width:auto;margin:10px 2px 2px;padding:12px 14px;justify-content:center;font-weight:800;font-size:1.02rem;box-shadow:0 5px 14px rgba(245,184,0,.4)}
#menu .pill .mi{background:rgba(255,255,255,.6);color:#3b2a00;--tile:#fde9a0}
#menu .pill.on{background:linear-gradient(180deg,#FFCE1F,#F5B800);color:#2e2200}
#menu .pill.on .mi{background:rgba(255,255,255,.6);color:#3b2a00}
#menu>.sbtn{display:none}
.mfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;flex:none;margin-top:auto;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));background:#F6FBF8;border-top:1px solid var(--line)}
.mtel{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-size:.88rem;font-weight:600;text-decoration:none}.mtel .ic{color:var(--hijau)}
.msos{display:flex;gap:8px}.msos a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--muda);color:var(--hijau);transition:.2s}
.msos a:hover{background:var(--hijau);color:#fff}.msos .ic{width:1.1em;height:1.1em}
}

/* --- Ponsel (<=720px): header hijau ringkas --- */
@media(max-width:720px){
.top .bar{min-height:56px;padding:0 14px}
.logo{gap:9px}.logo .mark{width:38px;height:38px;padding:4px}
.nm b{font-size:1.08rem}.nm small{font-size:.64rem}
.top .logo .nm b{color:#fff}.top .logo .nm small{color:#d7efe4;font-weight:500}
.hsearch{width:40px;height:40px;color:#fff}.hsearch:hover{background:rgba(255,255,255,.16);color:#fff}
.burger{width:40px;height:40px;background:rgba(255,255,255,.16);color:#fff}.burger:hover{background:rgba(255,255,255,.26)}
.srch{padding-top:72px}.srch-box{padding:12px;border-radius:18px}
.srch-box input{font-size:16px}.srch-go{padding:9px 14px}
.hc-h{font-size:1.12rem}
}
@media(max-width:360px){.nm b{font-size:1rem}.nm small{display:none}}
@media(min-width:721px) and (max-width:1100px){.logo .mark{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){#menu,.mback,.burger span{transition:none}.srch,.srch-box{animation:none}}

/* ===== tahap 13: ornamen pola kecil menyambung di sisi kiri (hero & footer), memudar lembut dengan gradien warna ===== */
.hero::after,.foot::after{display:block!important;content:"";position:absolute;left:0;top:0;bottom:0;right:auto;width:clamp(300px,36vw,560px);height:auto;z-index:0;pointer-events:none;opacity:1;
background:linear-gradient(180deg,rgba(5,61,46,.7) 0%,rgba(5,61,46,0) 24%,rgba(5,61,46,0) 70%,rgba(5,61,46,.75) 100%),url("img/ornamen-pola.svg?v=1") left top/64px 64px repeat;
-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.25) 72%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.25) 72%,transparent 100%)}
.hero .hero-grid{z-index:2}.hero-curve{z-index:1}
.foot{position:relative;overflow:hidden}.foot>*{position:relative;z-index:1}
.foot::after{width:clamp(260px,32vw,480px);background:linear-gradient(180deg,rgba(5,63,49,.55) 0%,rgba(5,63,49,0) 30%,rgba(5,63,49,0) 70%,rgba(5,63,49,.6) 100%),url("img/ornamen-pola.svg?v=1") left top/56px 56px repeat}
@media(max-width:720px){.hero::after{width:78%}.foot::after{width:80%}}

/* ===== halaman Profil: tampilan profesional + animasi (prefiks .pf-) ===== */
.pf-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.pf-progress i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--hijau2),var(--emas));transition:transform .12s linear}
.pf-sec{padding-top:34px;padding-bottom:10px;scroll-margin-top:150px}
.pf-navwrap{position:sticky;top:64px;z-index:30;padding-top:18px;padding-bottom:0;pointer-events:none}
.pf-tabs{pointer-events:auto;max-width:100%;overflow-x:auto;scrollbar-width:none;backdrop-filter:blur(8px);background:rgba(255,255,255,.92)}
.pf-tabs::-webkit-scrollbar{display:none}.pf-tabs a{white-space:nowrap;position:relative}
.pf-tabs a.on{background:var(--hijau);color:#fff}
/* hero halaman */
.pagehead h1,.pagehead p,.pagehead .crumb2{animation:pfUp .7s cubic-bezier(.2,.7,.2,1) both}
.pagehead h1{animation-delay:.08s}.pagehead p{animation-delay:.16s}
.pagehead::before{animation:pfHero 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes pfUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pfHero{from{opacity:0;transform:scale(1.06) translateX(24px)}to{opacity:.85;transform:none}}
/* reveal saat scroll (hanya bila JS aktif) */
.js .pf-rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .pf-rv.in{opacity:1;transform:none}
/* tentang */
.pf-about{gap:48px}.pf-lead{font-size:1.04rem;line-height:1.85;color:#2f4f43}
.pf-usia{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;border-radius:12px;background:#EEF8F3;color:#064E3B;font-size:.92rem;width:fit-content;max-width:100%}
.pf-usia .ic{width:1.5em;height:1.5em;color:var(--hijau)}.pf-usia b{font-size:1.1rem}
.pf-motto{transition:transform .4s,box-shadow .4s}.pf-motto:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(6,78,59,.22)}
.pf-orn{position:absolute;right:-70px;top:-70px;width:220px;height:220px;opacity:.14;animation:pfSpin 60s linear infinite;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 120 120' fill='none' stroke='%23fff' stroke-width='1.3'%3E%3Crect x='-40' y='-40' width='80' height='80'/%3E%3Crect x='-40' y='-40' width='80' height='80' transform='rotate(45)'/%3E%3Crect x='-26' y='-26' width='52' height='52' transform='rotate(22.5)'/%3E%3Crect x='-26' y='-26' width='52' height='52' transform='rotate(67.5)'/%3E%3Ccircle r='12'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes pfSpin{to{transform:rotate(360deg)}}
.pf-motto .bsm{position:relative;animation:pfGlow 4s ease-in-out infinite}
@keyframes pfGlow{0%,100%{text-shadow:0 0 0 rgba(245,184,0,0)}50%{text-shadow:0 0 18px rgba(245,184,0,.45)}}
.pf-motto::after{transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .5s}.pf-motto.in::after{transform:scaleX(1)}
.pf-slogan{position:relative;margin-top:10px;font-size:.82rem;letter-spacing:.06em;opacity:.8}
/* statistik */
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:34px}
.pf-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 12px;text-align:center;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .3s,box-shadow .3s,border-color .3s}
.pf-stat:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:#bfe0d0}
.pf-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#EEF8F3;color:var(--hijau);margin-bottom:6px;transition:.3s}
.pf-ico .ic{width:1.45em;height:1.45em}.pf-stat:hover .pf-ico,.pf-info-i:hover .pf-ico{background:var(--hijau);color:#fff;transform:rotate(-6deg) scale(1.06)}
.pf-stat b{font-size:1.8rem;font-weight:800;line-height:1.15;color:#064E3B;font-variant-numeric:tabular-nums}.pf-lbl{font-size:.78rem;color:var(--abu)}
/* visi misi */
.pf-visi{position:relative;overflow:hidden;transition:transform .4s,box-shadow .4s}.pf-visi:hover{transform:translateY(-5px)}
.pf-visi p{position:relative;font-size:1.28rem}.pf-quote{position:absolute;right:20px;top:-14px;font:700 9rem/1 Georgia,serif;color:var(--emas);opacity:.16;pointer-events:none}
.pf-misi{padding:24px 26px}.pf-misi ol{list-style:none;padding:0;margin:12px 0 0;gap:6px}
.pf-misi li{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;border-radius:12px;transition:background .25s,transform .25s}
.pf-misi li:hover{background:#F1F9F5;transform:translateX(5px)}
.pf-no{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--hijau),var(--hijau2));color:#fff;font-weight:700;font-size:.85rem;box-shadow:0 4px 10px rgba(11,125,88,.28)}
.js .pf-misi li{opacity:0;transform:translateX(18px);transition:opacity .6s var(--d,0s),transform .6s var(--d,0s),background .25s}
.js .pf-misi.in li{opacity:1;transform:none}.js .pf-misi.in li:hover{transform:translateX(5px)}
/* kartu */
.pf-hist{padding:28px 32px;border-left:5px solid var(--emas)}
.pf-org .card,.pf-guru .card{transition:transform .3s,box-shadow .3s,border-color .3s}
.pf-org .card:hover,.pf-guru .card:hover{transform:translateY(-5px);box-shadow:var(--sh2);border-color:#bfe0d0}
.pf-guru a.card{text-decoration:none;color:inherit;display:flex;gap:14px;align-items:center}.pf-guru .ava{transition:transform .3s}.pf-guru .card:hover .ava{transform:scale(1.1) rotate(-5deg)}
.sec-head>a .ic{width:1em;height:1em;vertical-align:-.12em;transition:transform .25s}.sec-head>a:hover .ic{transform:translateX(4px)}
/* identitas */
.pf-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pf-info-i{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh);text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.pf-info-i:hover{transform:translateY(-4px);box-shadow:var(--sh2)}.pf-info-i .pf-ico{margin:0;flex:none}
.pf-info-i small{display:block;color:var(--abu);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}.pf-info-i b{font-weight:600;font-size:.95rem;line-height:1.45;word-break:break-word}
/* CTA */
.pf-sec:last-child{padding-bottom:50px}
.pf-cta{position:relative;overflow:hidden}
.pf-cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:pfShine 5s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes pfShine{0%{left:-40%}55%,100%{left:130%}}
.pf-cta>*{position:relative;z-index:1}.pf-cta .btn{transition:transform .25s,box-shadow .25s}.pf-cta .btn:hover{transform:translateY(-3px) scale(1.03)}
.pf-cta .btn .ic{transition:transform .25s}.pf-cta .btn:hover .ic{transform:translateX(4px)}
.pf-steps{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0;padding:0}
.pf-steps li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px 14px;line-height:1.35}
.pf-steps small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--emas)}.pf-steps b{font-size:.92rem;font-weight:600}
@media(max-width:900px){.pf-about{gap:26px}.pf-navwrap{top:64px}}
@media(max-width:720px){.pf-stats{grid-template-columns:repeat(2,1fr)}.pf-hist{padding:20px}.pf-misi{padding:18px 14px}.pf-quote{font-size:6rem}}
@media(prefers-reduced-motion:reduce){.pf-rv,.pf-misi li{opacity:1!important;transform:none!important}.pf-orn,.pf-cta::after,.pf-motto .bsm,.pagehead h1,.pagehead p,.pagehead .crumb2,.pagehead::before{animation:none!important}.pf-motto::after{transform:none}}

/* ===== Dashboard admin (dx-) ===== */
.adminbar{background:#F1F8F4;border-bottom:1px solid var(--line)}.adminbar a{font-weight:600;color:#2b4a3e}.adminbar a:hover{background:#fff}.adminbar a.on{background:var(--hijau);color:#fff;box-shadow:0 4px 12px rgba(8,118,83,.28)}
.dx{padding:26px 0 44px}
.dx-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:center;color:#fff;border-radius:24px;padding:30px 34px;background:var(--pola),radial-gradient(500px 220px at 90% 0%,rgba(245,184,0,.22),transparent 70%),linear-gradient(120deg,#0b7a55 0%,#075c41 55%,#064E3B 100%);box-shadow:var(--sh2);margin-bottom:18px}
.dx-date{margin:0 0 6px;font-size:.8rem;letter-spacing:.04em;opacity:.85;display:flex;gap:6px;align-items:center}
.dx-hero h1{font-size:1.75rem;margin:0 0 6px;color:#fff}.dx-sub{margin:0;opacity:.92;max-width:46ch}.dx-sub b{color:#FFD66B;font-weight:700}
.dx-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.dx-ghost{padding:10px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;transition:background .2s}.dx-ghost:hover{background:rgba(255,255,255,.14)}
.dx-hero-st{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dx-hero-st div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:14px 10px;text-align:center;backdrop-filter:blur(2px)}
.dx-hero-st b{display:block;font-size:1.7rem;line-height:1.1;color:#fff}.dx-hero-st span{font-size:.7rem;opacity:.85;line-height:1.3;display:block;margin-top:4px}
.dx-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.dx-k{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.dx-k:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.dx-ik{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none;font-size:1.25rem}
.dx-ik.t-hijau{background:#E3F4EB;color:#087653}.dx-ik.t-biru{background:#E5EEFE;color:#2F6BDB}.dx-ik.t-ungu{background:#EEE9FD;color:#6D4BD8}.dx-ik.t-teal{background:#DFF4F3;color:#0E8A86}.dx-ik.t-emas{background:#FFF3CC;color:#A87400}.dx-ik.t-mawar{background:#FDE8EC;color:#C2294B}
.dx-kt{display:flex;flex-direction:column;line-height:1.2}.dx-kt b{font-size:1.65rem;font-weight:700}.dx-kt small{font-size:.8rem;color:var(--abu)}
.dx-go{position:absolute;right:14px;top:14px;color:#b7c9c0;transition:transform .2s,color .2s}.dx-k:hover .dx-go{transform:translateX(3px);color:var(--hijau)}
.dx-k.hot{border-color:#f0d58a;background:linear-gradient(180deg,#FFFDF4,#fff)}.dx-k.hot .dx-kt b{color:#B45309}
.dx-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--sh);margin-bottom:18px}
.dx-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.dx-hd h2{margin:0;font-size:1.05rem}.dx-hd a{font-size:.8rem;font-weight:600;text-decoration:none;display:inline-flex;gap:4px;align-items:center}
.dx-qg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dx-qg a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#F3F9F6;border:1px solid transparent;color:#1d3a2f;font-weight:600;font-size:.88rem;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.dx-qg a:hover{background:#fff;border-color:var(--hijau);transform:translateY(-2px)}.dx-qg a span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--hijau);box-shadow:0 1px 3px rgba(6,78,59,.12)}
.dx-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}.dx-cols .dx-card:last-child{margin-bottom:0}
.dx-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:14px;text-decoration:none;color:var(--ink);transition:background .15s}.dx-row+.dx-row{border-top:1px solid #EEF4F0;border-radius:0}.dx-row:hover{background:#F6FBF8;border-radius:14px}
.dx-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;font-weight:700;color:#fff;background:linear-gradient(135deg,#16A34A,#087653)}.dx-av2{background:linear-gradient(135deg,#F5B800,#E39A00);color:#3b2a00}
.dx-rt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}.dx-rt strong{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dx-rt small{font-size:.76rem;color:var(--abu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-time{font-size:.72rem;color:var(--abu);white-space:nowrap}
.dx-unread .dx-rt strong::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--emas);margin-right:7px;vertical-align:1px}
.dx-st{font-size:.7rem;font-weight:700;padding:4px 11px;border-radius:99px;white-space:nowrap;background:#EEF2F0;color:#3b4d45}
.dx-st-baru{background:#FFF1BF;color:#8A5B00}.dx-st-dihubungi{background:#E1ECFE;color:#2457B3}.dx-st-berkas{background:#DDF5E6;color:#0E7A3E}.dx-st-selesai{background:#064E3B;color:#fff}
.dx-empty{margin:6px 0 2px;color:var(--abu);font-size:.88rem;text-align:center;padding:14px 0}
.dx-donutw{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.dx-donut{width:128px;height:128px;border-radius:50%;background:var(--d);display:grid;place-items:center;flex:none}
.dx-donut span{display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#fff;line-height:1.1}.dx-donut b{font-size:1.5rem}.dx-donut small{font-size:.68rem;color:var(--abu)}
.dx-leg{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.84rem;flex:1;min-width:130px}.dx-leg li{display:flex;align-items:center;gap:8px}.dx-leg i{width:10px;height:10px;border-radius:50%;flex:none}.dx-leg b{margin-left:auto}
.dx-ag{display:flex;align-items:center;gap:12px;padding:9px 0}.dx-ag+.dx-ag{border-top:1px solid #EEF4F0}
.dx-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:50px;border-radius:12px;background:#E3F4EB;color:#087653;flex:none;line-height:1.05}.dx-chip b{font-size:1.15rem}.dx-chip small{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.dx-nw{display:flex;flex-direction:column;gap:3px;padding:10px 0;text-decoration:none;color:var(--ink)}.dx-nw+.dx-nw{border-top:1px solid #EEF4F0}.dx-nw .kat{align-self:flex-start}.dx-nw strong{font-size:.9rem;font-weight:600;line-height:1.4}.dx-nw:hover strong{color:var(--hijau)}.dx-nw small{font-size:.74rem;color:var(--abu)}
@media(max-width:960px){.dx-hero{grid-template-columns:1fr}.dx-cols{grid-template-columns:1fr}.dx-cols .dx-main .dx-card:last-child{margin-bottom:18px}}
@media(max-width:560px){.dx-hero{padding:24px 20px}.dx-hero h1{font-size:1.4rem}.dx-kpi{grid-template-columns:1fr 1fr}.dx-k{flex-direction:column;align-items:flex-start;gap:10px}.dx-hero-st b{font-size:1.3rem}.dx-go{display:none}}
@media(prefers-reduced-motion:reduce){.dx-k,.dx-qg a,.dx-go{transition:none}.dx-k:hover,.dx-qg a:hover{transform:none}}