/* ============================================================
   Landing SIMANIS — editorial manuskrip "classic premium"
   Tinta #14201B · Kertas #F8F5EF · Marun cap #7A1E1E
   ============================================================ */
:root{
  --ink:#14201B;
  --paper:#F8F5EF;
  --maroon:#7A1E1E;
  --hair:rgba(20,32,27,.22);
  --hair-soft:rgba(20,32,27,.12);
  --hair-dark:rgba(248,245,239,.22);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kufi:'Reem Kufi',sans-serif;
  --nastaliq:'Noto Nastaliq Urdu',serif;
  --amiri:'Amiri',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
img{display:block;max-width:100%}
a{color:var(--maroon)}
::selection{background:var(--maroon);color:var(--paper)}

/* ---------- label & kicker ---------- */
.kicker,.nav-label,.ledger-lab,.brand-sub,.mast-meta,.news-cat,.ppdb-status{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em;
}
.kicker{font-size:.72rem;font-weight:600;color:var(--maroon)}

/* ---------- masthead ---------- */
.masthead{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-top:28px;padding-bottom:20px;
}
.brand{display:flex;gap:14px;align-items:flex-start;min-width:0}
.brand-logo{width:52px;height:auto;flex:none;margin-top:4px}
.brand-name{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.brand-ar{
  font-family:var(--kufi);font-weight:600;color:var(--maroon);
  font-size:clamp(1.15rem,3.4vw,1.7rem);line-height:1.5;white-space:nowrap;
  align-self:flex-start;margin-right:auto;
}
.brand-lat{font-size:clamp(1.3rem,3.6vw,1.8rem);font-weight:900;line-height:1.15;letter-spacing:.01em}
.brand-sub{font-size:.68rem;font-weight:600;color:var(--ink);opacity:.75;margin-top:5px}
.mast-meta{text-align:right;font-size:.7rem;font-weight:500;line-height:1.9;padding-top:8px;flex:none}
.mast-meta strong{font-weight:700}
.mast-meta-addr{text-transform:none;letter-spacing:.04em;font-size:.78rem;font-family:var(--serif)}

/* ---------- navigasi ---------- */
.nav{
  border-top:4px double var(--ink);border-bottom:1px solid var(--hair);
  display:flex;align-items:center;
}
.nav-bar{display:contents}
.nav-label,.nav-toggle{display:none}
.nav-links{
  list-style:none;display:flex;align-items:center;gap:30px;
  padding-block:13px;flex-wrap:wrap;flex:1 1 auto;
}
.nav-links a{
  font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:left calc(100% - 0px);
  transition:background-size .35s ease;
  padding-bottom:2px;
}
.nav-links a:hover{background-size:100% 1px}
.nav-links .nav-login{color:var(--maroon)}
.stamp{
  order:2;margin-left:auto;flex:none;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);text-decoration:none;
  border:2px solid var(--maroon);border-radius:3px;padding:7px 12px;
  transform:rotate(-2deg);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.stamp:hover,.stamp:focus-visible{
  background:var(--maroon);color:var(--paper);transform:rotate(0deg);
  outline:none;
}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;
  padding-top:64px;padding-bottom:56px;align-items:start;
}
.eyebrow{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;line-height:2;color:var(--ink);opacity:.85;
}
.hero-title-box{position:relative;margin-top:18px}
.hero-watermark{
  position:absolute;top:-58px;right:-6px;z-index:0;pointer-events:none;
  font-family:var(--kufi);font-weight:700;color:var(--ink);opacity:.04;
  font-size:clamp(6rem,15vw,11.5rem);line-height:1.5;text-align:right;
  display:flex;flex-direction:column;
}
.hero h1{
  position:relative;z-index:1;
  font-size:clamp(3rem,8.2vw,6.2rem);font-weight:900;line-height:1.02;letter-spacing:-.01em;
}
.hero h1 em{font-style:italic;border-bottom:6px solid var(--maroon)}
.hero-lede{margin-top:30px;font-size:1.14rem;line-height:1.75;max-width:56ch}
.hero-cta{margin-top:30px;display:flex;gap:28px;flex-wrap:wrap;align-items:baseline}
.cta-primary{
  font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--maroon);padding-bottom:4px;
}
.cta-plain{
  font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.05em;
  color:var(--ink);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:left 100%;
  transition:background-size .35s ease;padding-bottom:2px;
}
.cta-plain:hover{background-size:100% 1px}
.hero-side{border-inline-start:1px solid var(--hair);padding-inline-start:26px;margin-top:10px}
.hero-side-ar{font-family:var(--kufi);font-weight:600;color:var(--maroon);font-size:1.9rem;line-height:1.6}
.hero-side-txt{margin-top:10px;font-size:.98rem;line-height:1.75;font-style:italic}

/* ---------- buku besar statistik ---------- */
.ledger{padding-bottom:8px}
.ledger-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.ledger-cell{padding:22px 20px 20px;border-inline-start:1px solid var(--hair-soft)}
.ledger-cell:first-child{border-inline-start:none;padding-inline-start:0}
.ledger-num{display:block;font-size:2.6rem;font-weight:900;line-height:1}
.ledger-lab{display:block;margin-top:9px;font-size:.68rem;font-weight:600;opacity:.75}

/* ---------- bab ---------- */
.chapter{padding-top:72px}
.chapter-head{
  display:flex;gap:18px;align-items:flex-start;
  border-top:1px solid var(--ink);padding-top:22px;margin-bottom:34px;
}
.chapter-num{font-family:var(--amiri);font-size:2rem;line-height:1.2;color:var(--maroon)}
.chapter-head h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:900;line-height:1.15;margin-top:4px}
.rows{border-bottom:1px solid var(--hair)}
.row{
  display:grid;grid-template-columns:56px 300px 1fr;gap:20px;align-items:baseline;
  padding-block:22px;border-top:1px solid var(--hair);
}
.row-num{font-family:var(--amiri);font-size:1.5rem;color:var(--maroon);line-height:1}
.row h3{font-size:1.18rem;font-weight:600;line-height:1.35}
.row p{line-height:1.7;max-width:62ch}

/* ---------- pita majelis ---------- */
.majlis{background:var(--ink);color:var(--paper);margin-top:80px;padding-block:72px 64px}
.chapter-head-dark{border-top-color:var(--paper)}
.chapter-head-dark .chapter-num{color:#D8A7A0}
.chapter-head-dark .kicker{color:#D8A7A0}
.hadith{text-align:center;max-width:760px;margin:8px auto 44px}
.hadith-ar{font-family:var(--amiri);font-size:clamp(1.7rem,4.6vw,2.5rem);line-height:2.1}
.hadith-id{margin-top:14px;font-style:italic;font-size:1.05rem}
.hadith cite{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.majlis-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.sched{border-top:1px solid var(--hair-dark)}
.sched-row{
  display:grid;grid-template-columns:110px 1fr 92px;gap:16px;align-items:baseline;
  padding-block:13px;border-bottom:1px solid var(--hair-dark);
}
.sched-day{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sched-ar{font-family:var(--amiri);font-size:1.25rem;text-align:right;color:#E7D9C8}

/* ---------- foto dokumentasi ---------- */
.dok img{border:1px solid var(--hair);padding:5px;background:var(--paper)}
.dok figcaption{
  margin-top:9px;font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;opacity:.75;line-height:1.7;
}
.dok-dark img{border-color:var(--hair-dark);background:transparent}
.dok-dark figcaption{color:var(--paper)}
.dok-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
.dok-pair img{width:100%;height:320px;object-fit:cover}

/* ---------- sambutan ---------- */
.sambutan{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:52px;align-items:start}
.motto{font-family:var(--nastaliq);color:var(--maroon);font-size:1.5rem;line-height:2.2;text-align:left}
.pullquote{font-size:clamp(1.8rem,4.6vw,3rem);font-weight:600;line-height:1.3;margin-top:10px}
.attrib{margin-top:26px;font-size:1rem;line-height:1.6}

/* ---------- prestasi ---------- */
.prestasi-lede{font-size:1.12rem;line-height:1.75;max-width:64ch;margin-bottom:30px}

/* ---------- presensi / hasyiyah ---------- */
.presensi{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.presensi-main p{line-height:1.8;max-width:60ch}
.presensi-main p + p{margin-top:16px}
.hashiyah{border-inline-start:2px solid var(--maroon);padding-inline-start:22px}
.hashiyah-link{
  font-weight:600;font-size:1.02rem;line-height:1.6;color:var(--maroon);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:left 100%;
  transition:background-size .35s ease;
}
.hashiyah-link:hover{background-size:100% 1px}
.hashiyah-sub{margin-top:10px;font-size:.9rem;font-style:italic;opacity:.8;line-height:1.7}

/* ---------- ppdb ---------- */
.ppdb-panel{border:1px solid var(--ink);padding:10px 30px 30px}
.ppdb-row{
  display:grid;grid-template-columns:220px 1fr 130px;gap:20px;align-items:baseline;
  padding-block:19px;border-bottom:1px solid var(--hair);
}
.ppdb-wave{font-weight:900;font-size:1.1rem}
.ppdb-dates{font-size:1.02rem}
.ppdb-status{font-size:.7rem;font-weight:700;text-align:right}
.ppdb-status.open{color:var(--maroon)}
.ppdb-status.closed{opacity:.55}
.ppdb-cta{margin-top:28px;display:flex;gap:28px;flex-wrap:wrap;align-items:baseline}

/* ---------- warta ---------- */
.news{border-bottom:1px solid var(--hair)}
.news-row{
  display:grid;grid-template-columns:170px 170px 1fr;gap:20px;align-items:baseline;
  padding-block:20px;border-top:1px solid var(--hair);
  color:var(--ink);text-decoration:none;
}
.news-row:hover .news-title{color:var(--maroon)}
.news-date{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.06em}
.news-cat{font-size:.68rem;font-weight:700;color:var(--maroon)}
.news-title{font-size:1.12rem;font-weight:600;line-height:1.45;transition:color .25s ease}
.news-more{margin-top:20px;font-family:var(--sans);font-size:.82rem;font-weight:600}
.news-more a{text-decoration:none;border-bottom:1px solid var(--maroon);padding-bottom:2px}

/* ---------- kolofon / footer ---------- */
.colophon{margin-top:96px;border-top:4px double var(--ink);padding-top:52px}
.colo-center{text-align:center;max-width:640px;margin-inline:auto}
.colo-logo{width:44px;height:auto;margin-inline:auto}
.colo-ar{font-family:var(--nastaliq);color:var(--maroon);font-size:1.7rem;line-height:2.4;margin-top:14px}
.colo-motto{font-family:var(--nastaliq);color:var(--ink);font-size:1.05rem;line-height:2.2;opacity:.8}
.colo-name{font-size:1.45rem;font-weight:900;margin-top:10px}
.colo-id{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;margin-top:8px;opacity:.8;
}
.colo-addr{margin-top:16px;line-height:1.8;font-size:1rem}
.colo-contact{margin-top:14px;line-height:2.1}
.colo-contact a{
  color:var(--maroon);text-decoration:none;border-bottom:1px solid var(--maroon);padding-bottom:1px;
  font-size:1rem;
}
.colo-bottom{
  border-top:1px solid var(--hair);margin-top:52px;padding-block:22px 30px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline;
}
.colo-copy{font-size:.92rem;max-width:52ch;line-height:1.7}
.colo-links{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.colo-links a{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.colo-links a:hover{color:var(--maroon)}

/* ---------- reveal halus ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media (max-width:1020px){
  .hero{grid-template-columns:1fr 250px;gap:36px}
  .majlis-cols{grid-template-columns:1fr 250px;gap:36px}
  .row{grid-template-columns:48px 230px 1fr}
}

/* ---------- HP ---------- */
@media (max-width:720px){
  body{font-size:17px}
  .wrap{padding-inline:18px}
  .masthead{flex-direction:column;gap:10px;padding-top:20px}
  .brand-logo{width:46px}
  .mast-meta{text-align:left;padding-top:0}
  /* navigasi HP: label DAFTAR ISI + hamburger */
  .nav{display:block;padding-inline:0}
  .nav-bar{
    display:flex;align-items:center;gap:14px;
    padding:11px 18px;
  }
  .nav-label{display:block;font-size:.72rem;font-weight:700;color:var(--ink)}
  .nav-toggle{
    order:2;background:none;border:1px solid var(--hair);border-radius:3px;
    width:38px;height:32px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;
  }
  .nav-toggle span{display:block;width:18px;height:2px;background:var(--ink)}
  .stamp{order:3;margin-left:auto;font-size:.62rem;padding:6px 9px}
  .nav-links{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:0 18px 10px;border-top:1px solid var(--hair-soft);
  }
  .nav-links.open{display:flex}
  .nav-links li{border-bottom:1px solid var(--hair-soft)}
  .nav-links li:last-child{border-bottom:none}
  .nav-links a{display:block;padding-block:12px;font-size:.82rem}
  .hero{grid-template-columns:1fr;gap:26px;padding-top:42px}
  .hero-side{border-inline-start:none;border-top:1px solid var(--hair);padding-inline-start:0;padding-top:18px}
  .ledger-grid{grid-template-columns:1fr 1fr}
  .ledger-cell{padding:18px 14px 16px}
  .ledger-cell:nth-child(odd){border-inline-start:none;padding-inline-start:0}
  .ledger-num{font-size:2.1rem}
  .chapter{padding-top:54px}
  .row{grid-template-columns:40px 1fr;grid-template-rows:auto auto}
  .row p{grid-column:2}
  .majlis{padding-block:54px 48px}
  .majlis-cols{grid-template-columns:1fr;gap:30px}
  .sched-row{grid-template-columns:86px 1fr 74px;gap:10px}
  .sched-ar{font-size:1.1rem}
  .sambutan{grid-template-columns:1fr;gap:28px}
  .sambutan .dok{max-width:230px}
  .dok-pair{grid-template-columns:1fr}
  .dok-pair img{height:auto}
  .presensi{grid-template-columns:1fr;gap:26px}
  .ppdb-panel{padding:6px 18px 24px}
  .ppdb-row{grid-template-columns:1fr;gap:2px}
  .ppdb-status{text-align:left}
  .news-row{grid-template-columns:1fr;gap:3px}
  .colo-bottom{flex-direction:column;gap:12px}
  .colo-links{justify-content:flex-start}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .nav-links a,.cta-plain,.hashiyah-link{transition:none}
}