/* ==========================================================================
   Balcı teması — ürün kartı + varyant popup'ı (balci.css'ten SONRA, HER SAYFADA)
   Künye: docs/referans/REFERANS-KUNYE.md §A "Ürün kartı" — 277×370 ölçüsünde çıkar;
   genişlik üst ızgaraya bırakılır (width:100%, min-width yok → mobilde 2 sütun).
   Markup: func/urun_kart.php (bpUrunKart / bpUrunKartModal) · Davranış: assets/js/product.js
   Kart func/ çıktısı olarak her bağlamda (ajax dahil) geldiğinden tüm kuralları .bpb-product
   kapsamında eksiksizdir. Eleman sıfırlamaları `.bpb-product :where(a)` kalıbındadır (0,1,0):
   bileşen sınıfı (.bpb-product__action, .bpb-product__name) kaynak sırasıyla kazanır; daire
   düğmeleri ayrıca `.bpb-product .bpb-product__action` (0,2,0) ile genel a/button kurallarına karşı korunur.
   Kırılımlar: 575 / 767 / 991 / 1199. Ürün şeritleri native scroll-snap'tir (home.css / liste.css); slick yok (Faz 6).
   Bölümler: 1 Kart kabuğu · 2 Görsel (etiket şeritleri + "En Çok Satan" bandı) · 3 Bilgi bloğu · 4 Mobil · 5 Varyant popup'ı · 6 Hareket azaltma
   ========================================================================== */

/* ---------- 1. Kart kabuğu ---------- */
.bpb-product {
  /* künye ölçüleri (bileşene özel, global ölçeğe girmez) */
  --bpb-product-pad-x: 10px;
  --bpb-product-pad-b: 15px;
  --bpb-product-inset: 10px;
  --bpb-product-review-h: 13px;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bpb-surface);
  border: 1px solid var(--bpb-border);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--bpb-font);
  font-size: var(--bpb-fs-md);
  line-height: 1.5;
  color: var(--bpb-text-2);
  text-align: left;
  transition: border-color .6s var(--bpb-ease), opacity var(--bpb-dur);
}
.bpb-product:hover { border-color: var(--bpb-text-3); }
.bpb-product.is-removed { opacity: 0; pointer-events: none; }

/* Kapsamlı sıfırlamalar — basic.css / Bootstrap kurallarına karşı; :where ile eleman kısmı sıfır özgüllüktedir */
.bpb-product *, .bpb-product *::before, .bpb-product *::after { box-sizing: border-box; }
.bpb-product :where(a) { color: inherit; text-decoration: none; background: none; outline-offset: 2px; }
.bpb-product :where(a:hover, a:focus) { text-decoration: none; }
.bpb-product :where(img) { display: block; max-width: 100%; height: auto; border: 0; }
.bpb-product :where(h3) { margin: 0; padding: 0; font: inherit; color: inherit; }
.bpb-product :where(form) { margin: 0; padding: 0; display: block; line-height: 0; }
.bpb-product :where(button) {
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none; text-transform: none;
}
.bpb-product :where(svg) { display: block; fill: none; }
.bpb-product .bpb-ico { flex: 0 0 auto; }
.bpb-product :focus-visible { outline: 2px solid var(--bpb-primary); outline-offset: 2px; }

/* ---------- 2. Görsel (kare, beyaz zemin, contain) ---------- */
.bpb-product__image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background: var(--bpb-surface);
}
.bpb-product__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.bpb-product__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--bpb-surface);
}

/* Etiketler — sol üst, dikey kurdele şeritleri (egricayir "YENİ HASAT" örneği: görselin sol kenarına yaslı,
   sağ ucu hafif kıvrımlı kurdele; renk: hasat kırmızı, kargo yeşil). Diğer etiketler (avantajlı / X al Y öde) aynı biçimde. */
.bpb-product__tags {
  position: absolute; top: var(--bpb-product-inset); left: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--bpb-s1);
  pointer-events: none;
}
.bpb-product .bpb-tag {
  position: relative;
  display: inline-block; margin: 0; padding: 5px 10px 5px var(--bpb-product-inset);
  font-size: var(--bpb-fs-xs); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--bpb-primary); border: 0; border-radius: 0;
  white-space: nowrap;
}
/* Kurdele ucu: şeridin sağında, zeminle aynı renkte küçük kıvrım (currentColor değil: arka plan rengi devralınır) */
.bpb-product .bpb-tag::after {
  content: ""; position: absolute; top: 0; right: -6px; width: 6px; height: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 40% 50%, 100% 100%, 0 100%);
}
.bpb-product .bpb-tag--hasat, .bpb-product .bpb-tag--danger { background: var(--bpb-danger); }
.bpb-product .bpb-tag--kargo, .bpb-product .bpb-tag--success { background: var(--bpb-success); }
.bpb-product .bpb-tag--dark { background: var(--bpb-text); }

/* "En Çok Satan N. Ürün" bandı — görselin ALTINDA, tam genişlik, koyu kırmızı, iki ucu kurdele çentikli, ortada ✓.
   Renk: --bpb-danger-dark tokenı yoksa yerel koyu kırmızı (egricayir #8b2b1f tonu). */
.bpb-product__band {
  --bpb-product-band-bg: var(--bpb-danger-dark, #8b2b1f);
  display: flex; justify-content: center;
  width: 100%; margin: 0; padding: 0 var(--bpb-product-pad-x);
  background: var(--bpb-surface);
  line-height: 0;
}
.bpb-product__band-in {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bpb-s2);
  width: 100%; min-height: 28px; padding: 6px var(--bpb-s5);
  font-size: var(--bpb-fs-sm); font-weight: 600; line-height: 16px; letter-spacing: .01em;
  color: #fff; background: var(--bpb-product-band-bg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
}
.bpb-product__band-in .bpb-ico { width: 14px; height: 14px; flex: 0 0 auto; }
.bpb-product__band-in > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpb-product__band + .bpb-product__info .bpb-product__name { margin-top: var(--bpb-s2); }

/* Düğmeler — sağ üst, dikey 40px beyaz daireler; ikisi de hover'da altın zemin + beyaz ikon.
   Favori (a) · sepet (button[name=sepetle] / .bp-uk-varyant / stok yoksa a) aynı görünümü paylaşır (karşılaştır R3'te kalktı).
   Varsayılan GİZLİ (opacity 0 + 6px sağdan): kart hover'ında ve :focus-within'de (klavye) belirir — display:none
   kullanılmaz, düğmeler sekme sırasında kalır. Dokunmatikte (hover:none) her zaman görünür. */
.bpb-product__actions {
  position: absolute; top: var(--bpb-product-inset); right: var(--bpb-product-inset); z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--bpb-s2);
  opacity: 0; transform: translateX(6px);
  transition: opacity .2s var(--bpb-ease), transform .2s var(--bpb-ease);
}
.bpb-product:hover .bpb-product__actions,
.bpb-product:focus-within .bpb-product__actions { opacity: 1; transform: none; }
@media (hover: none) {
  .bpb-product__actions { opacity: 1; transform: none; }
}
.bpb-product .bpb-product__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: var(--bpb-surface); color: var(--bpb-text);
  box-shadow: var(--bpb-shadow-float);
  cursor: pointer; line-height: 0; text-decoration: none; text-transform: none;
  transition: color var(--bpb-dur), background var(--bpb-dur), opacity var(--bpb-dur);
}
.bpb-product .bpb-product__action .bpb-ico { width: 18px; height: 18px; }
.bpb-product .bpb-product__action--fav.is-active { color: var(--bpb-danger); }
.bpb-product .bpb-product__action--fav.is-active .bpb-ico { fill: currentColor; }
.bpb-product .bpb-product__action--cart.is-disabled { color: var(--bpb-text-3); }
/* hover: değiştiricilerden SONRA (eşit özgüllük → kaynak sırası) — aktif kalp ve pasif sepet de altın/beyaz olur */
.bpb-product .bpb-product__action:hover { background: var(--bpb-primary); color: #fff; text-decoration: none; }
.bpb-product .bpb-product__action.is-busy { opacity: .6; pointer-events: none; }
.bpb-product__form { line-height: 0; }

/* ---------- 3. Bilgi bloğu ---------- */
.bpb-product__info { padding: 0 var(--bpb-product-pad-x) var(--bpb-product-pad-b); }
.bpb-product__name {
  margin: var(--bpb-product-inset) 0;
  font-size: var(--bpb-fs-md); font-weight: 400; line-height: 20px;
  color: var(--bpb-text);
}
.bpb-product__name a { color: inherit; text-decoration: none; padding: 3px 0; } /* satır içi dikey dolgu: yerleşim değişmez, dokunma alanı 18→24px (WCAG 2.5.8) */
.bpb-product__name a:hover { color: var(--bpb-primary); text-decoration: none; }
.bpb-product .bpb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bpb-product__prices {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bpb-s2);
  min-height: 21px;
  padding-right: 44px; /* sağdaki mutlak konumlu %rozet için yer */
}
.bpb-product .bpb-price { font-size: var(--bpb-fs-lg); font-weight: 600; color: var(--bpb-primary); white-space: nowrap; }
.bpb-product .bpb-price-old { font-size: var(--bpb-fs-sm); font-weight: 600; color: var(--bpb-text-2); text-decoration: line-through; white-space: nowrap; }
.bpb-product .bpb-badge {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-block; margin: 0; padding: 3px;
  font-size: var(--bpb-fs-md); font-weight: 600; line-height: 1;
  color: var(--bpb-danger); background: var(--bpb-surface);
  border: 1px solid var(--bpb-danger); border-radius: var(--bpb-radius);
}
.bpb-product__members { font-size: var(--bpb-fs-sm); font-weight: 600; color: var(--bpb-text-3); }

/* Yorum satırı — yalnız yorum varsa yıldız; yoksa boş yer tutucu (yükseklik sabit) */
.bpb-product__reviews {
  display: flex; align-items: center; gap: var(--bpb-s1);
  min-height: var(--bpb-product-review-h); margin-top: var(--bpb-s2);
  font-size: var(--bpb-fs-sm); line-height: var(--bpb-product-review-h); color: var(--bpb-text-3);
}
.bpb-product .bpb-rating { display: inline-flex; align-items: center; gap: var(--bpb-s1); font-size: var(--bpb-fs-sm); color: var(--bpb-text-3); }
.bpb-product .bpb-stars { position: relative; display: inline-block; width: 75px; height: var(--bpb-product-review-h); line-height: 0; color: var(--bpb-border); white-space: nowrap; }
.bpb-product .bpb-stars > span { position: absolute; top: 0; left: 0; bottom: 0; display: block; overflow: hidden; white-space: nowrap; color: var(--bpb-star); }
.bpb-product .bpb-stars svg { display: inline-block; width: 15px; height: var(--bpb-product-review-h); vertical-align: top; fill: currentColor; }
.bpb-product .bpb-stars--0 > span { width: 0; }
.bpb-product .bpb-stars--10 > span { width: 10%; }
.bpb-product .bpb-stars--20 > span { width: 20%; }
.bpb-product .bpb-stars--30 > span { width: 30%; }
.bpb-product .bpb-stars--40 > span { width: 40%; }
.bpb-product .bpb-stars--50 > span { width: 50%; }
.bpb-product .bpb-stars--60 > span { width: 60%; }
.bpb-product .bpb-stars--70 > span { width: 70%; }
.bpb-product .bpb-stars--80 > span { width: 80%; }
.bpb-product .bpb-stars--90 > span { width: 90%; }
.bpb-product .bpb-stars--100 > span { width: 100%; }
.bpb-product__count { color: var(--bpb-text-3); }

/* ---------- 4. Mobil ---------- */
@media (max-width: 575px) {
  .bpb-product { --bpb-product-inset: 8px; }
  .bpb-product__prices { padding-right: 40px; }
  .bpb-product .bpb-tag { padding: 4px 8px 4px var(--bpb-product-inset); }
  /* Dar kartta (≈140-165px) metin tek satıra sığmaz: kırpılmaz, iki satıra sarar (ör. "En Çok Satan / 1. Ürün") */
  .bpb-product__band-in { min-height: 26px; padding: 5px var(--bpb-s3); font-size: var(--bpb-fs-xs); line-height: 14px; }
  .bpb-product__band-in > span { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; }
}

/* ==========================================================================
   5. Varyant popup'ı — #bpUkmBg / .bp-ukm-* (sınıf adları JS/ajax sözleşmesi, DEĞİŞMEZ)
   Karartma --bpb-overlay; kutu gölgesi --bpb-shadow-menu; radius 3px; renkler token.
   `hidden` özniteliği CSS yüklenmese bile gizli tutar; product.js açarken kaldırır.
   ========================================================================== */
.bp-ukm-bg {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99998;
  display: none; align-items: center; justify-content: center;
  padding: var(--bpb-s4);
  background: var(--bpb-overlay);
}
.bp-ukm-bg[hidden] { display: none; }
.bp-ukm-bg.acik { display: flex; }
.bp-ukm {
  display: flex; flex-direction: column;
  width: 100%; max-width: 440px; max-height: calc(100vh - 32px);
  overflow: hidden;
  background: var(--bpb-surface); color: var(--bpb-text-2);
  border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius);
  box-shadow: var(--bpb-shadow-menu);
  font-family: var(--bpb-font); font-size: var(--bpb-fs-md); line-height: 1.5;
  animation: bpb-ukm-pop var(--bpb-dur) var(--bpb-ease);
}
@keyframes bpb-ukm-pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.bp-ukm *, .bp-ukm *::before, .bp-ukm *::after { box-sizing: border-box; }
.bp-ukm button { margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.bp-ukm svg { display: block; }
.bp-ukm :focus-visible { outline: 2px solid var(--bpb-primary); outline-offset: 2px; }

.bp-ukm-head { display: flex; align-items: center; gap: var(--bpb-s3); padding: var(--bpb-s3) var(--bpb-s4); border-bottom: 1px solid var(--bpb-border); }
.bp-ukm-head img { flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain; background: var(--bpb-surface); border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius); }
.bp-ukm-head .t { flex: 1 1 auto; min-width: 0; }
.bp-ukm-head .t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--bpb-fs-lg); font-weight: 600; line-height: 1.3; color: var(--bpb-text); }
.bp-ukm-head .x {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--bpb-text-2);
  transition: color var(--bpb-dur), background var(--bpb-dur);
}
.bp-ukm-head .x:hover { color: var(--bpb-text); background: var(--bpb-primary-soft); }

.bp-ukm-uyari { padding: var(--bpb-s2) var(--bpb-s4) 0; font-size: var(--bpb-fs-sm); color: var(--bpb-danger); }
.bp-ukm-uyari[hidden] { display: none; }

#bpUkmForm { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.bp-ukm-body { display: flex; flex-direction: column; gap: var(--bpb-s4); padding: var(--bpb-s4); max-height: 56vh; overflow: auto; }
.bp-ukm-grup .g { margin-bottom: var(--bpb-s2); font-size: var(--bpb-fs-sm); font-weight: 600; color: var(--bpb-text); }
.bp-ukm-opts { display: flex; flex-wrap: wrap; gap: var(--bpb-s2); }
.bp-ukm-opt {
  display: inline-flex; align-items: center; gap: var(--bpb-s1);
  min-height: 40px; padding: 0 var(--bpb-s4);
  border: 1px solid var(--bpb-border); border-radius: var(--bpb-radius);
  background: var(--bpb-surface); color: var(--bpb-text);
  font-size: var(--bpb-fs-md); font-weight: 600; line-height: 1.2; text-align: left;
  user-select: none;
  transition: border-color var(--bpb-dur), color var(--bpb-dur), background var(--bpb-dur);
}
.bp-ukm-opt:hover { border-color: var(--bpb-primary); }
.bp-ukm-opt.sel { border-color: var(--bpb-primary); color: var(--bpb-primary); background: var(--bpb-primary-soft); }
.bp-ukm-opt.yok, .bp-ukm-opt:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.bp-ukm-opt.yok:hover, .bp-ukm-opt:disabled:hover { border-color: var(--bpb-border); }
.bp-ukm-opt .ek { font-size: var(--bpb-fs-xs); font-weight: 400; color: var(--bpb-text-3); }
.bp-ukm-durum { padding: var(--bpb-s5); text-align: center; color: var(--bpb-text-3); }
.bp-ukm-durum--hata { color: var(--bpb-danger); }

.bp-ukm-foot { display: flex; align-items: center; gap: var(--bpb-s3); padding: var(--bpb-s3) var(--bpb-s4); border-top: 1px solid var(--bpb-border); }
.bp-ukm-foot .fy { flex: 1 1 auto; min-width: 0; }
.bp-ukm-foot .fy small { display: block; font-size: var(--bpb-fs-xs); color: var(--bpb-text-3); }
.bp-ukm-foot .fy b { display: block; font-size: var(--bpb-fs-xl); font-weight: 600; color: var(--bpb-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-ukm-add {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bpb-s2);
  height: 40px; padding: 0 var(--bpb-s5);
  border: 1px solid var(--bpb-button); border-radius: var(--bpb-radius);
  background: var(--bpb-button); color: #fff;
  font-size: var(--bpb-fs-md); font-weight: 600; line-height: 1; text-transform: uppercase; white-space: nowrap;
  transition: background var(--bpb-dur), border-color var(--bpb-dur), opacity var(--bpb-dur);
}
.bp-ukm-add .bpb-ico { width: 18px; height: 18px; }
.bp-ukm-add:hover { background: var(--bpb-primary-hover); border-color: var(--bpb-primary-hover); color: #fff; }
.bp-ukm-add:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 575px) {
  .bp-ukm-bg { padding: var(--bpb-s2); align-items: flex-end; }
  .bp-ukm { max-height: calc(100vh - 16px); }
  .bp-ukm-body { max-height: 50vh; }
  .bp-ukm-foot { flex-wrap: wrap; }
  .bp-ukm-add { flex: 1 1 100%; }
}

/* ---------- 6. Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  .bpb-product, .bpb-product__actions, .bpb-product .bpb-product__action, .bpb-product__name a, .bp-ukm, .bp-ukm-opt, .bp-ukm-add, .bp-ukm-head .x { transition: none; animation: none; }
}