/* ============================================================
   SCHOOL OF UNIVERSE — Redesign referensi Thursina IIBS
   Warna ikut logo SOU: amber #F0A000 + arang #17150E + putih.
   Latar putih bersih, kartu membulat, judul besar dan tebal,
   band statistik & footer arang gelap. Font: Manrope.
   ============================================================ */

:root {
  --bg:        #FFFFFF;
  --alt:       #F6F5F1;
  --surface:   #FFFFFF;
  --ink:       #232019;
  --head:      #17150E;
  --muted:     #6B6459;
  --coal:      #17150E;
  --amber:     #F0A000;
  --amber-deep:#A66E00;
  --amber-050: #FEF6E1;
  --amber-100: #FBE7B4;
  --cream:     #F6F5F1;
  --cream-dim: rgba(246, 245, 241, .72);
  --line:      #E9E7E1;
  --line-2:    #F1F0EC;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-btn: 10px;

  --shadow-sm: 0 2px 10px rgba(23, 21, 14, .05);
  --shadow:    0 18px 44px rgba(23, 21, 14, .09);
  --shadow-lg: 0 26px 60px rgba(23, 21, 14, .13);

  --font-head: "Manrope", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-mono: "Manrope", "Segoe UI", sans-serif;

  --w-content: 1240px;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --nav-h: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: var(--coal); }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

/* ---------- layout ---------- */

.wrap { width: min(var(--w-content), calc(100% - 44px)); margin-inline: auto; }
.wrap--narrow { max-width: 860px; }

.section { padding: 104px 0; scroll-margin-top: calc(var(--nav-h) + 16px); }
.section--tight { padding: 72px 0; }
.section--alt { background: var(--alt); }

/* ---------- typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--head);
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; font-weight: 600; }

h1 span, h2 span { color: var(--amber-deep); }

p { color: var(--ink); }

em { font-style: normal; color: var(--amber-deep); font-weight: 600; }

.lede { font-size: 1.1rem; color: var(--muted); }

/* label kecil di atas judul: mono caps (gaya Stitch) */
.kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 18px;
}

.kicker--on-amber { color: var(--amber); }

/* kepala section */
.sec-head { max-width: 720px; margin-bottom: 46px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-bottom: 0; }
/* bar amber pendek di bawah judul section terpusat (gaya Stitch) */
.sec-head--center h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--amber);
  margin: 26px auto 0;
}
.sec-head p { margin-top: 18px; color: var(--muted); font-size: 1.06rem; }

.sec-more { margin-top: 40px; text-align: center; }

/* ---------- tombol ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--head);
  background: var(--head);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: #2C281C; border-color: #2C281C; }
.btn:active { transform: scale(.97); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btn--lg { padding: 17px 38px; font-size: .82rem; }
.btn--sm { padding: 11px 22px; font-size: .72rem; }

/* aksi emas (dipakai di section gelap: hero, CTA band) */
.btn--gold { background: var(--amber); color: var(--head); border-color: var(--amber); }
.btn--gold:hover { background: #FFB01F; border-color: #FFB01F; color: var(--head); }

.btn--ghost { background: transparent; color: var(--head); border-color: var(--line); }
.btn--ghost:hover { background: var(--head); color: #fff; border-color: var(--head); box-shadow: none; }

/* di atas foto hero (gelap) */
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(4px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; box-shadow: none; }

/* aksi utama di section gelap otomatis jadi emas */
.hero__actions .btn:not(.btn--ghost-light):not(.btn--ghost),
.cta__actions .btn:not(.btn--ghost-light):not(.btn--ghost) {
  background: var(--amber); color: var(--head); border-color: var(--amber);
}
.hero__actions .btn:not(.btn--ghost-light):not(.btn--ghost):hover,
.cta__actions .btn:not(.btn--ghost-light):not(.btn--ghost):hover {
  background: #FFB01F; border-color: #FFB01F; color: var(--head);
}

/* di atas band amber (CTA) */
.btn--dark { background: var(--coal); color: #fff; border-color: var(--coal); }
.btn--dark:hover { background: #2c2818; border-color: #2c2818; box-shadow: 0 10px 22px rgba(23,21,14,.28); }
.btn--ghost-dark { background: transparent; color: var(--coal); border-color: rgba(23,21,14,.5); }
.btn--ghost-dark:hover { background: var(--coal); color: #fff; border-color: var(--coal); box-shadow: none; }

.link-line {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--amber-deep);
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: border-color .25s, gap .25s;
}
.link-line:hover { border-color: var(--amber); gap: 10px; }

/* ---------- topbar ---------- */

.topbar {
  background: var(--coal);
  color: var(--cream-dim);
  font-size: .82rem;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; flex-wrap: wrap; }
.topbar a { color: var(--cream); }
.topbar a:hover { color: var(--amber); }
.topbar .sep { opacity: .35; margin: 0 8px; }
.topbar__social { display: flex; gap: 18px; }

/* ---------- navbar ---------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253, 252, 249, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .3s;
}
.nav.is-scrolled { box-shadow: 0 6px 24px rgba(30, 25, 15, .07); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); }

.nav__mid { display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; }
.nav__right { display: flex; align-items: center; gap: 12px; flex: none; }

.brand { display: flex; align-items: center; flex: none; }
.brand__logo { height: 34px; width: auto; display: block; }

.nav__links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav__links a {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0; position: relative;
  transition: color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1.5px; background: var(--amber); transition: width .25s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: var(--head); }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }

.nav__cta { flex: none; }
.nav__cta-short { display: none; }

/* ---------- submenu navbar (dropdown per jenjang) ---------- */

.nav__item--drop { position: relative; display: flex; align-items: center; }
.nav__drop-row { display: flex; align-items: center; gap: 2px; }
.nav__caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0; background: none; padding: 0;
  color: var(--muted); cursor: pointer; transition: transform .2s var(--ease), color .2s;
}
.nav__caret svg { width: 12px; height: 12px; }
.nav__caret:hover { color: var(--head); }
.nav__item--drop.open .nav__caret { transform: rotate(180deg); color: var(--head); }

.nav__drop {
  list-style: none; margin: 0; padding: 22px 8px 8px;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 220px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.nav__item--drop.open .nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Buka saat kursor mendekat. Tanpa transform supaya versi ponsel (akordeon) tak ikut bergeser. */
.nav__item--drop:hover .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; }
.nav__item--drop:hover .nav__caret { transform: rotate(180deg); }
.nav__drop a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-family: var(--font-body); font-size: .88rem; font-weight: 500;
  text-transform: none; letter-spacing: normal; color: var(--ink);
}
.nav__drop a:hover { background: var(--amber-050); color: var(--head); }
.nav__drop a::after { content: none; }

@media (max-width: 820px) {
  .nav__item--drop { flex-direction: column; align-items: stretch; }
  .nav__drop-row { justify-content: space-between; padding-right: 4px; }
  .nav__drop-row a { flex: 1; border-bottom: 0 !important; }
  .nav__caret { width: 40px; height: 40px; }
  .nav__caret svg { width: 16px; height: 16px; }
  .nav__item--drop .nav__drop-row { border-bottom: 1px solid var(--line-2); }
  .nav__drop {
    position: static; transform: none; box-shadow: none; border: 0; border-radius: 0;
    min-width: 0; padding: 0; max-height: 0; overflow: hidden; opacity: 1; visibility: visible;
    transition: max-height .22s var(--ease);
  }
  .nav__item--drop.open .nav__drop { max-height: 340px; transform: none; }
  .nav__drop a { padding: 12px 0 12px 18px; border-bottom: 1px solid var(--line-2); }
}

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--head); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(86vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  /* ruang bawah supaya konten (tombol) tidak tertimpa kartu fitur yang overlap */
  padding-bottom: 96px;
}
.hero__slides { position: absolute; inset: 0; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.06);
  filter: saturate(.72) contrast(1.08) brightness(.78);
  transition: opacity 1.4s var(--ease);
}
.hero__img.is-active { opacity: 1; transform: scale(1); transition: opacity 1.4s var(--ease), transform 7s ease-out; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(250, 249, 246, .35) 16%, transparent 46%),
    radial-gradient(120% 90% at 50% 45%, rgba(23, 21, 14, .34) 0%, rgba(23, 21, 14, .62) 100%);
}
.hero__inner { position: relative; z-index: 2; padding: 60px 0; text-align: left; }
.hero__content { max-width: 760px; margin-inline: 0; display: flex; flex-direction: column; align-items: flex-start; }

/* badge: caps emas dengan garis bawah tipis (gaya Mature) */
.hero__badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber);
  border-bottom: 1px solid rgba(240, 160, 0, .5);
  padding-bottom: 10px;
  margin-bottom: 26px;
}
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.7rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 26px; filter: drop-shadow(0 2px 14px rgba(0,0,0,.42)); max-width: 20ch; }
.hero h1 span { color: var(--amber); }
.hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: rgba(255,255,255,.88); max-width: 50ch; margin-bottom: 32px; }
.hero__sub em { color: var(--amber); font-weight: 500; display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

/* kepala section Everyday is Business (judul kiri, kalimat kanan) */
.ejb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.ejb-head h2 { margin-bottom: 0; }
.ejb-quote { max-width: 44ch; color: var(--muted); font-style: italic; font-size: 1.02rem; }
.hero__actions { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-start; }

.hero__dots { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; }
.hero__dots button { width: 28px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s; }
.hero__dots button.on { background: var(--amber); }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- factbar (fakta singkat) ---------- */

.factbar {
  position: relative; z-index: 5;
  margin-top: -46px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.fact { padding: 26px 28px; border-left: 1px solid var(--line-2); }
.fact:first-child { border-left: 0; }
.fact strong { display: block; font-family: var(--font-head); font-weight: 900; font-size: 1.9rem; color: var(--amber-deep); line-height: 1; margin-bottom: 6px; }
.fact span { font-size: .9rem; color: var(--muted); }

/* ---------- kartu fitur (overlap hero, ala referensi) ---------- */

.featured {
  position: relative; z-index: 5; margin-top: -64px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.featured__card {
  padding: 44px 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.featured__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.featured__ico {
  width: 52px; height: 52px;
  color: var(--head);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(23, 21, 14, .15);
  padding-bottom: 18px; margin-bottom: 18px;
  transition: color .25s, border-color .25s;
}
.featured__card:hover .featured__ico { color: var(--amber-deep); border-color: var(--amber); }
.featured__ico svg { width: 30px; height: 30px; stroke-width: 1.4; }
.featured__card h3 { font-size: 1.45rem; }
.featured__card p { color: var(--muted); font-size: .96rem; flex: 1; line-height: 1.7; }
.featured__more { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-deep); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; transition: gap .25s; }
.featured__card:hover .featured__more { gap: 14px; }
.featured__card:hover .featured__more .arr { transform: translateX(3px); }
.featured__more .arr { transition: transform .25s var(--ease); }

/* ---------- about: kolase foto + checklist ---------- */

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.about__media { position: relative; min-height: 460px; }
.about__ring { position: absolute; left: -24px; top: -24px; right: 12px; bottom: 12px; background: rgba(240, 160, 0, .10); border-radius: var(--radius); filter: blur(40px); z-index: 0; }
.about__img { position: absolute; border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow); filter: saturate(.78) contrast(1.06); }
.about__img--1 { width: 64%; height: 82%; right: 0; top: 0; z-index: 1; }
.about__img--2 { width: 48%; height: 48%; left: 0; bottom: 0; z-index: 2; border: 6px solid var(--bg); }
.about__body .kicker { margin-bottom: 14px; }

.checklist { list-style: none; display: grid; gap: 18px; margin: 28px 0 34px; }
.checklist li { position: relative; padding-left: 36px; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.checklist li b { color: var(--head); font-weight: 600; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-050); border: 1px solid var(--amber-100); }
.checklist li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--amber-deep); border-bottom: 2px solid var(--amber-deep); transform: rotate(-45deg); }

/* ---------- band statistik ber-ikon ---------- */

.statsband { background: var(--coal); padding: 92px 0; color: #fff; }
.statsband__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; }
.statitem { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
.statitem:first-child { border-left: 0; }
.statitem__ico { display: none; }
.statitem strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: clamp(2.8rem, 4.6vw, 4rem); color: var(--amber); line-height: 1; letter-spacing: -0.02em; }
.statitem span { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); max-width: 24ch; }

/* ---------- kartu ikon ---------- */

.cards { display: grid; gap: 24px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--amber); }

.card__ico {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--amber-050); color: var(--amber-deep);
  display: grid; place-items: center; margin-bottom: 16px;
}
.card__ico svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 8px; }
.card p, .card__teks { color: var(--muted); font-size: .95rem; }
.card__teks p { margin-bottom: .6em; }
.card__teks p:last-child { margin-bottom: 0; }

/* ---------- kartu jenjang (foto) ---------- */

.jenjang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.jenjang-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex; flex-direction: column;
}
.jenjang-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.jenjang-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.jenjang-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.06); transition: transform 1s var(--ease); }
.jenjang-card:hover .jenjang-card__media img { transform: scale(1.05); }
.jenjang-card__tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--amber); color: var(--head);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius-sm);
}
.jenjang-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.jenjang-card__body h3 { font-size: 1.24rem; }
.jenjang-card__body p { color: var(--muted); font-size: .95rem; flex: 1; }
.jenjang-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.jenjang-card__meta { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--amber-deep); text-transform: uppercase; }

/* ---------- split (everyday business) ---------- */

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.split__media img { width: 100%; height: 100%; min-height: 340px; max-height: 480px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* timeline horizontal 4 kartu dengan garis penghubung (gaya Stitch) */
.timeline-wrap { position: relative; margin-top: 48px; }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 1; }
.timeline li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  color: var(--muted); font-size: .95rem; line-height: 1.7;
  transition: border-color .3s, box-shadow .3s;
}
.timeline li:hover { border-color: rgba(240, 160, 0, .5); box-shadow: var(--shadow-sm); }
.timeline b { display: block; font-family: var(--font-mono); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 18px; }

/* ---------- galeri ---------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 14px; }
.gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(1.06); transition: transform 1s var(--ease), filter .6s; }
.gallery figure:hover img { transform: scale(1.05); filter: saturate(1) contrast(1); }
.gallery figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,21,14,.6), transparent 55%); opacity: 0; transition: opacity .35s; }
.gallery figure:hover::after { opacity: 1; }
.gallery figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .9rem; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.gallery figure:hover figcaption { opacity: 1; transform: none; }
.gallery .g-wide { grid-column: span 2; }
.gallery .g-tall { grid-row: span 2; }

/* ---------- berita ---------- */

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--alt); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card__date { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-deep); }
.news-card__body h3 { font-size: 1.12rem; line-height: 1.35; }
.news-card__body h3 a:hover { color: var(--amber-deep); }
.news-card__body p { color: var(--muted); font-size: .92rem; flex: 1; }

.empty-state { text-align: center; padding: 66px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

/* ---------- FAQ ---------- */

/* FAQ dua kolom: judul kiri, accordion kanan (gaya Stitch) */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq { display: grid; gap: 18px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 24px 26px; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; color: var(--head); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--amber-deep); }
.faq-x { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--amber-050); color: var(--amber-deep); display: grid; place-items: center; font-weight: 800; transition: transform .3s var(--ease), background .3s, color .3s; }
.faq-item[open] .faq-x { transform: rotate(45deg); background: var(--amber); color: #fff; }
.faq-a { padding: 0 22px 22px; color: var(--muted); font-size: .96rem; }

/* group FAQ (halaman faq.php penuh) */
.faq-group { margin-bottom: 44px; }
.faq-group > h2 { font-size: 1.4rem; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--amber); }

/* ---------- kontak ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 60px); align-items: start; }
.contact-list { list-style: none; display: grid; gap: 6px; margin: 26px 0 30px; }
.contact-list li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.contact-list .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--amber-050); color: var(--amber-deep); display: grid; place-items: center; }
.contact-list .ico svg { width: 22px; height: 22px; }
.contact-list strong { display: block; font-family: var(--font-head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.map-frame { border: 0; width: 100%; min-height: 460px; border-radius: var(--radius); box-shadow: var(--shadow-sm); filter: saturate(.9); }

/* ---------- CTA band ---------- */

.cta { background: var(--coal); text-align: center; padding: 104px 0; border-top: 1px solid rgba(240, 160, 0, .45); position: relative; }
.cta h2 { color: #fff; margin-bottom: 16px; max-width: 22ch; margin-inline: auto; }
.cta p { color: rgba(255, 255, 255, .72); max-width: 56ch; margin: 0 auto 34px; font-size: 1.06rem; line-height: 1.7; }
.cta__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ---------- apresiasi tokoh (testimoni kredibilitas) ---------- */

.testi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.testi {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.testi:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--amber); }
.testi__quote { color: var(--ink); font-size: .95rem; line-height: 1.6; flex: 1; }
.testi__quote::before { content: "\201C"; font-family: Georgia, serif; color: var(--amber); font-size: 1.6rem; line-height: 0; vertical-align: -0.3em; margin-right: 2px; }
.testi__quote::after { content: "\201D"; font-family: Georgia, serif; color: var(--amber); font-size: 1.6rem; line-height: 0; vertical-align: -0.35em; margin-left: 2px; }
.testi figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.testi img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; }
.testi b { display: block; font-family: var(--font-head); font-weight: 700; color: var(--head); font-size: .92rem; }
.testi figcaption span { color: var(--muted); font-size: .8rem; }

/* ---------- page head (halaman dalam: berita, faq penuh, dll) ---------- */

.page-head { padding: 76px 0 56px; background: var(--alt); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 20ch; margin-bottom: 14px; }
.page-head .lede { max-width: 60ch; }

/* page-head dua kolom: teks kiri + foto kanan (mengisi ruang, gaya profesional) */
.page-head--media { padding: 72px 0; overflow: hidden; }
.page-head--media .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.page-head--media h1 { max-width: 16ch; }
.page-head__text { position: relative; z-index: 1; }
.page-head__media { position: relative; }
.page-head__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); filter: saturate(.78) contrast(1.05); }
.page-head__media::before { content: ""; position: absolute; right: -18px; top: -18px; width: 120px; height: 120px; border: 1px solid var(--amber-100); border-radius: var(--radius); z-index: -1; }
.page-head__badge { position: absolute; left: -18px; bottom: 20px; background: var(--coal); color: #fff; border-radius: var(--radius); padding: 16px 22px; box-shadow: var(--shadow); }
.page-head__badge strong { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--amber); line-height: 1; }
.page-head__badge span { font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

.prose { max-width: 70ch; }
.prose p { margin-bottom: 1.15em; }
.prose h3 { margin: 1.6em 0 .5em; }
.prose ul { margin: 0 0 1.15em 1.2em; }
.prose li { margin-bottom: .4em; }

.berita-sumber { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.berita-sumber a { color: var(--amber-deep); font-weight: 600; border-bottom: 1px solid transparent; }
.berita-sumber a:hover { border-color: var(--amber); }

/* ---------- PPDB: alur langkah ---------- */

.steps { counter-reset: langkah; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.step { counter-increment: langkah; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); }
.step::before { content: counter(langkah, decimal-leading-zero); font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; color: var(--amber-deep); display: block; margin-bottom: 12px; }
.step h3 { font-size: 1.04rem; margin-bottom: 8px; }
.step p { font-size: .88rem; color: var(--muted); }

.req-list { list-style: none; display: grid; gap: 0; }
.req-list li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line-2); color: var(--muted); }
.req-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); transform: translateY(-2px); }

/* ---------- form PPDB ---------- */

.form-shell { max-width: 860px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(26px, 4vw, 52px); box-shadow: var(--shadow); }
.form-progress { display: flex; gap: 10px; margin-bottom: 40px; }
.form-progress span { flex: 1; height: 4px; border-radius: 99px; background: var(--line); transition: background .4s; }
.form-progress span.done { background: var(--amber); }
.form-progress span.now { background: var(--amber-deep); }
.form-step { display: none; }
.form-step.active { display: block; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.form-step > h2 { margin-bottom: 8px; font-size: 1.5rem; }
.form-step > .hint { color: var(--muted); font-size: .95rem; margin-bottom: 32px; }

.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 22px; }
.fgroup { display: flex; flex-direction: column; gap: 7px; }
.fgroup.full { grid-column: 1 / -1; }
.fgroup label { font-family: var(--font-head); font-size: .86rem; font-weight: 700; color: var(--head); }
.fgroup label .req { color: var(--amber-deep); }
.fgroup input, .fgroup select, .fgroup textarea {
  font-family: var(--font-body); font-size: .97rem; color: var(--ink);
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.fgroup textarea { resize: vertical; min-height: 100px; }
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-050); }
.fgroup .err-msg { display: none; font-size: .8rem; color: #B4432B; }
.fgroup.invalid input, .fgroup.invalid select, .fgroup.invalid textarea { border-color: #C0563C; }
.fgroup.invalid .err-msg { display: block; }

.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: .92rem; font-weight: 600; transition: border-color .2s, background .2s, color .2s; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--amber); background: var(--amber-050); color: var(--amber-deep); }

/* register lengkap: penanda wajib, judul grup, textarea */
.auth-field .req { color: var(--amber-deep); }
.auth-section { margin: 14px 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-deep); }
.auth-section:first-child { margin-top: 0; }
.auth-field textarea { width: 100%; font-family: inherit; font-size: .97rem; color: var(--ink); padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; outline: none; min-height: 84px; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.auth-field textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-050); }

.form-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-2); }

.summary-box { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.summary-box h4 { background: var(--alt); padding: 12px 18px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.summary-box dl { display: grid; grid-template-columns: 220px 1fr; }
.summary-box dt, .summary-box dd { padding: 11px 18px; border-top: 1px solid var(--line-2); font-size: .93rem; }
.summary-box dt { color: var(--muted); }
.summary-box dd { font-weight: 600; }

.agree-box { display: flex; gap: 13px; align-items: flex-start; background: var(--alt); border-radius: 14px; padding: 18px 20px; font-size: .93rem; color: var(--muted); }
.agree-box input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--amber-deep); }

.form-success { text-align: center; padding: 26px 0 8px; }
.form-success .check { width: 82px; height: 82px; margin: 0 auto 26px; border-radius: 50%; background: var(--amber); color: var(--coal); display: grid; place-items: center; }
.form-success .regno { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: .04em; background: var(--alt); border-radius: 12px; padding: 12px 26px; margin: 16px 0 24px; }

.notice { max-width: 760px; margin: 0 auto; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 56px 40px; background: var(--surface); }

/* ---------- fasilitas.php (halaman terpisah, jika dipakai) ---------- */
.fasilitas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fasilitas-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); }
.fasilitas-card .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--amber-050); color: var(--amber-deep); display: grid; place-items: center; margin-bottom: 18px; }
.fasilitas-card h3 { margin-bottom: 8px; }
.fasilitas-card p { color: var(--muted); font-size: .94rem; }

/* pilar/feature lama (halaman terpisah) */
.pillars, .feature-grid { display: grid; gap: 20px; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.feature { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.feature__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--amber-050); color: var(--amber-deep); display: grid; place-items: center; }
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: .94rem; }

/* ---------- footer ---------- */

/* footer gelap hijau hutan (gaya Mature) */
.footer { background: var(--coal); color: rgba(255, 255, 255, .7); padding: 92px 0 0; font-size: .94rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer__logo { height: 44px; width: auto; margin-bottom: 22px; }
.footer__brand p { max-width: 34ch; color: rgba(255, 255, 255, .65); line-height: 1.75; }
.footer h4 { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin-bottom: 22px; }
.footer ul { list-style: none; display: grid; gap: 13px; }
.footer li { color: rgba(255, 255, 255, .7); }
.footer a { color: rgba(255, 255, 255, .7); transition: color .2s; }
.footer a:hover { color: #fff; }
.soc { display: flex; gap: 10px; margin-top: 24px; }
.soc a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); display: grid; place-items: center; color: #fff; transition: background .25s, border-color .25s, color .25s; }
.soc a:hover { border-color: var(--amber); color: var(--amber); background: rgba(255, 255, 255, .04); }
.footer__bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 26px 0; font-size: .72rem; font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.footer__tag { color: var(--amber); }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__img { transition: opacity .3s; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PORTAL PPDB — login & register (mobile-first)
   ============================================================ */

.auth-page { min-height: 100svh; background: radial-gradient(900px 500px at 100% 0%, var(--amber-050), transparent 60%), var(--bg); display: flex; flex-direction: column; }
.auth-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px clamp(18px, 5vw, 40px); border-bottom: 1px solid var(--line); background: rgba(253,252,249,.85); backdrop-filter: blur(10px); }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; }
.auth-brand img { height: 32px; width: auto; display: block; }
.auth-brand__sub { font-family: var(--font-head); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap; }
.auth-bar__link { flex: none; white-space: nowrap; font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--amber-deep); padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); transition: background .2s, color .2s, border-color .2s; }
@media (max-width: 480px) {
  .auth-brand__sub { display: none; }
  .auth-brand img { height: 28px; }
  .auth-bar__link { font-size: .82rem; padding: 8px 16px; }
}
.auth-bar__link:hover { background: var(--head); color: #fff; border-color: var(--head); }

.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 56px) clamp(18px, 5vw, 40px); }
.auth-grid { width: 100%; max-width: 1020px; display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }

.auth-welcome { order: 2; }
.auth-welcome__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--shadow); }
.auth-welcome__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-welcome__text { margin-top: 22px; }
.auth-welcome__text h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); margin-bottom: 12px; }
.auth-welcome__text p { color: var(--muted); font-size: .97rem; margin-bottom: 12px; max-width: 48ch; }
.auth-welcome__text a { color: var(--amber-deep); font-weight: 700; }
.auth-help { font-size: .92rem; }

.auth-card { order: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 5vw, 40px); box-shadow: var(--shadow); }
.auth-card h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin-bottom: 6px; }
.auth-card__hint { color: var(--muted); font-size: .92rem; margin-bottom: 24px; }
.auth-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 14px; align-items: start; }
.auth-form > * { grid-column: 1 / -1; }
.auth-form > .auth-field--half { grid-column: auto; }
.dob-row { display: flex; gap: 8px; }
.dob-row input, .dob-row select { width: 100%; font-family: inherit; font-size: .95rem; color: var(--ink); padding: 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.dob-row input { text-align: center; }
.dob-row #tgl_lahir { flex: 0 0 58px; }
.dob-row #thn_lahir { flex: 0 0 80px; }
.dob-row select { flex: 1 1 auto; min-width: 0; }
.dob-row input:focus, .dob-row select:focus { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-050); }
@media (max-width: 620px) { .auth-form { grid-template-columns: 1fr; } .auth-form > .auth-field--half { grid-column: 1 / -1; } }

/* register di PC: form horizontal 3 kolom, panel welcome disembunyikan */
@media (min-width: 900px) {
  .auth-wide .auth-grid { grid-template-columns: 1fr; max-width: 880px; }
  .auth-wide .auth-welcome { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; margin-bottom: 6px; }
  .auth-wide .auth-welcome__media { aspect-ratio: 4 / 3; }
  .auth-wide .auth-welcome__text { margin-top: 0; }
  .auth-wide .auth-form { grid-template-columns: repeat(3, 1fr); }
  .auth-wide .auth-form > .auth-field { grid-column: auto; }
  .auth-wide .auth-form > .auth-field--full { grid-column: 1 / -1; }
}
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-field label { font-family: var(--font-head); font-size: .85rem; font-weight: 700; color: var(--head); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input input { width: 100%; font-family: var(--font-body); font-size: .97rem; color: var(--ink); padding: 12px 44px 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.auth-input input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-050); }
.auth-input > svg, .auth-toggle { position: absolute; right: 13px; width: 20px; height: 20px; color: var(--muted); }
.auth-toggle { pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.auth-toggle.is-on { color: var(--amber-deep); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .88rem; }
.auth-check { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--amber-deep); }
.auth-check--block { align-items: flex-start; font-size: .86rem; line-height: 1.5; }
.auth-check--block input { margin-top: 2px; flex: none; }
.auth-link { color: var(--amber-deep); font-weight: 700; }
.auth-submit { justify-content: center; width: 100%; padding: 14px 24px; }
.auth-or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 861px) {
  .auth-grid { grid-template-columns: 1.05fr .95fr; }
  .auth-welcome { order: 1; }
  .auth-card { order: 2; }
}

@media (max-width: 1024px) {
  .cards--4, .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .jenjang-grid, .news-grid, .fasilitas-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-auto-rows: 170px; }
  .statsband__grid { grid-template-columns: repeat(2, 1fr); }
  /* Tanpa min-width:0 kolom grid menolak menyempit di bawah lebar isinya,
     sehingga band statistik mendorong halaman melebar di layar kecil. */
  .statitem { min-width: 0; padding: 6px 12px; }
  .statitem span { max-width: 100%; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline-wrap::before { display: none; }
}

@media (max-width: 820px) {
  .section { padding: 62px 0; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 22px 20px; display: none; z-index: 55;
    box-shadow: var(--shadow);
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line-2); }
  .nav__links a::after { display: none; }
  .nav__burger { display: flex; }
  /* Portal PPDB tetap tampil di HP, dikecilkan seperlunya biar muat sebaris
     dengan logo dan tombol menu. Sebelumnya disembunyikan total di HP. */
  .nav__cta { padding: 9px 14px; font-size: .8rem; }
  .topbar__social { display: none; }
  .split, .contact-grid, .about, .faq-layout { grid-template-columns: 1fr; }
  .page-head--media .wrap { grid-template-columns: 1fr; gap: 36px; }
  .page-head--media .page-head__media { display: none; }
  .ejb-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .about__media { min-height: 340px; }
  .featured { grid-template-columns: 1fr; margin-top: -40px; }
  .featured__card { border-left: 0; border-top: 1px solid var(--line-2); }
  .featured__card:first-child { border-top: 0; }
  .factbar { grid-template-columns: 1fr 1fr; margin-top: -34px; }
  .fact:nth-child(3) { border-left: 0; }
  .fact { border-top: 1px solid var(--line-2); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fgrid { grid-template-columns: 1fr; }
  .summary-box dl { grid-template-columns: 1fr; }
  .summary-box dt { padding-bottom: 0; }
  .summary-box dd { padding-top: 2px; border-top: 0; }
}

@media (max-width: 560px) {
  /* HP: rapatkan & kecilkan supaya tidak terasa "besar" */
  .section { padding: 52px 0; }
  /* Logo dikecilkan dan tulisan Portal PPDB dipendekkan, supaya keduanya plus
     tombol menu muat sebaris tanpa terpotong di layar sempit. */
  .brand__logo { height: 27px; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
  .nav__cta { padding: 8px 12px; }
  .hero { min-height: 60vh; }
  .hero__inner { padding: 40px 0; }
  .hero h1 { font-size: 2rem; line-height: 1.14; }
  .hero__sub { font-size: 1rem; margin-bottom: 26px; }
  .hero__badge { font-size: .66rem; letter-spacing: .1em; padding: 6px 12px; margin-bottom: 14px; }
  h2, .sec-head h2 { font-size: 1.55rem; }
  .sec-head { margin-bottom: 30px; }
  .sec-head p { font-size: .98rem; margin-top: 12px; }
  .card { padding: 22px 20px; }
  .fact { padding: 20px 18px; }
  .fact strong { font-size: 1.55rem; }
  .cta { padding: 56px 0; }
  .cta h2 { font-size: 1.6rem; }

  .cards--4, .cards--3, .jenjang-grid, .news-grid, .fasilitas-grid, .feature-grid, .testi-grid, .timeline { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery .g-tall { grid-row: span 1; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .cta__actions { flex-direction: column; }
  .cta__actions .btn { justify-content: center; }
  .form-nav { flex-direction: column-reverse; }
  .form-nav .btn { justify-content: center; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .topbar .wrap { justify-content: center; }
}

/* ---------- tampilan ponsel: sasaran sentuh ----------
   Info kontak di bilah atas, titik pemilih hero, dan tautan footer
   diperbesar area sentuhnya sampai sekitar 44px, ukuran nyaman untuk jempol.
   Tampilan (ukuran huruf, jarak) tidak berubah, cuma area yang bisa disentuh. */
@media (max-width: 820px) {
  .topbar a { display: inline-block; padding: 13px 0; }
  .footer a { display: flex; align-items: center; min-height: 44px; }

  /* Titik hero: kotak sentuhnya membesar lewat padding, warnanya (background)
     dikunci ke ukuran aslinya (content-box) supaya bentuk titik tidak ikut membesar.
     box-sizing dikembalikan ke content-box khusus di sini, situs ini memakai
     border-box secara umum, yang bikin padding di atas malah menghabiskan kotak
     isinya sampai 0 dan titik jadi kotak besar penuh warna. */
  .hero__dots button { box-sizing: content-box; padding: 20px 6px; background-clip: content-box; }
}