/* BannerFunctions CSS - #extra-slider1 (Custom8Banner) */

#extra-slider1 {
  padding-top: 0 !important;
}

/* Desktop & Laptop Grid Layout (8 cols - Tam Sığdırma) */
.Custom8Banner-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: center !important;
  padding: 20px 10px !important; /* Üst/alt padding artırıldı (kesilmeyi önlemek için) */
  overflow: visible !important; /* Taşmaya izin ver */
}

/* 4. Skeleton Loading Animasyonu */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Base Slide Style */
.Custom8Banner-slide {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 15/22 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  margin-top: 12px !important;
  border: 2px solid transparent !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  transform: scale(1) !important;
  z-index: 1 !important;
  
  /* 4. Skeleton Loading Background */
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite linear !important;
}

/* 3. Inner Shadow (Derinlik Efekti) */
.Custom8Banner-slide::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Hafif iç gölge ve alt kısımdan yukarı doğru karartma */
  box-shadow: inset 0 0 15px rgba(0,0,0,0.3), inset 0 -40px 50px rgba(0,0,0,0.5) !important;
  pointer-events: none !important; /* Tıklamayı engelleme */
  z-index: 2 !important; /* Resmin üzerinde */
  border-radius: 10px !important; /* Border radius uyumu */
  transition: all 0.4s ease !important;
}

/* Desktop Animation & Hover Effects - Focus Mode (Jojova Style) */
@media (min-width: 769px) {
  /* 3D Focus Efekti - Grid'e hover olunca diğerleri solsun */
  .Custom8Banner-grid:hover .Custom8Banner-slide:not(:hover) {
    opacity: 0.25 !important;
    transform: scale(0.9) translateY(5px) !important;
    filter: grayscale(70%) blur(1px) !important;
    border-color: rgba(233, 195, 122, 0.2) !important;
  }

  /* Üzerine gelinen kartı öne çıkar */
  .Custom8Banner-grid .Custom8Banner-slide:hover {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    border-color: #e9c37a !important;
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(233, 195, 122, 0.4) !important;
    z-index: 10 !important;
    
    /* Hover'da skeleton animasyonunu durdur */
    animation: none !important;
    background: #000 !important;
  }

  /* Hover'da Inner Shadow'u Hafiflet (Görsel daha net görünsün) */
  .Custom8Banner-slide:hover::before {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 -20px 30px rgba(0,0,0,0.3) !important;
  }

  /* Glow Efekti */
  .Custom8Banner-slide:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      to bottom,
      rgba(233, 195, 122, 0.15) 0%,
      transparent 100%
    ) !important;
    pointer-events: none !important;
    z-index: 3 !important; /* Shadow'un da üzerinde */
  }
}

/* Link ve Resim Ayarları */
.Custom8Banner-link,
.Custom8Banner-cover,
.Custom8Banner-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Genel .slot stil çakışmalarını önle */
.Custom8Banner-slide .slot,
.Custom8Banner-slide .slot--carousel {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
}

.Custom8Banner-slide .slot:hover,
.Custom8Banner-slide .slot--carousel:hover {
  transform: none !important;
  background: transparent !important;
}

.Custom8Banner-link {
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}

.slot__cover,
.slot__img {
  width: 100% !important;
  height: 100% !important;
}

.Custom8Banner-img img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  vertical-align: top !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Tablet/Laptop Scroll */
@media (max-width: 1200px) and (min-width: 769px) {
  .Custom8Banner-grid {
    gap: 6px !important;
  }
}

/* Mobile Grid Layout */
@media (max-width: 768px) {
  /* Container'ları sabitle - Swiper kaydırmasını engelle */
  #extra-slider1 {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .Custom8Banner-wrapper,
  .Custom8Banner-ticker,
  .Custom8Banner-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* Swiper özelliklerini devre dışı bırak */
  .ticker-swiper-container {
    overflow: hidden !important;
    touch-action: auto !important;
  }
  
  .Custom8Banner-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 5px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    /* Swiper transform'u engelle */
    translate: none !important;
  }

  .Custom8Banner-grid::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Swiper slide transform'unu engelle */
  .Custom8Banner-slide.swiper-slide {
    transform: none !important;
    flex-shrink: 0 !important;
  }

  .Custom8Banner-slide {
    aspect-ratio: 3/4 !important;
    margin: 0 !important;
    border: none !important;
    transform: none !important;
    /* Mobilde de skeleton olsun */
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear !important;
  }

  /* Mobile minimal 3D efekt - Saydamlaştırma KALDIRILDI */
  /* .Custom8Banner-grid:hover .Custom8Banner-slide:not(:hover) {
    opacity: 0.5 !important;
    transform: scale(0.95) !important;
    filter: grayscale(30%) !important;
  } */
  
  .Custom8Banner-slide:hover {
    transform: scale(1.02) !important;
    z-index: 2 !important;
    animation: none !important;
    /* Mobilde border ekleyelim */
    border: 1px solid rgba(233, 195, 122, 0.6) !important; 
  }

  .Custom8Banner-img img {
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  
  .Custom8Banner-slide:hover::after {
    display: none !important;
  }
  
  /* Mobilde inner shadow biraz daha hafif */
  .Custom8Banner-slide::before {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2), inset 0 -20px 30px rgba(0,0,0,0.4) !important;
  }
}