/* ═══════════════════════════════════════════════════════════
   Herta — proje galerisi lightbox'ı
   Tam ekran siyah katman, ortada tek görsel. Kare köşe, gölge
   yok, süs yok: sayfanın dilini bozmadan görseli büyütür.
   Kapsam: yalnız [data-lightbox] taşıyan bölümler.
   Katmanlama: .lb 185 → header (150) ve grain (100) üstünde,
   sayfa geçişi (190), preloader (200) ve imleç (210) altında.
   ═══════════════════════════════════════════════════════════ */

/* ── Tetikleyici görseller ─────────────────────────────────── */
[data-lightbox] img { cursor: zoom-in; }
[data-lightbox] img:focus-visible {
  outline: 1px solid var(--ink, #000);
  outline-offset: 4px;
}

/* ── Katman ────────────────────────────────────────────────── */
.lb {
  position: fixed;
  inset: 0;
  z-index: 185;
  font-family: var(--font-body, "Inter", Helvetica, Arial, sans-serif);
  color: #fff;
}
.lb[hidden] { display: none !important; }

.lb__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  cursor: zoom-out;
  transition: opacity 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lb.is-open .lb__scrim { opacity: 1; }

/* ── Sahne: FLIP burada çalışır ────────────────────────────── */
/* konum ve ölçü JS'ten (px) gelir; transform-origin sol-üst,
   çünkü ölçüm de sol-üstten yapılır. */
.lb__stage {
  position: fixed;
  margin: 0;
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
/* ters (invert) kareyi yazarken geçiş kapalı olmalı */
.lb.is-static .lb__stage,
.lb.is-static .lb__img { transition: none !important; }

.lb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Arayüz: ok alanları, kapat, sayaç ─────────────────────── */
.lb__ui {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.15s;
}
.lb.is-open .lb__ui { opacity: 1; }
.lb__ui[hidden] { display: none !important; }

.lb__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(72px, 14vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  cursor: pointer;
}
.lb__nav--prev { left: 0; }
.lb__nav--next { right: 0; }

/* ok: iki çizgiden bir çengel — ikon dosyası yok */
.lb__nav::before {
  content: "";
  width: clamp(10px, 0.85vw, 14px);
  height: clamp(10px, 0.85vw, 14px);
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.55;
  transition: opacity 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.45s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lb__nav--prev::before { transform: rotate(45deg); }
.lb__nav--next::before { transform: rotate(-135deg); }
.lb__nav--prev:hover::before { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }
.lb__nav--next:hover::before { opacity: 1; transform: rotate(-135deg) translate(2px, -2px); }

.lb__close {
  position: absolute;
  top: clamp(12px, 2.2vh, 26px);
  right: clamp(12px, 2vw, 28px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  cursor: pointer;
}
.lb__x {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  opacity: 0.7;
  transition: opacity 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lb__close:hover .lb__x { opacity: 1; }
.lb__x::before,
.lb__x::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.lb__x::before { transform: rotate(45deg); }
.lb__x::after { transform: rotate(-45deg); }

.lb__count {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vh, 34px);
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--w-mute, rgba(255, 255, 255, 0.78));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.lb__nav:focus-visible,
.lb__close:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.85);
  outline-offset: -6px;
}
.lb:focus { outline: none; }

/* ── Küçük ekran ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .lb__nav { width: clamp(56px, 22vw, 96px); }
  .lb__close { top: 8px; right: 8px; }
}

/* ── Hareket azaltma: geçişler anında ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lb__scrim,
  .lb__stage,
  .lb__img,
  .lb__ui,
  .lb__nav::before,
  .lb__x { transition: none !important; }
}