/* Sütun / gap / slider ayarları parent UrunSlider'ın section'ında CSS
   değişkeni olarak tanımlanır ve buraya miras yoluyla gelir. */
.cc_LhIzIZp6eR_xZIE9nfEXk .svu {
  --svu-cols: var(--us-cols, 6);
  --svu-gap: var(--us-gap, 24px);
  position: relative;
  width: 100%;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__viewport {
  display: flex;
  flex-wrap: var(--us-wrap, nowrap);
  gap: var(--svu-gap);
  overflow-x: var(--us-overflow, auto);
  /* overflow-x: auto, overflow-y'yi de auto yapar; kartlardaki küçük dikey
     taşmalar tekerleği yakalayıp sayfa kaydırmasını engellemesin. */
  overflow-y: var(--us-overflow-y, hidden);
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__viewport::-webkit-scrollbar {
  display: none;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__viewport--dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__item {
  display: flex;
  flex: 0 0 calc((100% - (var(--svu-cols) - 1) * var(--svu-gap)) / var(--svu-cols));
  min-width: 0;
  scroll-snap-align: start;
}

/* Sol görsel varken: görsel 1.3 kart genişliğinde, kartlar kalan alanı
   sütun sayısına göre paylaşır. */
.cc_LhIzIZp6eR_xZIE9nfEXk .svu--has-side .svu__item {
  flex-basis: calc((100% - var(--svu-cols) * var(--svu-gap)) / (var(--svu-cols) + 1.3));
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__side {
  position: relative;
  display: block;
  flex: 0 0 calc((100% - var(--svu-cols) * var(--svu-gap)) / (var(--svu-cols) + 1.3) * 1.3);
  align-self: flex-start;
  aspect-ratio: var(--svu-side-ratio, 1);
  overflow: hidden;
  scroll-snap-align: start;
  color: #ffffff;
  text-decoration: none;
  -webkit-user-drag: none;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__side-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__side-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px;
  text-align: center;
  color: #ffffff;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__side-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__side-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__side-title p, .cc_LhIzIZp6eR_xZIE9nfEXk .svu__side-desc p {
  margin: 0;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__arrows {
  display: var(--us-arrows, flex);
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(41, 45, 50);
  cursor: pointer;
}

.cc_LhIzIZp6eR_xZIE9nfEXk .svu__arrow svg {
  width: 20px;
  height: 20px;
}


@media (max-width: 1023.98px) {
  .cc_LhIzIZp6eR_xZIE9nfEXk .svu {
    --svu-cols: var(--us-cols-m, 2);
    --svu-gap: var(--us-gap-m, 16px);
  }

  /* Mobilde sol görsel de bir kart genişliğinde ilk slayt olur. */
  .cc_LhIzIZp6eR_xZIE9nfEXk .svu--has-side .svu__item, .cc_LhIzIZp6eR_xZIE9nfEXk .svu__side {
    flex-basis: calc((100% - (var(--svu-cols) - 1) * var(--svu-gap)) / var(--svu-cols));
  }
}