/* ==========================================================================
   Galeri sayfa stilleri  (gl-)
   ========================================================================== */

/* ============================================================
   1. HERO
   ============================================================ */

.gl-hero {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(5.5rem, 10vw, 8rem);
  color: #fff;
  overflow: hidden;
  background-image:
    radial-gradient(50rem 28rem at 10% -8%, rgba(75, 156, 206, 0.3), transparent 60%),
    radial-gradient(36rem 22rem at 88% 110%, rgba(180, 96, 123, 0.22), transparent 55%),
    linear-gradient(140deg, var(--bordo-800) 0%, var(--bordo-700) 45%, var(--mavi-800) 100%);
}

.gl-hero__ic {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-5, 1.25rem);
}

.gl-hero .da-hero__breadcrumb {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--olcek-sm);
}

.gl-hero .da-hero__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.gl-hero .da-hero__breadcrumb-list a {
  color: inherit;
  text-decoration: none;
}

.gl-hero .da-hero__breadcrumb-list a:hover {
  color: #fff;
}

.gl-hero__baslik {
  font-size: var(--olcek-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}

.gl-hero__alt {
  font-size: var(--olcek-lg);
  color: rgba(255, 255, 255, 0.72);
  max-width: 40rem;
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   2. BÖLÜM
   ============================================================ */

.gl-bolum {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--bordo-50, #fbf4f6);
}

/* ============================================================
   3. IZGARA
   Neden CSS Grid: Sabit sütun genişliği + auto-placement,
   JS masonry kütüphanesi olmadan düzgün hizalama sağlar.
   "Geniş" kartlar 2 sütun kaplar; diğerleri 1 sütun.
   ============================================================ */

.gl-izgara {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* ============================================================
   4. KART
   ============================================================ */

.gl-kart {
  overflow: hidden;
  border-radius: var(--yuvarlak-lg, 0.75rem);
  background: var(--bordo-900);
}

.gl-kart--genis {
  grid-column: span 2;
}

.gl-kart__cerceve {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* Sabit yükseklik — tüm kartlar aynı satır yüksekliğine sahip */
.gl-kart .gl-kart__cerceve {
  aspect-ratio: 4 / 3;
}

.gl-kart--genis .gl-kart__cerceve {
  aspect-ratio: 16 / 9;
}

.gl-kart__gorsel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.gl-kart:hover .gl-kart__gorsel {
  transform: scale(1.04);
}

/* Alt yazı — varsayılan gizli, hover'da görünür */
.gl-kart__altyazi {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(22, 10, 14, 0.82) 0%, transparent 100%);
  font-size: var(--olcek-sm);
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.gl-kart:hover .gl-kart__altyazi,
.gl-kart:focus-within .gl-kart__altyazi {
  opacity: 1;
  transform: translateY(0);
}

/* Yedek (görsel bulunamazsa) */
.gl-kart__yedek {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--bordo-800), var(--mavi-800));
  color: rgba(255, 255, 255, 0.35);
}

.gl-kart--genis .gl-kart__yedek {
  aspect-ratio: 16 / 9;
}

.gl-kart__yedek svg {
  width: 2.5rem;
  height: 2.5rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .gl-izgara {
    grid-template-columns: repeat(2, 1fr);
  }

  .gl-kart--genis {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .gl-izgara {
    grid-template-columns: 1fr;
  }

  .gl-kart--genis {
    grid-column: span 1;
  }
}