/*
 * Koleksiyon paneli — issue #13. Figma 1440px çerçevesi (node 3:5863): panel
 * ekranın ~%65'i, tam yükseklik görsel, içerik sol üstte 40px iç boşlukla,
 * açıklama ~340px genişliğe sınırlı.
 *
 * Genişlik/yükseklik section'dan CSS değişkeniyle gelir; ölçü kartın kendi
 * üzerinde çünkü `IkasComponentRenderer` paneli `display: contents`
 * sarmalayıcıların altına koyar — şeridin gerçek flex öğesi bu eleman.
 */

.cc_g2xfyo6p_h5hSySFTCg .collection-panel {
  position: relative;
  display: block;
  flex: 0 0 var(--ec-panel-w, 65vw);
  width: var(--ec-panel-w, 65vw);
  height: var(--ec-panel-h, 80vh);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--color-surface-muted);
  color: var(--color-white);
  text-decoration: none;
}

.cc_g2xfyo6p_h5hSySFTCg .collection-panel:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
}

.cc_g2xfyo6p_h5hSySFTCg .collection-panel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Görsel üzerindeki metnin okunabilirliği için hafif karartma. */
.cc_g2xfyo6p_h5hSySFTCg .collection-panel-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-black);
  opacity: var(--ec-overlay, 0.2);
}

.cc_g2xfyo6p_h5hSySFTCg .collection-panel-body {
  position: relative;
  display: block;
  padding: 54px 40px 40px;
}

.cc_g2xfyo6p_h5hSySFTCg .collection-panel-title {
  display: block;
  color: var(--color-white);
}

.cc_g2xfyo6p_h5hSySFTCg .collection-panel-text {
  display: block;
  max-width: 340px;
  margin-top: 16px;
  color: var(--color-white);
}

@media (max-width: 767px) {
  .cc_g2xfyo6p_h5hSySFTCg .collection-panel {
    flex-basis: 85vw;
    width: 85vw;
  }

  .cc_g2xfyo6p_h5hSySFTCg .collection-panel-body {
    padding: 32px 20px 20px;
  }
}