/* =============================================================================
   assets/css/ui-lampiran.css
   [PATCH84] Gaya penampil lampiran bersama. Lihat assets/js/ui-lampiran.js.
   ============================================================================= */

/* ── Tombol geser ─────────────────────────────────────────────────────────────
   MELAYANG di atas isi, bukan mendorongnya turun. Tombol yang mendorong isi
   membuat gambar melompat setiap kali jumlah lampirannya berbeda. */
.pl-tombol {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; border: 0; width: 40px; height: 56px;
    background: rgba(0, 0, 0, .42); color: #fff;
    font-size: 20px; line-height: 1; border-radius: 4px;
    cursor: pointer; opacity: .75; transition: opacity .15s;
}
.pl-tombol:hover { opacity: 1; }
.pl-tombol:focus { outline: 2px solid #80bdff; opacity: 1; }
.pl-prev { left: 6px; }
.pl-next { right: 6px; }

/* ── Isi ──────────────────────────────────────────────────────────────────── */
.pl-gambar { max-height: 68vh; }
.pl-pdf    { width: 100%; height: 68vh; border: none; }

/* ── Titik penunjuk posisi ────────────────────────────────────────────────────
   Area sentuhnya diperluas lewat box-shadow transparan: titik 9px terlalu kecil
   untuk jari, dan halaman ini juga dibuka dari ponsel. */
.pl-dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid #adb5bd; background: #fff; padding: 0;
    margin: 0 4px; box-shadow: 0 0 0 6px transparent;
}
.pl-dot.aktif { background: #007bff; border-color: #007bff; }
.pl-dot:focus { outline: 2px solid #80bdff; }

/* ── Pemicu: gambar kecil yang bisa diklik ────────────────────────────────────
   Dipakai modul Pengajuan. `zoom-in` adalah satu-satunya petunjuk bahwa gambar
   kecil itu bisa dibuka besar — tanpa itu orang mengira ia hanya hiasan. */
.pl-pemicu { cursor: zoom-in; }