/*
 * Situs SALUT: navbar dan footer bersama (semua halaman publik) + beranda.
 * Dunia yang sama dengan portal: sampul bookcloth navy, foil emas, kertas berpengaman.
 * Navbar dan footer tidak bergantung pada Tailwind atau Alpine, jadi aman dipakai
 * di halaman lama maupun baru.
 */

/* ---------------------------------------------------------------- Navbar */
.nav-situs { position: sticky; top: 0; z-index: 60; font-family: var(--f-ui); }
.nav-situs * { box-sizing: border-box; }
.nav-situs ul { list-style: none; margin: 0; padding: 0; }
.nav-situs .bilah { position: relative; display: flex; align-items: center; gap: 18px; max-width: 1240px; margin: 0 auto; min-height: 68px; padding: 0 20px; }
.nav-situs .tepi-emas { height: 2px; background: linear-gradient(90deg, transparent, var(--foil-gelap) 12%, var(--foil) 50%, var(--foil-gelap) 88%, transparent); opacity: .8; }
.nav-merek { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; min-width: 0; }
.nav-merek .lambang { width: 40px; height: 40px; border-radius: 50%; background: var(--kertas-putih); display: grid; place-items: center; padding: 5px; box-shadow: 0 0 0 2px var(--foil), 0 0 0 4px rgba(0,0,0,.28); flex: 0 0 auto; }
.nav-merek .lambang img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nav-merek .teks { font-family: var(--f-timbul); font-weight: 700; font-size: 15px; line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.nav-merek .teks small { display: block; font-size: 11px; letter-spacing: .16em; color: var(--di-sampul); font-weight: 600; }

.nav-menu { display: none; align-items: center; gap: 2px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a, .nav-menu > li > button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 5px;
    color: #E8EEFB; background: none; border: 0; font: 500 15px/1 var(--f-ui); text-decoration: none; cursor: pointer;
}
.nav-menu > li > a:hover, .nav-menu > li > button:hover, .nav-menu > li > button[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.nav-menu > li > a[aria-current="page"] { color: var(--foil); }
.nav-menu .bi-chevron-down { font-size: 11px; transition: transform .2s var(--ease-keluar); }
.nav-menu button[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.nav-turun {
    position: absolute; left: 0; top: calc(100% + 10px); min-width: 250px; padding: 8px; display: none;
    background: var(--kertas-putih); color: var(--tinta); border-radius: 6px; border: 1px solid var(--garis);
    box-shadow: 0 24px 44px -20px rgba(12,26,64,.55), 0 4px 10px -4px rgba(12,26,64,.2);
}
.nav-turun::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* jembatan hover */
.nav-turun.terbuka { display: block; }
.nav-turun a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; color: var(--tinta); text-decoration: none; font-size: 14.5px; border-radius: 4px; }
.nav-turun a:hover { background: var(--kertas-lipat); }
.nav-turun a .bi { color: var(--sampul-muda); }
.nav-turun .utama { font-weight: 700; color: var(--sampul); }

.nav-aksi { display: flex; align-items: center; gap: 8px; }
.nav-aksi .tombol { min-height: 40px; font-size: 14px; padding: 0 14px; }
.nav-aksi .portal-teks { display: none; }
.nav-buka { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; background: none; border: 1px solid rgba(232,181,74,.45); color: #fff; font-size: 22px; cursor: pointer; }
@media (min-width: 640px) { .nav-aksi .portal-teks { display: inline; } }
@media (min-width: 1100px) {
    .nav-menu { display: flex; }
    .nav-buka { display: none; }
}
@media (max-width: 420px) {
    .nav-merek .teks { font-size: 13px; }
    .nav-aksi .daftar { display: none; }
}

/* Laci HP: halaman kertas yang turun dari sampul. */
.nav-laci { position: fixed; inset: 0; z-index: 70; display: none; }
.nav-laci.terbuka { display: block; }
.nav-laci .latar { position: absolute; inset: 0; background: rgba(12,26,64,.6); }
.nav-laci .lembar-laci { position: absolute; top: 0; right: 0; bottom: 0; width: min(92vw, 400px); overflow-y: auto; padding: 18px 18px 28px; box-shadow: -20px 0 40px -20px rgba(0,0,0,.7); animation: laci-masuk .32s var(--ease-keluar); }
@keyframes laci-masuk { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.nav-laci .kepala-laci { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--tinta-2); }
.nav-laci .kepala-laci b { font-family: var(--f-timbul); font-size: 18px; }
.nav-laci .tutup { width: 44px; height: 44px; border: 1px solid var(--garis); background: var(--kertas-putih); border-radius: 6px; font-size: 20px; cursor: pointer; color: var(--tinta); }
.nav-laci nav > a, .nav-laci summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 2px; border-bottom: 1px dotted var(--garis-titik); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; }
.nav-laci summary::-webkit-details-marker { display: none; }
.nav-laci details[open] summary .bi { transform: rotate(180deg); }
.nav-laci details .isi { padding: 4px 0 10px 12px; border-bottom: 1px dotted var(--garis-titik); }
.nav-laci details .isi a { display: flex; align-items: center; min-height: 42px; color: var(--tinta-2); text-decoration: none; font-size: 15px; }
.nav-laci .aksi-laci { display: grid; gap: 10px; margin-top: 22px; }

/* ---------------------------------------------------------------- Footer */
.kaki-situs { font-family: var(--f-ui); color: var(--di-sampul); }
.kaki-situs * { box-sizing: border-box; }
.kaki-situs ul { list-style: none; margin: 0; padding: 0; }
.kaki-situs .dalam { max-width: 1240px; margin: 0 auto; padding: 56px 20px 28px; display: grid; gap: 36px 40px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .kaki-situs .dalam { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px) { .kaki-situs .dalam { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.kaki-situs h2 { font-family: var(--f-timbul); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--foil); margin: 0 0 14px; }
.kaki-situs .alamat { font-style: normal; font-size: 15px; line-height: 1.7; }
.kaki-situs .alamat a { color: #fff; }
.kaki-situs li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--di-sampul); text-decoration: none; font-size: 14.5px; }
.kaki-situs li a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--foil); }
.kaki-situs .sosial { display: flex; gap: 8px; margin-top: 16px; }
.kaki-situs .sosial a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(232,181,74,.4); border-radius: 50%; color: #fff; font-size: 17px; }
.kaki-situs .sosial a:hover { background: rgba(232,181,74,.15); }
.kaki-situs .bawah { border-top: 1px solid rgba(232,181,74,.22); }
.kaki-situs .bawah p { max-width: 1240px; margin: 0 auto; padding: 16px 20px 22px; font-family: var(--f-cetak); font-size: 12px; letter-spacing: .04em; color: #B7C3DE; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }

/* ---------------------------------------------------------------- Beranda */
body.situs { margin: 0; font-family: var(--f-ui); font-size: 17px; line-height: 1.55; color: var(--tinta); background: var(--kertas); -webkit-font-smoothing: antialiased; }
body.situs * { box-sizing: border-box; }
body.situs h1, body.situs h2, body.situs h3, body.situs p { margin: 0; }
.wadah { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* Pembuka: sampul penuh + buku yang mencetak alur kuliah. */
.pembuka { position: relative; overflow: hidden; }
.pembuka::before { content: ""; position: absolute; right: -180px; top: -140px; width: 620px; height: 620px; background: url('../../img/buku/roset-emas.svg') center/contain no-repeat; opacity: .16; pointer-events: none; }
.pembuka .wadah { position: relative; display: grid; gap: 40px; padding-top: 56px; padding-bottom: 72px; align-items: center; }
@media (min-width: 1000px) { .pembuka .wadah { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; padding-top: 80px; padding-bottom: 96px; } }
@media (max-width: 999.98px) { .pembuka::before { opacity: .08; } }
.pembuka h1 { font-family: var(--f-timbul); font-weight: 700; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.02; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.pembuka h1 .emas { color: var(--foil); }
.pembuka .ajak { margin-top: 22px; max-width: 54ch; font-size: clamp(17px, 2vw, 19px); color: var(--di-sampul); }
.pembuka .aksi { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.pembuka .jadwal-singkat { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 15px; color: var(--di-sampul); }
.pembuka .jadwal-singkat b { font-family: var(--f-cetak); font-weight: 500; color: #fff; }
.pembuka .jadwal-singkat .cap { --kertas: var(--sampul); }

/* Buku terbuka */
.buku-terbuka { position: relative; perspective: 1600px; }
.buku-terbuka .sampul-belakang { position: absolute; inset: 14px -10px -14px 10px; border-radius: 10px; background: var(--sampul-tua); box-shadow: 0 40px 70px -30px rgba(0,0,0,.8); }
.buku-terbuka .lembaran {
    position: relative; display: grid; grid-template-columns: 1fr; border-radius: 6px; overflow: hidden;
    transform: rotateX(4deg) rotateY(-6deg); transform-origin: 50% 60%;
    box-shadow: 0 30px 60px -28px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.4) inset;
}
@media (min-width: 640px) { .buku-terbuka .lembaran { grid-template-columns: .82fr 1fr; } }
.buku-terbuka .hal { padding: 22px 20px 26px; min-height: 100%; }
.buku-terbuka .hal-kiri { display: none; position: relative; box-shadow: inset -24px 0 30px -24px rgba(12,26,64,.38); }
@media (min-width: 640px) { .buku-terbuka .hal-kiri { display: block; } }
.buku-terbuka .hal-kanan { box-shadow: inset 22px 0 26px -22px rgba(12,26,64,.32); }
.buku-terbuka .etiket-contoh { font-family: var(--f-cetak); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.buku-terbuka .pemilik-contoh { margin-top: 18px; font-family: var(--f-timbul); font-weight: 700; font-size: 20px; line-height: 1.15; }
.buku-terbuka .data-contoh { margin-top: 14px; font-size: 13px; }
.buku-terbuka .data-contoh .titik { padding: 5px 0; }
.buku-terbuka .roset-hal { position: absolute; left: 50%; bottom: 18px; width: 150px; height: 150px; margin-left: -75px; background: url('../../img/buku/roset-kertas.svg') center/contain no-repeat; opacity: .8; }
.buku-terbuka table { width: 100%; border-collapse: collapse; font-size: 13px; }
.buku-terbuka th { font-family: var(--f-cetak); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--tinta-2); }
.buku-terbuka td { padding: 9px 4px; border-bottom: 1px dotted var(--garis-titik); vertical-align: middle; font-family: var(--f-cetak); font-size: 12.5px; color: var(--tinta); }
.buku-terbuka td.no { color: var(--tinta-3); width: 2.2em; }
.buku-terbuka td.ket { font-family: var(--f-ui); font-size: 13.5px; font-weight: 500; }
.buku-terbuka td.st { text-align: right; width: 1%; white-space: nowrap; }
.buku-terbuka .cap { font-size: 11px; padding: .25em .5em .2em; border-width: 1.5px; }
.kepala-printer { /* kereta printer tipis: berjalan di atas garis baris, tidak menutup cetakan */
    position: absolute; left: 0; height: 4px; width: 46px; border-radius: 2px; pointer-events: none; opacity: 0;
    background: var(--tinta-2); box-shadow: 0 2px 4px -1px rgba(12,26,64,.35);
}
.kepala-printer::after { content: ""; position: absolute; right: 6px; top: 4px; width: 6px; height: 5px; background: var(--tinta-2); border-radius: 0 0 2px 2px; }

/* Baris dicetak: tersembunyi lalu tampil kiri ke kanan; cap jatuh setelahnya. */
.cetak-hidup tbody tr { clip-path: inset(0 100% 0 0); }
.cetak-hidup tbody tr.tercetak-baris { clip-path: inset(0 0 0 0); transition: clip-path .55s steps(16, end); }
.cetak-hidup tbody tr .cap { opacity: 0; transform: rotate(-3deg) scale(1.5); }
.cetak-hidup tbody tr.cap-turun .cap { opacity: .92; transform: rotate(-3deg) scale(1); transition: transform .35s var(--ease-keluar), opacity .2s; }
@media (prefers-reduced-motion: reduce) {
    .cetak-hidup tbody tr { clip-path: none; }
    .cetak-hidup tbody tr .cap { opacity: .92; transform: rotate(-3deg); }
}

/* Bagian halaman (di atas kertas) */
.lembar-situs { padding: 72px 0; }
.lembar-situs + .lembar-situs { padding-top: 0; }
.judul-bagian { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--tinta-2); }
.judul-bagian h2 { font-family: var(--f-timbul); font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.judul-bagian p { max-width: 52ch; color: var(--tinta-2); font-size: 16px; }
.judul-bagian .tautan { font-size: 15px; }

/* Jadwal penerimaan sebagai lembar pengumuman cetak */
.jadwal-pmb { margin-top: 8px; width: 100%; border-collapse: collapse; }
.jadwal-pmb th { font-family: var(--f-cetak); font-weight: 500; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); text-align: left; padding: 14px 10px 10px; border-bottom: 1px solid var(--tinta-2); }
.jadwal-pmb td { padding: 20px 10px; border-bottom: 1px dotted var(--garis-titik); vertical-align: top; }
.jadwal-pmb .program b { display: block; font-family: var(--f-timbul); font-size: 21px; line-height: 1.2; }
.jadwal-pmb .program span { font-size: 14.5px; color: var(--tinta-2); }
.jadwal-pmb .tgl { font-family: var(--f-cetak); font-size: 16px; white-space: nowrap; }
.jadwal-pmb .tgl s { color: var(--tinta-3); font-size: 13.5px; display: block; }
.jadwal-pmb .tgl small { display: block; font-family: var(--f-ui); font-size: 13px; color: var(--tinta-2); white-space: normal; margin-top: 4px; }
.jadwal-pmb tr.utama td { background: rgba(232,181,74,.12); }
.jadwal-pmb tr.utama .program b::after { content: "Jadwal utama"; display: inline-block; margin-left: 10px; vertical-align: middle; font: 700 11px/1 var(--f-cetak); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); border: 1px solid var(--foil-gelap); padding: 4px 6px 3px; border-radius: 3px; }
@media (max-width: 719.98px) {
    .jadwal-pmb thead { display: none; }
    .jadwal-pmb tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 16px 6px; border-bottom: 1px dotted var(--garis-titik); }
    .jadwal-pmb td { padding: 0; border: 0; }
    .jadwal-pmb td.program { grid-column: 1 / -1; }
    .jadwal-pmb td[data-label]::before { content: attr(data-label); display: block; font: 500 11px/1.4 var(--f-cetak); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 2px; }
}

/* Jalur pendaftaran: tabel pembanding, bukan tiga kartu. */
.jalur { margin-top: 8px; }
.jalur-baris { display: grid; gap: 10px 28px; padding: 26px 0; border-bottom: 1px dotted var(--garis-titik); align-items: start; }
@media (min-width: 900px) { .jalur-baris { grid-template-columns: 1.1fr 1.6fr auto; align-items: center; } }
.jalur-baris h3 { font-family: var(--f-timbul); font-weight: 700; font-size: 24px; line-height: 1.15; }
.jalur-baris h3 small { display: block; font-family: var(--f-ui); font-weight: 500; font-size: 14.5px; color: var(--tinta-2); margin-top: 4px; letter-spacing: 0; }
.jalur-baris ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15.5px; color: var(--tinta-2); }
.jalur-baris li::before { content: "\2014\00a0"; color: var(--foil-gelap); }
.jalur-baris.utama h3 { color: var(--sampul); }

/* Kabar terbaru */
.kabar { margin-top: 8px; }
.kabar li { list-style: none; border-bottom: 1px dotted var(--garis-titik); }
.kabar a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; color: var(--tinta); text-decoration: none; }
@media (min-width: 900px) { .kabar a { grid-template-columns: 120px minmax(0, 1fr) 200px; } }
.kabar .tgl { font-family: var(--f-cetak); font-size: 13.5px; color: var(--tinta-2); padding-top: 4px; }
.kabar h3 { font-family: var(--f-timbul); font-weight: 700; font-size: 21px; line-height: 1.25; }
.kabar a:hover h3 { text-decoration: underline; text-decoration-color: var(--garis-titik); text-underline-offset: .18em; }
.kabar p { margin-top: 6px; color: var(--tinta-2); font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kabar .gambar { display: none; }
@media (min-width: 900px) { .kabar .gambar { display: block; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; background: var(--kertas-lipat); } .kabar .gambar img { width: 100%; height: 100%; object-fit: cover; display: block; } }

/* Layanan SALUT */
.layanan-salut { display: grid; gap: 32px 56px; align-items: start; }
@media (min-width: 960px) { .layanan-salut { grid-template-columns: .9fr 1.1fr; } }
.judul-besar { font-family: var(--f-timbul); font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; max-width: 18ch; }
.foto-tempel { display: block; margin-top: 26px; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid var(--kertas-putih); border-radius: 3px; box-shadow: var(--bayang-halaman); transform: rotate(-1.2deg); }
.layanan-salut .pengantar p { margin-top: 18px; font-size: 18px; color: var(--tinta-2); max-width: 46ch; }
.layanan-salut ol { list-style: none; margin: 0; padding: 0; counter-reset: pasal; }
.layanan-salut li { counter-increment: pasal; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 18px 0; border-bottom: 1px dotted var(--garis-titik); }
.layanan-salut li:first-child { border-top: 1px solid var(--tinta-2); }
.layanan-salut li .bi { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; font-size: 19px; color: var(--sampul); border: 1px solid var(--garis); border-radius: 50%; background: var(--kertas-putih); }
.layanan-salut li h3 { font-size: 18px; font-weight: 700; }
.layanan-salut li p { color: var(--tinta-2); font-size: 15.5px; }

/* Penutup */
.penutup { position: relative; overflow: hidden; }
.penutup .wadah { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.penutup h2 { font-family: var(--f-timbul); font-weight: 700; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; color: #fff; max-width: 20ch; }
.penutup p { margin-top: 10px; color: var(--di-sampul); max-width: 50ch; }
.penutup .aksi { display: flex; flex-wrap: wrap; gap: 12px; }