/* ═══ Dipakai bersama seluruh bentuk tampilan ═════════════════════════════
   Hanya bergantung pada token warna (--biru, --bg-card, --line, --text, …),
   jadi tiap bentuk cukup mendefinisikan tokennya sendiri. Dimuat SEBELUM
   berkas bentuk, supaya penyesuaian khas bentuk tetap menang. */

.galeri{display:flex;flex-wrap:wrap;gap:6px}
.galeri.tersusun{flex-wrap:nowrap;flex-direction:column}
.baris-galeri{display:flex;gap:6px}
.sel{position:relative;overflow:hidden;border-radius:8px;background:var(--surface);cursor:zoom-in;display:block;
  flex:1 1 240px;height:200px}
.sel img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.sel:hover img{transform:scale(1.035)}
.sel .no,.sel .res{position:absolute;background:rgba(8,14,20,.62);backdrop-filter:blur(6px);color:#fff;
  font-weight:600;padding:3px 7px;border-radius:5px;opacity:0;transition:opacity .18s}
.sel .no{top:8px;left:8px;font-size:10.5px}
.sel .res{bottom:8px;right:8px;font-size:10px;font-weight:500}
.sel:hover .no,.sel:hover .res,.sel:focus-visible .no,.sel:focus-visible .res{opacity:1}

.penampil{position:fixed;inset:0;z-index:200;background:rgba(6,10,14,.96);display:none;flex-direction:column}
.penampil.buka{display:flex}
.penampil-atas{display:flex;align-items:center;gap:16px;padding:14px 20px;color:rgba(255,255,255,.75);font-size:13px;flex-shrink:0}
.penampil-atas .hitung{font-weight:600;color:#fff}
.penampil-atas .jdl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.6)}
.penampil-atas a,.penampil-atas button{background:rgba(255,255,255,.1);border:0;color:rgba(255,255,255,.8);cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:8px;
  display:inline-flex;align-items:center;gap:8px;transition:.16s}
.penampil-atas a:hover,.penampil-atas button:hover{background:var(--biru);color:#fff}
.penampil-panggung{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:0 20px;min-height:0}
.penampil-panggung img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
/* Panggung foto: dua lapis yang menempati kotak yang sama persis.
   Keduanya object-fit:contain di kotak identik, dan rasio thumbnail sama
   dengan gambar penuhnya, jadi persegi hasilnya juga sama — pratayang tidak
   bergeser saat digantikan. */
.panggung-gbr{flex:1;position:relative;min-width:0;height:100%}
.panggung-gbr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:6px}
.panggung-gbr .pratayang{filter:blur(16px);transform:scale(1.03);opacity:0;transition:opacity .2s ease}
.penampil-panggung.memuat .pratayang{opacity:1}
.panggung-gbr .utama{opacity:0;transition:opacity .3s ease}
.panggung-gbr .utama.siap{opacity:1}
/* Bilah tak-tentu, memakai animasi `lintas` yang sama dengan bilah navigasi
   supaya bahasa visualnya satu. SENGAJA tidak berpersentase: ~93% waktu
   tunggu habis di render server sebelum satu byte pun terkirim, jadi angka
   persen akan diam di 0 lalu melompat ke 100 — terbaca sebagai macet. */
.bilah-penampil{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;
  pointer-events:none;background:transparent}
.bilah-penampil::after{content:'';position:absolute;inset:0;width:40%;border-radius:2px;
  background:var(--biru);transform:translateX(-100%);opacity:0;transition:opacity .2s}
.penampil-panggung.memuat .bilah-penampil::after{opacity:1;animation:lintas 1.1s cubic-bezier(.4,0,.2,1) infinite}
@media (prefers-reduced-motion: reduce){
  .panggung-gbr .pratayang,.panggung-gbr .utama{transition:none}
  .penampil-panggung.memuat .bilah-penampil::after{animation:none;opacity:.5;width:100%;transform:none}
}
.penampil-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;font-size:15px;transition:.16s}
.penampil-nav:hover{background:var(--biru)}
.penampil-nav.kiri{left:16px}.penampil-nav.kanan{right:16px}
.penampil-film{display:flex;gap:6px;padding:14px 20px;overflow-x:auto;flex-shrink:0;scrollbar-width:thin}
.penampil-film img{width:76px;height:52px;object-fit:cover;border-radius:6px;opacity:.4;cursor:pointer;
  outline:2px solid transparent;transition:opacity .18s,outline-color .18s}
.penampil-film img:hover{opacity:.75}
.penampil-film img.on{opacity:1;outline-color:var(--biru)}

.terkait{margin-top:56px;padding-top:30px;border-top:1px solid var(--line)}
.terkait h2{font-size:17px;font-weight:800;letter-spacing:-0.02em;margin:0 0 4px}
.terkait .ket-h{font-size:12.5px;color:var(--text-3);margin-bottom:18px}
.terkait .kisi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.terkait a{display:block;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.22s}
.terkait a:hover{transform:translateY(-3px);box-shadow:0 14px 30px -22px rgba(16,26,34,.5);border-color:var(--biru)}
.terkait img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--surface)}
.terkait .isi{padding:12px 14px 15px}
.terkait .tg{font-size:11px;color:var(--text-3);margin-bottom:6px}
.terkait h3{font-size:13.5px;font-weight:700;line-height:1.38;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Transisi perpindahan halaman ─────────────────────────────────────── */
/* Bilah tipis di puncak layar: satu-satunya penanda global bahwa ada
   permintaan berjalan. Lebih tenang daripada memburamkan seluruh halaman. */
.bilah-muat{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none;
  background:transparent;overflow:hidden}
.bilah-muat::after{content:'';position:absolute;inset:0;width:40%;border-radius:2px;
  background:var(--biru);transform:translateX(-100%);opacity:0;transition:opacity .2s}
.bilah-muat.jalan::after{opacity:1;animation:lintas 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes lintas{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* Rangka kartu — bentuknya mengikuti kartu asli supaya isinya tidak melompat
   saat datang. */
.rangka{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  padding-bottom:18px}
.rangka .b{background:linear-gradient(90deg,var(--surface) 25%,var(--line-soft) 37%,var(--surface) 63%);
  background-size:400% 100%;animation:kilau 1.4s ease infinite}
@keyframes kilau{0%{background-position:100% 0}100%{background-position:0 0}}
.rangka .r-gbr{aspect-ratio:3/2}
.rangka .r-teks{height:11px;border-radius:4px;margin:14px 16px 0}
.rangka .r-teks.w45{width:45%}
.rangka .r-teks.w90{width:90%}
.rangka .r-teks.w70{width:70%}
.hasil.daftar .rangka{display:grid;grid-template-columns:62px 150px minmax(0,1fr);gap:18px;
  padding:14px 18px;border-radius:0;border:0;border-bottom:1px solid var(--line-soft)}
.hasil.daftar .rangka .r-gbr{border-radius:8px}

/* Kartu masuk dengan tenang; hanya beberapa yang pertama diberi jeda supaya
   daftar panjang tidak terasa merayap. */
@keyframes naik{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.k,.kartu{animation:naik .34s cubic-bezier(.2,.7,.3,1) both}
.k:nth-child(2),.kartu:nth-child(2){animation-delay:.03s} .k:nth-child(3),.kartu:nth-child(3){animation-delay:.06s}
.k:nth-child(4),.kartu:nth-child(4){animation-delay:.09s} .k:nth-child(5),.kartu:nth-child(5){animation-delay:.12s}
.k:nth-child(6),.kartu:nth-child(6){animation-delay:.15s} .k:nth-child(7),.kartu:nth-child(7){animation-delay:.18s}
.k:nth-child(8),.kartu:nth-child(8){animation-delay:.21s} .k:nth-child(9),.kartu:nth-child(9){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .k,.kartu{animation:none}
  .bilah-muat.jalan::after{animation:none;transform:none;width:100%;opacity:.5}
  .rangka .b{animation:none}
}

@media (max-width:900px){ .terkait .kisi{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .terkait .kisi{grid-template-columns:1fr} .penampil-atas .jdl{display:none} }

/* ── Halaman detail "Lembar Berkas" — sama untuk semua bentuk ────────── */
.remah{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-3);padding:20px 0 14px;flex-wrap:wrap}
.remah a{font-weight:600;color:var(--text-2)}
.remah a:hover{color:var(--biru)}
.badan{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:38px;align-items:start;padding-bottom:10px}
.unit-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--biru)}
h1.judul{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-0.028em;line-height:1.16;margin:10px 0 14px;text-wrap:balance}
/* Rata kanan-kiri seperti tema lama: teks rilis BNN penuh nama jabatan dan
   gelar panjang, jadi rata kiri meninggalkan tepi kanan yang sangat bergerigi
   dan baris terakhir tiap paragraf kerap menyisakan satu kata. */
.narasi{font-size:15.5px;line-height:1.8;color:var(--text-2);max-width:80ch;
  text-align:justify;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
.narasi p{margin:0 0 16px}
.narasi p:last-child{margin-bottom:0}

.panel{position:sticky;top:82px;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.panel .kop{padding:14px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}
.panel .kop h2{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--text-3);margin:0}
.panel .kop .n{margin-left:auto;font-size:11.5px;color:var(--biru);font-weight:700}
.panel .aksi{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.panel .aksi a,.panel .aksi button{flex:1;justify-content:center;font-family:inherit;font-size:12.5px;font-weight:700;
  padding:10px;border-radius:9px;border:1px solid var(--line);background:var(--bg-card);color:var(--text-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.16s;min-width:0}
.panel .aksi a:hover,.panel .aksi button:hover{border-color:var(--biru);color:var(--biru)}
.panel .aksi span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel dl{margin:0}
.panel dl>div{padding:12px 16px;border-bottom:1px solid var(--line-soft);display:grid;
  grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.panel dl>div:last-child{border-bottom:0}
.panel dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--text-3);margin:0}
.panel dd{font-size:12.8px;font-weight:600;line-height:1.45;word-break:break-word;margin:0}
.panel dd small{display:block;font-weight:500;color:var(--text-3);font-size:11px;margin-top:3px}
.panel .kaki{padding:13px 16px;background:var(--surface);font-size:11.5px;color:var(--text-3);line-height:1.55}
.panel .kaki i{color:var(--biru);margin-right:6px}

.judul-galeri{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px;flex-wrap:wrap}
.judul-galeri h2{font-size:15px;font-weight:800;letter-spacing:-0.02em;margin:0}
.judul-galeri span{font-size:12px;color:var(--text-3)}
.judul-galeri .petunjuk{margin-left:auto;font-size:11.5px;color:var(--text-3)}

@media (max-width:1000px){ .badan{grid-template-columns:1fr;gap:26px} .panel{position:static} }

@media (max-width:620px){
  /* Pencarian mobile, dipakai KETIGA bentuk. Seluruh selektor di sini nama
     kelas BARU dan hanya hidup di lebar ini; tidak ada satu pun aturan yang
     menyentuh selektor header yang sudah ada, jadi tampilan lebar tidak
     mungkin ikut berubah. Elemennya dibuat bersama.js, juga hanya di lebar
     ini. Variabel warnanya (--bg-card dst.) didefinisikan tiap tema. */
  .cari-ikon{height:36px;width:38px;padding:0;border-radius:9px;border:0;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface);color:var(--text-2);font-size:14px;
    transition:color .16s,background .16s}
  .cari-ikon:hover{color:var(--biru);background:var(--biru-wash)}
  /* Tirai berhenti DI BAWAH header: z-index 59 menaruhnya di belakang .kepala
     (z-60), jadi headernya tetap terang sementara sisa layar diredupkan. */
  .cari-tirai{position:fixed;inset:0;z-index:59;background:rgba(8,14,20,.5);
    opacity:0;visibility:hidden;transition:opacity .2s}
  .cari-tirai.buka{opacity:1;visibility:visible}
  .cari-panel{position:fixed;left:12px;right:12px;z-index:61;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease,transform .2s ease}
  .cari-panel.buka{opacity:1;visibility:visible;transform:none}
  .cari-panel-isi{position:relative;display:flex;align-items:center;
    background:var(--bg-card);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 12px 34px rgba(8,14,20,.3)}
  .cari-panel-isi>i{position:absolute;left:14px;color:var(--text-3);font-size:13px}
  .cari-panel-isi input{flex:1;min-width:0;font-family:inherit;font-size:15px;font-weight:500;
    padding:13px 44px 13px 38px;border:0;border-radius:12px;background:transparent;
    color:var(--text);outline:0}
  .cari-tutup{position:absolute;right:7px;width:30px;height:30px;border:0;border-radius:8px;
    background:transparent;color:var(--text-3);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center}
  .cari-tutup:hover{background:var(--surface);color:var(--text)}
}