/* =========================================
   1. LAYOUT & ASPECT RATIOS
========================================= */

/* Masaüstü oranı: 1920x455 (≈ 4.2:1) */
.ratio-container {
  width: 100%;
  aspect-ratio: 1920 / 455;
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Görsel oranını sabitleyerek CLS (layout shift) önlenir */
.mainSwiper picture {
  display: block;
  width: 100%;
}

.mainSwiper .slide-img {
  display: block;
  width: 100%;
  /* Oran, panel ölçülerinden gelen --slide-ar değişkeniyle beslenir
     (twig içinde her slayta {{ width }}/{{ height }} olarak yazılır).
     Değişken yoksa 1920/455 yedeği kullanılır.
     Oran görselle birebir aynı olduğundan cover ne kırpar ne boşluk bırakır;
     yükseklik tamamen CSS'ten geldiği için resize'da titreme olmaz. */
  aspect-ratio: var(--slide-ar, 1920 / 455);
  object-fit: cover;
  object-position: center;
  background: #1a1a1a;
}

/* Slaytların yüksekliğini görsel belirlesin (JS autoHeight'a gerek yok) */
.mainSwiper .swiper-slide {
  height: auto;
}

/* Mobil oranı: --slide-ar-m ({{ mobile_width }}/{{ mobile_height }}),
   yoksa 620/800 yedeği. <picture> mobil kaynağı (max-width:767px) ile hizalı. */
@media (max-width: 767px) {
  .mainSwiper .slide-img {
    aspect-ratio: var(--slide-ar-m, 620 / 800);
  }
}


/* =========================================
   2. BACKGROUND & OVERLAY STYLES
========================================= */

.gradient-bg {
  position: relative;
  overflow: hidden;
}

.gradient-bg::before {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0.2; /* sadece arka plan saydam */
  z-index: 0;
}

.gradient-bg > * {
  position: relative;
  z-index: 1; /* içerikler etkilenmez */
}


/* =========================================
   3. TEXT & ANIMATIONS
========================================= */

.mainSwiper .carousel-caption h2 {
  font-size: 32px !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: translateX(100px);
  animation: slideInFromRight 0.8s ease-out 0.2s forwards;
}

.mainSwiper .carousel-caption p {
  opacity: 0;
  transform: translateX(100px);
  animation: slideInFromRight 0.8s ease-out 0.5s forwards;
}

@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}


/* =========================================
   4. SWIPER CONTROLS (pagination & navigation)
========================================= */

/* Swiper pagination - uzun çizgi */
.swiper-pagination-bullet {
  width: 30px;
  height: 4px;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  margin: 0 4px;
}

.swiper-pagination-bullet-active {
  background-color: #fff;
}

/* Swiper navigation arrows (sağ/sol oklar) */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  width: 44px;
  height: 44px;
  background: linear-gradient(80deg, #000 0%, #000 40%, #666 100%);
  opacity: 0.3;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

/* Ok ikonları */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 22px;
  font-weight: bold;
}


/* =========================================
   5. RESPONSIVE ADJUSTMENTS
========================================= */

@media (max-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 36px;
    height: 36px;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 18px;
  }


  .mainSwiper .carousel-caption h2 {
    font-size: 18px !important;
  }

  .mainSwiper .carousel-caption p {
    font-size: 14px !important;
  }


}