/*
 * Pop-up pratinjau berkas Drive.
 *
 * Warnanya tidak diambil dari variabel tema mana pun: berkas ini dipakai
 * dashboard admin, dashboard klien, dan halaman publik sekaligus, dan
 * ketiganya punya nama variabel yang berbeda-beda. Latar gelap pekat juga
 * memang yang benar untuk melihat foto - apa pun tema halamannya.
 */

.pv{position:fixed;inset:0;z-index:900;display:flex;align-items:center;
  justify-content:center;padding:26px}
.pv[hidden]{display:none !important}
body.pv-terkunci{overflow:hidden}

.pv-bg{position:absolute;inset:0;background:rgba(16,13,11,.92);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

.pv-kotak{position:relative;width:min(1180px,100%);height:min(88vh,900px);
  display:flex;flex-direction:column;background:#141110;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}

.pv-atas{display:flex;align-items:center;gap:16px;padding:12px 14px 12px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);flex:none}
.pv-judul{flex:1;min-width:0;color:#f2ece4;font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-hitung{flex:none;color:#8d827a;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}
.pv-luar{flex:none;color:#c8a165;text-decoration:none;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pv-luar:hover{color:#e0c191}

.pv-x{flex:none;width:32px;height:32px;line-height:1;font-size:1.4rem;
  background:transparent;border:0;color:#8d827a;cursor:pointer;border-radius:8px}
.pv-x:hover{color:#f2ece4;background:rgba(255,255,255,.08)}

.pv-panggung{position:relative;flex:1;min-height:0;background:#0c0a09}
.pv-bingkai{width:100%;height:100%;border:0;display:block}

.pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:60px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(20,17,16,.72);border:1px solid rgba(255,255,255,.14);
  color:#f2ece4;border-radius:10px}
.pv-nav:hover{background:rgba(20,17,16,.95)}
.pv-nav[hidden]{display:none !important}
.pv-prev{left:12px}
.pv-next{right:12px}

/* Menandai tanpa menutup pop-up: seleksi berpuluh foto jadi satu alur */
.pv-tandai{flex:none;display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:7px 13px;border-radius:8px;border:1px solid rgba(255,255,255,.16);
  color:#e8e0d6;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;user-select:none}
.pv-tandai:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)}
.pv-tandai[hidden]{display:none !important}
.pv-tandai input{width:16px;height:16px;margin:0;accent-color:#c8a165;cursor:pointer}
.pv-tandai:has(input:checked){border-color:#c8a165;color:#e0c191}

@media (max-width:640px){
  .pv{padding:0}
  .pv-kotak{width:100%;height:100%;border-radius:0;border:0}
  .pv-luar{display:none}
  .pv-nav{width:38px;height:52px}
  .pv-tandai span{display:none}
  .pv-tandai{padding:7px 9px}
}