/* Sahne: başlık ortalı; telefonda görsel (4:5) üstte, numaralı ürün listesi altta; tablette masaüstü görseli (16:9)
 * üstte, liste altta; masaüstünde görsel (16:9) solda, liste sağda. Satırlar ve noktalar Sahne Ürünü bileşeninde (SceneSpot). Nokta gövdeye göre konumlanır: gövde
 * kapsayıcı sorgu kabıdır, görselin genişliği (--sc-w) ve yüksekliği (--sc-h) gövde genişliğinden hesaplanır.
 * Görsel bu yüzden gövdenin sol üst köşesinde durur; sütun oranı ya da boşluk değişirse hesap da değişmeli. */
.cc_tljmo18f_eAH6X9F1Si .kvo-sc {
  padding: 56px 0;
  background: var(--kvo-bg);
  color: var(--kvo-ink);
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__head {
  max-width: 672px;
  margin: 0 auto 24px;
  text-align: center;
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__title {
  color: var(--kvo-heading);
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__sub {
  margin-top: 6px;
  color: color-mix(in srgb, var(--kvo-ink) 60%, transparent);
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  container-type: inline-size;
  --sc-w: 100cqw;
  --sc-h: 125cqw;
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--kvo-radius-lg);
  background: var(--kvo-n100);
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__media picture, .cc_tljmo18f_eAH6X9F1Si .kvo-sc__img {
  display: block;
  width: 100%;
  height: 100%;
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__img {
  object-fit: cover;
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__list-title {
  margin: 0 0 10px;
  color: var(--kvo-ink);
}

.cc_tljmo18f_eAH6X9F1Si .kvo-sc__list {
  counter-reset: kvo-sahne;
}

/* Tablet: masaüstü görseli (16:9) tam genişlikte, liste altında; noktalar masaüstü konumunda (SceneSpot) */
@media (min-width: 768px) {
  .cc_tljmo18f_eAH6X9F1Si .kvo-sc__body {
    --sc-h: calc(100cqw * 9 / 16);
  }

  .cc_tljmo18f_eAH6X9F1Si .kvo-sc__media {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .cc_tljmo18f_eAH6X9F1Si .kvo-sc {
    padding: 72px 0;
  }

  .cc_tljmo18f_eAH6X9F1Si .kvo-sc__head {
    margin-bottom: 32px;
  }

  /* Görsel sütunu = (gövde - 32px boşluk) x 1.65 / 2.65 */
  .cc_tljmo18f_eAH6X9F1Si .kvo-sc__body {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 32px;
    --sc-w: calc((100cqw - 32px) * 1.65 / 2.65);
    --sc-h: calc((100cqw - 32px) * 1.65 / 2.65 * 9 / 16);
  }

  .cc_tljmo18f_eAH6X9F1Si .kvo-sc__media {
    align-self: start;
    aspect-ratio: 16 / 9;
  }

  .cc_tljmo18f_eAH6X9F1Si .kvo-sc__side {
    align-self: center;
  }
}