@charset "UTF-8";
/* ==========================================================================
   serviyet.com — ÜRÜN KARTI (ortak bileşen)
   public/css/urun-kart.css

   TEK KART, ÜÇ KULLANIM YERİ:
     1. Anasayfa kategori sekmeleri  → .ukart-izgara
     2. Ürün listeleme sayfası       → .ukart-izgara
     3. Detay "Benzer Ürünler"       → .ukart-serit (yatay kaydırma)

   Renkler tema.css :root'undan gelir; burada sabit renk kodu yazılmaz.
   Önek: "ukart-"
   ========================================================================== */

/* ---- 1. KAPSAYICILAR ---- */
.ukart-izgara {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ukart-serit {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.ukart-serit .ukart { flex: 0 0 186px; scroll-snap-align: start; }

/* ---- 2. KART GÖVDESİ ----
   Kartın tamamı <a> DEĞİL: içinde form var, iç içe <a> geçersiz olurdu.
   Görsel ve ürün adı ayrı ayrı link. */
.ukart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--srv-renk-cizgi-acik);
  border-radius: var(--srv-radius-l);
  overflow: hidden;
  font-family: var(--srv-font-govde);
  transition: border-color var(--srv-gecis), box-shadow var(--srv-gecis),
              transform var(--srv-gecis);
}
.ukart:hover {
  border-color: var(--srv-renk-vurgu);
  box-shadow: 0 4px 16px rgba(7, 45, 64, .10);
  transform: translateY(-2px);
}
.ukart.mevcut { border-color: var(--srv-renk-vurgu); background: #F4FDFC; }
.ukart a { text-decoration: none; }

/* ---- 3. GÖRSEL ---- */
.ukart-resim {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--srv-renk-zemin-acik);
  border-bottom: 1px solid #F0F5F7;
  overflow: hidden;
}
.ukart-resim img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform .3s ease;
}
.ukart:hover .ukart-resim img { transform: scale(1.04); }

.ukart-indirim {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 2px 8px; border-radius: 12px;
  background: #E05252; color: #fff;
  font-size: 10px; font-weight: 700;
}
.ukart-tukendi {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .78);
}
.ukart-tukendi span {
  padding: 5px 14px; border-radius: 20px;
  background: var(--srv-renk-zemin-koyu); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* ---- 4. GÖVDE — ölçü odaklı hiyerarşi ----
   Bu grupta kartlar arasındaki TEK fark ölçüdür; "SMS Delikli Örtü" kısmı
   40 kartta da aynı. O yüzden görsel ağırlık ölçüde, tekrar eden ad soluk. */
.ukart-govde {
  flex: 1;
  padding: 12px 12px 14px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 3px;
}
.ukart-olcu {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-family: var(--srv-font-baslik);
  font-size: 23px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--srv-renk-ana);
}
.ukart-olcu-birim {
  font-family: var(--srv-font-govde);
  font-size: 11px; font-weight: 600;
  color: #7AAABB; letter-spacing: 0;
}
/* Ölçüsü ayrıştırılamayan ürünlerde ad başrole geçer */
.ukart-ad-buyuk {
  font-family: var(--srv-font-baslik);
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--srv-renk-ana);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ukart-grup {
  font-size: 11.5px; font-weight: 500; line-height: 1.35;
  color: #7AAABB;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ukart-fiyat {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 5px;
  margin-top: 6px;
}
.ukart-fiyat-yeni {
  font-size: 17px; font-weight: 800; line-height: 1;
  color: var(--srv-renk-ana);
}
.ukart-fiyat-yeni.indirimli { color: #E05252; }
.ukart-fiyat-eski {
  font-size: 11.5px; font-weight: 500;
  color: #A8BFC9; text-decoration: line-through;
}

/* ---- 5. SEPETE EKLE ---- */
.ukart-sepet { width: 100%; margin-top: 10px; }
.ukart-btn {
  width: 100%; height: 34px;
  border: 1.5px solid var(--srv-renk-vurgu);
  border-radius: var(--srv-radius-m);
  background: #fff; color: #00897F;
  font-family: var(--srv-font-govde);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: background var(--srv-gecis), color var(--srv-gecis);
}
.ukart-btn:hover { background: var(--srv-renk-vurgu); color: #fff; }
.ukart-btn--pasif {
  border-color: var(--srv-renk-cizgi-acik);
  color: #A8BFC9; background: #FAFCFD; cursor: not-allowed;
}
.ukart-btn--pasif:hover { background: #FAFCFD; color: #A8BFC9; }

/* ---- 6. DUYARLI ---- */
@media (max-width: 1200px) { .ukart-izgara { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .ukart-izgara { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .ukart-olcu { font-size: 20px; }
}
@media (max-width: 576px) {
  .ukart-izgara { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ukart-govde { padding: 10px 8px 12px; }
  .ukart-olcu { font-size: 18px; }
  .ukart-grup { font-size: 11px; -webkit-line-clamp: 1; }
  .ukart-serit .ukart { flex: 0 0 156px; }
}