/* =========================================================
   SMP Takhassus Al-Qur'an 2 — stylesheet
   Palette lifted from the school crest: deep manuscript green
   + the crest's star gold, on a warm unbleached paper ground.
   ========================================================= */

:root{
  --green-900:#0a3a20;
  --green-800:#0d4a29;
  --green-700:#106b33;
  --green-600:#158a3d;
  --green-050:#eef6ee;
  --gold-600:#a9791a;
  --gold-500:#c99a2c;
  --gold-400:#e3b944;
  --paper:#faf6ec;
  --paper-dim:#f2ecdc;
  --ink-900:#1c2117;
  --ink-700:#3c4536;
  --ink-500:#6b7362;
  --line:#dcd3ba;
  --white:#ffffff;
  --radius:2px;
  --serif:"Fraunces", "Georgia", serif;
  --sans:"Karla", "Segoe UI", sans-serif;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-900);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--green-900);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2rem,4vw,3.1rem); font-weight:500}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em; max-width:70ch}
a{color:inherit}
img{max-width:100%;display:block}
ul,ol{padding-left:1.2em}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.section--alt{background:var(--green-050)}
.section--dark{background:var(--green-900); color:#e9efe6}
.section--dark h2, .section--dark h3{color:#fff}
.section--dark p{color:#cfe0cf}

.eyebrow{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-600);
  font-size:1.05rem;
  margin:0 0 .35em;
  display:block;
}
.section--dark .eyebrow{color:var(--gold-400)}

.lede{font-size:1.1rem; color:var(--ink-700); max-width:62ch}

.divider{
  display:flex; align-items:center; gap:14px; margin:18px 0 30px;
}
.divider::before,.divider::after{
  content:"";
  height:1px; flex:1;
  background:linear-gradient(to right, transparent, var(--line));
}
.divider::after{background:linear-gradient(to left, transparent, var(--line))}
.divider span{
  width:7px;height:7px;background:var(--gold-500);
  transform:rotate(45deg);
  flex-shrink:0;
}
.divider--left{justify-content:flex-start}
.divider--left::before{display:none}
.divider--left::after{flex:1}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px;
  font-family:var(--sans); font-weight:700; font-size:.95rem;
  text-decoration:none; border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold-500); color:var(--green-900)}
.btn-primary:hover{background:var(--gold-400)}
.btn-outline{border-color:currentColor; color:inherit; background:transparent}
.btn-outline:hover{background:rgba(0,0,0,.04)}
.section--dark .btn-outline{border-color:#8fae94; color:#fff}
.section--dark .btn-outline:hover{background:rgba(255,255,255,.08)}

/* ===== Header ===== */
/* The contact bar scrolls away naturally; the nav row stays locked at the
   top of the viewport and gets a soft shadow once the page is scrolled.
   Nothing changes height while scrolling, so there is no flicker. */
.site-header-group{display:contents}
.topbar{
  background:var(--green-900); color:#d9e6d7; font-size:.82rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:7px; padding-bottom:7px; flex-wrap:wrap; gap:6px;
}
.topbar a{color:#d9e6d7; text-decoration:none}
.topbar-contacts{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.topbar-contacts span{white-space:nowrap}
.topbar-social{display:flex; gap:12px; align-items:center}
.social-ic{display:inline-flex; align-items:center; color:#d9e6d7; transition:color .15s ease}
.social-ic:hover{color:var(--gold-400)}

.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  transition:box-shadow .25s ease;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
  max-width:1240px; gap:20px;
  transition:padding .25s ease;
}

.site-header-group.is-locked .site-header{
  box-shadow:0 6px 18px rgba(10,58,32,.14);
}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink-900); flex-shrink:0}
.brand img{height:48px; width:auto; transition:height .25s ease}
.brand-text{line-height:1.25}
.brand-text .name{
  font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--green-900);
  display:block; white-space:nowrap;
}
.brand-text .sub{font-size:.72rem; letter-spacing:.03em; color:var(--gold-600); white-space:nowrap}

nav.mainnav{display:flex; align-items:center; gap:0; flex-shrink:0}
nav.mainnav ul{list-style:none; display:flex; gap:0; margin:0; padding:0}
nav.mainnav li{position:relative}
nav.mainnav a{
  display:block; padding:10px 12px; text-decoration:none; white-space:nowrap;
  color:var(--ink-700); font-weight:700; font-size:.87rem;
  border-radius:var(--radius);
}
nav.mainnav a:hover, nav.mainnav a.active{color:var(--green-800); background:var(--green-050)}
nav.mainnav a.nav-cta:hover, nav.mainnav a.nav-cta.active{background:var(--green-700); color:#fff}
.nav-cta{
  margin-left:8px; background:var(--green-800); color:#fff !important;
  padding:10px 18px !important;
}
.nav-cta:hover{background:var(--green-700) !important}

.navtoggle{
  display:none; background:none; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:8px 10px; cursor:pointer;
}
.navtoggle span{display:block; width:20px; height:2px; background:var(--ink-900); margin:4px 0}

@media (max-width:1100px){
  nav.mainnav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  nav.mainnav.open{max-height:700px}
  nav.mainnav ul{flex-direction:column; padding:8px 24px 18px}
  .nav-cta{margin-left:0; display:inline-block; margin-top:6px}
  .navtoggle{display:block}
  .topbar-contacts span:nth-child(3){display:none}
}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  background:var(--green-900);
  color:#fff;
}
.hero-pattern{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
}
.hero .container{
  position:relative;
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px;
  align-items:center;
  padding-top:84px; padding-bottom:84px;
}
.hero-eyebrow{color:var(--gold-400); font-family:var(--serif); font-style:italic; font-size:1.1rem}
.hero h1{color:#fff; margin-bottom:.4em}
.hero p.lede{color:#d7e4d3}
.hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap}
.hero-badge{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.hero-badge img{
  width:min(320px,80%); filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
@media (max-width:860px){
  .hero .container{grid-template-columns:1fr; text-align:left; padding-top:56px; padding-bottom:48px}
  .hero-badge{order:-1; margin-bottom:8px}
  .hero-badge img{width:150px}
}

/* stat strip (compact) */
.statstrip{background:var(--paper-dim); border-bottom:1px solid var(--line)}
.statstrip .container{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.stat{
  text-align:center; padding:14px 10px; border-right:1px solid var(--line);
}
.stat:last-child{border-right:none}
.stat .num{font-family:var(--serif); font-size:1.45rem; line-height:1.15; color:var(--green-800); display:block}
.stat .label{font-size:.78rem; line-height:1.3; color:var(--ink-500)}
@media (max-width:700px){
  .statstrip .container{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
}

/* ===== Cards / grids ===== */
.grid{display:grid; gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

.pillar{
  background:var(--white); border:1px solid var(--line); padding:30px 26px;
}
.pillar .mark{
  font-family:var(--serif); font-style:italic; color:var(--gold-500); font-size:1.6rem;
  display:block; margin-bottom:10px;
}
.pillar h3{margin-bottom:.4em}
.pillar p{font-size:.95rem; color:var(--ink-700); margin-bottom:0}
.pillar ul{font-size:.93rem; color:var(--ink-700); margin:.8em 0 0}

.card{
  background:var(--white); border:1px solid var(--line);
}
.card-body{padding:24px}
.card h3{margin-bottom:.3em; font-size:1.1rem}
.card p{font-size:.93rem; color:var(--ink-700); margin-bottom:0}
.card ul{font-size:.93rem; color:var(--ink-700)}
.card .tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--green-800); background:var(--green-050); padding:3px 10px; margin-bottom:10px;
}

.ek-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-500); margin-top:10px}
.ek-meta span{display:flex; align-items:center; gap:5px}

/* Table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); background:var(--white)}
table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:560px}
th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line)}
thead th{
  background:var(--green-900); color:#fff; font-family:var(--serif); font-weight:600;
  font-size:.9rem;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:var(--paper-dim)}
td.num, th.num{text-align:center}

/* Numbered steps */
.steplist{list-style:none; padding:0; margin:0; counter-reset:step}
.steplist li{
  counter-increment:step;
  position:relative; padding:0 0 26px 46px; border-left:1px solid var(--line); margin-left:14px;
}
.steplist li:last-child{border-color:transparent; padding-bottom:0}
.steplist li::before{
  content:counter(step);
  position:absolute; left:-14px; top:0;
  width:28px;height:28px; background:var(--green-800); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.85rem;
}
.steplist h4{margin-bottom:.25em; color:var(--green-900); font-family:var(--serif)}
.steplist p{margin-bottom:0; font-size:.94rem; color:var(--ink-700)}

/* Accordion */
details.acc{
  background:var(--white); border:1px solid var(--line); margin-bottom:10px;
}
details.acc summary{
  cursor:pointer; padding:16px 20px; font-family:var(--serif); font-weight:600;
  color:var(--green-900); list-style:none; display:flex; justify-content:space-between; gap:12px;
  align-items:center;
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{
  content:"+"; font-family:var(--sans); font-size:1.3rem; color:var(--gold-600); flex-shrink:0;
}
details.acc[open] summary::after{content:"–"}
details.acc .acc-body{padding:0 20px 20px; font-size:.95rem; color:var(--ink-700)}
details.acc .acc-body ol,details.acc .acc-body ul{margin-top:0}

/* Quote */
.quoteblock{
  border-left:3px solid var(--gold-500); padding-left:24px; margin:0;
}
.quoteblock p{font-family:var(--serif); font-size:1.2rem; font-style:italic; color:var(--green-900)}

/* Facts list */
.facts-list{list-style:none; margin:0; padding:0}
.facts-list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line); font-size:.96rem;
}
.facts-list li span:last-child{color:var(--ink-500); text-align:right}

.identity dt{font-weight:700; color:var(--green-900); font-size:.85rem; margin-top:14px}
.identity dd{margin:2px 0 0; color:var(--ink-700)}

/* CTA band */
.ctaband{
  background:var(--green-800); color:#fff; text-align:center; padding:64px 24px;
}
.ctaband h2{color:#fff}
.ctaband p{color:#d7e4d3; margin-left:auto; margin-right:auto}

/* ===== Sambutan Kepala Sekolah ===== */
.sambutan{display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start}
.kepsek{margin:0}
.kepsek-photo{
  position:relative; aspect-ratio:3/4; background:var(--green-050);
  border:1px solid var(--line); overflow:hidden;
}
.kepsek-photo::after{
  content:"Foto Kepala Sekolah"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-500); font-size:.85rem; z-index:0;
}
.kepsek-photo img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center top; display:block}
.kepsek figcaption{margin-top:14px; border-left:3px solid var(--gold-500); padding-left:14px}
.kepsek .nama{font-family:var(--serif); font-weight:600; color:var(--green-900); display:block}
.kepsek .jabatan{font-size:.85rem; color:var(--ink-500)}
.sambutan-teks p{max-width:68ch; color:var(--ink-700)}
.sambutan-teks .salam{font-family:var(--serif); font-style:italic; color:var(--green-900); font-size:1.1rem}
@media (max-width:760px){
  .sambutan{grid-template-columns:1fr; gap:28px}
  .kepsek{max-width:240px}
}

/* ===== Footer ===== */
.site-footer{background:var(--green-900); color:#c9d8c8; padding-top:56px}
.site-footer a{color:#e9efe6; text-decoration:none}
.site-footer a:hover{color:var(--gold-400)}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-brand{display:flex; gap:14px; align-items:flex-start}
.foot-brand img{height:56px}
.foot-brand .name{font-family:var(--serif); color:#fff; font-size:1.05rem; display:block; margin-bottom:6px}
.foot-brand p{font-size:.87rem; color:#b7c9b5}
.foot-social{display:flex; gap:14px; margin-top:10px}
.site-footer h4{color:#fff; font-family:var(--serif); font-size:1rem; margin-bottom:14px}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:.9rem}
.foot-bottom{
  display:flex; justify-content:space-between; padding:18px 0; font-size:.8rem; color:#94aa92;
  flex-wrap:wrap; gap:8px;
}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}

/* Page header (inner pages) */
.pagehead{
  background:var(--green-900); color:#fff; padding:52px 0 46px; position:relative; overflow:hidden;
}
.pagehead .container{position:relative}
.pagehead .crumb{font-size:.83rem; color:#a9c2a7}
.pagehead .crumb a{color:#a9c2a7; text-decoration:none}
.pagehead .crumb a:hover{color:#fff}
.pagehead h1{color:#fff; margin-top:8px; margin-bottom:0}

.mapwrap{border:1px solid var(--line); filter:grayscale(.15)}
.mapwrap iframe{width:100%; height:340px; border:0; display:block}

.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.formgrid .full{grid-column:1/-1}
.formgrid label{display:block; font-size:.85rem; font-weight:700; color:var(--green-900); margin-bottom:6px}
.formgrid input,.formgrid textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:#fff;
  font-family:var(--sans); font-size:.95rem; border-radius:var(--radius);
}
.formgrid textarea{resize:vertical; min-height:130px}
@media (max-width:640px){.formgrid{grid-template-columns:1fr}}

.skiplink{
  position:absolute; left:-999px; top:auto;
  background:var(--gold-500); color:var(--green-900); padding:10px 16px; z-index:100;
}
.skiplink:focus{left:12px; top:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ===== Kontak WhatsApp ===== */
.wa-list{display:flex; flex-direction:column; gap:12px; margin:22px 0 28px}
.wa-item{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; background:var(--white); border:1px solid var(--line);
  border-left:4px solid var(--green-700);
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.wa-item:hover{background:var(--green-050); border-color:var(--green-700); transform:translateY(-2px); box-shadow:0 8px 20px rgba(10,58,32,.10)}
.wa-icon{
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  background:var(--green-800); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.wa-text{display:flex; flex-direction:column; flex:1; min-width:0}
.wa-label{font-size:.82rem; font-weight:700; color:var(--ink-500); letter-spacing:.02em}
.wa-number{font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--green-900); line-height:1.25}
.wa-go{font-size:.85rem; font-weight:700; color:var(--green-700); white-space:nowrap}
.wa-item:hover .wa-go{color:var(--green-900)}

.ppdb-box{
  background:var(--green-900); color:#e9efe6; padding:30px 28px; position:relative; overflow:hidden;
}
.ppdb-box::after{
  content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px;
  background:var(--gold-500); opacity:.14; transform:rotate(45deg);
}
.ppdb-box .eyebrow{color:var(--gold-400)}
.ppdb-box h3{color:#fff; font-size:1.4rem; margin-bottom:.35em}
.ppdb-box p{color:#cfe0cf; margin-bottom:1.2em}
@media (max-width:480px){
  .wa-go{display:none}
  .wa-number{font-size:1.15rem}
}