/* SDIT Harapan Umat Kalisat — tema "Mihrab & Mushaf"
   Putih, hijau logo, emas iluminasi. Motif tunggal: lengkung mihrab. */
:root{
  --forest:#0b4a1c;--forest2:#14622b;--deep:#062f14;--green:#2e8b1f;--lime:#8cc63f;
  --gold:#c9992f;--gold-d:#8f6a14;--gold-l:#ecca70;
  --wash:#f3f8ed;--line:#dbe5cf;--ink:#1c2b20;--mute:#56665a;
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 125V58C0 34 28 18 50 0C72 18 100 34 100 58V125Z'/%3E%3C/svg%3E");
  --mb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40C22 40 36 24 50 0C64 24 78 40 100 40Z'/%3E%3C/svg%3E");
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09'%3E%3Crect x='12' y='12' width='32' height='32'/%3E%3Crect x='12' y='12' width='32' height='32' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.7;font-size:1.02rem;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Amiri,'Times New Roman',serif;font-weight:700;color:var(--forest);line-height:1.2}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:3px}
.w{max-width:1160px;margin:auto}
.s{padding:92px 5%}.alt{background:var(--wash)}
.ht{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:34px}
.ht::after{content:"";display:block;width:56px;height:3px;background:var(--gold);margin-top:14px}
.sec-d{color:var(--mute);max-width:30em;margin:-18px 0 30px}
.shead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 20px;margin-bottom:40px}.shead .ht{margin:0}
.more{color:var(--forest);font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;white-space:nowrap}
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}.split-h{position:sticky;top:110px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:72px}
@media(max-width:560px){.ct{grid-template-columns:1fr;gap:2px 0}.ct dd{margin-bottom:10px}}
@media(max-width:860px){.split,.two{grid-template-columns:1fr;gap:34px}.split-h{position:static}.s{padding:64px 5%}}

/* tombol */
.btn{display:inline-block;background:var(--forest);color:#fff!important;padding:12px 26px;border-radius:4px;font:inherit;font-weight:600;text-decoration:none;border:2px solid var(--forest);cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:var(--green);border-color:var(--green)}
.btn.o{background:transparent;color:var(--forest)!important}.btn.o:hover{background:var(--forest);color:#fff!important}
.btn.g{background:var(--gold);border-color:var(--gold);color:#1c1405!important}.btn.g:hover{background:var(--gold-l);border-color:var(--gold-l)}

/* navigasi */
nav{position:sticky;top:0;z-index:20;background:#fffffff5;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px 5%}
nav .b{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:Amiri,serif;font-weight:700;font-size:1.3rem;color:var(--forest);line-height:1.1}nav .b img{height:48px}
nav ul{display:flex;gap:26px;list-style:none;align-items:center}
nav li a:not(.btn){color:var(--ink);text-decoration:none;font-weight:500;font-size:.93rem;padding:6px 0;border-bottom:2px solid transparent}
nav li a:not(.btn):hover,nav li a.on{border-bottom-color:var(--gold);color:var(--forest)}
nav .btn{padding:8px 18px;font-size:.9rem}
#mb{display:none;background:0;border:0;font-size:1.7rem;color:var(--forest);cursor:pointer}
@media(max-width:900px){#mb{display:block}nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:18px 5% 22px;border-bottom:1px solid var(--line);gap:14px}nav ul.on{display:flex}nav .b{font-size:1.1rem}nav .b img{height:40px}}

/* lengkung mihrab (motif utama) */
.arch{position:relative;width:100%;aspect-ratio:4/5;margin:8px 8px 18px;max-width:calc(100% - 16px)}
.arch::before,.arch::after,.arch>img,.arch .in{-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.arch::before{content:"";position:absolute;inset:-7px;background:var(--gold);z-index:0}
.arch::after{content:"";position:absolute;inset:-4px;background:#fff;z-index:1}
.alt .arch::after{background:var(--wash)}
.arch>img,.arch .in{position:absolute;inset:0;width:100%;height:100%;z-index:2;object-fit:cover}
.arch .in{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f6faf1,#dcebcb)}
.arch .in b{font:700 2.6rem Amiri,serif;color:var(--gold-d)}.arch .in img{width:58%;height:auto}
.arch.xs{width:54px;margin:6px}.arch.sm{width:96px;margin:8px}.arch.md{width:150px}.arch.lg{width:min(380px,78vw)}.arch.xs .in b{font-size:1.2rem}.arch.sm .in b{font-size:1.7rem}

/* beranda: hero */
.hero{position:relative;isolation:isolate;padding:72px 5% 104px;overflow:hidden}
.hero::before{content:"";position:absolute;right:-9%;top:-14%;width:660px;height:660px;border-radius:50%;background:var(--wash);z-index:-1}
.hero-g{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.bis{font-family:Amiri,serif;font-size:1.9rem;color:var(--gold-d)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.08;margin:10px 0 20px;max-width:13em}
.lead{font-size:1.14rem;color:var(--mute);max-width:32em;margin-bottom:30px}
.acts{display:flex;gap:14px;flex-wrap:wrap}.hero-a{display:flex;justify-content:center;padding:14px}
@media(max-width:860px){.hero{padding:44px 5% 72px}.hero-g{grid-template-columns:1fr}.hero-a{order:-1}.arch.lg{width:min(260px,70vw)}.hero::before{width:420px;height:420px}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){.rise{animation:none}html{scroll-behavior:auto}}

/* pita angka */
.ledger{background:var(--forest) var(--star);border-top:3px solid var(--gold);padding:30px 5%}
.ledger .w{display:grid;grid-template-columns:repeat(4,1fr)}
.ledger .w>div{padding:6px 26px;border-left:1px solid #ffffff2e}.ledger .w>div:first-child{border-left:0;padding-left:0}
.ledger b{display:block;font:700 2.3rem/1.1 Amiri,serif;color:var(--gold-l)}.ledger span{color:#d6e8cc;font-size:.92rem}
@media(max-width:700px){.ledger .w{grid-template-columns:1fr 1fr;gap:18px 0}.ledger .w>div:nth-child(3){border-left:0;padding-left:0}}

/* baris keunggulan */
.feat{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:30px 0;border-bottom:1px solid var(--line)}.feat:first-child{padding-top:0}.feat:last-child{border-bottom:0}
.feat h3{font-size:1.5rem;margin-bottom:6px}.feat p{color:var(--mute)}.feat .arch{flex:none}

/* sambutan seperti halaman mushaf */
.mushaf{position:relative;max-width:1000px;margin:12px auto 0;padding:56px 60px;background:#fff;border:1px solid var(--gold);outline:1px solid var(--gold-l);outline-offset:-10px;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.mushaf::before{content:"✦";position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--wash);color:var(--gold);padding:0 14px;font-size:1.4rem;line-height:1}
.mushaf.solo{grid-template-columns:1fr;text-align:center}
.sal{font:italic 1.3rem Amiri,serif;color:var(--gold-d);margin-bottom:8px}
.mushaf .tx{font:1.3rem/1.95 Amiri,serif;white-space:pre-line}.mushaf .by{margin-top:22px;color:var(--mute)}.mushaf .by b{color:var(--forest);font-size:1.05rem}
@media(max-width:860px){.mushaf{grid-template-columns:1fr;padding:44px 26px;gap:26px;justify-items:center;text-align:center}}

/* berita */
.news-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:48px 32px}
.news{text-decoration:none;display:block}
.news .nimg{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;margin-bottom:16px;background:var(--wash)}
.news time,.meta{color:var(--gold-d);font-size:.86rem;font-weight:600}
.news h3{font-size:1.42rem;margin:4px 0 6px}.news p{color:var(--mute);font-size:.95rem}
.news:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.art{max-width:760px;margin:auto}.art-t{font-size:clamp(1.9rem,4vw,2.8rem);margin:6px 0 20px}.art-img{width:100%;border-radius:4px;margin:0 0 22px}

/* pita ajakan */
.band{position:relative;background:var(--forest) var(--star);color:#fff;padding:84px 5%;border-top:3px solid var(--gold)}
.band .ht{color:#fff}.band p{color:#d6e8cc;max-width:36em;margin:-12px 0 28px;font-size:1.08rem}

/* kartu plat (program, fasilitas, prestasi) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:52px 40px}
.plate{padding-top:6px}.plate:not(:has(.arch)){border-top:1px solid var(--gold);padding-top:22px}
.plate .arch{margin:8px 8px 24px;max-width:210px}.plate h3{font-size:1.5rem;margin-bottom:6px}.plate p{color:var(--mute)}.plate small{display:block;color:var(--gold-d);font-weight:600;margin-bottom:6px}

/* potret (guru, struktur, ekskul) */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:40px 24px;text-align:center}
.person .arch{margin:8px auto 20px}.person h3{font-size:1.22rem}.person p{color:var(--mute);font-size:.9rem;line-height:1.5;margin-top:2px}.person .role{color:var(--gold-d);font-weight:600;margin:0 0 2px}
.cat{font-size:1.25rem;padding-left:12px;border-left:4px solid var(--gold);margin:44px 0 20px}.cat:first-child{margin-top:0}
.tags{display:flex;flex-wrap:wrap;gap:10px}.tags span{background:#fff;border:1px solid var(--line);border-radius:3px;padding:6px 18px}

/* jadwal & agenda */
.tl-i{display:grid;grid-template-columns:210px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.tl-d{font:700 1.15rem Amiri,serif;color:var(--gold-d)}.tl-b b{font:700 1.3rem Amiri,serif;color:var(--forest);display:block}.tl-b p{color:var(--mute);font-size:.95rem}
@media(max-width:640px){.tl-i{grid-template-columns:1fr;gap:4px}}
.steps{list-style:none;counter-reset:s;max-width:760px}.steps li{counter-increment:s;display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);font:700 1.7rem/1.2 Amiri,serif;color:var(--gold-d);min-width:34px}

/* tanya jawab */
details{border-bottom:1px solid var(--line);padding:18px 0}details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;font:700 1.25rem Amiri,serif;color:var(--forest);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";color:var(--gold-d);font-size:1.7rem;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}details p{margin-top:10px;color:var(--mute)}

/* testimoni & galeri */
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:44px}
.q{border-left:3px solid var(--gold);padding-left:26px}.q blockquote p{font:italic 1.32rem/1.6 Amiri,serif;color:var(--ink)}
.q .who{display:flex;align-items:center;gap:14px;margin-top:16px}.q .who b{display:block;font-family:Amiri,serif;color:var(--forest);font-size:1.1rem}.q .who small{color:var(--mute)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}.gal figcaption{font-size:.9rem;color:var(--mute);margin-top:8px}

/* profil & kontak */
.vis{font:italic 1.7rem/1.5 Amiri,serif;color:var(--forest)}
.misi,.steps{padding:0}.misi{list-style:none}.misi li{position:relative;padding:0 0 14px 28px}.misi li::before{content:"✦";position:absolute;left:0;top:1px;color:var(--gold);font-size:.9rem}
.ct{display:grid;grid-template-columns:150px 1fr;gap:14px 22px}.ct dt{font-weight:700;color:var(--forest)}.ct dd{color:var(--ink);overflow-wrap:anywhere}
form{display:grid;gap:12px}input,select,textarea{font:inherit;padding:12px 14px;border:1px solid #c5d5b6;border-radius:4px;width:100%;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px #8cc63f40}
.map{width:100%;height:280px;border:0;border-radius:4px;margin-top:22px;background:var(--wash)}

/* kepala halaman dalam */
.phead{position:relative;background:var(--star),linear-gradient(120deg,var(--forest),var(--forest2));color:#fff;padding:68px 5% 84px;overflow:hidden}
.phead h1{color:#fff;font-size:clamp(2.1rem,4.8vw,3.4rem)}.phead p{color:#d6e8cc;max-width:36em;margin-top:8px;font-size:1.08rem}
.phead::after{content:"";position:absolute;left:50%;bottom:-1px;width:100px;height:40px;transform:translateX(-50%);background:#fff;-webkit-mask:var(--mb) center/100% 100% no-repeat;mask:var(--mb) center/100% 100% no-repeat}

/* footer & WhatsApp */
footer{background:var(--deep) var(--star);color:#cfe3c4;padding:64px 5% 26px;border-top:4px solid var(--gold)}
footer .w{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}@media(max-width:760px){footer .w{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:1.25rem;margin-bottom:10px}footer .fb{display:flex;align-items:center;gap:12px;margin-bottom:10px}footer .fb img{height:54px}footer .fb h4{margin:0}
footer a{display:block;color:#cfe3c4;text-decoration:none;padding:2px 0}footer a:hover{color:var(--gold-l)}footer p{margin-bottom:4px}
.cp{border-top:1px solid #ffffff22;margin:38px auto 0;padding-top:18px;font-size:.86rem;text-align:center;max-width:1160px}
.wa{position:fixed;right:18px;bottom:18px;z-index:15;background:var(--forest);border:2px solid var(--gold);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #0b4a1c55}
.wa svg{width:28px;height:28px;fill:#fff}

/* isi berita dari editor */
.rich{line-height:1.85;font-size:1.04rem;overflow-wrap:anywhere}
.rich h2,.rich h3,.rich h4{text-align:left;margin:26px 0 8px}.rich h2{font-size:1.7rem}.rich h3{font-size:1.4rem}.rich h4{font-size:1.2rem}
.rich p,.rich div{margin-bottom:10px}.rich ul,.rich ol{margin:6px 0 12px 26px}.rich img{max-width:100%;height:auto;border-radius:4px;margin:10px 0}
.rich a{color:var(--green);text-decoration:underline}.rich blockquote{border-left:3px solid var(--gold);padding:4px 0 4px 20px;margin:16px 0;font:italic 1.25rem/1.6 Amiri,serif;color:var(--forest)}
.rich table{border-collapse:collapse;margin:12px 0;max-width:100%;display:block;overflow-x:auto}.rich td,.rich th{border:1px solid var(--line);padding:8px 12px}.rich th{background:var(--wash)}
.rich hr{border:0;border-top:2px solid var(--gold);margin:22px 0}

/* hero: dua murid berdiri bebas, tanpa bingkai */
.duo{position:relative;width:min(540px,100%);height:min(480px,62vw);background:radial-gradient(ellipse at 50% 58%,#ecca7077 0,#ecca7018 34%,transparent 56%)}
.duo img{position:absolute;bottom:0;height:auto;filter:drop-shadow(0 8px 16px #0b4a1c33);-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.duo .k1{left:0;width:53%;z-index:1}.duo .k2{right:0;width:58%;z-index:2}
.hero-photo{width:min(480px,100%);border-radius:6px;display:block}
@media(max-width:860px){.duo{width:min(400px,100%);height:min(340px,78vw)}}