/* =====================================================================
   PROJE GALERISI
   =====================================================================

   ESKI HALI NEDEN DUZENSIZDI?

   Onceki kural soyleydi:

       .my-gallery figure { display: inline-block; width: 30%; }
       .my-gallery img    { width: 100%; height: auto; }

   Iki sorun:

   1) height:auto -> her fotografin yuksekligi kendi oranina gore
      farkli cikiyordu. Yatay bir fotograf kisa, dikey bir fotograf
      uzun oluyordu.

   2) display:inline-block -> ogeler yazi satiri gibi dizilir ve
      TABAN CIZGISINE hizalanir. Yukseklikler farkli olunca ust
      kenarlar tutmuyor, merdiven gorunumu olusuyordu.

   YENI HALI

   Izgara (grid) kullaniliyor ve her kutu sabit oranda. Fotograf
   kutuya kirpilarak yerlestiriliyor (object-fit: cover), yani
   hepsi ayni olcude ve hizada gorunuyor.

   NOT: Kirpma sadece KUCUK RESIMDE. Tiklayinca acilan buyuk hali
   fotografin tamami, hicbir sey kesilmiyor.
   ===================================================================== */

.my-gallery {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.my-gallery figure {
  display: block;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
}

/* Sabit oranli kutu. 4/3 mevcut fotograflarin cogunun oranina yakin,
   yani en az kirpma bununla oluyor. Kare isterseniz 1/1, daha genis
   isterseniz 16/9 yapabilirsiniz. */
.my-gallery figure > a {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f2f2;
}

.my-gallery figure > a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

/* Uzerine gelince hafif buyume - tiklanabilir oldugu anlasilsin */
.my-gallery figure > a:hover img {
  transform: scale(1.04);
}

.my-gallery figcaption {
  display: none;
}

/* Video basligi gorunur olsun (figcaption'in aksine) */
.my-gallery figcaption.galeri-baslik {
  display: block;
  font-size: 13px;
  color: rgba(0,0,0,.6);
  margin-top: 6px;
  text-align: center;
  line-height: 1.4;
}


/* ---------------------------------------------------------------------
   VIDEO OGESI
   Fotografla ayni kutuyu kullanir, uzerine oynat simgesi biner.
   --------------------------------------------------------------------- */

.my-gallery figure.galeri-video > a {
  background: #1d376c;
}

.galeri-video-bos {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1d376c, #2a4d94);
}

/* Oynat dugmesi - saf CSS ucgen, ek gorsel gerekmiyor */
.galeri-oynat {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 14px rgba(0,0,0,.3);
  transition: transform .25s ease, background .25s ease;
  pointer-events: none;
}
.galeri-oynat::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #1d376c;
}
.my-gallery figure.galeri-video > a:hover .galeri-oynat {
  transform: translate(-50%, -50%) scale(1.12);
  background: #fff;
}

/* Videonun kapak gorseli hafif koyulastirilir ki oynat dugmesi
   acik renkli kapaklarda da net gorunsun */
.my-gallery figure.galeri-video > a img {
  filter: brightness(.88);
}


/* ---------------------------------------------------------------------
   VIDEO ACILIR PENCERE
   --------------------------------------------------------------------- */

.galeri-vid-pencere {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,.92);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.galeri-vid-pencere.acik { display: flex; }

.galeri-vid-kutu {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  background: #000;
}
.galeri-vid-kutu iframe,
.galeri-vid-kutu video,
.galeri-vid-kutu > div {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.galeri-vid-kapat {
  position: absolute;
  top: 18px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.galeri-vid-kapat:hover { background: rgba(255,255,255,.28); }


/* ---------------------------------------------------------------------
   TABLET
   --------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .my-gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* ---------------------------------------------------------------------
   TELEFON - 2 sutun
   --------------------------------------------------------------------- */
@media only screen and (max-width: 575px) {
  .my-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .galeri-oynat { width: 44px; height: 44px; }
  .galeri-oynat::after { border-width: 8px 0 8px 13px; }
  .galeri-vid-pencere { padding: 12px; }
  .galeri-vid-kapat { top: 10px; right: 12px; width: 38px; height: 38px; font-size: 26px; }
}

.clearfix { clear: both; }