/* FAVORİ KALP DÜĞMESİ — ürün kartı ve ürün sayfası için ortak stil.
   Kart 5 dosyada kopyalı olduğu için stil de ayrı bir dosyada tutuluyor
   (bkz. js/favori.js). Kartın SAĞ ÜST köşesinde durur: sol üst köşe stok
   rozetine ayrılmış durumda (.urun-stok ve kardeşleri top:9px;left:9px). */
.favori-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .14);
  cursor: pointer;
  transition: transform .14s, background .14s;
  -webkit-tap-highlight-color: transparent;
}
.favori-btn:hover { background: #fff; transform: scale(1.08); }
.favori-btn:disabled { opacity: .6; cursor: default; }
.favori-btn svg {
  width: 17px;
  height: 17px;
  /* Pasifken yalnızca kontur, aktifken dolu kalp. */
  fill: none;
  stroke: #9ca3af;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .14s, stroke .14s;
}
.favori-btn:hover svg { stroke: #ef4444; }
.favori-btn.favori-aktif svg { fill: #ef4444; stroke: #ef4444; }

/* Ürün DETAY sayfası — görselin sağ üst köşesinde, karttakinden bir tık büyük
   (görsel alanı geniş, 32px orada küçük kalıyor). Konumlandırma .favori-btn'den
   geliyor; burada yalnızca ölçü büyüyor. */
.favori-btn-detay { width: 38px; height: 38px; top: 10px; right: 10px; }
.favori-btn-detay svg { width: 20px; height: 20px; }

/* Ürün sayfasındaki büyük sürüm — başlığın yanında, metinle birlikte. */
.favori-btn-genis {
  position: static;
  width: auto;
  height: auto;
  border-radius: 10px;
  gap: 7px;
  padding: 10px 16px;
  background: var(--surf, #fff);
  border: 1.5px solid var(--bdr, #e5e7eb);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2, #4b5563);
  font-family: inherit;
}
.favori-btn-genis:hover { transform: none; border-color: #fca5a5; color: #ef4444; }
.favori-btn-genis.favori-aktif { border-color: #fca5a5; color: #ef4444; background: #fef2f2; }

@media (max-width: 600px) {
  .favori-btn { width: 29px; height: 29px; top: 6px; right: 6px; }
  .favori-btn svg { width: 15px; height: 15px; }
  /* Detay sürümü BU KURALIN ARDINDAN gelmeli: ikisi de tek sınıf (aynı özgüllük),
     kazananı KAYNAK SIRASI belirliyor. Yukarıda dursaydı mobilde .favori-btn
     ölçüsü (29px) detay kalbini de küçültürdü. */
  .favori-btn-detay { width: 34px; height: 34px; top: 8px; right: 8px; }
  .favori-btn-detay svg { width: 18px; height: 18px; }
}