/* =====================================================================
 * gallery-zoom.css — GALERİ MASONRY + ZOOM LIGHTBOX
 * ---------------------------------------------------------------------
 * Tek sayfa içi modern müze galerisi:
 *   - Sütunlar arası dengeli masonry
 *   - Hover'da yumuşak yükselme + meta açılması
 *   - Tıklamayla açılan zoom: pinch desteği, drag, scroll ile zoom
 * ===================================================================== */

/* Masonry: sütunlar arası yatay boşluk ile */
.be-masonry {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48em) {
  .be-masonry { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
@media (min-width: 64em) {
  .be-masonry { grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
}

.be-masonry__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--canvas-alt);
  border: 1px solid var(--line-soft);
  display: block;
  cursor: zoom-in;
  transition: transform var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-standard);
}
.be-masonry__item:hover {
  border-color: var(--line);
  transform: translateY(-2px);
}
.be-masonry__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out-soft);
}
.be-masonry__item:hover img { transform: scale(1.03); }

/* Filtre toolbar */
.be-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-5);
  margin-bottom: var(--space-7);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.be-filter-bar__label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-right: var(--space-3);
}

.be-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 1em;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-secondary);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.be-filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.be-filter-chip.is-active {
  background: var(--ink);
  color: var(--ink-inverse);
  border-color: var(--ink);
}

/* Galeri arama */
.be-gallery-search {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  margin-left: auto;
}
.be-gallery-search__input {
  width: 100%;
  padding: 0.5em 0.9em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.be-gallery-search__input:focus {
  outline: none;
  border-color: var(--gold);
}

/* Hover meta */
.be-masonry__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(20, 20, 19, 0.75), rgba(20, 20, 19, 0));
  color: var(--ink-inverse);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-out-soft);
}
.be-masonry__item:hover .be-masonry__meta,
.be-masonry__item:focus-visible .be-masonry__meta {
  opacity: 1;
  transform: translateY(0);
}
.be-masonry__meta__title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  margin-bottom: 0;
}
.be-masonry__meta__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--gold-soft);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition:
    max-height var(--dur-medium) var(--ease-out-soft) 60ms,
    opacity var(--dur-base) var(--ease-standard) 80ms,
    margin-top var(--dur-medium) var(--ease-out-soft) 60ms;
}
.be-masonry__item:hover .be-masonry__meta__sub {
  max-height: 2em;
  opacity: 1;
  margin-top: 4px;
}

/* ZOOM LIGHTBOX — drag + scroll zoom + pinch */
.be-lightbox--zoom {
  cursor: zoom-in;
}
.be-lightbox__stage {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark-1);
  border-radius: var(--radius-sm);
  touch-action: none; /* pinch için kritik */
}
.be-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform var(--dur-fast) var(--ease-standard);
  will-change: transform;
}
.be-lightbox--zoom.is-zoomed .be-lightbox__img { cursor: grab; }
.be-lightbox--zoom.is-zoomed.is-dragging .be-lightbox__img { cursor: grabbing; }

.be-lightbox__controls {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(20, 20, 19, 0.7);
  border-radius: var(--radius-pill);
  z-index: 3;
  pointer-events: auto;
}
.be-lightbox__controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--ink-inverse);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.be-lightbox__controls button:hover { background: rgba(180, 155, 115, 0.4); }
.be-lightbox__controls button svg { width: 16px; height: 16px; }
.be-lightbox__controls .be-lightbox__zoom-level {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-inverse);
  min-width: 48px;
  text-align: center;
}

/* Yardım: zoomable olduğunu belli etmek için cursor zoom-in (mavi-gri tarayıcı) */