/* =====================================================================
   Halaman depan publik — gelap.
   Diturunkan dari `Frontend 3d/fora`: token, skala tipografi, ritme bagian,
   dan animasi reveal-nya dipertahankan. Yang tidak punya padanan di KKN
   (paket harga, banding pesaing, cookie banner, gelembung chat, formulir
   kontak, mockup komunitas palsu) tidak ikut.

   BERKAS INI SENGAJA TERPISAH dari app.css. Aplikasi di balik tombol Masuk
   terang dan memakai Tailwind; token gelap di sini tidak boleh bocor ke sana.
   Ia ditulis tangan dan DI-COMMIT — bukan hasil build.
   ===================================================================== */
:root {
  /* Off-black HANGAT, bukan #000. Hitam murni tidak punya udara dan
     berpita di layar sungguhan; ronanya mengikuti bata gunung. */
  --bg: #070505;
  --bg-2: #0e0b0b;
  --surface: #141010;
  --surface-2: #1b1616;
  --surface-3: #292222;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #fff3f0;
  --text-2: rgba(255, 243, 240, 0.72);
  /* 0,52, bukan 0,45: pada 0,45 sembilan baris kecil terukur 4,18:1,
     di bawah ambang 4,5 WCAG AA. Pada 0,52 ia sekitar 5,0:1. */
  --text-3: rgba(255, 243, 240, 0.52);
  --btn: #d9d9d9;
  --btn-hover: #ffffff;
  --btn-text: #111;

  /* Bata gunung, bukan aksen Fora. Satu-satunya warna yang menyeberang
     dari aplikasi ke halaman ini — supaya keduanya masih terasa satu
     lembaga meski terang dan gelapnya berbeda.
     Diambil dari punggung bukit di kaki halaman ini sendiri, bukan dari
     logo kampus langsung: logo itu merah pekat dan berteriak di layar.
     --bata-terang praktis warna puncak gunung terukur (#BE9392),
     dihangatkan ke rona yang sama dengan aplikasi. */
  --bata: #9C5248;
  --bata-terang: #C28780;


  --radius: 22px;
  --radius-sm: 12px;
  --container: 1072px;
  --nav-h: 60px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data: "Azeret Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* Atribut `hidden` harus MENANG atas aturan display apa pun di berkas ini.
   Tanpa !important, `.artikel__tautan { display:inline-block }` mengalahkan
   `[hidden]` bawaan peramban — dan tautan yang seharusnya tersembunyi tetap
   tergambar. Ditemukan uji, bukan dengan membaca. */
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(255, 243, 240, 0.25); }

/* Fokus papan ketik harus terlihat. Halaman ini publik dan sebagian
   pengunjungnya menavigasi dengan Tab. */
:focus-visible { outline: 2px solid var(--bata-terang); outline-offset: 3px; border-radius: 4px; }

/* Layout --------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 120px 0; position: relative; }

/* Tipografi ------------------------------------------------------------ */
.h1 {
  font-size: clamp(40px, 5.2vw, 60px); font-weight: 400;
  line-height: 1.06; letter-spacing: -0.035em;
}
.h2 {
  font-size: clamp(30px, 3.6vw, 42px); font-weight: 400;
  line-height: 1.14; letter-spacing: -0.03em;
}
.h3 { font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.025em; }
.h2 .dim, .h1 .dim { color: rgba(255, 243, 240, 0.5); }
.lead { font-size: 17px; color: var(--text-2); }
.muted { color: var(--text-2); }
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* Tombol --------------------------------------------------------------- */
.btn {
  display: inline-grid; place-items: center; height: 44px; padding: 0 24px;
  border-radius: 999px; background: var(--btn); color: var(--btn-text);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--btn-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--lg { height: 50px; padding: 0 34px; font-size: 15px; }
.btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn--ghost {
  background: rgba(255,255,255,.06); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.link-arrow { color: var(--text-2); font-size: 15px; transition: color .2s; }
.link-arrow:hover { color: var(--text); }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-3); letter-spacing: .02em;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.tag--plain::before { display: none; }

/* Navigasi ------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; height: var(--nav-h); z-index: 80;
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s;
}
.nav.is-scrolled { background: rgba(7,5,5,.7); backdrop-filter: blur(14px); border-color: var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
/* Lambang kampus apa adanya. Ia sudah merah pekat, dan justru itu asal-usul
   palet bata halaman ini — jadi ia tidak perlu diberi kotak berwarna di
   belakangnya. Tanpa alt: namanya sudah tertulis di sebelahnya. */
.nav__logo { width: 28px; height: 27px; object-fit: contain; flex: none; }
.nav__links { display: flex; gap: 4px; }
.nav__links a { padding: 8px 14px; font-size: 15px; color: var(--text-2); border-radius: 999px; transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; width: 40px; height: 40px; border-radius: 10px; place-items: center; }
.nav__burger span { display: block; width: 18px; height: 1.5px; background: #fff; margin: 3px 0; transition: transform .3s, opacity .3s; }
.nav__mobile {
  position: fixed; inset: var(--nav-h) 0 auto; z-index: 79; display: none;
  padding: 20px 24px 28px; background: rgba(7,5,5,.95); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
body.nav-open .nav__mobile { display: block; }
.nav__mobile a { display: block; padding: 14px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
.nav__mobile .btn { margin-top: 16px; }

/* Hero ----------------------------------------------------------------- */
.hero { position: relative; padding: 150px 0 0; overflow: hidden; }
.hero__sky {
  position: absolute; inset: 0; z-index: 0;
  /* Ujung bawahnya menghangat menemui punggung bukit yang berona bata.
     Bagian atas tetap gelap netral — itu langit malam, bukan aksen. */
  background: linear-gradient(180deg, #05070a 0%, #0d0a0b 35%, #1d1416 60%, #372529 100%);
}
.hero__hills {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1;
  background: url("/assets/img/beranda-bukit.webp") center bottom / cover no-repeat;
  opacity: .55;
}
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 2; background: linear-gradient(180deg, transparent, var(--bg) 88%); }
.hero__content { position: relative; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero__content .h1 { max-width: 820px; }
.hero__content .lead { max-width: 460px; }
.hero__aksi { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero__mock { position: relative; z-index: 3; margin: 80px auto 0; max-width: 780px; padding: 0 24px; perspective: 1600px; }

/* Cahaya di belakang sertifikat. Inilah yang membuat ia terbaca sebagai
   benda yang melayang di atas bidang, bukan gambar yang ditempel. */
.hero__cahaya {
  position: absolute; inset: 6% 10% 24%; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(62, 155, 221, .55), transparent 70%),
    radial-gradient(70% 50% at 30% 60%, rgba(16, 116, 186, .35), transparent 70%);
  filter: blur(60px);
  animation: berdenyut 12s ease-in-out infinite alternate;
}
@keyframes berdenyut {
  0%   { transform: scale(1) translateY(0); opacity: .85; }
  100% { transform: scale(1.12) translateY(-2%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__cahaya { animation: none; } }

/* Sertifikat sebagai visual hero.
   Sengaja TERANG di halaman gelap: itu benda yang sungguh-sungguh
   dihasilkan aplikasi ini, dan warnanya diambil dari cetakan aslinya. */
.sertifikat {
  background: #fff; color: #0B1B2B; border-radius: 12px;
  padding: 40px 44px 32px; text-align: center;
  position: relative; overflow: hidden;
  /* Dimiringkan sedikit pada sumbu X: cukup untuk terbaca sebagai lembaran
     yang tergeletak di ruang, tidak cukup untuk menyulitkan membacanya. */
  transform: rotateX(7deg);
  transform-origin: 50% 100%;
  box-shadow:
    0 60px 120px rgba(22, 9, 7, .7),
    0 20px 40px rgba(22, 9, 7, .5),
    0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.sertifikat::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg, var(--bata), #3A201C);
}
.sertifikat__lembaga { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #4A5D70; }
.sertifikat__judul { font-size: 20px; letter-spacing: -.02em; margin: 10px 0 4px; }
.sertifikat__ket { font-size: 11px; color: #4A5D70; }
.sertifikat__nama { font-size: 24px; margin: 18px 0 2px; letter-spacing: -.02em; }
.sertifikat__nim { font-family: var(--font-data); font-size: 12px; color: #4A5D70; }
.sertifikat__garis { height: 1px; background: #CFDAE4; margin: 20px 0 16px; }
.sertifikat__kaki { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sertifikat__aspek { text-align: left; }
.sertifikat__aspek small { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #5D7186; margin-bottom: 7px; }
.sertifikat__qr { width: 54px; height: 54px; flex: none; }

/* Deret lima aspek — lambang yang sama dengan di dalam aplikasi. */
.deret { display: flex; align-items: flex-end; gap: 5px; height: 26px; }
.deret i { width: 7px; border-radius: 2px; background: var(--bata); display: block; }
.deret i[data-kosong] { height: 4px; background: #CFDAE4; }
.deret--gelap i { background: var(--bata-terang); }
.deret--gelap i[data-kosong] { background: rgba(255,255,255,.2); }


/* Jendela aplikasi ------------------------------------------------------
   Padanan `.app` Fora, dan inilah tulang punggung kesan berdimensinya:
   kaca buram, bayangan yang menyembur ke atas, garis sorot di tepi atas, dan
   aurora yang bergerak pelan di baliknya. Dipakai di tiga tempat — hero,
   panggung tahapan, dan ajakan penutup — persis seperti Fora memakainya. */
.jendela {
  display: grid; grid-template-columns: 210px 1fr; min-height: 460px;
  background: rgba(20, 20, 20, .86);
  border: 1px solid rgba(255,255,255,.1); border-bottom: 0;
  border-radius: 20px 20px 0 0; overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 -20px 80px rgba(22, 9, 7,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.jendela--kartu { border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
.jendela__sisi { padding: 18px; border-right: 1px solid rgba(255,255,255,.06); }
.jendela__merek { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 20px; }
.jendela__merek b { width: 18px; height: 18px; border-radius: 5px; background: var(--bata); display: grid; place-items: center; font-size: 9px; font-family: var(--font-data); }
.jendela__nav li { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 13px; color: var(--text-3); }
.jendela__nav li::before { content: ""; width: 13px; height: 13px; border-radius: 3px; background: rgba(255,255,255,.14); flex: none; }
.jendela__nav li.on { color: var(--text); }
.jendela__nav li.on::before { background: var(--bata-terang); }
.jendela__utama { position: relative; overflow: hidden; }

/* Aurora — sama perannya dengan .app__aurora Fora, warnanya diambil dari
   bata gunung supaya tetap satu lembaga. */
.aurora {
  position: absolute; inset: 0;
  /* Ketiga radial dan gradiennya diturunkan dari pita gunung yang terukur:
     kabut puncak, bayang, lalu lereng. Bukan biru yang digeser ronanya —
     biru di sini jenuh 84%, dan pada rona bata itu menghasilkan merah logo
     yang berteriak. */
  background:
    radial-gradient(70% 60% at 80% 25%, rgba(233, 208, 201, .85), transparent 60%),
    radial-gradient(60% 70% at 25% 30%, rgba(58, 32, 28, .9), transparent 60%),
    radial-gradient(50% 50% at 55% 85%, rgba(156, 82, 72, .8), transparent 60%),
    linear-gradient(135deg, #1c100e, #6b372f 45%, #dcc0b8 100%);
  animation: aurora 14s ease-in-out infinite alternate;
  filter: saturate(.95);
}
@keyframes aurora {
  0%   { transform: scale(1.05) translate(0, 0); }
  50%  { transform: scale(1.15) translate(-3%, 2%); }
  100% { transform: scale(1.08) translate(2%, -3%); }
}
@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }

/* Isi di atas aurora, dalam panel kaca. */
.jendela__isi { position: relative; z-index: 1; padding: 26px; display: grid; gap: 14px; align-content: center; height: 100%; }
.kaca {
  background: rgba(12, 16, 21, .62); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 20px 45px rgba(22, 9, 7,.45), inset 0 1px 0 rgba(255,255,255,.1);
}
.kaca__judul { font-family: var(--font-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.kaca__baris { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.kaca__baris:first-of-type { border-top: 0; }
.kaca__nim { font-family: var(--font-data); color: rgba(255,255,255,.55); font-size: 11px; }
.kaca__nama { color: #fff; }
.kaca__nilai { font-family: var(--font-data); color: #e9d0c9; }

/* Lencana bulat berpermukaan, padanan .ov__ava Fora yang memakai conic. */
.kaca__bulat {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  background: conic-gradient(from 200deg, #C28780, #E9D0C9, #9C5248, #C28780);
  filter: blur(.4px); box-shadow: 0 10px 30px rgba(22, 9, 7,.45);
}
.kaca--foto { padding: 14px 16px 10px; }
.mosaik { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 8px; }
/* height:auto WAJIB: atribut height di <img> (untuk ruang sebelum muat)
   mengalahkan aspect-ratio kalau tingginya tidak dilepas di sini. */
.mosaik img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.kaca--tengah { text-align: center; }
.kaca--tengah b { display: block; font-size: 16px; font-weight: 600; color: #fff; }
.kaca--tengah small { color: rgba(255,255,255,.72); font-size: 12px; }
.kaca__tombol { margin-top: 14px; height: 40px; border-radius: 10px; background: #eee; color: #111; font-weight: 500; font-size: 13px; display: grid; place-items: center; }

/* Intro ---------------------------------------------------------------- */
.intro { padding: 150px 0 110px; }
.intro p { font-size: clamp(21px, 2.7vw, 29px); line-height: 1.42; letter-spacing: -0.02em; max-width: 730px; margin: 28px 0 0; color: var(--text-3); }
.intro p .w { transition: color .5s; }
.intro p .w.lit { color: var(--text); }

/* Kepala bagian -------------------------------------------------------- */
.sec-head { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 44px; }
.sec-head--split { grid-template-columns: 1fr 1fr; align-items: end; }
.sec-head--split .lead { max-width: 380px; justify-self: end; }
.sec-head .tag { margin-bottom: 24px; }

/* Kelompok: lambang per tahun ajaran ----------------------------------- */
/* Tab tahun. Jumlah kolomnya dari --n yang disetel beranda.js sesuai tahun
   yang punya lambang; pilnya selebar satu kolom dan digeser translateX. */
.tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); max-width: 520px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.tabs__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .45s var(--ease); }
.tabs button { position: relative; z-index: 1; height: 44px; font-size: 14px; font-family: var(--font-data); letter-spacing: .02em; color: var(--text-2); border-radius: 999px; transition: color .3s; }
.tabs button.is-active { color: var(--text); }

/* Panggung lambang: latar render yang sama dengan panggung tahapan dulu,
   supaya ubin-ubin putihnya punya sesuatu untuk melayang di atasnya. */
.lambang {
  position: relative; margin-top: 26px; padding: 34px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 40px 90px rgba(22, 9, 7,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.lambang__latar {
  position: absolute; inset: 0;
  background:
    url("/assets/img/adegan/punggung-tengah.avif") center bottom / cover no-repeat,
    linear-gradient(180deg, #120c0c, #2a1c1c 60%, #4a3232);
}
.lambang__latar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.62));
}
/* Kolomnya TETAP, bukan auto-fill: batas "dua baris dulu" di bawah dihitung
   dari jumlah kolom, dan kolom yang berubah-ubah menyisakan baris yatim. */
.lambang__kisi { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px 14px; }
/* Dua baris dulu; sisanya lewat tombol. */
.lambang__kisi.terbatas .lambang__ubin:nth-child(n+17) { display: none; }
.lambang__semua {
  position: relative; display: block; margin: 26px auto 0; height: 44px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.06);
  color: var(--text); font-size: 14px; transition: background .2s, border-color .2s;
}
.lambang__semua:hover { background: rgba(255,255,255,.1); border-color: var(--text-3); }
.lambang__ubin { display: grid; gap: 10px; align-content: start; text-align: center; }
/* Ubin selalu putih, apa pun latarnya: lambang dirancang untuk kertas
   putih, dan yang bertinta gelap lenyap di atas latar gelap. Latar lambang
   yang memang gelap tampil sebagai kotak di dalam ubin — itu bentuk lencana,
   bukan cacat. */
.lambang__gbr {
  aspect-ratio: 1; border-radius: 18px; background: #fff; padding: 9%;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 18px 40px rgba(22, 9, 7,.45), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lambang__gbr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lambang__ubin:hover .lambang__gbr { transform: translateY(-4px) scale(1.02); box-shadow: 0 26px 50px rgba(22, 9, 7,.55), inset 0 1px 0 rgba(255,255,255,.7); }
.lambang__nama { font-size: 14px; line-height: 1.3; color: var(--text); }
.lambang__no { font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* Tumpukan kartu ------------------------------------------------------- */
/* Kartunya `sticky` dengan `top` bertingkat, jadi saat digulir ia menumpuk
   satu di atas yang lain alih-alih lewat begitu saja. Itu gerak yang
   mengerjakan kedalaman, bukan sekadar hiasan. */
.tumpuk { display: flex; flex-direction: column; }
.tumpuk__kartu {
  position: sticky; top: 100px; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; min-height: 420px; margin-bottom: 24px;
  box-shadow: 0 -10px 40px rgba(22, 9, 7,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.tumpuk__kartu:nth-child(2) { top: 116px; }
.tumpuk__kartu:nth-child(3) { top: 132px; }
.tumpuk__teks { padding: 46px; display: flex; flex-direction: column; gap: 18px; }
.tumpuk__teks .h3 { max-width: 340px; }
.tumpuk__teks p { color: var(--text-2); font-size: 15px; max-width: 400px; }
.tumpuk__kaki { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.tumpuk__kaki span {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--text-2); border: 1px solid var(--line);
}
.tumpuk__visual {
  position: relative; overflow: hidden; display: grid; place-items: center; padding: 32px;
  background: linear-gradient(180deg, #1c1414, #3a2828 60%, #171010);
}
.tumpuk__visual::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/img/adegan/punggung-jauh.avif") center bottom / cover no-repeat;
  opacity: .85;
}
.tumpuk__kartu--balik .tumpuk__visual { order: -1; }

/* Foto kegiatan sungguhan yang melayang di dalam kartu visual. */
.tumpuk__foto {
  position: relative; z-index: 1; width: 100%; height: auto; max-width: 420px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 50px rgba(22, 9, 7,.6), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Pengumuman ----------------------------------------------------------- */
.pengumuman {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 40px 44px;
  display: grid; grid-template-columns: 1fr minmax(260px, .85fr); gap: 40px; align-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pengumuman__periode { font-family: var(--font-data); font-size: 13px; color: var(--bata-terang); letter-spacing: .06em; }
.pengumuman__judul { font-size: 26px; letter-spacing: -.02em; margin: 8px 0 10px; }
.pengumuman__teks { color: var(--text-2); font-size: 15px; max-width: 520px; }
/* Kalimat pemilik, bukan angka operasional: halaman publik tidak memuat
   statistik, dan kalimat ini yang diminta diingat pengunjung. */
.pengumuman__kalimat {
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.22; letter-spacing: -.02em;
  text-align: right; color: var(--text-2); text-wrap: balance;
}
.pengumuman__kalimat b { font-weight: 400; color: var(--text); }

/* Berita --------------------------------------------------------------- */
.berita-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pos { border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .3s, transform .3s var(--ease); }
.pos:hover { border-color: var(--line-2); transform: translateY(-3px); }
.pos__gbr { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #111; position: relative; }
.pos__gbr > div { position: absolute; inset: 0; overflow: hidden; transition: transform .8s var(--ease); background-size: cover; background-position: center; }
.pos:hover .pos__gbr > div { transform: scale(1.04); }
.pos__tanpa-foto {
  background: radial-gradient(60% 55% at 50% 40%, #3a2a2a, #1f1616 55%, #0f0b0b 85%);
  display: grid; align-items: end; padding: 22px 20px;
}
.pos__tanpa-foto::after {
  content: ""; position: absolute; left: 50%; top: 38%; width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-8deg); border-radius: 18%;
  background: linear-gradient(135deg, #e9d0c9, #b08a80 50%, #5e3a33);
  box-shadow: 0 24px 50px rgba(22, 9, 7,.6);
  opacity: .55;
}
.pos__tanpa-foto p {
  font-size: 15px; line-height: 1.5; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.pos__isi { padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.pos__judul { font-size: 21px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.berita-semua { display: block; margin-top: 14px; color: var(--text); font-size: 15px; }
.berita-semua:hover { text-decoration: underline; }
.pos__meta { margin-top: auto; font-size: 13px; color: var(--text-3); display: flex; gap: 10px; }

.berita-kosong {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 64px 32px; text-align: center; color: var(--text-3);
}
.berita-kosong b { display: block; color: var(--text-2); font-weight: 400; font-size: 17px; margin-bottom: 6px; }

/* Halaman baca satu berita ---------------------------------------------- */
.artikel { padding: 130px 0 90px; }

/* Daftar berita: saringan tahun (tab) dan kelompok (pilihan), lalu kisi
   kartu yang sama dengan halaman depan, lalu halaman sebelum/sesudah. */
.daftar__kepala { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 36px; }
.daftar__judul { font-size: clamp(30px, 4vw, 46px); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; }
.saring { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; }
/* Tab di dalam flex menyusut ke isinya dan tombolnya saling tindih; lebarnya
   dipatok. Di ponsel ia selebar baris (lihat @media di bawah). */
.saring .tabs { flex: 0 0 auto; width: 400px; max-width: 100%; }
.saring .tabs button { white-space: nowrap; padding: 0 12px; }
.saring select, .saring input {
  height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--text); font-size: 14px; min-width: 200px; color-scheme: dark;
}
.saring input { flex: 1; min-width: 180px; }
.saring select:focus, .saring input:focus { outline: 2px solid var(--bata-terang); outline-offset: 2px; }
.hal { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.hal button { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); color: var(--text); font-size: 14px; }
.hal button:disabled { opacity: .35; cursor: default; }
.hal span { font-family: var(--font-data); font-size: 12px; letter-spacing: .08em; color: var(--text-3); }
.artikel__lagi { display: inline-block; margin-top: 40px; color: var(--text-2); font-size: 15px; border-top: 1px solid var(--line); padding-top: 22px; }
.artikel__lagi:hover { color: var(--text); }
.artikel__kembali { display: inline-block; margin-bottom: 32px; color: var(--text-3); font-size: 14px; transition: color .2s; }
.artikel__kembali:hover { color: var(--text); }
.artikel__judul { font-size: clamp(30px, 4vw, 46px); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; max-width: 800px; }
.artikel__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 14px; color: var(--text-3); }
.artikel__ringkas { margin-top: 26px; font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 720px; }
.artikel__isi { margin-top: 40px; max-width: 720px; }
.artikel__isi p { font-size: 17px; line-height: 1.7; color: var(--text-2); margin-bottom: 22px; }
.artikel__foto { margin: 40px 0; display: grid; gap: 14px; }
.artikel__foto img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: #111; }
.artikel__tautan { display: inline-block; margin-top: 8px; }
.artikel__pesan { padding: 80px 0; text-align: center; color: var(--text-3); }
.artikel__pesan b { display: block; color: var(--text-2); font-weight: 400; font-size: 20px; margin-bottom: 8px; }

/* FAQ ------------------------------------------------------------------ */
.faq { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq__bantu { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 26px 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.faq__bantu h4 { font-size: 17px; font-weight: 400; margin-bottom: 8px; }
.faq__bantu p { color: var(--text-3); font-size: 14px; margin-bottom: 14px; }
.acc { border: 1px solid var(--line); background: var(--bg-2); border-radius: 18px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; text-align: left; font-size: 16px; }
.acc__q i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .4s var(--ease); flex: none; font-style: normal; font-size: 12px; }
.acc.is-open .acc__q i { transform: rotate(180deg); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.acc__a p { padding: 0 26px 24px; color: var(--text-2); font-size: 15px; max-width: 620px; }
.acc__a p + p { padding-top: 0; margin-top: -10px; }

/* Ajakan penutup -------------------------------------------------------
   Padding bawah NOL, dan jendelanya menembus ke kaki halaman — itulah yang
   membuat bagian ini berlapis, bukan gradiennya. Urutan lapisnya dari
   belakang: langit bergradien, gurun, jendela separuh terpotong, lalu kaki.
   Pola `.cta` Fora. */
.cta { position: relative; overflow: hidden; padding: 190px 0 0; }
.cta__bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, #0d0a0b 40%, #1e1517 60%, #3d2b2c 85%, #8a6a68 100%);
}
.cta__dunes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: url("/assets/img/adegan/punggung-tengah.avif") center 35% / cover no-repeat;
  opacity: .8;
}
.cta .container {
  position: relative; display: grid; grid-template-columns: 380px 1fr;
  gap: 40px; align-items: center; text-align: left;
}
.cta__teks { display: flex; flex-direction: column; align-items: flex-start; }
.cta__teks .h1 { margin-bottom: 24px; font-size: clamp(36px, 4.4vw, 52px); max-width: 360px; }
.cta__teks p { color: var(--text-2); max-width: 330px; margin-bottom: 32px; }
.cta__aksi { display: flex; flex-wrap: wrap; gap: 12px; }

/* Jendela penutup: lebih lebar dari kolomnya dan sengaja meluber, supaya
   tepi kanannya keluar bidang seperti di Fora. Auroranya dimatikan — di sini
   yang menyala latarnya, bukan layarnya. */
.cta__mock { justify-self: start; width: 840px; max-width: none; }

/* Tembus pandang, dan itu intinya: punggung bukit di belakangnya harus
   TERLIHAT menembus sidebar dan badan layar. Kalau jendelanya pekat, ia cuma
   kotak yang ditempel — bukan lapisan. */
.cta__mock .jendela { min-height: 520px; background: rgba(12, 12, 12, .55); backdrop-filter: none; }
.cta__mock .jendela__sisi { border-right-color: rgba(255,255,255,.1); }
.cta__mock .aurora { display: none; }
.cta__mock .jendela__utama { background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05)); }

/* Isinya telanjang di atas permukaan itu — tanpa kartu berbingkai. */
.cta__mock .jendela__isi { padding: 110px 40px 40px; align-content: start; justify-items: center; text-align: center; gap: 18px; }
.cta__mock .kaca--tengah { width: 100%; max-width: 360px; }
.ringkas__ket { max-width: 420px; text-align: left; font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.5; margin-top: 10px; }

/* Kaki ----------------------------------------------------------------- */
.footer { background: var(--bg); padding: 64px 0 34px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer__brand p { color: var(--text-3); font-size: 14px; max-width: 320px; margin-top: 14px; }
.footer h4 { font-size: 15px; font-weight: 500; margin-bottom: 22px; }
.footer li { margin-bottom: 14px; }
.footer li a { font-size: 15px; color: var(--text-2); transition: color .2s; }
.footer li a:hover { color: var(--text); }
.footer__bawah { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--text-3); flex-wrap: wrap; }

/* Animasi reveal -------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: translateY(40px) scale(.96); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .lambang__gbr { transition: none; }
  .pos, .pos__gbr > div { transition: none; }
}

/* Tanggap --------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .section { padding: 88px 0; }
  .sec-head--split { grid-template-columns: 1fr; }
  .sec-head--split .lead { justify-self: start; }
  .hero { padding-top: 120px; }
  .hero__mock { margin-top: 56px; }
  .intro { padding: 96px 0 72px; }
  .tabs { grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-sm); }
  .tabs__pill { display: none; }
  .tabs button { height: 40px; font-size: 13px; }
  .tabs button.is-active { background: var(--surface-3); }
  .pengumuman { grid-template-columns: 1fr; padding: 30px 26px; }
  .pengumuman__kalimat { text-align: left; }
  .berita-grid { grid-template-columns: 1fr; }
  .daftar__kepala { grid-template-columns: 1fr; }
  .saring .tabs { width: 100%; }
  .saring select, .saring input { width: 100%; }
  .tumpuk__kartu { grid-template-columns: 1fr; position: relative; top: 0 !important; min-height: 0; }
  .tumpuk__kartu--balik .tumpuk__visual { order: 0; }
  .tumpuk__teks { padding: 30px 26px; }
  .tumpuk__visual { min-height: 260px; padding: 24px; }
  .jendela { grid-template-columns: 1fr; min-height: 0; }
  .jendela__sisi { display: none; }
  .lambang { padding: 22px 18px; }
  .lambang__kisi { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
  .lambang__kisi.terbatas .lambang__ubin:nth-child(n+13) { display: none; }
  .lambang__gbr { border-radius: 14px; }
  .lambang__nama { font-size: 13px; }
  .cta { padding-top: 110px; }
  .cta .container { grid-template-columns: 1fr; text-align: center; }
  .cta__teks { align-items: center; }
  .cta__teks .h1, .cta__teks p { max-width: none; }
  .cta__mock { width: 100%; justify-self: stretch; }
  .cta__mock .jendela { min-height: 340px; }
  .cta__mock .jendela__isi { padding: 28px 22px 32px; }
  .faq { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta { padding: 110px 0 96px; }
}
@media (max-width: 560px) {
  .sertifikat { padding: 24px 22px 20px; }
  .sertifikat__nama { font-size: 19px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* Render 3D milik pemilik, varian ponsel: berkasnya separuh lebar. */
@media (max-width: 700px) {
  .lambang__latar { background-image: url("/assets/img/adegan/punggung-tengah-hp.avif"), linear-gradient(180deg, #120c0c, #2a1c1c 60%, #4a3232); }
  .tumpuk__visual::before { background-image: url("/assets/img/adegan/punggung-jauh-hp.avif"); }
  .cta__dunes { background-image: url("/assets/img/adegan/punggung-tengah-hp.avif"); }
}

/* Butiran di atas seluruh halaman. Ground gelap yang rata berpita di layar
   sungguhan; derau 4,5 persen adalah bedanya "halaman gelap" dari "ruangan
   yang diterangi". Di atas bilah navigasi juga, supaya bilahnya bukan pulau. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .045; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E"); background-size: 240px 240px;
}