@layer components {
/* ============================================================================
   B11 · SOSYAL KANIT — VARYANT D · "Kaydırdıkça temizlenen üç şerit" (v-b11d)
   ----------------------------------------------------------------------------
   B'nin DÜZENİ + C'nin MEKANİZMASI, C'nin PİNİ OLMADAN.

   · Düzen (B): üç yüzey, üç kenardan kenara şerit, alt alta, aralarında
     kalın mürekkep kuralı. Metin sütunu zikzak. Sekme yok.
   · Mekanizma (C): silmeyi okur değil kaydırma yapıyor; ambalaj yüzeyi
     soldan sağa süpürüyor, kir arkasında geri çekiliyor.
   · Pin YOK: `position: sticky` ve sarmalayıcı yüksekliği bu dosyada hiç
     geçmiyor. Sayfa normal akıyor. Bunun yerine HER ŞERİDİN KENDİ
     `animation-timeline: view()` zaman çizgisi var ve özne o şeridin kendi
     sahne kutusu — yani "okur bu şeridin hizasından geçerken" cümlesi
     doğrudan CSS'e çevrilmiş oluyor. Üç şerit birbirinden bağımsız.

   ── TEK ÖZELLİK ADI, ÜÇ AYRI ANİMASYON ────────────────────────────────
   Şerit başına ayrı bir `@property` TANIMLANMADI. Tek bir kayıtlı özellik
   var — `--v-b11d-pos` — ve her şerit onu KENDİ alt ağacında, kendi zaman
   çizgisiyle animasyonluyor. Değer `.v-b11d__stage` üzerinde sürülüyor,
   torunları (kırpma, sarı bölücü, ambalaj, ilerleme rayı) kalıtımla
   okuyor. Üç şerit ayrı elemanlar olduğu için üç ayrı hesap yapılıyor;
   üç ayrı özellik adına gerek yok, aksi hâlde her yeni çift için hem yeni
   bir `@property` hem yeni bir `@keyframes` yazmak gerekirdi.

   ── ELLE MOD · ŞERİT BAZINDA ──────────────────────────────────────────
   Sürgüye dokunulan şeride `data-manual="1"` yazılıyor ve animasyon
   seçicisi (`[data-manual="0"]`) düşüyor. CSS animasyonu kaskatta inline
   bildirimi YENDİĞİ için kural açıkça kapatılmak zorunda; `animation: none`
   ile ezmek bir katman daha ekler ve hangi kuralın kazandığı okunmaz olurdu.
   Öznitelik ŞERİDİN kökünde, bölümün kökünde değil — öteki iki şerit
   kaydırmayla çalışmaya devam ediyor.

   ── YEDEK ─────────────────────────────────────────────────────────────
   `animation-timeline: view()` desteklenmiyorsa ya da
   `prefers-reduced-motion: reduce` ise animasyon HİÇ tanımlanmıyor; konum
   bileşenin inline yazdığı değerden geliyor ve üç şerit %35 / %50 / %65'te
   klasik elle çekilen sürgü olarak duruyor. Bu dosyanın gövdesi zaten o
   hâli tarif ediyor: koreografi kalksa bölüm hiçbir şey kaybetmiyor.

   Her seçici .v-b11d ile başlar — varyantlar birbirine sızmasın.
   ========================================================================== */

/* Bölücünün konumu. Kırpma, sarı kural, ambalaj ve ilerleme rayı hep buradan
   okuyor. `inherits: true` ŞART: değer `.v-b11d__stage` üzerinde
   animasyonlanıp torunlarında kullanılıyor. Başlangıç %50 — kayıt bir
   şekilde uygulanmazsa bile kare iki tarafı da gösteriyor. */
@property --v-b11d-pos {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

/* ── BAŞLIK ALANI ───────────────────────────────────────────────────────── */

.v-b11d__lead {
  margin-top: var(--spacing-sp4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sp1);
  color: var(--color-ink);
}

.v-b11d__eyebrow {
  color: var(--color-ink-2);
}

/* ── ŞERİTLER ───────────────────────────────────────────────────────────── */

.v-b11d__bands {
  margin-top: var(--spacing-sp5);
}

.v-b11d__band {
  position: relative;
  padding-block: var(--spacing-sp5);
}

/* Kalın kural gerçek bir `border` DEĞİL, kendi elemanı: giriş animasyonunda
   soldan sağa çizilebilmesi için ölçeklenebilir bir kutuya ihtiyacı var.
   Kenarlıklar ölçeklenmiyor. */
.v-b11d__band::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--rule-heavy);
  background: var(--color-ink);
  transform-origin: left center;
}

/* Son şeridin altı da kapansın — yığın açık uçlu bitmesin. */
.v-b11d__band:last-child {
  border-bottom: var(--rule-heavy) solid var(--color-ink);
}

.v-b11d__bandin {
  display: grid;
  gap: var(--spacing-sp3);
}

/* İki eksende de taban: uzun Rusça ürün adı ve içerideki görsel hücreyi
   şişirip yatay taşma yapmasın (BRIEF §7.1). */
.v-b11d__col,
.v-b11d__stage {
  min-width: 0;
  min-height: 0;
}

/* Mobilde metin kenar boşluğunun içinde, kare kenardan kenara. */
.v-b11d__col {
  padding-inline: var(--gutter);
}

@media (min-width: 1024px) {
  .v-b11d__bandin {
    /* Çok geniş ekranda kare tek başına bir ekranı yemesin; şerit hâlâ
       kenardan kenara ama içerik ortalanmış bir tuvalde duruyor. */
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--spacing-sp5);
    align-items: center;
  }

  .v-b11d__col {
    padding-inline: 0;
  }

  /* ZİKZAK — çift sayılı şeritte metin sağa geçiyor. Alan atamaları sadece
     sütunların tanımlı olduğu bu sorgunun içinde (BRIEF §7.12). */
  .v-b11d__band:nth-child(even) .v-b11d__bandin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  }

  .v-b11d__band:nth-child(even) .v-b11d__col {
    grid-column: 2;
    grid-row: 1;
  }

  .v-b11d__band:nth-child(even) .v-b11d__stage {
    grid-column: 1;
    grid-row: 1;
  }
}

/* ── METİN SÜTUNU ───────────────────────────────────────────────────────── */

.v-b11d__idx {
  display: block;
  color: var(--color-ink-2);
  letter-spacing: var(--ls-mono);
}

.v-b11d__surface {
  margin-top: var(--spacing-sp1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Yüzey adının altında ince bir kural: hangi ürünün o yüzeye ait olduğunu
   tipografik olarak bağlıyor. */
.v-b11d__prod {
  margin-top: var(--spacing-sp3);
  padding-top: var(--spacing-sp2);
  border-top: var(--rule-hair) solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: var(--spacing-sp2);
}

.v-b11d__prodimg {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
}

.v-b11d__prodimg img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.v-b11d__prodtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.v-b11d__prodname {
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--color-ink);
}

.v-b11d__prodvol {
  color: var(--color-ink-2);
  letter-spacing: var(--ls-mono);
}

/* Sürgünün elle de çekilebildiğini söyleyen tek satır. Kaydırma sürüşü
   kendiliğinden çalışıyor; bu metin ikinci yolu duyuruyor. */
.v-b11d__hint {
  margin-top: var(--spacing-sp2);
  color: var(--color-ink-2);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

/* ── SAHNE · kare + ilerleme rayı ───────────────────────────────────────────
   Kaydırma zaman çizgisinin ÖZNESİ bu kutu. Kare ile ray tek özneyi
   paylaşıyor ki ilerleme rayı silmeyle birebir aynı değeri göstersin.       */

.v-b11d__stage {
  display: block;
}

.v-b11d__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-paper-2);
  border-block: var(--rule-mid) solid var(--color-ink);
  /* Oranı ÇERÇEVE veriyor, katmanlar sadece dolduruyor → görsel yüklenmeden
     de yer ayrılmış oluyor, CLS 0. Mobilde 16/9 çok alçak kalıyor ve kirin
     ayrıntısı okunmuyor. */
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .v-b11d__frame {
    /* Kaynak kareler 2752×1536 — kırpmasız oran bu. */
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  /* Kare artık kenara dayanmıyor, dört tarafı çerçeveli. */
  .v-b11d__frame {
    border: var(--rule-mid) solid var(--color-ink);
  }
}

.v-b11d__layer {
  position: absolute;
  inset: 0;
}

/* ÖNCESİ katmanı bölücüden SAĞA kalıyor: temizlik soldan sağa ilerliyor,
   kir geri çekiliyor. Kırpılmayan üç kenar NEGATİF — kenarlıkla katman
   arasında saç teli boşluk kalmasın (BRIEF §7.9). */
.v-b11d__layer--clip {
  clip-path: inset(-2px -2px -2px var(--v-b11d-pos));
}

.v-b11d__img,
.v-b11d__layer .ph-box {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  /* Yer tutucunun kendi oranı çerçeveyi ezmesin */
  aspect-ratio: auto !important;
}

/* İki yer tutucu üst üste binince ikisi de aynı desende oluyor ve bölücü
   kayboluyor — üsttekini ayırt edilir kılmak için hafif tonlama. */
.v-b11d__layer--clip .ph-box {
  background-color: rgba(18, 18, 18, 0.06);
}

.v-b11d__tag {
  position: absolute;
  top: 0;
  z-index: 3;
  padding: 7px 11px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  pointer-events: none;
}

/* Etiketler tarafları işaretliyor: sol temiz, sağ kirli — silme yönüyle
   aynı okuma. */
.v-b11d__tag--after {
  left: 0;
}

.v-b11d__tag--before {
  right: 0;
}

/* Süpürme çizgisi. Sarının sayfadaki payı burada — 3px'lik bir kural. */
.v-b11d__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--v-b11d-pos);
  z-index: 3;
  width: var(--rule-heavy);
  margin-left: calc(var(--rule-heavy) / -2);
  background: var(--color-signal);
  pointer-events: none;
}

/* ── KOL = AMBALAJIN KENDİSİ ────────────────────────────────────────────────
   Rozet yok: ürün çerçevenin taban çizgisinde duruyor ve bölücüyle birlikte
   yüzeyin üstünde geziyor — "bu ürün burayı temizliyor" cümlesi hareketin
   kendisinden çıkıyor. Boy `urunBoyu` tablosundan (`--v-b11d-boy`), genişlik
   görselin gerçek oranından türüyor; hiçbir ambalaj ezilmiyor.

   Merkezleme `translate` özelliğinde, `transform` DEĞİL (BRIEF §7.2): hover
   ölçeklemesi `transform`a yazılıyor, ikisi aynı özellikte olsaydı biri
   ötekini silerdi.

   `pointer-events: none` ŞART — gerçek kontrol alttaki range input.         */

.v-b11d__knob {
  position: absolute;
  left: var(--v-b11d-pos);
  bottom: 4%;
  z-index: 4;
  display: block;
  height: var(--v-b11d-boy, 40%);
  translate: -50% 0;
  transform-origin: bottom center;
  /* BRIEF §7.18: bu görselde `--dur` kullanılamaz — ortak salınım kuralı
     onu elemanın üstünde eziyor. `--dur-fast` güvenli. */
  transition: transform var(--dur-fast) var(--ease-both);
  pointer-events: none;
}

.v-b11d__frame:hover .v-b11d__knob,
.v-b11d__frame:focus-within .v-b11d__knob {
  transform: scale(1.04);
}

.v-b11d__knobimg {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  /* Ambalaj yüzeyin üstünde duruyor; temas gölgesi olmadan havada asılı
     görünüyordu. */
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

/* ── GERÇEK KONTROL ─────────────────────────────────────────────────────────
   Görünmez, tüm kareyi kaplıyor, odaklanabilir. Klavye (← →, Home/End),
   ekran okuyucu ve dokunmatik tarayıcıdan bedava geliyor. Dokunulduğu an
   bileşen bu şeride `data-manual="1"` yazıyor ve kaydırma sürüşü düşüyor.  */

.v-b11d__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  cursor: ew-resize;
}

.v-b11d__range::-webkit-slider-thumb {
  appearance: none;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: ew-resize;
}

.v-b11d__range::-moz-range-thumb {
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: ew-resize;
}

.v-b11d__range::-moz-range-track {
  background: transparent;
}

/* Kontrol şeffaf olduğu için odak halkasını çerçeve taşıyor. */
.v-b11d__range:focus-visible {
  outline: 3px solid var(--color-brand-blue);
  outline-offset: -3px;
}

/* ── İLERLEME RAYI ──────────────────────────────────────────────────────────
   Silmenin ne kadarının bittiğini kareyi bozmadan gösteriyor. Kaydırma
   sürüşünde de, elle çekerken de aynı `--v-b11d-pos` değerine bakıyor:
   mekanizmanın tek kaynaklı olduğu ekranda görünür hâle geliyor.
   Sabit yükseklikli — CLS'e dokunmuyor.                                     */

.v-b11d__rail {
  position: relative;
  height: var(--rule-heavy);
  background: var(--rule-soft);
  overflow: hidden;
}

@media (min-width: 1024px) {
  /* Kare masaüstünde dört tarafı çerçeveli; ray onun altına yapışmasın. */
  .v-b11d__rail {
    margin-top: var(--spacing-sp1);
  }
}

.v-b11d__railfill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--v-b11d-pos);
  background: var(--color-ink);
}

/* ── YORUMLAR · bayrak açılınca ─────────────────────────────────────────────
   `testimonialsReady` false iken bileşen bu listeyi HİÇ basmıyor; kurallar
   müşteri metni geldiği gün hazır dursun diye burada duruyor.               */

.v-b11d__quotes {
  margin-top: var(--spacing-sp6);
  padding-top: var(--spacing-sp5);
  border-top: var(--rule-heavy) solid var(--color-ink);
  list-style: none;
  padding-inline: 0;
  display: grid;
  gap: var(--spacing-sp4);
}

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

.v-b11d__quote {
  min-width: 0;
  border-left: var(--rule-mid) solid var(--color-signal);
  padding-left: var(--spacing-sp3);
}

.v-b11d__qtext {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-ink);
}

.v-b11d__qwho {
  margin-top: var(--spacing-sp2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-b11d__qname {
  font-weight: 700;
}

.v-b11d__qrole {
  color: var(--color-ink-2);
  letter-spacing: var(--ls-mono);
}

/* ── KURUMSAL LOGOLAR ─────────────────────────────────────────────────────
   Dosyalar gelmedi. Bileşen bu bloğu başlığıyla birlikte HİÇ basmıyor;
   aşağıdaki stiller bayrak + liste geldiği gün hazır olsun diye duruyor.  */

.v-b11d__clients {
  margin-top: var(--spacing-sp6);
}

.v-b11d__clientstitle {
  color: var(--color-ink-2);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sp3);
}

.v-b11d__logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--rule-mid);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-rule);
  border: var(--rule-mid) solid var(--color-ink);
}

.v-b11d__logo {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: var(--spacing-sp3);
  background: var(--color-paper-2);
}

.v-b11d__logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   ★ İMZA AN · KAYDIRMA SÜRÜŞÜ — PİN YOK
   ----------------------------------------------------------------------------
   Üç koşul: `animation-timeline: view()` desteği + hareket serbest + o şerit
   henüz elle kontrole geçmemiş. Biri düşerse yukarıdaki düz tasarım olduğu
   gibi kalıyor ve konum bileşenin inline yazdığı değerden geliyor.

   NEDEN `cover` fazı: sahne kutusu her kırılımda ekrandan alçak, dolayısıyla
   `contain` fazı çok kısa ve dar ekranlarda hiç oluşmuyor. `cover` ise
   "özne ekranın altına değdi" ile "özne ekranın üstünden çıktı" arasını tek
   parça olarak veriyor — okurun o şeritten geçişi bu.

   NEDEN %22 → %62: silme okur şeridi görmeye başladıktan sonra açılıyor
   (%22'de kare ekranın alt yarısında) ve şerit ekranın ortasına geldiğinde
   BİTİYOR (%62). Yani okur şeridi tam geçtiğinde yüzey çoktan %100 temiz ve
   `both` dolgusu sayesinde öyle KALIYOR — geriye kaydırınca da temizlik
   geri sarıyor, mekanizma iki yönde de anlaşılıyor.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .v-b11d__band[data-manual="0"] .v-b11d__stage {
      animation: v-b11d-sil linear both;
      animation-timeline: view();
      animation-range: cover 22% cover 62%;
    }

    /* Şeridin kalın kuralı görüş alanına girerken soldan sağa çiziliyor.
       Dekoratif. `cover` fazı kullanılıyor çünkü 3px'lik bir kuralın
       `entry` fazı 3px sürer — pratikte hiç görünmez. */
    .v-b11d__band::before {
      animation: v-b11d-cizgi linear both;
      animation-timeline: view();
      animation-range: cover 4% cover 22%;
    }

    /* Yalnız `translate` sürülüyor: sütunun içinde `transform` kullanan
       başka bir kural yok, `opacity`ye ise hiç dokunulmuyor — geçiş
       sırasında metnin kontrastı bir an bile düşmesin diye. */
    .v-b11d__col {
      animation: v-b11d-metin linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 65%;
    }
  }
}

@keyframes v-b11d-sil {
  from {
    --v-b11d-pos: 0%;
  }
  to {
    --v-b11d-pos: 100%;
  }
}

@keyframes v-b11d-cizgi {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes v-b11d-metin {
  from {
    translate: 0 18px;
  }
  to {
    translate: 0 0;
  }
}

/* ── AMBALAJ DAHA BÜYÜK ─────────────────────────────────────────────────
   Metin sütunundaki ürün 64×64 kutuya oturuyordu; o boyda ambalaj hangi
   ürün olduğunu göstermiyor, yalnız bir leke olarak duruyor. Şeridin sol
   sütunu masaüstünde geniş, yer var. Kutu büyütüldü ve ürün ile yazı
   üst üste değil YAN YANA hizalandı: ambalaj boyca uzun olduğu için
   ortalama hizada yazıyı aşağı itiyordu. */

/* MOBİLDE ÜRÜN SATIRI GİZLİ · 29.08 ─────────────────────────────────────
   Sürgünün kolu zaten ürünün KENDİSİ: kolu çeken kişi o yüzeyi temizleyen
   ambalajı yüzeyin üstünde gezdiriyor. Masaüstünde metin sütunu karenin
   YANINDA durduğu için ambalajın ikinci kez, adıyla ve hacmiyle yazılması
   künye gibi okunuyor. Mobilde sütun karenin ALTINA düşüyor ve aynı
   ambalaj üst üste iki kez basılıyor — kanıtın kendisi olan kareyle
   yarışıyor. Yüzey başlığı ve sıra numarası duruyor; kalkan yalnız bu
   satır ve yalnız mobilde. */
@media (max-width: 767.98px) {
  .v-b11d .v-b11d__prod {
    display: none;
  }
}

@media (min-width: 768px) {
  .v-b11d .v-b11d__prod {
    align-items: flex-start;
    gap: var(--spacing-sp3);
  }

  .v-b11d .v-b11d__prodimg {
    width: 92px;
    height: 112px;
  }

  .v-b11d .v-b11d__prodtext {
    padding-top: var(--spacing-sp1);
  }
}

@media (min-width: 1280px) {
  .v-b11d .v-b11d__prodimg {
    width: 108px;
    height: 132px;
  }
}

}