/* =========================================================================
   Tampilan situs publik. Warna & huruf mengikuti tema (variabel CSS dari panel admin).
   Konsep: lengkung mihrab (arch), kisi bintang delapan, dan jejak sirkuit tipis.
   ========================================================================= */

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.65 var(--font-body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe{max-width:100%}
img{display:block;height:auto}
a{color:var(--p-700);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--p)}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;letter-spacing:-.012em;margin:0 0 .5em;color:var(--night);text-wrap:balance}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em}
:focus-visible{outline:3px solid var(--a);outline-offset:2px;border-radius:4px}
::selection{background:var(--a);color:var(--on-a)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:.5rem;top:.5rem;transform:translateY(-300%);z-index:200;background:var(--a);color:var(--on-a);padding:.6rem 1rem;border-radius:var(--r-sm);font-weight:700}
.skip:focus{transform:none}
.container{width:min(1200px,100% - 2.5rem);margin-inline:auto}
.ic{width:1.15em;height:1.15em;flex:none}
.ar{font-family:'Amiri','Noto Naskh Arabic','Scheherazade New',serif;direction:rtl}

/* Pola bintang delapan, diwarnai lewat currentColor/mask */
.pattern{position:relative;isolation:isolate}
.pattern::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--pat,#fff);opacity:var(--pat-o,.07);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='20' y='20' width='56' height='56'/%3E%3Cpath d='M48 9L87 48 48 87 9 48z'/%3E%3Cpath d='M0 0l20 20M96 0L76 20M0 96l20-20M96 96L76 76'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='20' y='20' width='56' height='56'/%3E%3Cpath d='M48 9L87 48 48 87 9 48z'/%3E%3Cpath d='M0 0l20 20M96 0L76 20M0 96l20-20M96 96L76 76'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px}
body.no-pattern .pattern::before{display:none}
.pattern--ink{--pat:var(--p);--pat-o:.07}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.78rem 1.35rem;border:1.5px solid transparent;border-radius:var(--r-sm);font:700 .98rem/1.1 var(--font-head);letter-spacing:0;text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--a);color:var(--on-a)}
.btn-gold:hover{background:var(--a-100);color:var(--night)}
.btn-primary{background:var(--p);color:var(--on-p)}
.btn-primary:hover{background:var(--p-700);color:var(--on-p)}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:inherit}
.btn-line{border-color:var(--p-300);color:var(--p-700);background:#fff}
.btn-line:hover{border-color:var(--p);color:var(--p)}
.btn-sm{padding:.55rem .95rem;font-size:.9rem}
.more{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-family:var(--font-head);font-size:.95rem;text-decoration:none;color:var(--p-700)}
.more .ic{transition:transform .18s}
.more:hover .ic{transform:translateX(3px)}

/* ---------- Pengumuman & topbar ---------- */
.notice{background:var(--a);color:var(--on-a);font-size:.92rem;font-weight:700}
.notice a{color:inherit;text-decoration:none;display:flex;gap:.6rem;justify-content:center;align-items:center;padding:.5rem 1.25rem;text-align:center}
.notice a:hover{text-decoration:underline}
.topbar{background:var(--night);color:#bcd3cd;font-size:.86rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px}
.topbar a{color:inherit;text-decoration:none}
.topbar a:hover{color:#fff}
.topbar-list{display:flex;gap:1.4rem;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.topbar-list li{display:flex;align-items:center;gap:.45rem}
.socials{display:flex;gap:.35rem;margin:0;padding:0;list-style:none}
.socials a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;transition:background-color .15s}
.socials a:hover{background:rgba(255,255,255,.14)}

/* ---------- Header ---------- */
.bar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.bar.is-stuck{box-shadow:0 8px 24px -16px rgba(0,0,0,.35)}
.bar .container{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--night);min-width:0}
.brand-mark{width:46px;height:46px;flex:none;display:grid;place-items:center;color:var(--p)}
.brand-mark img{width:46px;height:46px;object-fit:contain}
.brand-mark .star8{width:46px;height:46px}
.brand-name{font:700 1.02rem/1.2 var(--font-head);max-width:17rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nav{display:flex;align-items:center;gap:.15rem}
.nav>ul{display:flex;align-items:center;gap:.1rem;margin:0;padding:0;list-style:none}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:.3rem;padding:.7rem .85rem;border:0;background:none;font:600 .97rem/1 var(--font-head);color:var(--night);text-decoration:none;cursor:pointer;border-radius:var(--r-sm)}
.nav-link:hover,.nav-item:focus-within>.nav-link,.nav-link.is-current{color:var(--p)}
.nav-link.is-current{box-shadow:inset 0 -2px 0 var(--a)}
.nav-link .ic{width:.9em;height:.9em;transition:transform .2s}
.drop{position:absolute;left:0;top:100%;min-width:15rem;margin:0;padding:.5rem;list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 40px -20px rgba(6,43,42,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility 0s .16s}
.nav-item:hover>.drop,.nav-item:focus-within>.drop,.nav-item.is-open>.drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.drop a{display:block;padding:.6rem .8rem;border-radius:var(--r-sm);color:var(--night);text-decoration:none;font-size:.96rem;font-weight:500}
.drop a:hover{background:var(--p-50);color:var(--p-700)}
.drop a small{display:block;color:var(--muted);font-size:.8rem}
.bar-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--night);cursor:pointer}
.icon-btn:hover{background:var(--p-50);color:var(--p)}
.icon-btn .ic{width:1.35rem;height:1.35rem}
.nav-toggle{display:none}
[data-hdr="night"] .bar{background:var(--night);border-bottom-color:rgba(255,255,255,.12)}
[data-hdr="night"] .brand,[data-hdr="night"] .nav-link,[data-hdr="night"] .icon-btn{color:#fff}
[data-hdr="night"] .nav-link:hover,[data-hdr="night"] .nav-item:focus-within>.nav-link{color:var(--a)}
[data-hdr="night"] .brand-mark{color:var(--a)}
[data-hdr="night"] .icon-btn:hover{background:rgba(255,255,255,.1);color:var(--a)}
[data-hdr="night"] .topbar{background:#000;background:color-mix(in srgb,var(--night) 70%,#000)}

/* ---------- Pencarian ---------- */
.search-pop{position:fixed;inset:0;z-index:90;background:rgba(6,43,42,.86);display:none;align-items:flex-start;justify-content:center;padding:14vh 1.25rem 0}
.search-pop.is-open{display:flex}
.search-pop form{width:min(680px,100%);display:flex;gap:.5rem;background:#fff;border-radius:var(--r);padding:.55rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.search-pop input{flex:1;min-width:0;border:0;font:500 1.15rem var(--font-body);padding:.8rem 1rem;background:transparent;color:var(--night)}
.search-pop input:focus{outline:none}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;flex-direction:column;background:var(--night);color:var(--on-night);overflow:hidden;isolation:isolate}
.hero-field{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-field::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 84% 42%,var(--p-800),transparent 70%),radial-gradient(40% 60% at 6% 100%,var(--p-900),transparent 70%)}
.hero-field .pattern-layer{position:absolute;inset:0;--pat:#fff;--pat-o:.055}
.hero-field .pattern-layer::before{content:"";position:absolute;inset:0;background:#fff;opacity:.055;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='20' y='20' width='56' height='56'/%3E%3Cpath d='M48 9L87 48 48 87 9 48z'/%3E%3Cpath d='M0 0l20 20M96 0L76 20M0 96l20-20M96 96L76 76'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='20' y='20' width='56' height='56'/%3E%3Cpath d='M48 9L87 48 48 87 9 48z'/%3E%3Cpath d='M0 0l20 20M96 0L76 20M0 96l20-20M96 96L76 76'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px}
body.no-pattern .hero-field .pattern-layer{display:none}
.hero-trace{position:absolute;left:0;bottom:0;width:min(520px,60%);height:auto;color:var(--a);opacity:.5}
.hero-stage{display:grid;flex:1;min-height:clamp(540px,76vh,740px)}
.hero--medium .hero-stage{min-height:clamp(480px,64vh,620px)}
.slide{grid-area:1/1;position:relative;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
.slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.24;filter:saturate(.8);transform:scale(1.04)}
.slide.is-active .slide-bg{animation:drift 14s ease-out both}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 6%,transparent 68%)}
.slide-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(1.5rem,5vw,4.5rem);padding-block:3.5rem 2.5rem}
.slide-unit{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem .85rem .35rem .6rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;font:600 .88rem/1 var(--font-head);color:#fff;text-decoration:none;margin-bottom:1.25rem}
.slide-unit i{width:.7rem;height:.7rem;border-radius:50%;display:block}
.slide-unit:hover{border-color:var(--a);color:var(--a)}
.slide-title{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.08;letter-spacing:-.025em;color:#fff;margin:0 0 1.1rem;max-width:18ch}
.slide-sub{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.6;color:#d4e6e1;max-width:46ch;margin:0 0 1.9rem}
.slide-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.slide-cta .btn-ghost{color:#fff}
.slide-copy>*{opacity:0;transform:translateY(18px)}
.slide.is-active .slide-copy>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*.11s + .25s)}
[data-effect="slide"] .slide{transform:translateX(5%);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility 0s .8s}
[data-effect="slide"] .slide.is-active{transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility 0s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.12)}}

.slide-arch{position:relative;margin:0 0 0 auto;width:min(100%,400px);aspect-ratio:4/5;justify-self:end}
.arch-img{position:absolute;inset:0;clip-path:url(#clip-arch);background:var(--p-900)}
.arch-img img{width:100%;height:100%;object-fit:cover}
.slide.is-active .arch-img img{animation:settle 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{transform:scale(1.12)}to{transform:scale(1)}}
.arch-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.arch-line path{vector-effect:non-scaling-stroke}
.arch-line--1 path{stroke:var(--a);stroke-width:2}
.arch-line--2{inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px)}
.arch-line--2 path{stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round}
.slide-arch .arch-star{position:absolute;right:-18px;bottom:12%;width:56px;height:56px;color:var(--a)}

.hero-controls{position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding-bottom:1.6rem}
.hero-rail{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:.9rem;flex:1;max-width:760px;margin:0;padding:0;list-style:none}
.rail-item{display:block;width:100%;padding:.55rem 0 0;border:0;background:none;text-align:left;color:#fff;cursor:pointer;opacity:.62;transition:opacity .2s}
.rail-item:hover,.rail-item.is-active{opacity:1}
.rail-bar{display:block;height:3px;background:rgba(255,255,255,.22);border-radius:3px;overflow:hidden}
.rail-bar i{display:block;height:100%;width:0;background:var(--a)}
.rail-item.is-done .rail-bar i{width:100%}
.rail-item.is-active .rail-bar i{animation:fill var(--dur,7s) linear forwards}
.hero.is-paused .rail-item.is-active .rail-bar i{animation-play-state:paused}
.hero.no-auto .rail-item.is-active .rail-bar i{animation:none;width:100%}
@keyframes fill{from{width:0}to{width:100%}}
.rail-title{display:block;margin-top:.6rem;font:600 .86rem/1.3 var(--font-head);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-arrows{display:flex;gap:.45rem}
.hero-arrows button{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.hero-arrows button:hover{background:var(--a);border-color:var(--a);color:var(--on-a)}
.hero-arrows .ic{width:1.25rem;height:1.25rem}
.hero-arrows [data-toggle] .i-play{display:none}
.hero.is-stopped [data-toggle] .i-play{display:block}
.hero.is-stopped [data-toggle] .i-pause{display:none}

/* Dock: tanggal, jadwal sholat, akses cepat */
.dock-wrap{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.14);background:rgba(3,22,21,.55);backdrop-filter:blur(8px)}
.dock{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch}
.dock>*{padding:1rem 1.6rem;border-left:1px solid rgba(255,255,255,.12)}
.dock>*:first-child{border-left:0;padding-left:0}
.dock>*:last-child{padding-right:0}
.dock-date strong{display:block;font:700 1.02rem/1.3 var(--font-head);color:#fff}
.dock-date span{display:block;color:#a9c7c0;font-size:.9rem}
.prayer{display:flex;align-items:center;gap:1.4rem;min-width:0}
.prayer-list{display:flex;gap:.25rem;margin:0;padding:0;list-style:none;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.prayer-list::-webkit-scrollbar{display:none}
.prayer-list li{flex:1 0 auto;padding:.3rem .85rem;text-align:center;border-radius:var(--r-sm);color:#c6dcd6;transition:background-color .2s}
.prayer-list span{display:block;font-size:.78rem;color:#9ebfb7}
.prayer-list b{display:block;font:700 1.08rem/1.3 var(--font-head);font-variant-numeric:tabular-nums;color:#fff}
.prayer-list li.is-next{background:var(--a);color:var(--on-a)}
.prayer-list li.is-next span,.prayer-list li.is-next b{color:var(--on-a)}
.prayer-next{flex:none;font-size:.88rem;color:#a9c7c0;line-height:1.35;text-align:right}
.prayer-next b{display:block;font:700 1.1rem var(--font-head);color:#fff;font-variant-numeric:tabular-nums}
.dock-links{display:flex;align-items:center;gap:.25rem}
.dock-links a{display:grid;justify-items:center;gap:.3rem;padding:.45rem .8rem;border-radius:var(--r-sm);color:#d6e9e4;text-decoration:none;font:600 .8rem/1.1 var(--font-head)}
.dock-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.dock-links .ic{width:1.35rem;height:1.35rem;color:var(--a)}

/* ---------- Seksi umum ---------- */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:2.2rem;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:0;max-width:22ch}
.sec-head p{margin:.6rem 0 0;color:var(--muted);max-width:56ch}
.sec--tint{background:var(--surface)}

/* ---------- Jenjang: anak tangga ---------- */
.ladder{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1.1rem;align-items:end}
.rung{--c:var(--p);display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.3rem 1.3rem;background:#fff;border:1px solid var(--line);border-top:5px solid var(--c);border-radius:var(--r-sm) var(--r-sm) 0 0;text-decoration:none;color:var(--ink);min-height:calc(190px + var(--i,0)*34px);transition:background-color .2s,transform .2s}
.rung:hover{background:var(--p-50);color:var(--ink);transform:translateY(-4px)}
.rung-level{font:600 .84rem/1.2 var(--font-head);color:var(--c)}
.rung h3{margin:0;font-size:1.22rem}
.rung p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.5}
.rung-meta{margin-top:auto;padding-top:.8rem;display:flex;justify-content:space-between;align-items:center;font:700 .92rem var(--font-head);color:var(--night);border-top:1px dashed var(--line)}
.rung-meta .ic{color:var(--c)}

/* ---------- Sambutan ---------- */
.welcome{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.portrait{position:relative;width:min(100%,380px);aspect-ratio:4/5;margin-inline:auto}
.portrait .arch-img{background:var(--p-100)}
.portrait .arch-line--1 path{stroke:var(--p)}
.portrait .arch-line--2 path{stroke:var(--p-300)}
.portrait .ph{position:absolute;inset:0;clip-path:url(#clip-arch)}
.salam{font-size:2rem;line-height:1.5;color:var(--p);margin:0 0 .6rem;text-align:left;direction:rtl}
.welcome blockquote{margin:0}
.welcome blockquote p{font-size:1.14rem;line-height:1.75;color:#24413d}
.welcome .who{display:flex;flex-direction:column;margin-top:1.4rem;padding-left:1rem;border-left:3px solid var(--a)}
.welcome .who strong{font:700 1.08rem var(--font-head);color:var(--night)}
.welcome .who span{color:var(--muted);font-size:.95rem}

/* ---------- Program ---------- */
.programs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,5rem)}
.programs-intro{position:sticky;top:110px;align-self:start}
.programs-intro h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.programs-intro p{color:var(--muted)}
.prog-list{margin:0;padding:0;list-style:none}
.prog-list li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:1.3rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.prog-list li:last-child{border-bottom:1px solid var(--line)}
.prog-list h3{font-size:1.25rem;margin:0 0 .35rem}
.prog-list p{margin:0;color:#3f5551}
.star8{position:relative;display:grid;place-items:center;width:76px;height:76px;color:var(--p)}
.star8 svg{position:absolute;inset:0;width:100%;height:100%}
.star8 .ic{position:relative;width:1.9rem;height:1.9rem}

/* ---------- Statistik ---------- */
.sec-stats{background:var(--night);color:#d4e6e1;position:relative;overflow:hidden}
.sec-stats h2{color:#fff}
.stats{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.stat-big{font:800 clamp(3.6rem,9vw,7rem)/.95 var(--font-head);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.stat-big small{display:block;margin-top:.8rem;font:500 1.1rem/1.4 var(--font-body);letter-spacing:0;color:#a9c7c0}
.bars{margin:2rem 0 0;padding:0;list-style:none;display:grid;gap:.9rem}
.bars li{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 3rem;gap:1rem;align-items:center;font-size:.95rem}
.bars .bar-name{color:#cfe3dd;font-weight:600}
.bars .track{height:10px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
.bars .track i{display:block;height:100%;width:0;border-radius:6px;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.sec-stats.is-in .bars .track i{width:var(--w)}
.bars b{font:700 1rem var(--font-head);color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.stat-side{display:grid;gap:0;margin:0;padding:0;list-style:none}
.stat-side li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.15rem 0;border-top:1px solid rgba(255,255,255,.16)}
.stat-side li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.stat-side b{font:700 2.3rem/1 var(--font-head);color:var(--a);font-variant-numeric:tabular-nums}
.stat-side span{color:#cfe3dd}

/* ---------- Berita ---------- */
.cat{display:inline-block;padding:.22rem .65rem;border-radius:999px;font:700 .78rem/1.2 var(--font-head);background:var(--p-100);color:var(--p-800)}
.cat--pengumuman{background:var(--a-100);color:#6a4a0b}
.cat--prestasi{background:#e4f3e8;color:#14532d}
.cat--artikel{background:#e8edf7;color:#27406b}
.news{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2rem}
.news-lead{position:relative;display:flex;align-items:flex-end;min-height:480px;border-radius:var(--r-lg) var(--r-lg) var(--r) var(--r);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;background:var(--p-800)}
.news-lead>img,.news-lead>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.news-lead:hover>img{transform:scale(1.04)}
.news-lead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 28%,rgba(3,22,21,.92))}
.news-lead .txt{padding:2rem}
.news-lead h3{color:#fff;font-size:clamp(1.4rem,2.4vw,2rem);margin:.8rem 0 .6rem}
.news-lead p{color:#d4e6e1;margin:0 0 .7rem;max-width:56ch}
.news-lead:hover{color:#fff}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;font-size:.86rem;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:.35rem}
.news-lead .meta{color:#b8d2cb}
.news-list{margin:0;padding:0;list-style:none;display:grid;align-content:start}
.news-list li{border-top:1px solid var(--line)}
.news-list li:first-child{border-top:0}
.news-list a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:1.1rem;padding:1.1rem 0;color:var(--ink);text-decoration:none;align-items:center}
.news-list .thumb{aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--p-100)}
.thumb img,.thumb .ph{width:100%;height:100%;object-fit:cover}
.news-list h3{font-size:1.08rem;margin:.35rem 0 .35rem;line-height:1.3}
.news-list a:hover h3{color:var(--p)}

/* Daftar berita (halaman) */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 1.8rem}
.post-card{display:flex;flex-direction:column;gap:.9rem;color:var(--ink);text-decoration:none}
.post-card .thumb{aspect-ratio:16/10;border-radius:var(--r) var(--r) var(--r-sm) var(--r-sm);overflow:hidden}
.post-card .thumb img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.post-card:hover .thumb img{transform:scale(1.04)}
.post-card h3{font-size:1.2rem;margin:0}
.post-card:hover h3{color:var(--p)}
.post-card p{margin:0;color:#3f5551;font-size:.98rem}

/* ---------- Agenda ---------- */
.agenda{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,5rem)}
.agenda-intro{align-self:start;position:sticky;top:110px}
.agenda-intro h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.agenda-intro p{color:var(--muted)}
.timeline{margin:0;padding:0;list-style:none;position:relative}
.timeline::before{content:"";position:absolute;left:35px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(var(--p-300) 0 6px,transparent 6px 12px)}
.timeline li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:1.4rem;padding:.8rem 0}
.tl-date{position:relative;z-index:1;display:grid;place-items:center;align-content:center;width:72px;height:72px;background:var(--p);color:var(--on-p);border-radius:var(--r) var(--r) 6px 6px;font-family:var(--font-head);text-align:center;line-height:1}
.tl-date b{font-size:1.65rem;font-weight:800}
.tl-date span{font-size:.78rem;font-weight:600;margin-top:.25rem}
.timeline li:first-child .tl-date{background:var(--a);color:var(--on-a)}
.timeline h3{font-size:1.15rem;margin:.1rem 0 .35rem}
.timeline a{color:inherit;text-decoration:none}
.timeline a:hover{color:var(--p)}

/* ---------- Galeri ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,17vw);gap:.7rem}
.mosaic a,.photo-grid a{position:relative;display:block;overflow:hidden;border-radius:var(--r-sm);background:var(--p-100);cursor:zoom-in}
.mosaic img,.photo-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mosaic a:hover img,.photo-grid a:hover img{transform:scale(1.06)}
.mosaic--8 a:nth-child(1){grid-area:1/1/3/3;border-top-left-radius:var(--r-lg)}
.mosaic--8 a:nth-child(2){grid-area:1/3/2/4}
.mosaic--8 a:nth-child(3){grid-area:1/4/2/5}
.mosaic--8 a:nth-child(4){grid-area:2/3/3/5}
.mosaic--8 a:nth-child(5){grid-area:3/1/4/2}
.mosaic--8 a:nth-child(6){grid-area:3/2/4/3}
.mosaic--8 a:nth-child(7){grid-area:3/3/4/4}
.mosaic--8 a:nth-child(8){grid-area:3/4/4/5}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:190px;gap:.7rem}
.photo-grid a:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.photo-grid a:nth-child(7n+4){grid-row:span 2}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.6rem}
.album-card{display:block;color:var(--ink);text-decoration:none}
.album-card .stack{position:relative;aspect-ratio:4/3;margin:0 0 1rem 12px}
.album-card .stack::before,.album-card .stack::after{content:"";position:absolute;inset:0;border-radius:var(--r);border:1px solid var(--p-200);background:var(--p-50)}
.album-card .stack::before{transform:translate(-12px,10px) rotate(-2deg)}
.album-card .stack::after{transform:translate(-6px,5px) rotate(-1deg)}
.album-card .cover{position:absolute;inset:0;z-index:1;border-radius:var(--r);overflow:hidden;background:var(--p-100)}
.album-card .cover img{width:100%;height:100%;object-fit:cover}
.album-card h3{font-size:1.15rem;margin:0 0 .2rem}
.album-card:hover h3{color:var(--p)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.6rem}
.video-card{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.video-card .thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--night)}
.video-card .thumb img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s,transform .5s}
.video-card:hover .thumb img{opacity:1;transform:scale(1.03)}
.video-card .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--a);color:var(--on-a);display:grid;place-items:center}
.video-card .play .ic{width:1.8rem;height:1.8rem;fill:currentColor;margin-left:3px}
.video-card h3{font-size:1.1rem;margin:.8rem 0 .2rem}

/* Lightbox & modal video */
.lb{position:fixed;inset:0;z-index:120;display:none;background:rgba(3,22,21,.94);align-items:center;justify-content:center;padding:3rem 1rem 4rem}
.lb.is-open{display:flex}
.lb figure{margin:0;max-width:min(1200px,100%);max-height:100%;display:grid;gap:.8rem;justify-items:center}
.lb img{max-height:78vh;width:auto;border-radius:var(--r-sm)}
.lb figcaption{color:#cfe3dd;font-size:.95rem;text-align:center;min-height:1.4em}
.lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.lb button:hover{background:var(--a);color:var(--on-a)}
.lb-close{top:1rem;right:1rem}.lb-prev{left:1rem;top:50%}.lb-next{right:1rem;top:50%}
.vm-frame{width:min(960px,100%);aspect-ratio:16/9;background:#000;border-radius:var(--r)}
.vm-frame iframe{width:100%;height:100%;border:0;border-radius:var(--r)}

/* ---------- Guru ---------- */
.tscroll{display:flex;gap:1.6rem;margin:0;padding:.5rem 0 1rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--p-300) transparent}
.tscroll li{flex:0 0 clamp(180px,19vw,230px);scroll-snap-align:start}
.t-frame{position:relative;aspect-ratio:4/5;margin-bottom:1rem}
.t-frame .ph,.t-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:url(#clip-arch)}
.t-frame .arch-line{z-index:1}
.t-frame .arch-line path{stroke:var(--p-300);stroke-width:1.2}
.t-name{font:700 1.02rem/1.3 var(--font-head);margin:0}
.t-role{margin:.15rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.4}
.t-unit{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.t-unit i{width:.55rem;height:.55rem;border-radius:50%;background:var(--c,var(--p))}
.teacher-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem 1.6rem}
.teacher-grid .t-frame{margin-bottom:.9rem}
.scroll-btns{display:flex;gap:.45rem}
.scroll-btns button{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--p-300);border-radius:50%;background:#fff;color:var(--p-700);cursor:pointer}
.scroll-btns button:hover{background:var(--p);border-color:var(--p);color:var(--on-p)}

/* Placeholder gambar */
.ph{display:grid;place-items:center;background:hsl(var(--h,160) 28% 90%);color:hsl(var(--h,160) 38% 30%);font:800 clamp(1.8rem,4vw,3rem)/1 var(--font-head);position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;opacity:.5;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1' opacity='.18'%3E%3Crect x='20' y='20' width='56' height='56'/%3E%3Cpath d='M48 9L87 48 48 87 9 48z'/%3E%3C/g%3E%3C/svg%3E") 0 0/64px 64px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1' opacity='.18'%3E%3Crect x='20' y='20' width='56' height='56'/%3E%3Cpath d='M48 9L87 48 48 87 9 48z'/%3E%3C/g%3E%3C/svg%3E") 0 0/64px 64px}
.ph span{position:relative}

/* ---------- Testimoni ---------- */
.sec-quote{background:var(--p-900);color:#e5f1ee;text-align:center}
.quotes{position:relative;max-width:820px;margin-inline:auto;display:grid}
.quote{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.quote.is-active{opacity:1;visibility:visible;transition:opacity .6s}
.quote .mark{font:800 6rem/.7 var(--font-head);color:var(--a);height:3.2rem;display:block}
.quote p{font:500 clamp(1.25rem,2.4vw,1.75rem)/1.55 var(--font-body);margin:0 0 1.6rem;text-wrap:pretty;color:#fff}
.quote cite{font-style:normal;font:700 1rem var(--font-head);color:var(--a)}
.quote cite small{display:block;font:400 .92rem var(--font-body);color:#a9c7c0;margin-top:.15rem}
.dots{display:flex;gap:.55rem;justify-content:center;margin-top:2rem}
.dots button{width:12px;height:12px;padding:0;border:1.5px solid #a9c7c0;border-radius:50%;background:transparent;cursor:pointer}
.dots button.is-active{background:var(--a);border-color:var(--a)}

/* ---------- Mitra ---------- */
.partners{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:center;align-items:center;margin:0;padding:0;list-style:none}
.partners img{height:54px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.partners a:hover img,.partners li:hover img{filter:none;opacity:1}
.partners-title{text-align:center;color:var(--muted);font:600 .95rem var(--font-head);margin:0 0 1.6rem}

/* ---------- Halaman dalam ---------- */
.page-head{position:relative;background:var(--night);color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem);overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 90% 0%,var(--p-800),transparent 70%)}
.page-head .container{position:relative}
.page-head h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .6rem;max-width:24ch}
.page-head p{color:#c3dad4;max-width:60ch;margin:0}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 1.2rem;padding:0;list-style:none;font-size:.9rem;color:#a9c7c0}
.crumbs a{color:#d4e6e1;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.page-body{padding-block:clamp(2.5rem,6vw,4.5rem)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4rem);align-items:start}
.layout--wide{grid-template-columns:1fr}
.side{position:sticky;top:110px;display:grid;gap:2rem}
.side h3{font-size:1.02rem;margin-bottom:.8rem}
.side-nav{margin:0;padding:0;list-style:none;border-left:2px solid var(--line)}
.side-nav a{display:block;padding:.5rem 1rem;margin-left:-2px;border-left:2px solid transparent;color:var(--ink);text-decoration:none;font-size:.97rem}
.side-nav a:hover{color:var(--p);border-left-color:var(--p-300)}
.side-nav a.is-current{border-left-color:var(--a);font-weight:700;color:var(--night)}

.prose{max-width:72ch;font-size:1.1rem;line-height:1.8}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:1.65rem;margin-top:1.8em}
.prose h3{font-size:1.28rem;margin-top:1.6em}
.prose img{border-radius:var(--r);margin-inline:auto}
.prose blockquote{margin-inline:0;padding:.4rem 1.4rem;border-left:4px solid var(--a);background:var(--p-50);border-radius:0 var(--r-sm) var(--r-sm) 0;color:#24413d}
.prose table{width:100%;border-collapse:collapse;font-size:1rem}
.prose th,.prose td{padding:.7rem .9rem;border-bottom:1px solid var(--line);text-align:left}
.prose th{background:var(--p-50);font-family:var(--font-head);font-size:.92rem}
.prose li+li{margin-top:.35em}
.prose figure{margin-inline:0}
.prose figcaption{font-size:.9rem;color:var(--muted);text-align:center;margin-top:.4rem}
.article-cover{margin:0 0 2rem;border-radius:var(--r-lg) var(--r-lg) var(--r) var(--r);overflow:hidden;max-width:960px}
.article-cover img{width:100%;max-height:520px;object-fit:cover}
.share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.share a,.share button{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border:1px solid var(--p-200);border-radius:999px;background:#fff;color:var(--p-800);font:600 .88rem var(--font-head);text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{background:var(--p-50)}

.toolbar{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;margin-bottom:2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.chips a{display:inline-block;padding:.45rem .95rem;border:1px solid var(--p-200);border-radius:999px;color:var(--p-800);text-decoration:none;font:600 .9rem var(--font-head);background:#fff}
.chips a:hover{background:var(--p-50)}
.chips a.is-on{background:var(--p);border-color:var(--p);color:var(--on-p)}
.chips small{opacity:.7;margin-left:.25rem}
.search-field{display:flex;gap:.4rem;min-width:min(100%,320px)}
input,select,textarea{font:inherit}
.search-field input,.form-site input,.form-site textarea,.form-site select{width:100%;padding:.75rem .95rem;border:1.5px solid var(--p-200);border-radius:var(--r-sm);background:#fff;color:var(--night)}
.search-field input:focus,.form-site input:focus,.form-site textarea:focus,.form-site select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--p-100)}
.form-site{display:grid;gap:1.1rem}
.form-site label{display:block;font:600 .92rem var(--font-head);margin-bottom:.35rem;color:var(--night)}
.form-site .two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.hp{position:absolute;left:0;top:0;opacity:0;height:0;width:0;overflow:hidden;pointer-events:none}
.alert{padding:.9rem 1.1rem;border-radius:var(--r-sm);margin-bottom:1.4rem;border:1px solid}
.alert-ok{background:#e6f5ec;border-color:#a9d9bb;color:#14532d}
.alert-err{background:#fdeaea;border-color:#f1b5b5;color:#7f1d1d}
.alert ul{margin:.4rem 0 0}
.empty{padding:3rem 1.5rem;text-align:center;border:1.5px dashed var(--p-200);border-radius:var(--r);color:var(--muted)}
.empty h3{color:var(--night)}
.pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:3rem}
.pg{display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;border:1px solid var(--p-200);border-radius:var(--r-sm);color:var(--p-800);text-decoration:none;font:600 .95rem var(--font-head);background:#fff}
.pg:hover{background:var(--p-50)}
.pg.is-current{background:var(--p);border-color:var(--p);color:var(--on-p)}
.pg-gap{align-self:end;padding:0 .3rem;color:var(--muted)}

/* Kalender agenda */
.cal{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.cal th{padding:.5rem;font:600 .82rem var(--font-head);color:var(--muted);text-align:center}
.cal td{height:92px;padding:.4rem .5rem;vertical-align:top;background:var(--p-50);border-radius:var(--r-sm);font-size:.85rem}
.cal td.is-empty{background:transparent}
.cal td.is-today{background:var(--a-100);outline:2px solid var(--a)}
.cal td b{display:block;font:700 .95rem var(--font-head);margin-bottom:.2rem}
.cal td a{display:block;margin-top:.2rem;padding:.12rem .4rem;border-radius:4px;background:var(--p);color:var(--on-p);text-decoration:none;font-size:.76rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.cal-nav h2{margin:0;font-size:1.5rem}

/* Daftar unduhan */
.files{margin:0;padding:0;list-style:none}
.files li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:1.2rem;align-items:center;padding:1.1rem 0;border-top:1px solid var(--line)}
.files li:last-child{border-bottom:1px solid var(--line)}
.file-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-sm);background:var(--p-50);color:var(--p-700)}
.files h3{font-size:1.08rem;margin:0 0 .2rem}
.files p{margin:0;color:var(--muted);font-size:.93rem}

/* Kontak */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.info-list{margin:0;padding:0;list-style:none;display:grid;gap:1.2rem}
.info-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:1rem}
.info-list .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--p-100);color:var(--p-700)}
.info-list strong{display:block;font:700 .95rem var(--font-head)}
.map{margin-top:2rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--p-50)}
.map iframe{width:100%;height:100%;border:0}

/* Halaman jenjang */
.unit-hero{position:relative;color:#fff;background:var(--night);overflow:hidden;isolation:isolate}
.unit-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:-2}
.unit-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--night) 10%,transparent 85%)}
.unit-hero .container{padding-block:clamp(3rem,8vw,6rem)}
.unit-hero .tag{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.1rem;font:600 .92rem var(--font-head);color:#fff}
.unit-hero .tag i{width:.8rem;height:.8rem;border-radius:50%;background:var(--c,var(--a))}
.unit-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);max-width:20ch;margin-bottom:.7rem}
.unit-hero p{color:#cfe3dd;font-size:1.15rem;max-width:50ch;margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:2rem 0 0;padding:0;list-style:none;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);max-width:640px}
.facts li{padding:.9rem 1.1rem;border-left:1px solid rgba(255,255,255,.2)}
.facts li:first-child{border-left:0}
.facts b{display:block;font:700 1.35rem var(--font-head);color:var(--a);font-variant-numeric:tabular-nums}
.facts span{font-size:.85rem;color:#b8d2cb}
.class-table{width:100%;border-collapse:collapse;margin:0;font-size:1rem}
.class-table td{padding:.65rem 0;border-bottom:1px solid var(--line)}
.class-table td:last-child{text-align:right;font:700 1rem var(--font-head)}
.class-table tfoot td{border-bottom:0;border-top:2px solid var(--night);font-weight:800}
.head-msg{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2rem;align-items:center;padding:2rem 0}
.head-msg .portrait{width:200px}

/* ---------- Footer ---------- */
.foot{background:var(--night);color:#b8d2cb;margin-top:0;position:relative;overflow:hidden}
.foot-top{padding-block:clamp(3rem,6vw,4.5rem) 2.5rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:2.5rem}
.foot h3{font-size:1rem;color:#fff;margin-bottom:1rem}
.foot a{color:#cfe3dd;text-decoration:none}
.foot a:hover{color:var(--a);text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.97rem}
.foot .brand{color:#fff;margin-bottom:1rem}
.foot .brand-mark{color:var(--a)}
.foot-about{font-size:.97rem;line-height:1.7;max-width:36ch;margin-bottom:1.2rem}
.foot address{font-style:normal;display:grid;gap:.7rem;font-size:.97rem}
.foot address div{display:grid;grid-template-columns:1.2rem 1fr;gap:.7rem;align-items:start}
.foot address .ic{color:var(--a);margin-top:.25rem}
.news-form{display:flex;gap:.4rem;margin-top:.4rem}
.news-form input{flex:1;min-width:0;padding:.7rem .9rem;border:1.5px solid rgba(255,255,255,.25);border-radius:var(--r-sm);background:rgba(255,255,255,.06);color:#fff}
.news-form input::placeholder{color:#8fb0a8}
.news-form input:focus{outline:none;border-color:var(--a)}
.news-msg{font-size:.9rem;margin-top:.6rem;min-height:1.3em}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:1.2rem;font-size:.9rem}
.foot-bottom .container{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-bottom a{color:#8fb0a8}
.to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:40;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--a);color:var(--on-a);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility 0s .2s;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.to-top.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top .ic{transform:rotate(-90deg)}
.wa-float{position:fixed;left:1.1rem;bottom:1.1rem;z-index:40;display:flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:999px;background:#25a244;color:#fff;font:700 .92rem var(--font-head);text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.wa-float:hover{background:#1f8a39;color:#fff}

/* ---------- Responsif ---------- */
@media (max-width:1100px){
  .foot-top{grid-template-columns:1fr 1fr}
  .dock{grid-template-columns:1fr}
  .dock>*{border-left:0;padding-inline:0;border-top:1px solid rgba(255,255,255,.1)}
  .dock>*:first-child{border-top:0}
  .dock-date{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
  .dock-links{justify-content:space-between}
  .teacher-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav-toggle{display:grid}
  .bar .container{min-height:68px}
  .nav{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);z-index:80;flex-direction:column;align-items:stretch;gap:0;padding:5rem 1.25rem 2rem;background:#fff;overflow-y:auto;transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:-30px 0 60px -30px rgba(0,0,0,.5)}
  .nav.is-open{transform:none}
  .nav>ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{width:100%;justify-content:space-between;padding:1rem .25rem;border-bottom:1px solid var(--line);border-radius:0;color:var(--night)!important;font-size:1.05rem}
  .nav-link.is-current{box-shadow:none;color:var(--p)!important}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;min-width:0;padding:0 0 0 .75rem;max-height:0;overflow:hidden;transition:max-height .3s}
  .nav-item.is-open>.drop{max-height:640px}
  .nav-item:hover>.drop{max-height:0}
  .nav-item.is-open:hover>.drop{max-height:640px}
  .nav-item.is-open>.nav-link .ic{transform:rotate(180deg)}
  .nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(3,22,21,.6);display:none}
  .nav-scrim.is-on{display:block}
  .nav-close{position:absolute;right:.9rem;top:.9rem;color:var(--night)!important}
  .slide-grid{grid-template-columns:1fr;padding-block:2.5rem 1.5rem}
  .slide-arch{order:-1;width:min(62%,240px);margin:0 auto 1rem}
  .slide-copy{text-align:left}
  .slide-title{max-width:none}
  .slide::after{background:linear-gradient(180deg,transparent 40%,var(--night))}
  .hero-stage{min-height:0}
  .hero-controls{padding-bottom:1.2rem}
  .hero-arrows button[data-toggle]{display:none}
  .ladder{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .rung{min-height:190px!important}
  .welcome,.programs,.stats,.agenda,.news,.contact,.layout{grid-template-columns:1fr}
  .programs-intro,.agenda-intro,.side{position:static}
  .news-lead{min-height:380px}
  .post-grid,.album-grid,.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}
  .mosaic--8 a{grid-area:auto!important}
  .mosaic--8 a:first-child{grid-column:span 2!important;grid-row:span 2!important}
}
@media (max-width:680px){
  body{font-size:1rem}
  .topbar-list li:nth-child(n+2){display:none}
  .brand-name{max-width:11rem;font-size:.95rem}
  .bar-actions .btn{display:none}
  .rail-title{display:none}
  .hero-rail{gap:.5rem}
  .prayer{flex-direction:column;align-items:stretch;gap:.6rem}
  .prayer-next{text-align:left;display:flex;gap:.6rem;align-items:baseline}
  .dock-links a span{display:none}
  .dock-links{justify-content:space-around}
  .post-grid,.album-grid,.video-grid{grid-template-columns:1fr}
  .ladder{grid-template-columns:1fr}
  .prog-list li{grid-template-columns:60px minmax(0,1fr);gap:1rem}
  .star8{width:60px;height:60px}
  .bars li{grid-template-columns:5rem minmax(0,1fr) 2.6rem;gap:.6rem}
  .news-list a{grid-template-columns:96px minmax(0,1fr)}
  .foot-top{grid-template-columns:1fr}
  .form-site .two{grid-template-columns:1fr}
  .teacher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .files li{grid-template-columns:44px minmax(0,1fr);}
  .files li .btn{grid-column:2;justify-self:start}
  .head-msg{grid-template-columns:1fr}
  .cal td{height:64px;padding:.25rem}
  .cal td a{font-size:0;height:6px;padding:0;margin-top:.15rem}
  .wa-float span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .slide-copy>*{opacity:1;transform:none}
}
@media print{.topbar,.bar,.foot,.hero-controls,.dock-wrap,.to-top,.wa-float{display:none!important}}

/* Perbaikan: tombol tutup menu hanya untuk mobil; WhatsApp melayang berupa lingkaran ringkas */
@media (min-width:981px){.nav-close{display:none!important}}
.wa-float{padding:0;width:52px;height:52px;justify-content:center}
.wa-float .ic{width:1.5rem;height:1.5rem}
.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;display:block!important}

/* Gaya pola alternatif: batik kawung (nusantara) dan sirkuit (teknologi) */
body.pat-kawung .pattern::before,body.pat-kawung .hero-field .pattern-layer::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cellipse cx='32' cy='16' rx='9' ry='15'/%3E%3Cellipse cx='32' cy='48' rx='9' ry='15'/%3E%3Cellipse cx='16' cy='32' rx='15' ry='9'/%3E%3Cellipse cx='48' cy='32' rx='15' ry='9'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='64' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='64' r='2.2'/%3E%3Ccircle cx='64' cy='64' r='2.2'/%3E%3C/svg%3E") 0 0/64px 64px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cellipse cx='32' cy='16' rx='9' ry='15'/%3E%3Cellipse cx='32' cy='48' rx='9' ry='15'/%3E%3Cellipse cx='16' cy='32' rx='15' ry='9'/%3E%3Cellipse cx='48' cy='32' rx='15' ry='9'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='64' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='64' r='2.2'/%3E%3Ccircle cx='64' cy='64' r='2.2'/%3E%3C/svg%3E") 0 0/64px 64px}
body.pat-sirkuit .pattern::before,body.pat-sirkuit .hero-field .pattern-layer::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 22h28l10 10h22M60 32v30h36M20 96V72l12-12h22M72 0v18l10 10h14'/%3E%3C/g%3E%3Ccircle cx='38' cy='32' r='3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='60' cy='32' r='2.2'/%3E%3Ccircle cx='54' cy='60' r='3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='82' cy='28' r='2.2'/%3E%3C/svg%3E") 0 0/96px 96px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 22h28l10 10h22M60 32v30h36M20 96V72l12-12h22M72 0v18l10 10h14'/%3E%3C/g%3E%3Ccircle cx='38' cy='32' r='3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='60' cy='32' r='2.2'/%3E%3Ccircle cx='54' cy='60' r='3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='82' cy='28' r='2.2'/%3E%3C/svg%3E") 0 0/96px 96px}
body.pat-kawung .ph::before,body.pat-sirkuit .ph::before{opacity:.35}

/* ---------- Pengalih bahasa ---------- */
.topbar-right{display:flex;align-items:center;gap:1rem}
.lang{display:flex;gap:.15rem;margin:0;padding:0;list-style:none}
.lang a{display:grid;place-items:center;min-width:2rem;height:1.7rem;padding:0 .45rem;border-radius:999px;color:inherit;opacity:.78;font:700 .78rem var(--font-head);text-decoration:none}
.lang a:hover{opacity:1;background:rgba(255,255,255,.12)}
.lang a.is-on{opacity:1;background:var(--a);color:var(--on-a)}
.nav-lang{display:none}
@media (max-width:980px){
  .nav-lang{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1.1rem .25rem}
  .nav-lang span{width:100%;font:600 .85rem var(--font-head);color:var(--muted)}
  .nav-lang a{padding:.45rem .9rem;border:1.5px solid var(--p-200);border-radius:999px;color:var(--night);text-decoration:none;font:600 .9rem var(--font-head)}
  .nav-lang a.is-on{background:var(--p);border-color:var(--p);color:var(--on-p)}
  .topbar-list li:nth-child(n+2){display:none}
}

/* ---------- Arab / kanan-ke-kiri ---------- */
html[lang="ar"]{--font-head:'Cairo','Amiri',system-ui,sans-serif;--font-body:'Cairo','Amiri',system-ui,sans-serif}
html[lang="ar"] body{line-height:1.8}
html[dir="rtl"] .ic-dir{transform:scaleX(-1)}
html[dir="rtl"] .to-top .ic-dir{transform:rotate(-90deg)}
html[dir="rtl"] .wa-float{left:auto;right:1.1rem}
html[dir="rtl"] .to-top{right:auto;left:1.1rem}
html[dir="rtl"] .notice,html[dir="rtl"] .slide-copy,html[dir="rtl"] .prose,html[dir="rtl"] .foot{text-align:right}
html[dir="rtl"] .prose blockquote{border-left:0;border-right:4px solid var(--a);padding:.2rem 1rem .2rem 0}
html[dir="rtl"] .prose ul,html[dir="rtl"] .prose ol{padding-left:0;padding-right:1.4rem}
html[dir="rtl"] .drop{left:auto;right:0}
@media (max-width:980px){
  html[dir="rtl"] .nav{inset:0 auto 0 0;transform:translateX(-102%)}
  html[dir="rtl"] .nav.is-open{transform:none}
  html[dir="rtl"] .nav-close{right:auto;left:.9rem}
  html[dir="rtl"] .drop{padding:0 .75rem 0 0}
  html[dir="rtl"] .slide-copy{text-align:right}
}