﻿/* =========================================================
   FINAL SLIDER CSS (TEK KAYNAK)
   - app-aybu.css ile çakışmaları ezer
   - ANASAYFA: ilk açılışta sadece slider (100vh)
   - ANASAYFA desktop: zoom/cover
   - ANASAYFA mobil: zoom yok
   - ALT SAYFALAR: desktop yükseklik class’a göre, mobil kompakt
   ========================================================= */

/* ---------------------------------------------------------
   0) Genel: slider konteyner güvenli ayarlar
   --------------------------------------------------------- */
.hero-banner.photography-banner,
.photography-banner {
  overflow: hidden !important;
}

/* Swiper katmanları container yüksekliğini alsın */
.hero-banner.photography-banner .swiper,
.hero-banner.photography-banner .swiper-wrapper,
.hero-banner.photography-banner .swiper-slide,
.photography-banner .swiper,
.photography-banner .swiper-wrapper,
.photography-banner .swiper-slide {
  height: 100% !important;
}

/* Varsayılan img davranışı (temiz başlangıç) */
.hero-banner.photography-banner .swiper-slide img,
.photography-banner .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;      /* app-aybu.css min-height zorlamasını kırar */
  max-height: none !important;
  object-position: center center !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   1) ANASAYFA: ilk açılışta sadece slider görünsün (100vh)
   --------------------------------------------------------- */
body.aybu-home .hero-banner.photography-banner,
body.aybu-home .photography-banner {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Anasayfa görsel: cover (ekrana tam otursun) */
body.aybu-home .hero-banner.photography-banner .swiper-slide img,
body.aybu-home .photography-banner .swiper-slide img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ANASAYFA desktop/tablet: zoom efekti AÇIK */
@media (min-width: 769px) {
  body.aybu-home .hero-banner.photography-banner .swiper-slide img,
  body.aybu-home .photography-banner .swiper-slide img {
    transform: scale(1.25) !important;
    transition: transform 6s ease-in-out !important;
    will-change: transform;
  }

  body.aybu-home .hero-banner.photography-banner .swiper-slide.swiper-slide-active img,
  body.aybu-home .photography-banner .swiper-slide.swiper-slide-active img {
    transform: scale(1) !important;
  }
}

  /* ---------------------------------------------------------
     Accessibility helper: visually hidden (WCAG)
     Use this for elements that must be present for screen-readers
     but remain visually hidden without affecting layout.
     --------------------------------------------------------- */
  .sr-only{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }

/* ANASAYFA mobil: zoom KAPALI (stabil olsun) */
@media (max-width: 768px) {
  body.aybu-home .hero-banner.photography-banner .swiper-slide img,
  body.aybu-home .photography-banner .swiper-slide img {
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   2) ALT SAYFALAR: desktop/tablet yükseklikler (tema class’ına göre)
   --------------------------------------------------------- */
@media (min-width: 769px) {
  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-200,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-200 { height: 200px !important; }

  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-300,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-300 { height: 300px !important; }

  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-400,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-400 { height: 400px !important; }

  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-600,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-600 { height: 600px !important; }

  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-800,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-800 { height: 800px !important; }

  /* Alt sayfa desktop: boşluk istemiyorsun → cover */
  body:not(.aybu-home):not(.home) .hero-banner.photography-banner .swiper-slide img,
  body:not(.aybu-home):not(.home) .photography-banner .swiper-slide img {
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* ---------------------------------------------------------
   3) ALT SAYFALAR: MOBİL (kompakt yükseklik + app-aybu çakışması yok)
   --------------------------------------------------------- */
@media (max-width: 768px) {

  /* Temaya göre mobil banner yüksekliği (kompakt) */
  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-400,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-400 {
    height: 105px !important;
    min-height: 105px !important;
    max-height: 150px !important;
  }

  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-600,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-600 {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 220px !important;
  }

  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-800,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-800 {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 260px !important;
  }

  /* app-aybu.css (max-width:1199) içindeki 400px img yüksekliğini kesin ez */
  body:not(.aybu-home):not(.home) .hero-banner.photography-banner[class*="slider-image-"] .swiper-slide img,
  body:not(.aybu-home):not(.home) .photography-banner[class*="slider-image-"] .swiper-slide img {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    /* Mobilde "tam görünsün" isteği → contain */
    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   4) app-aybu.css 1199 breakpoint’ine karşı ekstra garanti
   (Bazı sayfalarda app-aybu daha sonra yüklenirse bile ezsin diye)
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-400 .swiper-slide img,
  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-400 .swiper-slide img,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-600 .swiper-slide img,
  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-600 .swiper-slide img,
  body:not(.aybu-home):not(.home) .photography-banner.slider-image-800 .swiper-slide img,
  body:not(.aybu-home):not(.home) .hero-banner.photography-banner.slider-image-800 .swiper-slide img {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* =========================================================
   HOME PAGE – MOBILE SLIDER FINAL
   Dikdörtgen, yanlardan boşluksuz, biraz daha alçak
   ========================================================= */
@media (max-width: 768px) {

  body.aybu-home
  .hero-banner.photography-banner[class*="slider-image-"] {
    height: clamp(190px, 40vw, 230px) !important;
    min-height: 190px !important;
    max-height: 230px !important;
    overflow: hidden !important;
  }

  body.aybu-home
  .hero-banner.photography-banner
  .swiper,
  body.aybu-home
  .hero-banner.photography-banner
  .swiper-wrapper,
  body.aybu-home
  .hero-banner.photography-banner
  .swiper-slide {
    height: 100% !important;
  }

  body.aybu-home
  .hero-banner.photography-banner
  .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* 🔥 yan boşluk yok */
    object-position: center center !important;
    transform: none !important;
  }
}

/* SLIDER SIDE PAGINATION (dinamik) */
.slider-side-pagination{
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.slider-side-pagination .side-bullet{
  width:6px;
  height:26px;
  background:rgba(24, 175, 221, 0.349);
  border-radius:2px;
  cursor:pointer;
  transition:all .25s ease;
}

.slider-side-pagination .side-bullet.active{
  background:#fff;
  height:40px;
}

.slider-side-pagination .side-bullet:hover{
  background:#fff;
}

@media (max-width:768px){
  .slider-side-pagination{ display:none; }
}
