/* Pustaka Sangullele — gaya dasar. Bersih, nyaman dibaca di layar. */
:root {
    --ungu: #5E2F5B;
    --ungu-tua: #41203F;
    --ungu-muda: #F7F4F6;
    --ungu-garis: #DDD4E0;
    --tinta: #241F2B;
    --tinta-2: #4F4857;
    --redup: #6B6472;
    --garis: #ECE8EE;
    --putih: #FFFFFF;
    --hijau: #1F6B45; --hijau-bg: #E4F2EA;
    --biru: #34418C; --biru-bg: #E7E9F6;
    --kuning: #7A4A06; --kuning-bg: #F7EBCF;
    --radius: 14px;
    --wadah: 1180px;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Source Serif 4', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--tinta); background: var(--putih); }
img { max-width: 100%; display: block; }
a { color: var(--ungu); text-underline-offset: 3px; }
a:hover { color: var(--ungu-tua); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid #B784B3; outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lewati { position: absolute; left: -999px; top: 8px; background: var(--ungu); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.lewati:focus { left: 8px; }

.wadah { max-width: var(--wadah); margin: 0 auto; padding: 0 24px; }
.halaman { padding-top: 48px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.tumpukan { display: flex; flex-direction: column; gap: 16px; }
.tumpukan-besar { padding-top: 80px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 80px; }
.lebar-baca { max-width: 760px; }
.redup { color: var(--redup); }
.kecil { font-size: 14px; }

/* Kepala */
/* Kepala halaman menempel di atas saat digulir. --tinggi-kepala diisi skrip di layout (cadangan 74px). */
:root { --tinggi-kepala: 74px; }
html { scroll-padding-top: calc(var(--tinggi-kepala) + 12px); } /* lompatan ke #jangkar tidak tertutup kepala */
.kepala { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--garis); background: var(--putih); transition: box-shadow .2s ease; }
.kepala.tergulir { box-shadow: 0 2px 14px rgba(36, 31, 43, .08); }
.kepala-isi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.merek { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.merek-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--ungu); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.25; }
.merek-nama { font-weight: 700; font-size: 18px; color: var(--ungu); }
.merek-sub { font-size: 13px; color: var(--redup); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; font-weight: 600; }
.nav-tautan { display: flex; align-items: center; gap: 2px; order: 1; }
.nav-tautan > a { position: relative; color: var(--tinta); text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.nav-tautan > a:hover { background: var(--ungu-muda); }
.nav-tautan > a[aria-current="page"] { color: var(--ungu); }
.nav-tautan > a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ungu); }
.tak-tampak { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pencarian di kepala halaman */
.cari-kepala { order: 2; position: relative; display: flex; align-items: center; }
.cari-kepala svg { position: absolute; left: 12px; color: var(--redup); pointer-events: none; }
.cari-kepala input { width: 220px; min-height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--ungu-garis); border-radius: 10px; background: var(--ungu-muda); font: inherit; font-size: 15px; font-weight: 400; color: var(--tinta); transition: width .15s ease, background .15s ease; }
.cari-kepala input:focus { width: 280px; background: #fff; outline: 2px solid var(--ungu); outline-offset: 1px; }

/* Masuk dan menu akun */
.nav-masuk { order: 3; }
.akun { order: 3; position: relative; }
.akun-tombol { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 4px; border: 1px solid var(--ungu-garis); border-radius: 999px; background: #fff; color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.akun-tombol:hover, .akun.terbuka .akun-tombol { background: var(--ungu-muda); }
.akun-inisial { width: 32px; height: 32px; border-radius: 50%; background: var(--ungu); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.akun-nama { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akun-menu { display: flex; flex-direction: column; min-width: 240px; padding: 8px; background: #fff; border: 1px solid var(--garis); border-radius: 12px; }
.ada-js .akun-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; box-shadow: 0 10px 30px rgba(36, 31, 43, .12); }
.ada-js .akun.terbuka .akun-menu { display: flex; }
.akun-info { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; padding: 8px 10px 12px; border-bottom: 1px solid var(--garis); font-size: 14px; font-weight: 400; color: var(--redup); }
.akun-info strong { color: var(--tinta); font-size: 15px; }
.akun-info .lencana { align-self: flex-start; margin-top: 6px; font-size: 12px; }
.akun-menu > a, .akun-menu button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.akun-menu > a:hover, .akun-menu button:hover { background: var(--ungu-muda); color: var(--ungu); }
.akun-menu form { margin: 0; }
.akun-menu a + form { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--garis); }

/* Tombol */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--ungu); color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tombol:hover { background: var(--ungu-tua); color: #fff; }
.tombol-garis { background: transparent; color: var(--ungu); border: 1px solid var(--ungu-garis); }
.tombol-garis:hover { background: var(--ungu-muda); color: var(--ungu); }
.tombol-putih { background: #fff; color: var(--ungu); align-self: flex-start; }
.tombol-putih:hover { background: #F3EAF2; color: var(--ungu); }
.tombol-kecil { min-height: 40px; padding: 0 16px; font-size: 15px; font-weight: 600; }

/* Pahlawan (beranda) */
.pahlawan { background: var(--ungu-muda); }
.pahlawan-isi { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 80px; }
.pahlawan-teks { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.alis { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ungu); margin-bottom: 6px; }
.alis-terang { color: #E4D3E2; }
.judul-besar { font-size: clamp(38px, 6vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.aksen { color: var(--ungu); }
.ayat { margin: 0; max-width: 600px; display: flex; flex-direction: column; gap: 6px; }
.ayat blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--tinta-2); }
.ayat figcaption { font-size: 14px; font-weight: 600; color: var(--ungu); }
.coba { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.coba span { color: var(--redup); }

.cari { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; background: #fff; border: 1px solid var(--ungu-garis); border-radius: 14px; max-width: 600px; color: #8A8191; }
.cari input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; outline: none; font: inherit; color: var(--tinta); background: transparent; }
.cari-besar input { height: 48px; font-size: 17px; }
.cari:focus-within { border-color: var(--ungu); box-shadow: 0 0 0 3px #EBDDEA; }

.kartu-pilihan { flex: 1 1 380px; max-width: 460px; min-width: 0; background: var(--ungu); color: #fff; border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.kartu-pilihan h2 { font-size: 22px; font-weight: 700; }
.kartu-pilihan p { color: #F3EAF2; font-size: 15px; }
.pilihan-isi { display: flex; gap: 20px; align-items: flex-start; }
.pilihan-meta { color: #E4D3E2 !important; font-size: 14px !important; margin: 6px 0 8px; }
.sampul-miring { flex: none; width: 112px; height: 150px; border-radius: 8px; background: #D9B98C; transform: rotate(-4deg); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; overflow: hidden; }
.sampul-miring img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sampul-miring { position: relative; }
.sampul-kecil { font-size: 9px; letter-spacing: .12em; color: #5A3E22; text-transform: uppercase; }
.sampul-judul { font-size: 14px; font-weight: 800; color: #4A3019; line-height: 1.15; }

/* Judul */
.judul-halaman { font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -.015em; }
.judul-bagian { font-size: 28px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 20px; }
.judul-kecil { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--redup); margin: 0 0 12px; }
.baris-judul { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.baris-judul .judul-bagian { margin-bottom: 20px; }
.baris-judul > a { font-weight: 600; font-size: 15px; margin-bottom: 26px; }

/* Kisi dan kartu */
.kisi { display: grid; gap: 16px; }
.kisi-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kisi-4 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px; }
.kartu-ruang, .kartu-topik { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--garis); border-radius: var(--radius); text-decoration: none; color: var(--tinta); background: #fff; transition: border-color .15s; }
.kartu-ruang:hover, .kartu-topik:hover { border-color: var(--ungu-garis); color: var(--tinta); }
.kartu-ruang .redup, .kartu-topik .redup { font-size: 15px; }
.kartu-ruang-nama, .kartu-topik-judul { font-size: 18px; font-weight: 700; }
.kartu-ruang-jumlah { font-size: 14px; font-weight: 600; color: var(--ungu); margin-top: auto; }

.kartu-buku { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--tinta); }
.kartu-buku-judul { font-size: 16px; font-weight: 700; line-height: 1.35; }
.sampul { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; padding: 20px; display: flex; align-items: flex-end; overflow: hidden; background: #F4EFEA; border: 1px solid #ECE4DC; }
.sampul img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sampul-teks { font-family: var(--serif); font-size: 17px; line-height: 1.25; color: #3A2A24; }
.sampul-arsip { background: #F2F1EE; border-color: #E6E4DF; }
.sampul-karya_ilmiah { background: #EDEFF3; border-color: #E1E4EA; }
.sampul-foto, .sampul-video { background: #EEF0EC; border-color: #E2E5DF; }
.sampul-audio { background: #F3ECF2; border-color: #E9DDE7; }

.lencana { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--ungu-muda); color: var(--ungu); }
.kartu-topik .lencana { align-self: flex-start; }
.lencana-publik { background: var(--hijau-bg); color: var(--hijau); }
.lencana-terbatas { background: var(--biru-bg); color: var(--biru); }
.lencana-katalog { background: var(--kuning-bg); color: var(--kuning); }

/* Daftar koleksi */
.tata-samping { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; margin-top: 12px; }
.saring { flex: 1 1 220px; max-width: 260px; }
.hasil { flex: 999 1 560px; min-width: 0; border-top: 1px solid var(--garis); }
.medan { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.medan input, .medan select { height: 44px; padding: 0 12px; border: 1px solid var(--ungu-garis); border-radius: 10px; font: inherit; font-size: 16px; font-weight: 400; color: var(--tinta); background: #fff; }
.medan input:focus, .medan select:focus { outline: none; border-color: var(--ungu); box-shadow: 0 0 0 3px #EBDDEA; }
.centang { display: flex; align-items: center; gap: 10px; font-size: 15px; min-height: 32px; }
.centang input { width: 18px; height: 18px; accent-color: var(--ungu); }
.baris-hasil { padding: 26px 0; border-bottom: 1px solid var(--garis); display: flex; gap: 24px; align-items: flex-start; }
.baris-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.baris-sampul { flex: none; width: 88px; padding: 10px; flex-direction: column; justify-content: space-between; align-items: flex-start; text-decoration: none; box-shadow: 0 1px 2px rgba(36, 31, 43, .06); transition: transform .15s ease; }
.baris-sampul:hover { transform: translateY(-2px); }
.baris-sampul-jenis { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--redup); }
.baris-sampul-tahun { font-family: var(--serif); font-size: 18px; color: #3A2A24; }
.baris-hasil-judul { font-size: 22px; font-weight: 700; line-height: 1.3; }
.baris-hasil-judul a { color: var(--tinta); text-decoration: none; }
.baris-hasil-judul a:hover { color: var(--ungu); text-decoration: underline; }
.baris-isi > p:not(.redup) { color: var(--tinta-2); max-width: 70ch; }
.kotak-topik { margin: 20px 0 4px; padding: 20px 24px; border-radius: var(--radius); background: var(--ungu-muda); }
.daftar-polos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kosong { padding: 48px 0; display: flex; flex-direction: column; gap: 6px; }
.kosong h2 { font-size: 20px; }

.paginasi { margin-top: 28px; }
.pagination { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pagination li > a, .pagination li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--tinta-2); }
.pagination li > a { font-weight: 600; }
.pagination li > a:hover { background: var(--ungu-muda); color: var(--ungu); }
.pagination .active > span { background: var(--ungu); color: #fff; font-weight: 700; }
.pagination .disabled > span { color: #B9B2BE; }

.tab { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tab a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--garis); text-decoration: none; color: var(--tinta-2); font-size: 15px; font-weight: 600; }
.tab a[aria-current="page"] { background: var(--ungu); border-color: var(--ungu); color: #fff; }

/* Halaman baca */
.jejak { color: var(--redup); }
.kepala-koleksi { display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.tata-baca { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; margin-top: 12px; }
.kolom-baca { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.kolom-meta { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.pembuka { font-size: 19px; line-height: 1.7; color: var(--tinta-2); max-width: 68ch; }
.prosa { max-width: 68ch; display: flex; flex-direction: column; gap: 16px; font-size: 18px; line-height: 1.75; }
.prosa h2 { font-size: 24px; margin-top: 16px; }
.prosa h3 { font-size: 20px; margin-top: 8px; }
.prosa ul, .prosa ol { margin: 0; padding-left: 1.3em; }
.prosa blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--ungu-garis); font-family: var(--serif); font-style: italic; color: var(--tinta-2); }
.ruang-baca { display: flex; flex-direction: column; gap: 10px; }
.pembaca-pdf { width: 100%; height: 80vh; min-height: 520px; border: 1px solid var(--garis); border-radius: var(--radius); background: #F4F2F5; }
.pembaca-gambar { border-radius: var(--radius); border: 1px solid var(--garis); }
.pembaca-audio { width: 100%; }
.pembaca-video { width: 100%; border-radius: var(--radius); background: #000; }
.pesan-akses { padding: 32px; border-radius: var(--radius); background: var(--ungu-muda); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pesan-akses h2 { font-size: 20px; }
.pesan-akses p { color: var(--tinta-2); max-width: 60ch; }
.daftar-meta { margin: 0 0 20px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 15px; }
.daftar-meta dt { color: var(--redup); }
.daftar-meta dd { margin: 0; }
.daftar-meta dd.redup { grid-column: 1 / -1; }
.daftar-sumber { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; }
.daftar-sumber li { padding-left: 4px; }
.daftar-sumber li > * { margin-right: 8px; }
.bagian-sumber { border-top: 1px solid var(--garis); padding-top: 28px; }
.bagian-serupa { margin-top: 48px; border-top: 1px solid var(--garis); padding-top: 40px; }
.pemberitahuan { padding: 12px 16px; border-radius: 10px; background: var(--kuning-bg); color: var(--kuning); font-size: 15px; }

/* Alat kurator */
.pratinjau-sampul { max-width: 300px; width: 100%; height: auto; border: 1px solid var(--garis); border-radius: 6px; box-shadow: 0 8px 24px rgba(36, 31, 43, .08); }
.pratinjau-sampul:not([width]) { display: none; }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 12px; }
.kartu-buku .sampul { box-shadow: 0 1px 2px rgba(36, 31, 43, .06); }

/* Masuk */
.kotak-masuk { max-width: 420px; margin: 24px auto; display: flex; flex-direction: column; gap: 16px; }
.galat { color: #A3261D; font-size: 15px; }

/* Kaki */
.kaki { background: var(--tinta); color: #CFC8D4; font-size: 14px; }
.kaki strong { color: #fff; }
.kaki a { color: #fff; text-underline-offset: 3px; }
.kaki-isi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 32px; padding-bottom: 32px; }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .pahlawan-isi { padding-top: 48px; padding-bottom: 48px; gap: 32px; }
    .kartu-pilihan { padding: 24px; }
    .tumpukan-besar { padding-top: 56px; gap: 56px; }
    .saring { max-width: none; }
    .nav { width: 100%; }
}

/* Proses PDF */
.langkah-proses { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; color: var(--redup); }
.langkah-proses .berjalan { color: var(--ungu); font-weight: 600; }
.langkah-proses .selesai { color: var(--hijau); }
.langkah-proses .selesai::after { content: ' ✓'; }
.kemajuan { width: 100%; max-width: 480px; height: 8px; accent-color: var(--ungu); }

/* Pembaca PDF Pustaka */
.pdf { border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; background: #F1EEF2; }
.pdf:fullscreen { border-radius: 0; display: flex; flex-direction: column; }
.pdf-alat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--tinta); color: #fff; font-size: 14px; }
.pdf-grup { display: flex; align-items: center; gap: 4px; }
.pdf-info { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.pdf-temuan { background: rgba(247,235,207,.14); border-radius: 10px; padding: 0 2px; }
.pdf-temuan-info { min-width: 7.5em; color: #F7EBCF; }
.pdf-tombol { min-width: 40px; height: 36px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 18px; cursor: pointer; }
.pdf-tombol:hover { background: rgba(255,255,255,.22); }
.pdf-gulir { touch-action: manipulation; position: relative; height: 80vh; min-height: 480px; overflow: auto; padding: 16px; } /* relative: posisi halaman dihitung terhadap area gulir */
.pdf:fullscreen .pdf-gulir { height: auto; flex: 1; }
/* width max-content + min-width 100%: halaman yang diperbesar melebihi lebar tetap dapat digulir dari tepi kiri */
#pdf-halaman { display: flex; flex-direction: column; align-items: center; gap: 16px; width: max-content; min-width: 100%; }
.pdf-hal { background: #fff; box-shadow: 0 1px 3px rgba(36,31,43,.12); max-width: none; }
.pdf-hal canvas { display: block; }
.pdf-status { padding: 24px; color: var(--tinta-2); }

/* ── Ponsel ───────────────────────────────────────────── */
.menu-tombol { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ungu-garis); border-radius: 10px; background: #fff; color: var(--ungu); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.saring-lipat > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--redup); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.saring-lipat > summary::-webkit-details-marker { display: none; }
.saring-lipat > summary .lencana { text-transform: none; letter-spacing: 0; }

@media (max-width: 720px) {
    .kepala-isi { flex-wrap: wrap; }
    .ada-js .menu-tombol { display: inline-flex; }
    .ada-js .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; border-top: 1px solid var(--garis); }
    .ada-js .nav.terbuka { display: flex; max-height: calc(100dvh - var(--tinggi-kepala)); overflow-y: auto; overscroll-behavior: contain; }
    .ada-js .cari-kepala { order: 0; margin: 8px 0 4px; }
    .ada-js .cari-kepala input, .ada-js .cari-kepala input:focus { width: 100%; min-height: 48px; font-size: 16px; }
    .ada-js .nav-tautan { flex-direction: column; align-items: stretch; gap: 0; }
    .ada-js .nav-tautan > a { padding: 14px 12px; border-radius: 0; border-bottom: 1px solid var(--garis); }
    .ada-js .nav-tautan > a[aria-current="page"] { background: var(--ungu-muda); box-shadow: inset 3px 0 0 var(--ungu); }
    .ada-js .nav-tautan > a[aria-current="page"]::after { display: none; }
    .ada-js .nav > a.tombol { margin: 12px 0 4px; width: 100%; }
    /* Di ponsel menu akun tampil langsung di bawah tautan, tanpa tombol nama. */
    .ada-js .akun-tombol { display: none; }
    .ada-js .akun-menu { display: flex; position: static; min-width: 0; margin-top: 12px; padding: 4px 0 0; border: 0; border-radius: 0; box-shadow: none; }
    .ada-js .akun-info { padding: 4px 12px 12px; }
    .ada-js .akun-menu > a, .ada-js .akun-menu button { padding: 14px 12px; }

    .saring-lipat > summary { margin: 0; padding: 0 16px; min-height: 48px; border: 1px solid var(--ungu-garis); border-radius: 12px; background: #fff; color: var(--ungu); text-transform: none; letter-spacing: 0; font-size: 15px; justify-content: space-between; }
    .saring-lipat > summary::after { content: '▾'; font-size: 14px; }
    .saring-lipat[open] > summary { margin-bottom: 16px; }
    .saring-lipat[open] > summary::after { content: '▴'; }
    .tata-samping { gap: 24px; }

    .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .kisi-4 .sampul { padding: 12px; }
    .kisi-4 .sampul-teks { font-size: 14px; }
    .kisi-4 .kartu-buku-judul { font-size: 15px; }

    .tab { flex-wrap: nowrap; overflow-x: auto; margin-left: -24px; margin-right: -24px; padding: 2px 24px 6px; scrollbar-width: none; }
    .tab a { flex: none; }

    .pembuka { font-size: 17px; }
    .prosa { font-size: 17px; }
    .pdf-gulir { padding: 8px; height: 75vh; min-height: 420px; }
    #pdf-halaman { gap: 8px; }
    .pdf-tombol { min-width: 44px; height: 40px; }
    .judul-bagian { font-size: 24px; }
}
@media (max-width: 720px) {
    .kepala-isi { flex-wrap: wrap; row-gap: 0; }
    .merek { min-width: 0; flex: 1 1 auto; }
    .merek-teks { min-width: 0; }
    .merek-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .menu-tombol { flex: none; }
}
@media (max-width: 480px) {
    .menu-teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .menu-tombol { width: 44px; padding: 0; justify-content: center; }
}

/* Cuplikan hasil pencarian dan penunjuk halaman */
.cuplikan { color: var(--tinta-2); max-width: 70ch; font-family: var(--serif); font-size: 17px; line-height: 1.6; }
.cuplikan mark, .temuan mark { background: var(--kuning-bg); color: var(--tinta); padding: 0 2px; border-radius: 3px; font-weight: 600; }
.baris-hasil-kaki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tautan-halaman { font-size: 15px; font-weight: 600; color: var(--ungu); }
.tautan-semua { color: var(--redup); display: inline-block; padding-block: 4px; } /* area sentuh ≥ 24px di ponsel */
.tautan-semua:hover { color: var(--ungu); }
.temuan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 12px 14px; background: var(--kuning-bg); color: var(--kuning); border-radius: 10px; font-size: 15px; }
.temuan span { margin-right: 4px; }
.temuan-kurator { justify-content: space-between; gap: 10px 16px; }
.temuan-kurator .tombol { flex: none; }
.temuan-hal { min-width: 36px; min-height: 32px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 8px; background: #fff; color: var(--kuning); font-weight: 700; text-decoration: none; }
.temuan-hal:hover, .temuan-hal[aria-current] { background: var(--kuning); color: #fff; }
.jangkar-baca { display: block; scroll-margin-top: calc(var(--tinggi-kepala) + 16px); }

/* Petunjuk ketuk dua kali: hanya di perangkat sentuh */
.pdf-petunjuk { display: none; margin: 8px 0 0; }
@media (hover: none) and (pointer: coarse) { .pdf-petunjuk { display: block; } }

/* Rak koleksi lain: di ponsel menjadi satu baris yang digeser ke samping */
@media (max-width: 720px) {
    .rak { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
           margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; padding-bottom: 8px; /* selebar layar, mengikuti tepi .wadah */
           scrollbar-width: thin; }
    .rak > * { flex: 0 0 min(44%, 190px); scroll-snap-align: start; }
}

/* Halaman Koleksi: saringan ikut terlihat saat daftar digulir (laptop) */
@media (min-width: 721px) {
    .saring { position: sticky; top: calc(var(--tinggi-kepala) + 24px); }
}
@media (max-width: 720px) {
    .baris-hasil { gap: 16px; padding: 22px 0; }
    .baris-sampul { width: 60px; padding: 6px; }
    .baris-sampul-jenis { font-size: 8px; letter-spacing: .06em; }
    .baris-sampul-tahun { font-size: 14px; }
    .baris-hasil-judul { font-size: 19px; }
    .baris-isi > p.deskripsi { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── Kirim Profil Jemaat ─────────────────────────────── */
.kotak-kirim { max-width: 560px; }
.pesan { padding: 14px 16px; border-radius: 12px; background: var(--hijau-bg); color: var(--hijau); font-size: 15px; }
.pesan ul { margin: 6px 0 0; padding-left: 1.2em; }
.pesan-galat { background: #FBE9E7; color: #A3261D; }
.kirim { gap: 28px; }
.kirim-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.kirim-siapa { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--redup); }
.kirim-bagian { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--garis); border-radius: var(--radius); background: #fff; }
.kirim-bagian h2 { font-size: 20px; font-weight: 700; }
.kirim-bagian fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.kirim-bagian legend { font-size: 15px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.kirim-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; align-items: end; }
.kirim-lebar { grid-column: 1 / -1; }
.medan textarea { padding: 10px 12px; border: 1px solid var(--ungu-garis); border-radius: 10px; font: inherit; font-size: 16px; font-weight: 400; color: var(--tinta); resize: vertical; }
.medan textarea:focus { outline: none; border-color: var(--ungu); box-shadow: 0 0 0 3px #EBDDEA; }
.medan input[type=file] { height: auto; padding: 10px; }
.peta { height: 340px; border-radius: 12px; border: 1px solid var(--garis); z-index: 0; }
.kirim-titik { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-top: 12px; }
.kirim-titik .medan { width: 170px; }
.centang-panjang { align-items: flex-start; font-size: 14px; color: var(--tinta-2); }
.centang-panjang input { flex: none; margin-top: 2px; }
.kemajuan-unggah:empty { display: none; }
.daftar-cek { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.daftar-cek li { padding: 6px 12px; border-radius: 999px; background: var(--ungu-muda); color: var(--redup); font-size: 14px; font-weight: 600; }
.daftar-cek li.ada { background: var(--hijau-bg); color: var(--hijau); }
.kisi-kiriman { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.kisi-kiriman li { display: flex; flex-direction: column; gap: 8px; }
.kisi-kiriman img, .kiriman-pdf { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--ungu-muda); }
.kiriman-pdf { display: grid; place-items: center; font-weight: 800; color: var(--ungu); text-decoration: none; }
.kiriman-ket { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; }
.lencana-status-tampil, .lencana-status-disetujui { background: var(--hijau-bg); color: var(--hijau); }
.lencana-status-menunggu { background: var(--kuning-bg); color: var(--kuning); }
.lencana-status-ditolak, .lencana-status-disembunyikan { background: #FBE9E7; color: #A3261D; }
.tautan-tombol { padding: 4px 0; border: 0; background: none; color: var(--redup); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.tautan-tombol:hover { color: #A3261D; }
.daftar-utusan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.daftar-utusan li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--garis); }
.kirim-undangan { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kirim-undangan input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--ungu-garis); border-radius: 8px; font: inherit; font-size: 14px; color: var(--tinta); }
@media (max-width: 720px) {
    .kirim-bagian { padding: 18px 16px; }
    .peta { height: 280px; }
    .kirim-titik .medan { width: calc(50% - 8px); }
}