/* === slider-override.css (profile v2) ===
   Top slider -> always single (neighbors hidden)
   Bottom slider -> 2 per view on mobile/tablet (<992px), 1 per view on desktop (>=992px)
*/

/* TOP slider */
#topProjectsSwiper { overflow: hidden; }
#topProjectsSwiper .swiper-slide{ opacity:0; pointer-events:none; transition:opacity .2s; }
#topProjectsSwiper .swiper-slide.swiper-slide-active{ opacity:1; pointer-events:auto; }
#topProjectsSwiper .swiper-slide-duplicate-prev,
#topProjectsSwiper .swiper-slide-prev,
#topProjectsSwiper .swiper-slide-next,
#topProjectsSwiper .swiper-slide-duplicate-next{
  opacity:0 !important; pointer-events:none !important;
}

/* BOTTOM slider (do not hide neighbors; allow multi per view on small screens) */
#previousProjectsSwiper { overflow: hidden; }

/* Optional 4:3 helper */
#previousProjectsSwiper .slide-card,
#topProjectsSwiper .slide-card{
  position:relative;
  aspect-ratio: 4 / 3;
  width:100%;
  overflow:hidden;
}
#previousProjectsSwiper .slide-card img,
#topProjectsSwiper .slide-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* MOBILE: Başlık altındaki 12px boşluğu kapat */
@media (max-width: 767.98px) {
  /* H2’nin marginini sıfırla */
  #previous-wrapper .text-center > h2.section-title {
    margin-bottom: 0 !important;
  }

  /* Başlıktaki 12px bottom padding’i dengelemek için sliderı 35px yukarı al */
  #previousProjectsSwiper {
    margin-top: -35px !important;
  }
}

/* MOBILE: sliderların ALT boşluklarını tamamen kaldır */
@media (max-width: 767.98px) {
  /* 1) Önceki Projeler */
  #previousProjectsSwiper,
  #previousProjectsSwiper .swiper-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  #previousProjectsSwiper .swiper-pagination {
    position: absolute !important;
    left: 0; right: 0;
    bottom: 6px !important;      /* istersen 4–10px arası dene */
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;         /* ekstra yer kaplamasın */
  }

  /* 2) Kataloglar */
  .catalogs-vertical,
  .catalogs-vertical .catalogs-vertical-swiper,
  .catalogs-vertical .swiper-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .catalogs-vertical .swiper-pagination {
    position: absolute !important;
    left: 0; right: 0;
    bottom: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  /* 3) Mutlu Müşterilerimiz */
  .testimonials-swiper,
  .testimonials-swiper .swiper-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .testimonials-swiper .swiper-pagination {
    position: absolute !important;
    left: 0; right: 0;
    bottom: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  /* Kalan 1–2px’lik gölge/çerçeve boşluğu için küçük kompansasyon */
  #previous-wrapper .container-fluid,
  .catalogs-vertical,
  .testimonials-swiper {
    margin-bottom: -24px !important; /* gerekirse -12 / -14 yapabilirsin */
  }
}

/* Swiper slide iç boşluklarını azalt */
#previousProjectsSwiper .swiper-wrapper {
  margin-left: 0;
  margin-right: 0;
}

#previousProjectsSwiper .swiper-slide {
  padding-left: 0;
  padding-right: 0;
  display: flex;
  justify-content: center; /* Görseli tam genişlikte ortala */
}

#previousProjectsSwiper .pp-card,
#previousProjectsSwiper .pp-media {
  width: 100%;              /* Kart tüm genişliği kullansın */
  max-width: 100%;
  margin: 0;
}

/* 4:3 oran korunsun */
#previousProjectsSwiper .pp-media {
  aspect-ratio: 4 / 3;
}

#previousProjectsSwiper .pp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Gerekirse contain yapabilirsin */
}





/* Tamamlanan Projeler Slider - Tam Genişlik */
#previous-wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#previous-wrapper .container-fluid {
    padding: 0 !important;
    max-width: 100%;
}

#previousProjectsSwiper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 50px; /* Ok butonları için boşluk */
    overflow: hidden; /* Komşu slide'ları gizle */
}

#previousProjectsSwiper .swiper-wrapper {
    width: 100%;
}

#previousProjectsSwiper .swiper-slide {
    width: calc(50% - 8px) !important; /* Tam yarısı */
    flex-shrink: 0;
}

/* 4:3 oran için aspect ratio */
#previousProjectsSwiper .swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
}

#previousProjectsSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ok butonları */
#previousProjectsSwiper .swiper-button-next,
#previousProjectsSwiper .swiper-button-prev {
    color: #ED1C24;
    background: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#previousProjectsSwiper .swiper-button-next:after,
#previousProjectsSwiper .swiper-button-prev:after {
    font-size: 20px;
}

/* Desktop */
@media (min-width: 992px) {
    #previousProjectsSwiper {
        padding: 0 60px;
    }
    
    #previousProjectsSwiper .swiper-slide {
        width: calc(50% - 10px) !important;
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
    #previousProjectsSwiper {
        padding: 0 45px;
    }
    
    #previousProjectsSwiper .swiper-slide {
        width: calc(50% - 8px) !important;
    }
}

/* Mobil */
@media (max-width: 575px) {
    #previousProjectsSwiper {
        padding: 0 35px;
    }
    
    #previousProjectsSwiper .swiper-slide {
        width: calc(50% - 6px) !important;
    }
}

/* Alt slider konteyneri dar ama içini tamamen doldur */
#previous-container { max-width: 1200px; }            /* dilersen 1140/1280 yapabilirsin */
#previousProjectsSwiper { 
  overflow: hidden; 
  padding-left: 0; 
  padding-right: 0; 
}

/* Komşu slayt görünmesin, slide içi boşluk olmasın */
#previousProjectsSwiper .swiper-wrapper { margin: 0; }
#previousProjectsSwiper .swiper-slide { padding: 0; margin: 0; }

/* 4:3 oran: a etiketi (slide içeriği) çerçeve */
#previousProjectsSwiper .swiper-slide > a {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;   /* oran sabit */
  overflow: hidden;
  border-radius: 12px;   /* istersen */
}

/* Görüntü çerçeveyi tam doldursun (hafif kırpma olabilir) */
#previousProjectsSwiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* kırpma istemezsen contain yap ama kenarlarda boşluk olur */
  display: block;
}