
/* Vuvito ürün kartı
 *
 * Görsel kartı TAM KAPLAR. Stitch'te kart beyaz zeminliydi, 32px iç boşluğu
 * vardı ve görsel ortada küçük duruyordu — burada öyle değil: `object-fit:
 * cover` ile görsel çerçevenin tamamını doldurur.
 *
 * Oran ve hover ölçeği ebeveynden iner:
 *   --vt-pc-ratio, --vt-pc-zoom
 * Yazı boyutları da ebeveynin --vt-pc-title-* / --vt-pc-price-* değerlerini
 * kullanır; verilmezse buradaki yedekler devreye girer.
 */

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard, .cc_lqof57t2_rljVk0J95K .vt-pcard, .cc_lqof57t2_6vUkrnDXdR .vt-pcard, .cc_lqof57t2_t9P0wyeCZj .vt-pcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Kart, esnek/izgara ogesi olarak varsayilan `min-width: auto` tasir:
     bosluksuz uzun bir varyasyon adi ("3'lu Set(Kuzucuk+Medium+Large)")
     sutunu icerige gore genisletip sayfayi yatayda kaydiriyordu. */
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__frame, .cc_lqof57t2_rljVk0J95K .vt-pcard__frame, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__frame, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--vt-pc-ratio, 4 / 5);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background: var(--color-surface-alt);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__media, .cc_lqof57t2_rljVk0J95K .vt-pcard__media, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__media, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__media, .cc_lqof57t2_2C8Wba1IsJ .vt-pcard__placeholder, .cc_lqof57t2_rljVk0J95K .vt-pcard__placeholder, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__placeholder, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Kartı tamamen kaplar — beyaz boşluk bırakmaz. */
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__placeholder, .cc_lqof57t2_rljVk0J95K .vt-pcard__placeholder, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__placeholder, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__placeholder {
  background: var(--color-surface-alt);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard:hover .vt-pcard__media, .cc_lqof57t2_rljVk0J95K .vt-pcard:hover .vt-pcard__media, .cc_lqof57t2_6vUkrnDXdR .vt-pcard:hover .vt-pcard__media, .cc_lqof57t2_t9P0wyeCZj .vt-pcard:hover .vt-pcard__media {
  transform: scale(var(--vt-pc-zoom, 1));
}

/* ─── Rozet ─────────────────────────────────────────────── */

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__badge, .cc_lqof57t2_rljVk0J95K .vt-pcard__badge, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__badge, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: 10px;
  text-transform: uppercase;
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__badge--muted, .cc_lqof57t2_rljVk0J95K .vt-pcard__badge--muted, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__badge--muted, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__badge--muted {
  color: var(--color-text-secondary);
}

/* ─── Hızlı sepete ekle ─────────────────────────────────── */

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__add, .cc_lqof57t2_rljVk0J95K .vt-pcard__add, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__add, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-primary);
  --vt-icon-stroke: 1.75;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  /* Dokunmatik cihazda hover yok — orada hep görünür kalır (aşağıda). */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms ease, transform 250ms ease, background 250ms ease,
    color 250ms ease;
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard:hover .vt-pcard__add, .cc_lqof57t2_rljVk0J95K .vt-pcard:hover .vt-pcard__add, .cc_lqof57t2_6vUkrnDXdR .vt-pcard:hover .vt-pcard__add, .cc_lqof57t2_t9P0wyeCZj .vt-pcard:hover .vt-pcard__add, .cc_lqof57t2_2C8Wba1IsJ .vt-pcard__add:focus-visible, .cc_lqof57t2_rljVk0J95K .vt-pcard__add:focus-visible, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__add:focus-visible, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__add:hover, .cc_lqof57t2_rljVk0J95K .vt-pcard__add:hover, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__add:hover, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add:hover {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__add.is-added, .cc_lqof57t2_rljVk0J95K .vt-pcard__add.is-added, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__add.is-added, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add.is-added {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  opacity: 1;
  transform: translateY(0);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__add:disabled, .cc_lqof57t2_rljVk0J95K .vt-pcard__add:disabled, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__add:disabled, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add:disabled {
  cursor: default;
}

/* Dokunmatik cihazlarda hover durumu yok — buton kalıcı görünür,
   yoksa mobilde hızlı ekleme hiç erişilebilir olmaz. */
@media (hover: none) {
  .cc_lqof57t2_2C8Wba1IsJ .vt-pcard__add, .cc_lqof57t2_rljVk0J95K .vt-pcard__add, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__add, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add {
    opacity: 1;
    transform: none;
  }
}

/* ─── Metin ─────────────────────────────────────────────── */

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__body, .cc_lqof57t2_rljVk0J95K .vt-pcard__body, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__body, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* Renk, kalinlik ve hiza ebeveyn section'dan CSS degiskeniyle iner;
     verilmezse yedek degerler devreye girer. */
  text-align: var(--vt-pc-align, left);
  align-items: var(--vt-pc-align-items, stretch);
}

/* `text-align` metni hizalar ama esnek kutu icindeki ogeleri degil;
   fiyat satiri bir flex oldugu icin ayrica hizalanmali. */
.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__body, .cc_lqof57t2_rljVk0J95K .vt-pcard__body, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__body, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__body { --vt-pc-align-items: stretch; }

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__title, .cc_lqof57t2_rljVk0J95K .vt-pcard__title, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__title, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__title {
  margin: 0;
  color: var(--vt-pc-title-color, inherit);
  font-weight: var(--vt-pc-title-weight, inherit);
  /* Urun adi iki satira kadar sarar, sonrasi kesilir. */
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: var(--vt-pc-title-m, 15px);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__variant, .cc_lqof57t2_rljVk0J95K .vt-pcard__variant, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__variant, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__variant {
  margin: 0;
  color: var(--color-text-secondary);
  /* Varyasyon adi tek satirda kalir; sigmayan kismi ucnokta ile kesilir.
     Sarmak birakilsaydi kartlarin yuksekligi urunden urune degisiyordu.
     Tam adi gormek isteyen icin `title` niteligi index.tsx'te veriliyor. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__price, .cc_lqof57t2_rljVk0J95K .vt-pcard__price, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__price, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__price {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: var(--vt-pc-justify, flex-start);
  gap: 4px 8px;
  min-width: 0;
  font-weight: var(--vt-pc-price-weight, inherit);
  color: var(--color-accent);
  font-size: var(--vt-pc-price-m, 14px);
  letter-spacing: normal;
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__price-final, .cc_lqof57t2_rljVk0J95K .vt-pcard__price-final, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__price-final, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__price-final {
  color: var(--vt-pc-price-color, inherit);
}

.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__price-old, .cc_lqof57t2_rljVk0J95K .vt-pcard__price-old, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__price-old, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__price-old {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: 0.85em;
}

/* Tutar ile para birimi arasinda satir atlamasin: dar kartta "₺" ustte,
   rakam altta kaliyordu. Iki fiyat gerekirse alt alta gecer. */
.cc_lqof57t2_2C8Wba1IsJ .vt-pcard__price > *, .cc_lqof57t2_rljVk0J95K .vt-pcard__price > *, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__price > *, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__price > * {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .cc_lqof57t2_2C8Wba1IsJ .vt-pcard__title, .cc_lqof57t2_rljVk0J95K .vt-pcard__title, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__title, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__title { font-size: var(--vt-pc-title-d, 18px); }
  .cc_lqof57t2_2C8Wba1IsJ .vt-pcard__price, .cc_lqof57t2_rljVk0J95K .vt-pcard__price, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__price, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__price { font-size: var(--vt-pc-price-d, 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc_lqof57t2_2C8Wba1IsJ .vt-pcard__media, .cc_lqof57t2_rljVk0J95K .vt-pcard__media, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__media, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__media, .cc_lqof57t2_2C8Wba1IsJ .vt-pcard__add, .cc_lqof57t2_rljVk0J95K .vt-pcard__add, .cc_lqof57t2_6vUkrnDXdR .vt-pcard__add, .cc_lqof57t2_t9P0wyeCZj .vt-pcard__add {
    transition: none;
  }

  .cc_lqof57t2_2C8Wba1IsJ .vt-pcard:hover .vt-pcard__media, .cc_lqof57t2_rljVk0J95K .vt-pcard:hover .vt-pcard__media, .cc_lqof57t2_6vUkrnDXdR .vt-pcard:hover .vt-pcard__media, .cc_lqof57t2_t9P0wyeCZj .vt-pcard:hover .vt-pcard__media {
    transform: none;
  }
}
