/* Bak Beğen — Evona açık tema "Bunları da Beğenebilirsiniz" ızgarası.
   Kart stilleri BegenKart sub-component'inin styles.css'inde (bgk-). */

.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn {
  --vp: 72px;
  position: relative;
  /* Üst/alt boşluk ayrı ayrı ezilebilir (Boyut ve Bosluk grubu) */
  padding: var(--bbn-ust, var(--vp)) 0 var(--bbn-alt, var(--vp));
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--bbn-muted, #4c535a);
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn[data-padding="compact"] { --vp: 40px; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn[data-padding="normal"] { --vp: 72px; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn[data-padding="spacious"] { --vp: 100px; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn[data-padding="extra"] { --vp: 140px; }

.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-altisik {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 120px;
  background: radial-gradient(ellipse 62% 100% at 50% 100%, var(--bbn-ai, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--bbn-max, 1280px);
  margin-inline: auto;
  padding: 0 var(--bbn-pad, clamp(40px, 8vw, 120px));
}

.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-empty { text-align: center; font-size: 14px; margin: 0; }

/* ---- Başlık + ek açıklama ---- */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-head { margin-bottom: var(--bbn-baslikalt, clamp(22px, 3vw, 32px)); }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-head[data-align="center"] { text-align: center; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-head[data-align="right"] { text-align: right; }

.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--bbn-baslik, var(--bbn-text, #272b31));
  letter-spacing: -0.016em;
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-altbaslik {
  margin: 8px 0 0;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bbn-altbaslik, var(--bbn-muted, #4c535a));
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-head[data-align="center"] .bbn-altbaslik { margin-inline: auto; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-head[data-align="right"] .bbn-altbaslik { margin-left: auto; }

.cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 26px) clamp(10px, 1.6vw, 20px);
}
@media (min-width: 900px) {
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-grid { grid-template-columns: repeat(var(--bbn-cols, 4), 1fr); }
}

@media (max-width: 640px) {
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bbn-inner { padding: 0 20px; }
}

/* BegenKart — BakBegen'in Evona açık tema ürün kartı (bgk-).
   Renkler parent section'ın --bbn-* değişkenlerinden gelir. */

.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bbn-card, #fff);
  border: 1px solid var(--bbn-line, #e9ebee);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
@media (hover: hover) {
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk:hover {
    border-color: var(--bbn-karthover, #cbbdaa);
    box-shadow: 0 8px 26px rgba(39, 43, 49, 0.07);
    transform: translateY(-2px);
  }
}

/* ---- Görsel ---- */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bbn-gorselbg, #f2f1ee);
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-img--bos { background: var(--bbn-gorselbg, #e9ebee); }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-img--iki {
  position: absolute;
  inset: 0;
  opacity: 0;
}
@media (hover: hover) {
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-media:hover .bgk-img--iki { opacity: 1; }
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-media:hover .bgk-img { transform: scale(1.03); }
}

/* Tükendi hali: görsel soluklaşır, ortaya cam rozet biner. */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-tukendi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(39, 43, 49, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f7f6f3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk[data-soldout="true"] .bgk-img {
  filter: grayscale(0.8) brightness(0.95);
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk[data-soldout="true"] .bgk-ad, .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk[data-soldout="true"] .bgk-fiyat {
  opacity: 0.55;
}

.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-rozet {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background: var(--bbn-rozetbg, var(--bbn-accent, #b8865b));
  color: var(--bbn-rozettext, #fff);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 40px;
  line-height: 1;
}

/* Sepete ekle: ortak CamSepet cam butonu (foto üzerinde hover'la belirir) */

/* ---- Alt bilgi ---- */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-kategori {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bbn-kategori, var(--bbn-muted, #4c535a));
  text-decoration: none;
  opacity: 0.75;
  transition: color 0.15s, opacity 0.15s;
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-kategori:hover { color: var(--bbn-kategorihover, var(--bbn-accent, #b8865b)); opacity: 1; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-ad {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--bbn-ad, var(--bbn-text, #272b31));
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-ad:hover { color: var(--bbn-adhover, var(--bbn-accent, #b8865b)); }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-fiyat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-fiyat del { color: var(--bbn-eskifiyat, #a8aeb5); font-size: 12.5px; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-fiyat strong {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--bbn-fiyat, var(--bbn-text, #272b31));
}


/* ── TÜKENEN ÜRÜN: ÖLÜ LİNK ────────────────────────────────────────────────
   Stoğu biten üründe href hiç yazılmaz (bkz. index.tsx `urunStokta`), yani link
   zaten tıklanamaz ve klavyeyle odaklanamaz. Burada imleci ve hover durumunu da
   kapatıp görsel olarak "tıklanabilir" izlenimini kaldırıyoruz. */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk a:not([href]) {
  pointer-events: none;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   Apple Design denetimi — D1 / D7 / D8 / D9
   (apple-design-denetim.md · skill §1 Tepki, §12 Malzeme, §14 Erişim)
   ═══════════════════════════════════════════════════════════════ */

/* D9 — Bronz metin/rozet açık zeminde kontrastı geçmiyordu (2.77–3.18:1).
   Studio'daki vurgu rengi ezilmez, sadece koyulaştırılır → ~4.8:1. */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk {
  --bgk-accent-text: color-mix(in srgb, var(--bbn-accent, #b8865b) 68%, #1b1512);
}
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-kategori:hover, .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-kategori:active { color: var(--bbn-kategorihover, var(--bgk-accent-text)); }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-ad:hover, .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-ad:active { color: var(--bbn-adhover, var(--bgk-accent-text)); }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-rozet { background: var(--bbn-rozetbg, var(--bgk-accent-text)); }

/* D1 — Basma geri bildirimi (§1). */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-media:active .bgk-img { transform: scale(1.01); transition-duration: 0.1s; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-media:active { opacity: 0.92; }
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-ad:active, .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-kategori:active { opacity: 0.7; transition-duration: 0.1s; }

/* D7 — Klavye odağı. */
.cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-media:focus-visible, .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-ad:focus-visible, .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-kategori:focus-visible {
  outline: 2px solid var(--bgk-accent-text);
  outline-offset: 3px;
  border-radius: 6px;
}

/* D8 — Tükendi rozeti backdrop-filter kullanıyor (§14). */
@media (prefers-reduced-transparency: reduce) {
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-tukendi { backdrop-filter: none; -webkit-backdrop-filter: none; background: #272b31; }
}
@media (prefers-contrast: more) {
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-tukendi { backdrop-filter: none; -webkit-backdrop-filter: none; background: #1b1f24; border-color: #fff; }
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-kategori { opacity: 1; color: #2f353b; }
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-fiyat del { color: #6b7178; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_Z0fv8wUkj4_Qj3kElUkRg .bgk-media:active .bgk-img { transform: none; }
}