/* Faaliyet Detayı stilleri bölümü başlangıcı — SADECE bu sayfaya özel ek kurallar.
   .detail-heading/.share-btn/.detail-gallery/.detail-photo/.detail-description/
   .detail-gallery-grid zaten css/proje-detay-yeni.css'te tanımlı (link ile eklendi,
   kopyalanmadı) — Proje Detayı'yla GÖRSEL OLARAK tutarlı olsun diye aynen kullanılıyor.
   .activity-date/.activities-grid/.activity-card zaten css/faaliyetler-yeni.css'te.
   body/html sıfırlaması BİLEREK yok. */

.section {
  padding: 44px 0;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}
.breadcrumb a {
  color: var(--teal);
  font-weight: 700;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--teal-dark);
}

.faaliyet-heading-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.faaliyet-video {
  width: 100%;
  margin-bottom: 20px;
  border-radius: var(--radius);
}

.similar-section {
  margin-top: 20px;
}
/* 2026-09-25 düzeltme (faaliyetler.docx raporu):
   1) "Diğer Faaliyetler" üstündeki border kaldırıldı (proje-detay-yeni.css'ten
      miras kalan .similar-section{border-top} SADECE bu sayfada iptal edildi).
   2) Hem "Diğer Faaliyetler" hem de yeni eklenen galeri başlığı ("Faaliyetten
      Fotoğraflar") artık kaynak mockup'taki (webrev2/faaliyet detayi/styles.css
      .section-title/h2::after) ortalı, kalın teal, altın alt çizgili kalıbı
      kullanıyor — proje-detay-yeni.css'teki paylaşılan .section-title (sol
      hizalı, flex) SADECE bu sayfada override ediliyor, proje detayına
      dokunulmuyor. */
.section-title {
  display: block;
  text-align: center;
  margin-bottom: 30px;
}
.section-title h2 {
  position: relative;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--teal);
}
.section-title h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--gold);
}

/* 2026-09-25: proje detayındaki "Benzer Projeler"le AYNI istek/teknik —
   tabletten itibaren (860px, proje detayının kullandığı eşikle tutarlı)
   "Diğer Faaliyetler" de anasayfadaki .campaign-grid'le aynı native
   scroll-snap yöntemiyle yatay kaydırmalı slider'a dönüşüyor. */
@media (max-width: 860px) {
  .similar-section .activities-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .similar-section .activities-grid::-webkit-scrollbar {
    display: none;
  }
  .similar-section .activities-grid > .activity-card {
    flex: 0 0 280px;
    min-width: 0;
    scroll-snap-align: start;
  }
}
/* Faaliyet Detayı stilleri bölümü bitişi */

/* ========================================================
   2026-10-01 (revizeler-1-10 md.7): webrev2/faaliyet detayi galerisi —
   ana foto + yanda 2 foto (activity-hero), kalanlar ızgarada, sayfanın
   kendi lightbox'ı (.fd-lightbox — Lightbox2'nin .lightbox sınıfıyla
   çakışmasın diye önekli). #i-arrow sola bakıyor: LTR'de "önceki" olduğu
   gibi, "sonraki" aynalı; RTL'de tersi.
   ======================================================== */
.activity-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  aspect-ratio: 8 / 3;
  margin-top: 30px;
}
.activity-hero.no-side {
  grid-template-columns: 1fr;
  aspect-ratio: 16 / 9;
}
.activity-hero-main,
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius, 18px);
  overflow: hidden;
  background: #d4dbd8;
  cursor: zoom-in;
}
.activity-hero-main {
  height: 100%;
}
.activity-hero-main img,
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}
.activity-hero-main:hover img,
.gallery-item:hover img {
  transform: scale(1.04);
}
.activity-hero-side {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
.activity-hero-side .gallery-item {
  height: 100%;
}
.activity-hero-side > .gallery-item:only-child {
  grid-row: 1 / -1;
}
.faaliyet-galeri-bolum {
  margin-top: 40px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 24px;
}
.gallery-grid .gallery-item {
  aspect-ratio: 16 / 9;
}

/* Lightbox */
html.fd-lightbox-acik,
html.fd-lightbox-acik body {
  overflow: hidden;
}
.fd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.fd-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.fd-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 15, 14, 0.88);
}
.fd-lightbox-image {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.fd-lightbox-image.is-degisiyor {
  opacity: 0;
  transform: scale(0.98);
}
.fd-lightbox-close,
.fd-lightbox-prev,
.fd-lightbox-next {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.2s ease;
}
.fd-lightbox-close:hover,
.fd-lightbox-prev:hover,
.fd-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}
.fd-lightbox-close {
  top: 18px;
  inset-inline-end: 18px;
  width: 42px;
  height: 42px;
}
.fd-lightbox-close svg,
.fd-lightbox-prev svg,
.fd-lightbox-next svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fd-lightbox-prev,
.fd-lightbox-next {
  top: 50%;
  width: 48px;
  height: 48px;
}
.fd-lightbox-prev {
  inset-inline-start: 18px;
  transform: translateY(-50%);
}
.fd-lightbox-next {
  inset-inline-end: 18px;
  transform: translateY(-50%) rotate(180deg);
}
[dir="rtl"] .fd-lightbox-prev {
  transform: translateY(-50%) rotate(180deg);
}
[dir="rtl"] .fd-lightbox-next {
  transform: translateY(-50%);
}
.fd-lightbox-sayac {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  direction: ltr;
}

/* Diğer faaliyetler — mobilde yatay kaydırma */
.similar-section .activities-grid {
  margin-top: 30px;
}

@media (max-width: 760px) {
  .activity-hero {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }
  .activity-hero-main {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .activity-hero-side {
    height: auto;
    grid-template-rows: none;
    grid-template-columns: repeat(2, 1fr);
  }
  .activity-hero-side .gallery-item {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .activity-hero-side > .gallery-item:only-child {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .fd-lightbox-prev,
  .fd-lightbox-next {
    width: 38px;
    height: 38px;
  }
  .fd-lightbox-close {
    top: 12px;
    inset-inline-end: 12px;
    width: 36px;
    height: 36px;
  }
  .similar-section .activities-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .similar-section .activities-grid::-webkit-scrollbar {
    display: none;
  }
  .similar-section .activities-grid > * {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
}
/* md.7 bitişi */

/* 2026-10-07 — haber/video detayı: gömülü video duyarlı (YouTube adresi veya panelden girilen iframe) */
.detail-description .yeni-video-gom { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; margin: 0 0 24px; border-radius: 14px; overflow: hidden; background: #000; }
.detail-description .yeni-video-gom iframe,
.detail-description .yeni-video-gom video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }