/* ==========================================================================
   GALERI SAYFASI (/galeri)
   site.css'ten SONRA yuklenir. Ciplak HEX yasak - sadece var(--token).
   Mobile-first. JS yoksa (html.no-js) filtre gizlenir, detaylar alt alta acilir.
   ========================================================================== */

.gallery-head { margin-block-end: var(--sp-6); }
.gallery-head h2 { margin-block-end: var(--sp-1); }

/* --------------------------------------------------------------------------
   Filtre cipleri
   -------------------------------------------------------------------------- */
.gallery-filter {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
}
.gallery-filter__chip {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-5);
  border-radius: var(--r-pill);
  border: var(--bw-base) solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--ink-strong);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  transition: var(--t-color);
}
@media (hover: hover) {
  .gallery-filter__chip:hover { border-color: var(--fill-primary); color: var(--ink-purple); }
}
.gallery-filter__chip[aria-pressed="true"] {
  background: var(--fill-primary);
  border-color: var(--fill-primary);
  color: var(--ink-inverse);
}
/* JS yoksa filtre calismaz - hic gosterme */
html.no-js .gallery-filter { display: none; }

/* --------------------------------------------------------------------------
   Album gridi
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

.gallery-grid__item[hidden] { display: none; }

/* Kart: kapak kenardan kenara - site.css .card dolgusu sifirlanir */
.album-card { padding: 0; overflow: hidden; }
@media (min-width: 768px) { .album-card { padding: 0; } }

.album-card__cover { position: relative; aspect-ratio: 4 / 3; background: var(--bg-surface-2); }
.album-card__cover svg,
.album-card__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.album-card__badge { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); }

.album-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.album-card__title { font-size: var(--fs-h5); margin-block-end: var(--sp-1); }
.album-card__title a { color: inherit; text-decoration: none; }

.gallery-empty { margin-block-start: var(--sp-6); }
.gallery-empty[hidden] { display: none; }

/* Kategori rozetleri (etkinlikler sayfasiyla ayni desen) */
.cat-badge--pink { background: var(--soft-pink); color: var(--ink-pink); }
.cat-badge--purple { background: var(--soft-purple); color: var(--ink-purple); }
.cat-badge--yellow { background: var(--soft-yellow); color: var(--ink-yellow); }
.cat-badge--green { background: var(--soft-green); color: var(--ink-green); }
.cat-badge--blue { background: var(--soft-blue); color: var(--ink-blue); }
.cat-badge--orange { background: var(--soft-orange); color: var(--ink-orange); }

/* --------------------------------------------------------------------------
   Album detayi (ayni sayfa)
   -------------------------------------------------------------------------- */
.album-detail[hidden] { display: none; }
/* JS yoksa: detaylar grid'in altinda normal akista gorunur (caplar calisir) */
html.no-js .album-detail[hidden] { display: block; }
html.no-js .album-detail__back { display: none; }

.album-detail__back { margin-block-end: var(--sp-4); }
.album-detail__head { margin-block-end: var(--sp-6); }
.album-detail__head h2 { margin-block: var(--sp-2); }
.album-detail__desc { max-width: var(--measure); margin-block-end: var(--sp-1); }

.album-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 768px) { .album-items { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.album-item {
  display: block; inline-size: 100%;
  text-align: start;
  border-radius: var(--r-lg);
}
.album-item__art {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: var(--t-move), var(--t-shadow);
}
.album-item__art svg { inline-size: 100%; block-size: 100%; }
@media (hover: hover) {
  .album-item:hover .album-item__art { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
.album-item__caption {
  display: block;
  padding: var(--sp-2) var(--sp-1) 0;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Lightbox (<dialog>)
   -------------------------------------------------------------------------- */
/* Sahnenin en fazla kaplayabilecegi yukseklik. Alt bilgi (baslik + sayac)
   ve pencere kenar boslugu icin yer birakir. */
:root { --lb-stage-max: min(72dvh, 760px); }

.lightbox {
  border: none; padding: 0;
  background: transparent;
  /* site.css'teki `* { margin: 0 }` <dialog>'un varsayilan margin:auto'sunu
     eziyordu -> pencere sol ustte aciliyordu. */
  margin: auto;
  /* Kutu FOTOGRAFA OTURUR: sabit genislikte, yatay bir fotografin iki yaninda
     genis beyaz bantlar kaliyordu. */
  inline-size: fit-content;
  min-inline-size: min(320px, 100vw - 2 * var(--sp-4));
  max-inline-size: min(1040px, 100vw - 2 * var(--sp-4));
  max-block-size: calc(100dvh - 2 * var(--sp-4));
  /* KAYDIRMA CUBUKLARI: kapatma ve ileri/geri dugmeleri kutunun DISINA
     konumlaniyor (negatif inset). <dialog> varsayilan olarak overflow:auto
     oldugu icin bu tasma yatay+dikey kaydirma cubugu uretiyor, pencere
     bozuk gorunuyordu. Icerik yuksekligi asagida sinirlandigi icin gorunur
     birakmak guvenli. */
  overflow: visible;
}
.lightbox::backdrop { background: var(--bg-overlay); }

.lightbox__inner { position: relative; }

.lightbox__figure {
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

/* Sahne fotografa GORE buyur: sabit 4:3 kutu, yatay bir fotografin altinda
   ve ustunde genis bos bantlar birakiyordu. Yer tutucu SVG'de oran korunur. */
.lightbox__stage {
  background: var(--bg-surface-2);
  display: grid; place-items: center;
  max-block-size: var(--lb-stage-max);
}
/* Yer tutucu SVG'nin kendi genisligi yok; fit-content kutuda cokerdi. */
.lightbox__stage > svg {
  inline-size: min(760px, 100vw - 2 * var(--sp-4));
  block-size: auto; aspect-ratio: 4 / 3;
}
/* Buyutulen gercek fotograf: kirpilmadan, ezilmeden sigar */
.lightbox__stage > img {
  inline-size: auto; block-size: auto;
  max-inline-size: 100%; max-block-size: var(--lb-stage-max);
  object-fit: contain; display: block;
}

.lightbox__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}
.lightbox__caption {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--ink-strong);
}
.lightbox__counter { flex: none; font-size: var(--fs-sm); color: var(--ink-muted); }

.lightbox__close {
  position: absolute;
  inset-block-start: calc(-1 * var(--sp-2)); inset-inline-end: calc(-1 * var(--sp-2));
  z-index: 1;
  display: grid; place-items: center;
  inline-size: var(--tap-min); block-size: var(--tap-min);
  border-radius: var(--r-circle);
  background: var(--fill-dark); color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
}

.lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  inline-size: var(--tap-min); block-size: var(--tap-min);
  border-radius: var(--r-circle);
  background: var(--bg-surface); color: var(--ink-strong);
  box-shadow: var(--shadow-md);
}
.lightbox__nav--prev { inset-inline-start: var(--sp-2); }
.lightbox__nav--next { inset-inline-end: var(--sp-2); }
/* Dugmeleri kutunun DISINA ancak gercekten yer varken al: pencere 1040px,
   iki dugme ~2x60px. 1100px'te tasma sayfaya yatay kaydirma cubugu
   ekliyordu (dialog artik overflow:visible). */
@media (min-width: 1220px) {
  .lightbox__nav--prev { inset-inline-start: calc(-1 * var(--sp-14)); }
  .lightbox__nav--next { inset-inline-end: calc(-1 * var(--sp-14)); }
}
@media (hover: hover) {
  .lightbox__nav:hover { background: var(--soft-purple); color: var(--ink-purple); }
}

/* Albüm içi fotoğraflar - SVG yer tutucu yerine gerçek görsel */
.album-item__art img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }