/* ============================================================
   ÜRÜN KARTI — iskelet ölçüleri Trendyol mobil kartından (2026-09-25);
   görünüm defter dünyasında: kupon gibi, görsel ile bilgi arasında yırtma
   çizgisi, en çok 1 durum, sepet fiyatı karbon (2026-10-25). Ölçüm tarihçedir:
     kart     1px çerçeve, yarıçap 8, beyaz
     görsel   157,6 × 236,5 = 2:3, zemin var(--panel)          → %65
     bilgi    128px, iç boşluk 10                          → %35
       başlık   12/14, 2 satır (28px), marka 600
       puan     10px, yıldız 14px, (sayı)
       fiyat    14/600
     favori   28px beyaz daire, sağ üst 10px içeride
     bant     16px, var(--metin2), 10/600 beyaz "Kargo Bedava"
   ============================================================ */

.tk{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--zemin); border:1px solid var(--hat2); border-radius:var(--r3);
  color:var(--metin);
  transition:border-color var(--hiz), box-shadow var(--hiz);
}
.grid > .tk{ content-visibility:auto; contain-intrinsic-size:auto 360px; }

/* ---------- görsel ---------- */
.tk-ust{ position:relative; overflow:hidden; border-radius:var(--r3) var(--r3) 0 0; }
.tk .gorsel{ aspect-ratio:2 / 3; background:var(--panel); }
/* yırtma çizgisi: görsel ile koçan arasında, iki yanda çentik */
.tk-ust::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:repeating-linear-gradient(90deg, var(--hat2) 0 5px, transparent 5px 9px);
}
.tk-bilgi{ position:relative; }
.tk-bilgi::before, .tk-bilgi::after{
  content:""; position:absolute; top:-6px; width:12px; height:12px; border-radius:50%;
  background:var(--sayfa); border:1px solid var(--hat2);
}
.tk-bilgi::before{ left:-7px; clip-path:inset(0 0 0 50%); }
.tk-bilgi::after{ right:-7px; clip-path:inset(0 50% 0 0); }

.tk-rozetler{
  position:absolute; top:10px; left:10px; z-index:2; max-width:calc(100% - 52px);
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
}
.tk-rozetler .rozet{ padding:2px 5px; font-size:10px; line-height:12px; }

.tk-fav{
  position:absolute; top:10px; right:10px; z-index:2;
  width:28px; height:28px; display:grid; place-items:center; padding:0;
  background:var(--zemin); border:0; border-radius:var(--r);
  box-shadow:0 0 0 1.5px var(--metin) inset; color:var(--metin); cursor:pointer;
  /* 28px görünür, 44px dokunma alanı (::after) */
}
.tk-fav .ikn{ width:16px; height:16px; }
.tk-fav[aria-pressed="true"]{ color:var(--mnd); }
.tk-fav[aria-pressed="true"] .ikn{ fill:var(--mnd); }
/* 28px görsel, dokunma alanı 44px */
.tk-fav::after{ content:""; position:absolute; inset:-8px; }

.tk-bilgi{
  display:flex; flex-direction:column; gap:4px;
  height:122px; padding:10px; min-width:0;
}
.tk-ad{
  flex:0 0 28px;
  font-size:12px; line-height:14px; font-weight:400; color:var(--metin); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
.tk-ad b{ font-weight:700; }
.tk-ad .onay-ikon{ width:11px; height:11px; }

.tk-puan{
  display:flex; align-items:center; gap:3px; margin:0;
  font-size:10px; line-height:12px; color:var(--metin);
}
.tk-puan .yildizlar{ font-size:13px; letter-spacing:0; color:var(--sari); }
.tk-puan .yildizlar i.bos{ color:var(--hat); }

.tk-fiyat{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tk-kargo{
  display:flex; align-items:center; gap:4px; min-height:12px;
  font-size:var(--t1); font-weight:700; line-height:12px; color:var(--metin);
}
.tk-kargo .ikn{ width:12px; height:12px; flex:0 0 auto; color:var(--metin); }
.tk-fiyat-sat{
  display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; margin:0;
  line-height:16px;
}
.tk-yeni{ font-size:14px; font-weight:600; color:var(--fiyat); }
/* sepet fiyatı ödenecek tutar: büyük; liste fiyatı altında küçük satır */
.tk-sepette{ margin:0; font-size:var(--t2); font-weight:700; line-height:16px; color:var(--yesil); }
.tk-sepette b{ font-family:var(--yazi-dar); font-size:18px; font-weight:700; letter-spacing:var(--dar-aralik, .01em); color:var(--fiyat); }
.tk-ikincil .tk-yeni{ font-size:var(--t3); font-weight:600; }
.tk-ikincil{ line-height:14px; }
.tk-yeni.tk-ind{ color:var(--fiyat-ind); }
.tk-eski{ font-size:12px; color:var(--metin3); }

@media (hover:hover){
  .tk:hover{ border-color:var(--metin); box-shadow:inset 0 0 0 .5px var(--metin); }
}

/* ray genişlikleri: 2,25 kart görünür (Trendyol) */
.flas .tk{ width:min(calc((100vw - 30px) / 2.25), 184px); }
@media (min-width:900px){
  .flas .tk{ width:184px; }
}