/* ===== UGC kartı — Silva 2026 =====
 * Referans: design-reference/home/silva-home.jsx → SocialProof/UgcCard
 * Dikey kare: radius 14 · krem zemin (görsel yoksa) · kapak kesim
 *   oran bağlamdan gelir (--ugc-ratio: masaüstü 9/14, mobil raf 9/16)
 * Oynat rozeti: 30 daire · lacivert .78 · beyaz üçgen 13 · sağ üst 10
 * Kullanıcı adı: 11/600 beyaz + gölge · sol alt 10
 */

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card {
  position: relative;
  display: block;
  aspect-ratio: var(--ugc-ratio, 9 / 14);
  border-radius: 14px;
  overflow: hidden;
  background: var(--silva-cream);
  text-decoration: none;
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__media {
  position: absolute;
  inset: 0;
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--silva-ink);
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__play {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: rgba(8, 32, 158, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kombos-white);
}

/* Video yüklü kart: kapağın tamamı başlatma yüzeyi */
.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card--clickable {
  cursor: pointer;
}

/* Kontrolsüz oynatmada video alanı tıkla-oynat/durdur yüzeyidir */
.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__video--toggle {
  cursor: pointer;
}

/* Video yüklüyse rozet gerçek düğmedir */
.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__play--btn {
  border: none;
  padding: 0;
  cursor: pointer;
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__play-svg {
  font-size: 0.8125rem;
}

/* Ses aç/kapat rozeti — oynat rozetinin karşılığı, sağ alt köşe */
.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__sound {
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  width: 1.875rem;
  height: 1.875rem;
  border: none;
  padding: 0;
  border-radius: 50%;
  background: rgba(8, 32, 158, 0.78);
  color: var(--kombos-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__sound:hover, .cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__sound:focus-visible {
  background: rgba(8, 32, 158, 0.95);
}

/* Videonun kendi kontrol çubuğu açıksa rozet çubuğun üstüne çıkar */
.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__sound--above-controls {
  bottom: 3rem;
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__sound-svg {
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  .cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__sound {
    transition: none;
  }
}

.cc_dht747cl_xakr9cp5p3 .kombos-ugc-card__handle {
  position: absolute;
  bottom: 0.625rem;
  left: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--kombos-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}