/* HeroSlider — full-bleed carousel shell (KEREM hero-slider). */
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider {
  position: relative;
  height: clamp(520px, 84vh, 840px);
  overflow: hidden;
  background: var(--dark);
}

/* --- En-boy oranı (masaüstü) ---
   Oran seçildiğinde yüksekliği slider'ın KENDİSİ üstlenir: sabit yükseklik
   kalkar, kutu seçilen orana göre şekillenir ve görsel object-fit: cover ile
   alanı tam doldurur → üstte/altta siyah bar oluşmaz.

   min-height, aspect-ratio'yu ezebilecek tek kuraldır — bu yüzden bilinçli
   olarak DÜŞÜK tutuldu. Amacı metnin sığacağını garanti etmek değil (öyle
   olsaydı 390px'lik bir telefonda 4:3 = 292px'i ezip merchant'ın seçimini
   geçersiz kılardı); yalnızca çok dar ekran + çok basık oran birleşiminde
   (ör. 320px'de 16:9 → 180px) slider'ın kullanılamaz hâle gelmesini önler.
   Listedeki hiçbir oran, olağan telefon genişliklerinde (≥356px) bu tabana
   değmez, yani seçilen oran birebir uygulanır. */
@media (min-width: 761px) {
  .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider.hs-ar-dt {
    height: auto;
    aspect-ratio: var(--hsr-ar-dt);
    min-height: 280px;
  }
}
@media (max-width: 760px) {
  .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider.hs-ar-mb {
    height: auto;
    aspect-ratio: var(--hsr-ar-mb);
    min-height: 200px;
  }
}

/* Oran modunda viewport artık `inset: 0` ile sabit bir yüksekliğe değil,
   oranın belirlediği kutuya oturur — absolute konum korunur, yükseklik
   kaynağı değişir. */

.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* The moving track. translateX is set inline from the active index. */
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}

/*
 * IkasComponentRenderer nests each child a few levels deep (its outer wrapper is
 * display:contents). Collapse the wrappers so the real slide wrapper becomes the
 * flex cell, and force a full-width / full-height cell per slide.
 */
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__track > *, .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__track > * > * {
  display: contents;
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__track > * > * > * {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
}

/* --- Arrows --- */
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--hs-arrow, #fff) 45%, transparent);
  background: rgba(13, 13, 13, 0.18);
  color: var(--hs-arrow, #fff);
  backdrop-filter: blur(4px);
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__arrow:hover:not(:disabled) {
  background: var(--hs-accent, var(--accent));
  border-color: var(--hs-accent, var(--accent));
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__arrow--prev {
  left: clamp(12px, 2vw, 30px);
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__arrow--next {
  right: clamp(12px, 2vw, 30px);
}

/* --- Bottom bar: dots + counter --- */
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__bottom {
  position: absolute;
  /* inset past the arrows so dots (left) and counter (right) stay clear of them
     and line up with the slide copy above */
  left: clamp(80px, 7.5vw, 104px);
  right: clamp(80px, 7.5vw, 104px);
  bottom: clamp(22px, 4vh, 38px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__dots {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__dot {
  position: relative;
  width: 56px;
  height: 2px;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__dot.is-active {
  background: rgba(255, 255, 255, 0.5);
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__dot-fill {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  animation: cc_oe6aXTYiT2_Y7KUOezBGs_hs-fill linear forwards;
}
@keyframes cc_oe6aXTYiT2_Y7KUOezBGs_hs-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #fff;
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__count b {
  color: var(--hs-accent, var(--accent));
  font-weight: 500;
}

/* --- Empty state --- */
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider--empty {
  display: grid;
  place-items: center;
  min-height: clamp(320px, 40vh, 480px);
}
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__empty {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  padding: 0 24px;
}

@media (max-width: 760px) {
  .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider {
    height: clamp(480px, 76vh, 640px);
  }
  .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__arrow {
    display: none;
  }
  /* arrows gone → bring the bottom bar back to the gutter */
  .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__bottom {
    left: var(--gutter);
    right: var(--gutter);
  }
  /* Oran modunda kutu alçalabildiği için metin katmanının alt boşluğu da
     küçülsün — sabit 72px, 16:9 gibi alçak oranlarda başlığı yukarı sıkıştırıp
     kırpılmaya yol açıyordu. Slaytın kendi kuralını parent'tan eziyoruz:
     yüksekliği belirleyen taraf burası. */
  .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider.hs-ar-mb .hs-slide__inner {
    padding-bottom: clamp(24px, 9%, 72px);
  }
}

/* TOKEN KÖPRÜ — bkz. global.css */
.cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__empty, .cc_oe6aXTYiT2_Y7KUOezBGs .hero-slider__count { letter-spacing: var(--ts-label-narrow-ls, .1em); }