.cc_hzfzi156_kqpJfMUTNS .si {
  display: flex;
  gap: 16px;
}

.cc_hzfzi156_kqpJfMUTNS .si__side {
  flex-shrink: 0;
  width: 300px;
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  aspect-ratio: var(--si-side-ratio-masaustu, auto);
}

.cc_hzfzi156_kqpJfMUTNS .si__side-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--si-side-fit-masaustu, cover);
  object-position: var(--si-side-pos-masaustu, center);
}

.cc_hzfzi156_kqpJfMUTNS .si__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
  z-index: 1;
}

.cc_hzfzi156_kqpJfMUTNS .si__overlay-cta {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  text-decoration: none;
}

/*
  Grid: sütun sayısı --si-kolon-masaustu / --si-kolon-mobil custom
  property'leri üzerinden CSS media query ile belirlenir (JS'ten inline
  style ile değil). Böylece görünür kolon sayısı, mobil dedeksiyonu yapan
  JS state'inin (isMobile) ilk render'daki zamanlama sorunlarından
  (SSR/hidrasyon veya erken script çalışması) tamamen bağımsız olarak,
  browser'ın breakpoint'i her zaman anında ve doğru uygulamasıyla belirlenir.
*/
.cc_hzfzi156_kqpJfMUTNS .si__grid {
  flex: 1;
  display: grid;
  gap: var(--card-gap, 16px);
  grid-template-columns: repeat(var(--si-kolon-masaustu, 4), 1fr);
}

/* ——— Slider modu ——— */
.cc_hzfzi156_kqpJfMUTNS .si--slider {
  display: flex;
  gap: 16px;
}

/* Sol görsel varken: görsel solda, slider (viewport + oklar) sağda kolon */
.cc_hzfzi156_kqpJfMUTNS .si__slider-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/*
  Viewport: flex container + gizli yatay scroll.
  Bu sayede flex: 0 0 100% olan sayfalar viewport genişliğini baz alır
  ve scrollTo() çalışır.
*/
.cc_hzfzi156_kqpJfMUTNS .si__slider-viewport {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.cc_hzfzi156_kqpJfMUTNS .si__slider-viewport::-webkit-scrollbar {
  display: none;
}

/* Her sayfa: viewport'un tam genişliği */
.cc_hzfzi156_kqpJfMUTNS .si__slider-sayfa {
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* Sayfa içindeki grid */
.cc_hzfzi156_kqpJfMUTNS .si__slider-sayfa .si__grid {
  flex: none;
  width: 100%;
}

/* Oklar */
.cc_hzfzi156_kqpJfMUTNS .si__slider-oklar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 24px;
}

.cc_hzfzi156_kqpJfMUTNS .si__slider-ok {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #111;
  padding: 4px 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}

.cc_hzfzi156_kqpJfMUTNS .si__slider-ok:hover:not(:disabled) {
  opacity: 0.5;
}

.cc_hzfzi156_kqpJfMUTNS .si__slider-ok:disabled {
  opacity: 0.2;
  cursor: default;
}

@media (max-width: 900px) {
  .cc_hzfzi156_kqpJfMUTNS .si {
    flex-direction: column;
  }

  .cc_hzfzi156_kqpJfMUTNS .si__side {
    width: 100%;
    height: var(--si-side-height-mobil, 240px);
    aspect-ratio: var(--si-side-ratio-mobil, auto);
  }

  .cc_hzfzi156_kqpJfMUTNS .si__side-img {
    object-fit: var(--si-side-fit-mobil, cover);
    object-position: var(--si-side-pos-mobil, center);
  }

  .cc_hzfzi156_kqpJfMUTNS .si__grid {
    gap: var(--card-gap-mobile, 16px);
    grid-template-columns: repeat(var(--si-kolon-mobil, 2), 1fr) !important;
  }
}