/**
 * Ana sayfa hero — minimal tamamlayıcı.
 * Asıl görünüm: main2-hesap.css (section.hero, .hero-slider, thumb, slide metinleri).
 * Burada: z-index, gece gradient, masaüstü pagination overflow, mobil thumb yatay kaydırma.
 */
section.hero.hero--has-bg {
  position: relative;
}

section.hero.hero--has-bg > .container-xxl {
  position: relative;
  z-index: 1;
}

body.dark section.hero.hero--has-bg::before,
:root[data-theme="dark"] section.hero.hero--has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 26%, rgb(29, 29, 29) 79%);
}

@media (min-width: 992px) {
  .hero-slider .swiper-pagination {
    overflow: visible !important;
  }
}

.swiper-wrapper {
  position: relative;
}

.hero-slider .swiper-pagination .hero-tumb svg {
  overflow: visible !important;
}

/*
 * Sliderpanel Tema: renk sadece seçili kutuda (slide geçişi / thumb tıklanınca).
 * Pasif kutular demo gibi beyaz ikon; aktif olan --hero-thumb-accent alır.
 */
.hero-slider .swiper-pagination .hero-tumb.hero-tumb--theme-accent:not(.swiper-pagination-bullet-active) svg,
.hero-slider .swiper-pagination .hero-tumb.hero-tumb--theme-accent:not(.swiper-pagination-bullet-active) svg * {
  fill: #fff !important;
  filter: brightness(0) invert(1) !important;
  opacity: 1;
  transition: fill 0.3s ease, filter 0.3s ease;
}
/* Demo (main2): .hero-tumb { transition: all 0.3s ease } — kutu/padding/border aynı hız */
.hero-slider .swiper-pagination .hero-tumb.hero-tumb--theme-accent.swiper-pagination-bullet-active {
  border-top-color: var(--hero-thumb-accent) !important;
  color: var(--hero-thumb-accent) !important;
}
.hero-slider .swiper-pagination .hero-tumb.hero-tumb--theme-accent.swiper-pagination-bullet-active svg,
.hero-slider .swiper-pagination .hero-tumb.hero-tumb--theme-accent.swiper-pagination-bullet-active svg * {
  filter: none !important;
  fill: var(--hero-thumb-accent) !important;
  opacity: 1;
  transition: fill 0.3s ease, filter 0.3s ease;
}

/* Mobil: main2’deki width:100% thumb + yatay şerit — flex ile düzelt */
@media (max-width: 991px) {
  .hero-slider .swiper-pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 60px;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hero-slider .swiper-pagination::-webkit-scrollbar {
    display: none;
  }
  .hero-slider .swiper-pagination .hero-tumb,
  .hero-slider .swiper-pagination .hero-tumb.swiper-pagination-bullet {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 115px !important;
    height: 60px !important;
    padding: 15px 24px !important;
    margin: 0 !important;
  }
}

:root[data-theme="dark"] .hero-slider .swiper-pagination .hero-tumb:not(.swiper-pagination-bullet-active) {
  background: rgba(0, 0, 0, 0.44);
  border-left-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .hero-slider .swiper-pagination .hero-tumb.swiper-pagination-bullet-active {
  background: rgba(0, 0, 0, 0.15);
}

.hero .hero-btn.hero-btn--accent {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sub-hero .sub-item img.img-fluid {
  width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-btn {
    transition: none !important;
  }
}