/* Designed & Developed by Alihan Balkan | +90 538 073 87 16 */
/* =========================================================
   Galeri sayfası — "a A a" coverflow karusel.
   Konumlandırma (transform/opacity/filter) assets/js/gallery.js
   tarafından satır-içi stil olarak hesaplanır; burada yalnızca
   temel kutu boyutları, geçiş (transition) süresi ve kontrol
   (ok/sayaç) görünümü tanımlanır.
========================================================= */
.gallery-carousel{
  position:relative;width:100%;max-width:1140px;margin-inline:auto;
}
/* Ok butonları sayacı değil, yalnızca stage'i referans alsın diye
   stage + butonlar ayrı bir "viewport" içinde gruplanır. Sayaç bu
   grubun DIŞINDA, altta; böylece butonların dikey ortalaması sayacın
   yüksekliğinden etkilenmez ve her zaman görselin tam ortasına denk
   gelir (bkz. .gallery-carousel__btn). */
.gallery-carousel__viewport{
  position:relative;
  /* Ok butonları görsellerin üzerine değil, görselden uzakta, bu
     boşluğa (stage'in dışına) yerleşsin diye yanlarda pay bırakılır. */
  padding-inline:clamp(46px,7.5vw,96px);
}
.gallery-carousel__stage{
  position:relative;
  height:clamp(220px,42vw,460px);
  perspective:1400px;
  overflow:hidden;
  /* Kenarlardaki bulanık önceki/sonraki görseller sert bir çizgiyle
     kesilmek yerine yumuşak bir geçişle (saydamlaşarak) kayboluyor. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.gallery-carousel__slide{
  position:absolute;top:50%;left:50%;
  width:63%;
  aspect-ratio:16/9;
  /* Masaüstünde de mobildeki gibi belirgin, "yuvarlak" bir kart
     hissi versin diye ekran genişliğiyle orantılı bir yarıçap. */
  border-radius:clamp(1.5rem,4vw,2.75rem);
  overflow:hidden;
  background:var(--color-ink);
  box-shadow:var(--shadow-lift);
  cursor:pointer;
  transition:transform .7s var(--ease-premium), opacity .6s ease, filter .6s ease;
}
.gallery-carousel__slide.is-active{cursor:zoom-in;}
.gallery-carousel__slide img{width:100%;height:100%;object-fit:cover;display:block;}

.gallery-carousel__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--color-paper);color:var(--color-anthracite);
  box-shadow:var(--shadow-soft);
  border:none;cursor:pointer;z-index:6;
  transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast) var(--ease-premium);
}
.gallery-carousel__btn:active{transform:translateY(-50%) scale(.94);}
.gallery-carousel__btn .icon{width:1.3em;height:1.3em;}
.gallery-carousel__btn--prev{left:0;}
.gallery-carousel__btn--prev .icon{transform:rotate(180deg);}
.gallery-carousel__btn--next{right:0;}

.gallery-carousel__counter{
  text-align:center;margin-top:1.6rem;
  font-family:var(--font-accent);font-size:.78rem;letter-spacing:.14em;
  color:var(--color-anthracite);opacity:.6;
}

@media (prefers-reduced-motion:reduce){
  .gallery-carousel__slide{transition:opacity .4s ease;}
}

/* =========================================================
   Dikey mobil görünüm — küçük ekranda ok butonları görselin
   yanında ince bir boşlukta kalır (kutunun kendisi büyütülür);
   sayaç görselin altında, ayrı bir satırda.
========================================================= */
@media (max-width:640px){
  .gallery-carousel__viewport{padding-inline:clamp(24px,8vw,40px);}
  .gallery-carousel__stage{height:clamp(200px,58vw,320px);}
  .gallery-carousel__slide{width:74%;}
  .gallery-carousel__btn{width:36px;height:36px;}
  .gallery-carousel__btn .icon{width:1.05em;height:1.05em;}
  .gallery-carousel__btn--prev{left:-2px;}
  .gallery-carousel__btn--next{right:-2px;}

  /* Galeri karuseli büyüdüğü için üstteki başlık bloğu biraz daha
     kompakt olsun diye yalnızca bu sayfada küçültülür. */
  body[data-page="galeri"] .page-intro h1{font-size:2rem;}
  body[data-page="galeri"] .page-intro p{font-size:.95rem;}
}

/* =========================================================
   Büyük fotoğraf görünümü — tam ekran değil, koyu bir arka plan
   üzerinde odak yalnızca fotoğrafta olacak şekilde ortalanmış,
   belirgin biçimde büyütülmüş bir görünüm. Sayfadaki HER ŞEYin
   (header, yüzen Ön Kayıt/sohbet butonları, üst şerit) üzerinde
   durur; bunlar açıkken data-lightbox-open ile ayrıca görünmez
   kılınır (bkz. aşağıdaki kural) — yalnızca fotoğraf, ok butonları
   ve kapatma butonu ekranda kalır.
========================================================= */
[data-lightbox-open] .site-header,
[data-lightbox-open] .top-marquee,
[data-lightbox-open] .floating-registration,
[data-lightbox-open] .floating-stack,
[data-lightbox-open] .floating-quicknav,
[data-lightbox-open] .scroll-decor{
  visibility:hidden;
}
.gallery-lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,6vw,4rem);
  background:rgba(12,11,10,.98);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease-premium), visibility 0s linear .35s;
}
.gallery-lightbox.is-open{
  opacity:1;visibility:visible;
  transition:opacity .35s var(--ease-premium), visibility 0s linear 0s;
}
.gallery-lightbox__frame{
  position:relative;margin:0;max-width:min(1100px,80vw);max-height:84vh;
  transform:scale(.92);
  transition:transform .35s var(--ease-premium);
}
.gallery-lightbox.is-open .gallery-lightbox__frame{transform:scale(1);}
.gallery-lightbox__image{
  display:block;max-width:min(1100px,80vw);max-height:84vh;
  width:auto;height:auto;
  border-radius:1.25rem;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
}
/* Kapatma butonu — ekranın sağ üst köşesine sabit, belirgin
   kontrastlı, kolay fark edilir bir buton. */
.gallery-lightbox__close{
  position:fixed;top:clamp(1rem,3vw,1.75rem);right:clamp(1rem,3vw,1.75rem);
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--color-paper);color:var(--color-anthracite);
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5);
  border:none;cursor:pointer;z-index:1;
  transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);
}
.gallery-lightbox__close .icon{width:1.3em;height:1.3em;}

/* İleri/geri butonları fotoğrafın İÇİNDE değil, ona yakın ama
   DIŞINDA durur — görselin boyutu ne olursa olsun kenarına göre
   konumlanır (frame'e göre absolute). Masaüstünde bu sarmalayıcı
   düzene karışmaz (display:contents); sayaç ise her zaman görselin
   altında, ortalanmış görünür. Mobilde ise görselin ALTINDA tek bir
   sırada, yalnızca ikon olarak yer alır (bkz. altta). */
.gallery-lightbox__controls{display:contents;}

.gallery-lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(245,240,233,.16);color:var(--bg-primary);
  backdrop-filter:blur(3px);
  border:none;cursor:pointer;z-index:1;
  transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-premium);
}
.gallery-lightbox__nav:active{transform:translateY(-50%) scale(.94);}
.gallery-lightbox__nav .icon{width:1.3em;height:1.3em;}
.gallery-lightbox__nav--prev{left:-88px;}
.gallery-lightbox__nav--prev .icon{transform:rotate(180deg);}
.gallery-lightbox__nav--next{right:-88px;}

.gallery-lightbox__counter{
  position:absolute;left:50%;bottom:-2.4rem;transform:translateX(-50%);
  color:var(--bg-primary);opacity:.75;
  font-family:var(--font-accent);font-size:.78rem;letter-spacing:.14em;
  white-space:nowrap;
}

/* Fare/imleç bulunan cihazlarda hover renk/animasyonları — dokunmatik
   cihazlarda dokununca hover durumu "yapışıp" kalmasın diye yalnızca
   gerçek hover desteği olan cihazlarda uygulanır. */
@media (hover:hover){
  .gallery-carousel__btn:hover{background:var(--color-orange);color:var(--color-paper);transform:translateY(-50%) scale(1.06);}
  .gallery-lightbox__close:hover{background:var(--color-orange);color:var(--color-paper);transform:scale(1.08);}
  .gallery-lightbox__nav:hover{background:var(--color-orange);transform:translateY(-50%) scale(1.06);}
}

@media (max-width:640px){
  .gallery-lightbox__close{width:44px;height:44px;}
  .gallery-lightbox__image{max-height:68vh;}
  .gallery-lightbox__frame{max-width:min(1100px,88vw);}
  .gallery-lightbox__image{max-width:min(1100px,88vw);}
  /* Mobilde ok butonları görselin yanında değil, altında; yalnızca
     ikon olarak, sayaç ile aynı satırda ("← 07 / 10 →"). */
  .gallery-lightbox__controls{
    display:flex;align-items:center;justify-content:center;gap:1rem;
    margin-top:1.1rem;
  }
  .gallery-lightbox__nav{
    position:static;transform:none;
    width:42px;height:42px;
    background:rgba(245,240,233,.14);backdrop-filter:none;
  }
  /* Masaüstü kuralı butonu position:absolute iken translateY(-50%)
     ile ortalıyordu; burada buton normal akışta (static) olduğu için
     aynı transform basılınca butonun yerinden "zıplamasına" (aniden
     yukarı kayıp küçülmesine) sebep oluyordu. Burada yalnızca hafif
     bir küçülme kalsın diye ayrıca override edilir. */
  .gallery-lightbox__nav:active{transform:scale(.94);}
  .gallery-lightbox__nav .icon{width:1.05em;height:1.05em;}
  .gallery-lightbox__counter{position:static;transform:none;order:0;}
  @media (hover:hover){
    .gallery-lightbox__nav:hover{transform:scale(1.06);}
  }
}