/* ==========================================================================
   FOTO GALERI (.glr) ve TAM EKRAN GORUNTULEYICI (.lyt)
   --------------------------------------------------------------------------
   PAYLASILAN BILESEN. Once yalnizca tur detayindaydi; lokasyon sayfalari da
   ayni mozaik + tam ekran duzenini kullaniyor. Iki yere kopyalamak yerine
   stil buraya, davranis js/galeri.js dosyasina alindi.
   ========================================================================== */
/* Galeri sol sutunun en ustunde durur; en-boy orani 16/9'a cekildi ki
   dar sutunda da bilgi seridi katlanmadan altina sigsin. */
.glr { margin-bottom: var(--s4); }
.glr__mzk {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--s2);
  aspect-ratio: 16 / 9;
  border-radius: var(--r3);
  overflow: hidden;
}
.glr__k { position: relative; display: block; width: 100%; height: 100%;
          overflow: hidden; background: var(--mist-2); cursor: zoom-in; }
.glr__k--ana { grid-row: span 2; grid-column: span 2; }

/* -- Az gorselli duzenler --
   Dort sutunluk mozaik ancak BES gorselle dolar. Daha azinda ilk kare
   yarim ekranda tek basina kaliyor, yaninda bosluk olusuyordu. Gorsel
   sayisina gore izgara yeniden kurulur; oran da buna gore ayarlanir. */
.glr__mzk--1 { grid-template-columns: 1fr; grid-template-rows: 1fr;
               aspect-ratio: 16 / 9; }
.glr__mzk--1 .glr__k--ana { grid-row: span 1; grid-column: span 1; }

.glr__mzk--2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr;
               aspect-ratio: 16 / 7; }
.glr__mzk--2 .glr__k--ana { grid-row: span 1; grid-column: span 1; }

/* Uc gorsel: solda buyuk kare, sagda iki kucuk */
.glr__mzk--3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
               aspect-ratio: 16 / 8.5; }
.glr__mzk--3 .glr__k--ana { grid-row: span 2; grid-column: span 2; }

/* Dort gorsel: solda buyuk, sagda ucu alt alta degil 1+2 */
.glr__mzk--4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);
               aspect-ratio: 16 / 8.5; }
.glr__mzk--4 .glr__k--ana { grid-row: span 2; grid-column: span 2; }
.glr__mzk--4 .glr__k:nth-child(2) { grid-column: span 2; }
.glr__k img { width: 100%; height: 100%; object-fit: cover; object-position: center;
              transform: scale(1.001);
              transition: transform 1.15s cubic-bezier(.16,.68,.32,1), filter .35s var(--e); }
.glr__k:hover img { transform: scale(1.06); }
.glr__k::after { content: ""; position: absolute; inset: 0;
                 background: rgba(16,30,54,0); transition: background var(--t2); }
.glr__k:hover::after { background: rgba(16,30,54,.14); }
.glr__k:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.glr__daha {
  position: absolute; inset: 0; z-index: var(--z-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--white); background: rgba(16,30,54,.6); backdrop-filter: blur(3px);
  transition: background var(--t2);
}
.glr__k:hover .glr__daha { background: rgba(16,30,54,.72); }
.glr__daha b     { font-size: var(--fs-h3); font-weight: var(--fw-800); letter-spacing: var(--ls-tt); }
.glr__daha small { font-size: var(--fs-3xs); opacity: .85; }

/* Dar ekran rozeti masaustunde hic cikmaz — orada beste bir rozet var */
.glr__daha--m { display: none; }

.glr__hepsi { display: none; }

@media (max-width: 860px) {
  /* Dar ekranda sayidan bagimsiz iki sutun; ust kural ne olursa olsun
     burasi gecerli (sonra geldigi icin). */
  .glr__mzk { grid-template-columns: repeat(2, 1fr);
              grid-template-rows: repeat(2, 1fr); aspect-ratio: 16 / 11; }
  .glr__k:nth-child(n+4) { display: none; }
  .glr__k--ana { grid-column: span 2; grid-row: span 1; }
  /* TEK GORSEL TAM GENISLIK.
     Yukaridaki ".glr__mzk--1 .glr__k--ana" (0,2,0) "span 1" diyor ve bu
     blogun ".glr__k--ana { span 2 }" (0,1,0) kuralini YENIYOR. Sonuc:
     iki sutunlu izgarada tek gorsel yarim kaliyor, yani sagi bos.
     Varyantin kendi sutun sayisi 1'e cekilerek cozulur — boylece "span 1"
     zaten tam genislik demek olur ve ozgullukle ugrasmaya gerek kalmaz. */
  .glr__mzk--1 { grid-template-columns: 1fr; grid-template-rows: 1fr;
                 aspect-ratio: 16 / 10; }
  .glr__mzk--2 { grid-template-rows: 1fr; aspect-ratio: 16 / 8; }
  .glr__mzk--2 .glr__k--ana { grid-column: span 1; }
  .glr__mzk--4 .glr__k:nth-child(2) { grid-column: span 1; }
}
/* ==========================================================================
   DAR EKRAN — GENEL
   --------------------------------------------------------------------------
   Mozaik tek buyuk gorsele iner, altina "tum fotograflar" dugmesi gelir.
   Lokasyon sayfalari bu duzeni kullanir: orada ana gorselin baska bir
   yerde tekrari YOKTUR, dolayisiyla gizlenemez.
   ========================================================================== */
@media (max-width: 560px) {
  /* SATIR VE YAYILIM DA SIFIRLANMALI.
     Yalnizca grid-template-columns tek sutuna cekiliyordu; ustteki 860px
     bloğundan gelen "iki satir" ve .glr__k--ana'nin "iki sutuna yayil"
     kurallari duruyordu. Sonucta tek gorsel iki satirlik kutunun UST
     YARISINDA kaliyor, alt yari bos beyaz duruyordu. */
  .glr__mzk,
  .glr__mzk--1, .glr__mzk--2, .glr__mzk--3, .glr__mzk--4 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 4 / 3;
  }
  /* Her varyant icin ayri ayri sifirlanmali: ".glr__mzk--3 .glr__k--ana"
     iki sinifli oldugu icin tek sinifli ".glr__k--ana" sifirlamasini
     eziyor ve ana kare iki satira yayilmaya devam ediyordu. */
  .glr__k--ana,
  .glr__mzk--2 .glr__k--ana,
  .glr__mzk--3 .glr__k--ana,
  .glr__mzk--4 .glr__k--ana,
  .glr__mzk--4 .glr__k:nth-child(2) { grid-column: span 1; grid-row: span 1; }
  .glr__k:nth-child(n+2) { display: none; }
  .glr__hepsi { display: inline-flex; align-items: center; gap: var(--s2);
                width: 100%; justify-content: center; min-height: 42px; margin-top: var(--s3);
                font-size: var(--fs-2xs); font-weight: var(--fw-700); color: var(--tx);
                background: var(--white); border: 1px solid var(--line); border-radius: var(--r2); }
  .glr__hepsi svg { color: var(--brand); }
}


/* ==========================================================================
   DAR EKRAN — YALNIZCA TUR DETAYI (.sf-tur)
   --------------------------------------------------------------------------
   Tur detayinda ILK FOTOGRAF sayfa basliginin arkasinda duruyor
   (css/tur.css, .tb--ard). Onu galeride bir kez daha gostermek gereksiz
   tekrar olurdu; mozaigin ilk karesi gizlenir ve geriye UC KUCUK RESIM
   kalir (2., 3. ve 4. fotograf). Sonuncusunda "+N" rozeti durur, ona
   dokununca tam ekran galeri acilir.

   BU KURALLAR .sf-tur ILE SINIRLI. Once tum sayfalara uygulanmisti ve
   lokasyon sayfalarinda ana gorseli yok ediyordu — orada ilk fotografin
   baska bir karsiligi yok.

   grid-template-rows SIFIRLANMALI: .glr__mzk--3/--4 iki satir tanimliyor
   ve .glr__k--ana iki satira yayiliyordu.
   ========================================================================== */
@media (max-width: 720px) {
  .sf-tur .glr { margin-bottom: var(--s5); }

  .sf-tur .glr__mzk,
  .sf-tur .glr__mzk--2, .sf-tur .glr__mzk--3, .sf-tur .glr__mzk--4 {
    display: grid; grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    aspect-ratio: auto; gap: var(--s2);
  }

  /* display: block SART — genel 560px bloğu ikinci kareden sonrasini
     gizliyor (orada tek buyuk gorsel var). Serit duzeninde 2., 3. ve 4.
     kareler gerekli, once hepsi geri acilir sonra istenmeyenler gizlenir. */
  .sf-tur .glr__k,
  .sf-tur .glr__mzk--2 .glr__k--ana, .sf-tur .glr__mzk--3 .glr__k--ana,
  .sf-tur .glr__mzk--4 .glr__k--ana {
    display: block;
    grid-row: auto; grid-column: auto;
    aspect-ratio: auto; height: 72px;
    border-radius: var(--r2);
  }

  /* Ilk kare basligin arkasinda gosteriliyor */
  .sf-tur .glr__k:first-child { display: none; }
  /* DORDUNCU KARE GERI ACILIR: ustteki 860px bloğu 4. ve sonrasini
     gizliyor (orada mozaik iki sutun ve uc kare). */
  .sf-tur .glr__k:nth-child(4) { display: block; }
  /* Besinci kare dar ekranda fazla: rozet dorduncude */
  .sf-tur .glr__k:nth-child(n+5) { display: none; }

  /* Tek gorselli turda geriye kucuk resim kalmaz — serit hic cikmasin */
  .sf-tur .glr__mzk--1 { display: none; }

  /* Masaustu rozeti besinci karede; o kare gizli oldugu icin devre disi.
     Dar ekran rozeti dorduncu karede ve tek goruntuleme kapisi oldugu
     icin belirgin: koyu perde + turuncu sayi. */
  .sf-tur .glr__daha { display: none; }
  .sf-tur .glr__daha--m { display: flex; gap: 0;
                          background: rgba(16,30,54,.72);
                          border: 1.5px solid var(--brand); border-radius: var(--r2); }
  .sf-tur .glr__daha--m b { font-size: var(--fs-s); line-height: 1.1; color: var(--brand-200); }
  .sf-tur .glr__daha--m small { display: block; font-size: 9px; letter-spacing: var(--ls-cap);
                                text-transform: uppercase; opacity: .8; }

  .sf-tur .glr__hepsi { display: none; }
}


/* ==========================================================================
   3. TAM EKRAN GALERI
   ========================================================================== */
/* KATMAN: isik kutusu sayfanin EN USTUNDE durur — menuden de yukarida.
   Sebebi: acikken ekranin tamami odur; altindan hicbir sey gorunmemeli.
   Onceden --z-dr (400) idi ve tur detayindaki alt rezervasyon seridi
   (--z-tp - 2 = 498) fotografin uzerinde duruyordu.
   Mobil menuyle CAKISMAZ: menu acikken galeri perdenin altinda kalir,
   yani bir fotografa dokunup isik kutusunu acmak mumkun degil. */
.lyt { position: fixed; inset: 0; z-index: calc(var(--z-tp) + 1);
       display: flex; flex-direction: column;
       background: rgba(8,14,26,.97); backdrop-filter: blur(6px);
       animation: lyt-gir .26s var(--e); }
@keyframes lyt-gir { from { opacity: 0; } to { opacity: 1; } }

.lyt__bar { flex: none; display: flex; align-items: center; justify-content: space-between;
            padding: var(--s4) var(--s5); color: var(--white); }
.lyt__say { font-size: var(--fs-2xs); color: rgba(255,255,255,.7); }
.lyt__say b { font-size: var(--fs-s); font-weight: var(--fw-700); color: var(--white); }
.lyt__kp { display: inline-flex; align-items: center; justify-content: center;
           width: 42px; height: 42px; color: var(--white);
           background: rgba(255,255,255,.1); border-radius: var(--rp);
           transition: background var(--t1), transform var(--t1); }
.lyt__kp:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }

.lyt__sahne { flex: 1; position: relative; min-height: 0; }
.lyt__f { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
          padding: 0 var(--s7); opacity: 0; visibility: hidden;
          transition: opacity .3s var(--e); }
.lyt__f[data-on] { opacity: 1; visibility: visible; }
.lyt__f img { max-width: 100%; max-height: 100%; object-fit: contain;
              border-radius: var(--r2); box-shadow: 0 24px 60px rgba(0,0,0,.5); }

.lyt__ok { position: absolute; top: 50%; z-index: var(--z-2); transform: translateY(-50%);
           display: inline-flex; align-items: center; justify-content: center;
           width: 48px; height: 48px; color: var(--white);
           background: rgba(255,255,255,.12); border-radius: var(--rp);
           transition: background var(--t1); }
.lyt__ok:hover { background: var(--brand); }
.lyt__ok--sol { left: var(--s4); }
.lyt__ok--sag { right: var(--s4); }

.lyt__serit { flex: none; display: flex; gap: var(--s2); overflow-x: auto;
              padding: var(--s4) var(--s5); scrollbar-width: thin; }
.lyt__kk { flex: none; width: 84px; height: 56px; border-radius: var(--r1); overflow: hidden;
           opacity: .45; transition: opacity var(--t1), transform var(--t1);
           outline: 2px solid transparent; }
.lyt__kk img { width: 100%; height: 100%; object-fit: cover; }
.lyt__kk:hover { opacity: .8; }
.lyt__kk.on { opacity: 1; outline-color: var(--brand); transform: translateY(-2px); }

@media (max-width: 560px) {
  .lyt__f { padding: 0 var(--s3); }
  .lyt__ok { width: 38px; height: 38px; }
  .lyt__kk { width: 62px; height: 42px; }
}