/* ===================================================================
   BİLEŞEN TOKENLARI — tema kartın biçimini bunlarla değiştirir.
   Yarıçap sabit yazılıydı; PinHub inovapin diline geçerken r8 istedi ama
   ezemedi. Sabit değer, temanın kararını gasbeder. */
:root {
  --em-kart-r:     var(--em-r-xl);   /* kart gövdesi */
  --em-kart-r-ust: var(--em-r-lg);   /* görselin üst köşeleri */
  --em-kart-btn-r: var(--em-r-xs);   /* alt eylem butonu */
}

/* ===================================================================
   BİLEŞEN: urun_kart  (varyantlar: modern · compact)
   KURAL: yalnız --em-* tokenı. Tema öneki YASAK.
   Ölçüler: kart r15 · görsel 1:1.2 · gövde pad 5/8 · ad 13/600 · fiyat 14/700
   =================================================================== */

.bs-kart {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--em-bg-card);
  border-radius: var(--em-kart-r);
  box-shadow: var(--em-sh-1);
  overflow: hidden;
  transition: box-shadow var(--em-hiz) ease-out, transform var(--em-hiz) ease-out;
}
.bs-kart:hover { transform: translateY(-2px); box-shadow: var(--em-sh-3); }
[data-bs-theme="light"] .bs-kart { border: 1px solid var(--em-border); }

/* Görsel kare değil hafif dikey: dikey oyun kapakları kırpılmasın */
.bs-kart-gorsel {
  display: block; position: relative;
  aspect-ratio: 179 / 215;
  background: var(--em-bg-soft);
  border-radius: var(--em-kart-r-ust) var(--em-kart-r-ust) 0 0;
  overflow: hidden;
}
.bs-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.bs-kart-govde {
  display: flex; flex-direction: column; gap: var(--em-1);
  padding: 5px var(--em-2);
  border-radius: 0 0 var(--em-kart-r) var(--em-kart-r);
}
.bs-kart-kat {
  font-size: var(--em-fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--em-text-muted);
}
.bs-kart-ad {
  font-size: var(--em-fs-md); font-weight: 600; color: var(--em-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
  text-decoration: none;
}
.bs-kart-ad:hover { color: var(--em-primary); }
.bs-kart-meta { font-size: var(--em-fs-xs); color: var(--em-text-muted); }

/* Alt blok: solda kesinti çipi, sağda fiyat yığını */
.bs-kart-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto;
}
.bs-kart-kesinti {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 6px; border-radius: var(--em-r-xs);
  background: rgba(var(--em-primary-rgb), .16);
  color: var(--em-primary);
  font-size: var(--em-fs-sm); font-weight: 700; line-height: 1;
}
.bs-kart-fiyat {
  display: flex; flex-direction: column; align-items: flex-end;
  margin-left: auto; line-height: 1.2;
}
.bs-kart-fiyat.yatay { flex-direction: row; align-items: baseline; gap: 6px; }
.bs-kart-fiyat s { font-size: var(--em-fs-sm); font-weight: 300; color: var(--em-text-muted); }
.bs-kart-fiyat b { font-size: var(--em-fs-lg); font-weight: 700; color: var(--em-text); }

/* Tükendi */
.bs-kart.tukendi .bs-kart-gorsel img { filter: grayscale(1); opacity: .5; }
.bs-kart-tukendi {
  position: absolute; inset: auto 0 0 0;
  background: rgba(0, 0, 0, .72); color: #fff;
  text-align: center; padding: var(--em-1); font-size: var(--em-fs-xs); font-weight: 600;
}

/* --- varyant: modern — hover katmanı --- */
.bs-kart-hover {
  position: absolute; z-index: 3;
  top: 0; left: 0; right: 0;
  aspect-ratio: 179 / 215;
  border-radius: var(--em-kart-r-ust) var(--em-kart-r-ust) 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 6px; padding: var(--em-2); text-align: center;
  background: linear-gradient(206deg, rgba(0, 0, 0, .25), rgba(112, 112, 112, .5));
  opacity: 0; visibility: hidden;
  transition: opacity var(--em-hiz) ease-out, visibility var(--em-hiz) ease-out;
  text-decoration: none;
}
.bs-kart:hover .bs-kart-hover,
.bs-kart:focus-within .bs-kart-hover { opacity: 1; visibility: visible; }
.bs-kart-hover-meta { font-size: var(--em-fs-xs); font-weight: 600; color: #fff; }
.bs-kart-hover-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--em-primary); color: #fff;
  border-radius: 50px; padding: 5px var(--em-3);
  font-size: var(--em-fs-sm); font-weight: 600; line-height: 1.3;
}
/* Dokunmatikte hover keşfedilemez; kart baştan sona tıklanabilir */
@media (hover: none) { .bs-kart-hover { display: none; } }

/* --- varyant: compact — görünür alt buton + köşe şeridi --- */
.bs-kart-serit {
  position: absolute; top: 0; left: var(--em-2); z-index: 2;
  background: var(--em-primary); color: #fff;
  border-radius: 0 0 var(--em-r-sm) var(--em-r-sm);
  padding: 3px var(--em-2); font-size: var(--em-fs-sm); font-weight: 700;
}
.bs-kart-btn {
  display: block; text-align: center;
  margin: var(--em-2) var(--em-2) var(--em-2);
  background: var(--em-primary); color: #fff;
  border-radius: var(--em-kart-btn-r);
  padding: var(--em-2); font-size: var(--em-fs-sm); font-weight: 700;
  text-decoration: none;
  transition: background var(--em-hiz) ease-out;
}
.bs-kart-btn:hover { background: var(--em-primary-2); color: #fff; }

/* --- rozet çerçevesi (5 yuva) --- */
.bs-rozet-cerceve { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bs-yuva { position: absolute; display: flex; gap: var(--em-1); }
.bs-yuva-sol-ust { top: 6px; left: 6px; }
.bs-yuva-sag-ust { top: 6px; right: 6px; }
.bs-yuva-sol-alt { bottom: 6px; left: 6px; }
.bs-yuva-sag-alt { bottom: 6px; right: 6px; }
.bs-yuva-orta { inset: 0; align-items: center; justify-content: center; }

.bs-rozet {
  display: inline-flex; align-items: center; gap: var(--em-1);
  padding: 3px 7px; border-radius: var(--em-r-xs);
  font-size: var(--em-fs-xs); font-weight: 700; line-height: 1;
  background: var(--bs-rz); color: #fff; border: 1px solid transparent;
}
.bs-rozet i { font-size: var(--em-fs-xs); }

/* Renk sözlüğü — panel: primary/success/warning/danger/gold/notr */
.bs-r-primary { --bs-rz: var(--em-primary);  --bs-rz-parlak: var(--em-primary); }
.bs-r-danger  { --bs-rz: #C62828; --bs-rz-parlak: #FF6B6B; }
.bs-r-success { --bs-rz: #157C77; --bs-rz-parlak: #4ED0CA; }
.bs-r-warning { --bs-rz: #8A6208; --bs-rz-parlak: #E4AC50; }
.bs-r-gold    { --bs-rz: #8F6717; --bs-rz-parlak: #E0A83B; }
.bs-r-notr    { --bs-rz: #1F242E; --bs-rz-parlak: #A3A9B5; }

/* Stil sözlüğü — panel: solid/soft/outline/dot/kaplama */
.bs-rozet-solid { background: var(--bs-rz); }
.bs-rozet-soft {
  background: color-mix(in srgb, var(--bs-rz) 30%, rgba(0, 0, 0, .70));
  color: var(--bs-rz-parlak);
}
.bs-rozet-outline {
  background: rgba(0, 0, 0, .62);
  border-color: var(--bs-rz-parlak); color: var(--bs-rz-parlak);
}
.bs-rozet-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; overflow: hidden; }
.bs-rozet-dot i, .bs-rozet-dot span { display: none; }
.bs-rozet-kaplama {
  width: 100%; height: 100%; justify-content: center; border-radius: 0;
  background: color-mix(in srgb, var(--bs-rz) 45%, rgba(0, 0, 0, .78));
  font-size: var(--em-fs-sm); letter-spacing: .5px; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .bs-kart, .bs-kart-hover { transition: none; }
}