/* ═══════════════════════════════════════════════════════════
   LIGHTBOX — viewer foto artikel (dipakai index & read)
   Tema terang/gelap mengikuti tokens.css
   ═══════════════════════════════════════════════════════════ */
.lb-overlay {
  position: fixed; inset: 0; z-index: 10000; /* di atas .site-progress (9999) */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lb-overlay.open { opacity: 1; visibility: visible; }

/* Backdrop SELALU gelap — biar tombol/kontrol tetap terlihat di tema terang */
.lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 7, 12, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lb-toolbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem;
}
.lb-counter {
  color: #fff; font-size: .82rem; font-weight: 600; opacity: .75;
  letter-spacing: .3px;
}
.lb-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff; font-size: 1rem; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  flex-shrink: 0;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.24); transform: scale(1.08); }
.lb-close { font-size: 1.15rem; }

.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lb-prev { left: .9rem; }
.lb-next { right: .9rem; }
.lb-nav.hidden { display: none; }

.lb-figure {
  position: relative; z-index: 1;
  max-width: 92vw; max-height: 86vh;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lb-stage {
  position: relative;
  max-width: 92vw; max-height: 84vh;
  display: flex; align-items: center; justify-content: center;
}
.lb-loader {
  position: absolute; inset: 0; z-index: 1;
  display: none; align-items: center; justify-content: center;
}
.lb-loader .spinner { margin: 0; }

.lb-img {
  display: block;
  max-width: 92vw; max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
  user-select: none; -webkit-user-drag: none;
  touch-action: none;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.lb-img.zoomed { cursor: grab; }
.lb-img.dragging { cursor: grabbing; transition: none; }

.lb-caption {
  margin-top: .8rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: .84rem; text-align: center;
  max-width: 90vw;
  line-height: 1.5;
}

/* Mobile: tombol navigasi lebih kecil & merapat ke tepi */
@media (max-width: 767px) {
  .lb-btn { width: 34px; height: 34px; font-size: .9rem; }
  .lb-prev { left: .5rem; }
  .lb-next { right: .5rem; }
}