@layer components {
/* ============================================================================
   B07 · VARYANT A — "TEMİZ VİTRİN"
   ----------------------------------------------------------------------------
   Kart üç bölgeye ayrılmış: görsel paneli → ad/fayda → hacim rozeti. Üçünün
   arasındaki ayrımı renk değil ZEMİN FARKI yapıyor: panel bir ton koyu krem
   (--color-paper), kartın gövdesi açık krem (--color-paper-2). Böylece sarı
   bütçesi tamamen hacim rozetine kalıyor.

   KART YÜKSEKLİKLERİ NEDEN EŞİT:
   Izgara çocukları zaten geriliyor, ama içerideki satırlar hizalanmazsa
   kartlar gerilse bile rozetler zikzak yapıyor. Üç önlem birlikte çalışıyor:
   · görsel paneli sabit ORANLI (aspect-ratio) — içindeki ambalajın oranı ne
     olursa olsun panelin yüksekliği aynı,
   · ad iki satırlık yer AYIRIYOR (min-height) ama kırpılmıyor — uzun adlar
     üçüncü satıra taşabilir, kart uzar,
   · fayda iki satırlık yer ayırıyor,
   · rozet satırı `margin-top: auto` ile kartın dibine yapışıyor.
   Yani ambalaj oranları (0.39 … 1.85) kartları zıplatamıyor.

   AMBALAJ BOYU dışarıdan geliyor: bileşen her karta `--ph` yazıyor
   (urunBoyu × 1.5). Görselin yüksekliği o değer, genişliği kendi oranından
   türüyor. `max-height: 100%` ile "kutuya sığdırma" YAPILMIYOR — sığdırmak
   yatık ıslak havlu paketini 1 litrelik şişeyle aynı boyda gösteriyordu.

   ŞERİT: "Подробнее" bandı panelin altında duruyor ve üstüne gelince yukarı
   kayıyor. Kaydırma yalnız `hover: hover` cihazlarda; dokunmatikte bant
   kalıcı olarak açık, çünkü orada hover diye bir an yok ve bandın hiç
   görünmemesi kartın tıklanabilir olduğunu gizliyordu.
   ========================================================================== */

.v-b07a {
  /* Kartın büyüme süresi KENDİ jetonunda. `--dur` KULLANILAMAZ: ürün
     görseli aynı zamanda `data-sway` taşıyor ve components.css'teki ortak
     salınım kuralı `--dur`u ELEMANIN ÜSTÜNDE 4.3–6.9s'ye eziyor (BRIEF
     §7.18). Kendi adıyla yazılınca ileride oraya başka bir jeton eklense
     bile bu geçiş etkilenmiyor. */
  --v-b07a-zoom: 300ms;
}

/* ── IZGARA ─────────────────────────────────────────────────────────────── */

.v-b07a .v-b07a__grid {
  list-style: none;
  margin: var(--spacing-sp4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sp2);
}

@media (min-width: 768px) {
  .v-b07a .v-b07a__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sp3);
  }
}

@media (min-width: 1024px) {
  .v-b07a .v-b07a__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Izgara çocuğunda ikisi de şart: yoksa uzun Rusça ad ve içerideki görsel
   hücreyi şişirip yatay taşma yapıyor. */
.v-b07a .v-b07a__cell {
  min-width: 0;
  min-height: 0;
  display: flex;
}

/* ── KART ───────────────────────────────────────────────────────────────── */

.v-b07a .v-b07a__card {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-paper-2);
  border: var(--rule-mid) solid var(--color-rule);
  /* Kural KALINLIĞI değil rengi değişiyor — kalınlık oynarsa kart hover'da
     bir piksel kayıyor ve komşularını da itiyor. */
  transition:
    border-color var(--dur-fast) var(--ease-both),
    box-shadow var(--dur) var(--ease);
}

.v-b07a .v-b07a__card:hover,
.v-b07a .v-b07a__card:focus-within {
  border-color: var(--color-ink);
  box-shadow: var(--shadow-lift);
}

/* Kartı saran şeffaf düğme. İçeride başka etkileşimli eleman yok, o yüzden
   tıklama alanı kartın tamamı olabiliyor ve odak halkası kart kenarına
   oturuyor. */
.v-b07a .v-b07a__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.v-b07a .v-b07a__hit:focus-visible {
  outline-offset: 2px;
  border-radius: var(--r-none);
}

/* ── GÖRSEL PANELİ ──────────────────────────────────────────────────────── */

.v-b07a .v-b07a__media {
  position: relative;
  /* Sabit oran = kartlar arası hizalama + sıfır CLS */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--spacing-sp3) var(--spacing-sp2);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  overflow: hidden;
}

.v-b07a .v-b07a__img {
  /* Boy ÜRÜNDEN geliyor (--ph, bileşende urunBoyu × 1.5), genişlik kendi
     oranından. max-width sadece emniyet: en yatık ambalaj bile %61'de. */
  height: var(--ph, 60%);
  width: auto;
  max-width: 96%;
  /* Salınım `transform`ı kullanıyor; büyüme AYRI özellikte olmalı, yoksa
     ikisi birbirini eziyor. `scale` sırada transform'dan önce uygulanıyor,
     ikisi birlikte yaşıyor. Ölçek merkezi de salınımın ekseni: ambalaj
     tabanından yukarı doğru büyüyor, yerinden kalkmıyor.
     SÜRE kendi jetonundan — bu elemanın üstündeki `--dur` salınıma ait. */
  transition: scale var(--v-b07a-zoom) var(--ease);
}

@media (hover: hover) {
  .v-b07a .v-b07a__card:hover .v-b07a__img,
  .v-b07a .v-b07a__card:focus-within .v-b07a__img {
    scale: 1.045;
  }
}

.v-b07a .v-b07a__id {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 1;
  color: var(--color-ink-2);
}

/* ── ŞERİT ──────────────────────────────────────────────────────────────── */

.v-b07a .v-b07a__strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sp1);
  /* Bandın yüksekliği dolgudan türüyor (~32px). Elle yazılan 38px'lik
     min-height kaldırıldı: ritim ölçeğinde karşılığı yoktu ve bant bir
     dokunma hedefi DEĞİL — tıklanan şey kartı saran düğme. */
  padding: var(--spacing-sp1) var(--spacing-sp2);
  background: var(--color-ink);
  color: var(--color-paper-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

/* Dokunmatikte hover diye bir an yok: bant kalıcı açık kalıyor.
   Kayma yalnız gerçekten üstüne gelinebilen cihazlarda. */
@media (hover: hover) {
  .v-b07a .v-b07a__strip {
    translate: 0 100%;
    transition: translate var(--dur) var(--ease);
  }

  .v-b07a .v-b07a__card:hover .v-b07a__strip,
  .v-b07a .v-b07a__card:focus-within .v-b07a__strip {
    translate: 0 0;
  }
}

/* ── METİN ──────────────────────────────────────────────────────────────── */

.v-b07a .v-b07a__text {
  padding: var(--spacing-sp2) var(--spacing-sp2) 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  .v-b07a .v-b07a__text {
    padding-inline: var(--spacing-sp3);
  }
}

.v-b07a .v-b07a__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--color-ink);
  /* 154px'lik mobil hücrede «отбеливатель» tek başına satırı doldurabiliyor;
     taşmak yerine kırılsın. */
  overflow-wrap: anywhere;
  /* İki satırlık yer AYRILIYOR (adlar 13–30 karakter arası oynuyor), ama
     KIRPILMIYOR: üç satıra çıkan üç adın (03 · 07 · 08) sonuncusunda ürünün
     asıl adı satırın kendisindeydi ve line-clamp onu siliyordu. Rozet satırı
     zaten `margin-top: auto` ile dibe yapışık, yani hizalama için kırpmaya
     ihtiyaç yok — kartlar biraz uzuyor, isimler tam okunuyor. */
  min-height: 2.4em;
}

.v-b07a .v-b07a__benefit {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-ink-2);
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ── ROZET SATIRI ───────────────────────────────────────────────────────── */

.v-b07a .v-b07a__foot {
  /* Kartın dibine yapışıyor — ad/fayda ne kadar yer kaplarsa kaplasın
     rozetler bütün satırda aynı hizada. */
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--spacing-sp2);
}

@media (min-width: 768px) {
  .v-b07a .v-b07a__foot {
    padding: var(--spacing-sp3);
    padding-top: var(--spacing-sp2);
  }
}

/* Hacim rozeti ortak `.badge`i olduğu gibi kullanıyor — elle yazılmış
   daraltılmış dolgu kaldırıldı, ölçekte karşılığı yoktu. */

.v-b07a .v-b07a__price {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
}

/* ── ALT SATIR · bölgeler + WhatsApp ────────────────────────────────────── */

.v-b07a .v-b07a__foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--spacing-sp3);
  margin-top: var(--spacing-sp5);
  padding-top: var(--spacing-sp3);
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.v-b07a .v-b07a__zones {
  max-width: 72ch;
  color: var(--color-ink-2);
}

.v-b07a .v-b07a__zoneslabel {
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
}

/* ══ ÜRÜN PENCERESİ ═══════════════════════════════════════════════════════
   Native <dialog>: odak tuzağı, Esc ve ::backdrop tarayıcıdan geliyor.
   ────────────────────────────────────────────────────────────────────── */

.v-b07a .v-b07a__dlg {
  /* base.css'teki `* { margin: 0 }` native <dialog>'un ortalamasını
     öldürüyor — geri veriyoruz. */
  margin: auto;
  width: min(940px, calc(100vw - 2 * var(--gutter)));
  max-height: min(88dvh, 780px);
  padding: 0;
  background: var(--color-paper-2);
  color: var(--color-ink);
  border: var(--rule-heavy) solid var(--color-ink);
  border-radius: var(--r-none);
  overflow: hidden;
}

/* Perde tonu JETONDAN türüyor ve üç B07 varyantında da aynı: elle yazılmış
   üç ayrı koyuluk (0.66 / 0.68 / 0.70) aynı pencere için üç farklı ağırlık
   demekti. Değer üretimdeki vitrinle (blocks/products.css) birebir. */
.v-b07a .v-b07a__dlg::backdrop {
  background: color-mix(in srgb, var(--color-stage) 66%, transparent);
}

.v-b07a .v-b07a__dlgin {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-height: inherit;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .v-b07a .v-b07a__dlgin {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.v-b07a .v-b07a__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  background: var(--color-paper-2);
  border: var(--rule-mid) solid var(--color-ink);
  border-radius: var(--r-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-both);
}

.v-b07a .v-b07a__x:hover {
  background: var(--color-signal);
}

.v-b07a .v-b07a__dlgmedia {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--spacing-sp4);
  background: var(--color-paper);
  border-bottom: var(--rule-mid) solid var(--color-ink);
}

/* MOBİLDE AMBALAJ DAHA BÜYÜK · 29.08 ────────────────────────────────────
   Ölçü zinciri ambalajı pencerede kartlardakinden bile küçük bırakıyordu:
   kutu 343px genişlikte 4/3 oranla 257px yüksekliğe düşüyor, 32pxlik
   dolgu iki yandan 64px yiyor ve ambalaj kalan 193pxin %60ı, yani ~116px
   oluyordu. Pencere ekranın %88ini kaplarken ürünün 116px olması ölçü
   hatasıydı — pencerenin açılma sebebi zaten ambalajı yakından görmek.
   Kutu kareye çıkıyor ve dolgu bir kademe iniyor: ambalaj ~182px, yani
   yarıdan fazla büyüyor. Boy disiplini (`--ph`) değişmiyor — büyüyen şey
   KUTU, ambalajların birbirine göre oranı aynı kalıyor. Metin `dlgin`
   içinde kaydığı için pencereden taşma olmuyor. */
@media (max-width: 767.98px) {
  .v-b07a .v-b07a__dlgmedia {
    aspect-ratio: 1 / 1;
    padding: var(--spacing-sp3);
  }
}

@media (min-width: 768px) {
  .v-b07a .v-b07a__dlgmedia {
    /* Masaüstünde sütun dar ve uzun; kare oranda şişeler kutuyu taşırıyor. */
    aspect-ratio: 4 / 5;
    border-bottom: 0;
    border-right: var(--rule-mid) solid var(--color-ink);
  }
}

.v-b07a .v-b07a__dlgimg {
  /* Kartla AYNI boy disiplini: pencerede büyüyen şey kutu, ambalajın
     kendi oranı değil. */
  height: var(--ph, 60%);
  width: auto;
  max-width: 96%;
}

.v-b07a .v-b07a__dlgbody {
  min-width: 0;
  padding: var(--spacing-sp4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sp2);
}

@media (min-width: 768px) {
  .v-b07a .v-b07a__dlgbody {
    padding: var(--spacing-sp5);
  }
}

.v-b07a .v-b07a__dlgid {
  color: var(--color-brand-blue);
}

.v-b07a .v-b07a__dlgname {
  margin: 0;
}

.v-b07a .v-b07a__dlgvol {
  margin: 4px 0 0;
}

.v-b07a .v-b07a__dlgdesc {
  margin: 0;
  max-width: 48ch;
  color: var(--color-ink-2);
}

.v-b07a .v-b07a__dlgzones {
  margin: var(--spacing-sp2) 0 0;
  font-weight: 500;
  color: var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
}

.v-b07a .v-b07a__dlgcta {
  margin-top: var(--spacing-sp3);
  align-self: flex-start;
}

/* Açılış animasyonu. `both` yok, `clip-path` yok — donmuş son kare
   bırakmıyor. */
.v-b07a .v-b07a__dlg[open] {
  animation: v-b07a-in 240ms var(--ease);
}

.v-b07a .v-b07a__dlg[open]::backdrop {
  animation: v-b07a-fade 240ms var(--ease-both);
}

@keyframes v-b07a-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes v-b07a-fade {
  from {
    opacity: 0;
  }
}

/* ── HAREKET AZALTMA ────────────────────────────────────────────────────
   Hiçbir şey kaymıyor, hiçbir şey büyümüyor. Şerit kalıcı olarak açık —
   yani kartın tıklanabilir olduğu bilgisi hareketsiz de okunuyor.        */

@media (prefers-reduced-motion: reduce) {
  .v-b07a .v-b07a__strip {
    translate: none;
    transition: none;
  }

  .v-b07a .v-b07a__img {
    transition: none;
  }

  .v-b07a .v-b07a__card:hover .v-b07a__img,
  .v-b07a .v-b07a__card:focus-within .v-b07a__img {
    scale: 1;
  }

  .v-b07a .v-b07a__dlg[open],
  .v-b07a .v-b07a__dlg[open]::backdrop {
    animation-duration: 1ms;
  }
}

}