@layer components {
/* ============================================================================
   B04 · RAF — VARYANT B «Kaydırınca silinen kare»  (yüksek)
   ----------------------------------------------------------------------------
   İki fotoğraf yan yana değil, TEK çerçevede üst üste. Kaydırma ilerledikçe
   üstteki «Было» sağdan sola siliniyor ve altındaki «Стало» ortaya çıkıyor.

   BÜTÜN MEKANİZMA TEK SAYIYA BAĞLI: `--v-b04b-kesim`, 0 → 1.
     0   = kare tamamen «Было»
     0.5 = bugünkü üretim düzeni — solda kalabalık raf, sağda PRACTIC
     1   = kare tamamen «Стало»
   Kırpma kenarı, sarı bölücü kuralın konumu ve iki etiketin doygunluğu
   dördü de bu sayıdan `calc()` ile türüyor. Dört ayrı animasyon yazılsaydı
   dördünün de aynı eğri/aralıkla kalması ELLE korunmak zorunda olurdu;
   biri kayınca bölücü fotoğrafın kesim kenarından ayrılırdı. Tek kayıtlı
   özellik animasyonu bu riski tamamen kaldırıyor.

   YEDEK — bilerek %50. `--v-b04b-kesim` hem `@property` ile 0.5 başlangıç
   değeriyle kayıtlı hem de `.v-b04b__stack` üzerinde düz bir bildirim
   olarak yazılı. Yani:
     · `@property` desteklenmiyorsa → düz bildirim iş görüyor, kare %50
     · `animation-timeline: view()` yoksa → animasyon hiç kurulmuyor, %50
     · prefers-reduced-motion: reduce → animasyon hiç kurulmuyor, %50
   Üç durumda da okur, üretimde onaylanmış kareyi görüyor. `opacity: 0` ile
   başlayan hiçbir eleman yok; desteksiz tarayıcıda bölüm eksiksiz.

   KONTRAST — etiketler yol boyunca karışım renginde duruyor, bu yüzden iki
   UÇ da tek tek hesaplandı (ara değerler ikisinin arasında kalıyor):
     «Было»  #f2f2ee üstünde  #0b0b0e → 18.2:1   ·  #4a4a46 → 7.9:1
     «Стало» #121212 üstünde  #fbf6ea → 16.4:1   ·  #ffd200 → 13.0:1
   Saydamlık (`opacity`) hiç kullanılmadı: etiketin içindeki mono satır da
   solacaktı ve o karışım 4.5:1'in altına düşüyordu.

   SARI BÜTÇESİ: sarı yalnız 6px'lik bölücü kuralda ve yolun sonunda küçük
   «Стало» etiketinde. Toplam alanın binde birkaçı.
   ========================================================================== */

/* Kayıtlı özellik olmadan bir custom property ANİME EDİLEMEZ — tarayıcı onu
   ayrıştırılmamış bir dize sayıp adım adım (discrete) geçiş yapardı.
   `<number>` seçildi, `<percentage>` değil: sayı hem yüzdeyle (`* 100%`)
   hem uzunlukla (`* 100cqw`) çarpılabiliyor, yani aynı ilerleme hem
   `clip-path`i hem bölücünün konumunu besliyor. */
@property --v-b04b-kesim {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

/* ══ GİRİŞ ════════════════════════════════════════════════════════════════ */

.v-b04b .v-b04b__lead {
  max-width: var(--measure);
  margin-top: var(--spacing-sp3);
}

/* ══ ÇERÇEVE ══════════════════════════════════════════════════════════════
   28.08 · MÜŞTERİ REVİZYONU. Kare 620/560px'lik bir levhaydı: 1440'ta
   kabuğun (1168px) yalnız %48'ini kaplıyordu ve fotoğraf kendi doğal
   1000px genişliğinin altında basılıyordu — müşterinin şikâyeti buydu.
   Artık kare KABUĞU DOLDURUYOR: 1440'ta 1168px, yani ambalajlar 1000px'lik
   ustadan büyük basılıyor.

   Bedeli boy: oran fotoğrafın kendi oranı (2752×1536) olduğu için 1168px
   genişlik 1303px boy demek. Masaüstünde bu KABUL — bölüm tek ekrana
   sığmıyor, kare bir duvar oluyor ve zaten istenen o. Kırpmak seçenek
   değildi: `cover` ile kutuyu yatay yapmak ambalajların üstünü/altını
   keserdi, oysa istenen fotoğrafın TAMAMININ büyümesi.

   Kadraj birebir korunuyor: iki kare de aynı kutuda, aynı `aspect-ratio`,
   aynı `object-fit: cover`, aynı (varsayılan) `object-position`. Kutu
   büyürken ikisi de aynı oranda büyüyor — «aynı dolap» iddiası ayakta.   */

.v-b04b .v-b04b__frame {
  width: 100%;
  margin: var(--spacing-sp5) auto 0;
}

/* Mobil/tablet üst sınırı. Masaüstünde boy serbest ama küçük ekranda
   1116/1000 oranındaki bir levha ekranı komple yutardı. Sınır GENİŞLİKTEN
   değil YÜKSEKLİKTEN türüyor: kare hiçbir zaman küçük görünüm alanının
   %72'sinden uzun olmuyor (genişlik = boy × 1000/1116).

   `svh` bilerek: `vh` mobil Chrome'da adres çubuğu gizlenince değişir ve
   kare kaydırma sırasında yeniden boyutlanırdı; `svh` sabit. Desteklemeyen
   tarayıcıda `min()` bildirimi tamamen düşüyor ve bir üstteki `max-width:
   100%` iş görüyor — yani kare yine kabuk kadar, sadece sınırsız.        */
@media (max-width: 1023px) {
  .v-b04b .v-b04b__frame {
    max-width: 100%;
    max-width: min(100%, calc(72svh * 2752 / 1536));
  }
}

.v-b04b .v-b04b__stack {
  /* Bölücünün yolu karenin GENİŞLİĞİNDEN okunuyor. Yüzdeyle yapılamaz:
     `translate` içindeki yüzde elemanın kendi genişliğine göre çözülür ve
     6px'lik kural karenin 6px'i kadar yol alırdı. `container-name` YOK:
     dosyadaki tek `@container` sorgusu da (aşağıda, etiket ölçekleri) bu
     elemanı hedefliyor ve isimsiz sorgu zaten EN YAKIN kapsayıcıya bakıyor
     — o da burası. İsim ölü kod olur ve başka bir varyantla ad çakışması
     riski taşırdı. */
  container-type: inline-size;

  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 2752 / 1536;
  overflow: hidden;
  background: var(--color-ink);
  border: var(--rule-heavy) solid var(--color-ink);

  /* Yedek değer. Animasyon kurulduğunda kaskatta zaten animasyon kazanıyor
     (aynı özellik, aynı eleman); kurulmadığında kare %50'de duruyor. */
  --v-b04b-kesim: 0.5;
}

.v-b04b .v-b04b__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Oran zaten fotoğrafın oranı — `cover` burada bir emniyet kemeri:
     oran bir gün 0.1 kayarsa iki kare AYNI şekilde kırpılsın, biri
     kırpılıp öteki esnemesin. Örtüşme ancak böyle birebir kalıyor. */
  object-fit: cover;
}

/* Silinen katman. Yalnız SAĞ kenar hareketli; kalan üç kenar negatif —
   sıfır inset, `animation-fill-mode: both` ile birlikte kutu dışına taşan
   her şeyi kalıcı olarak kırpıyor. */
.v-b04b .v-b04b__wipe {
  position: absolute;
  inset: 0;
  clip-path: inset(-24px calc(var(--v-b04b-kesim) * 100%) -24px -24px);
}

/* ── Bölücü kural ─────────────────────────────────────────────────────────
   Kesim kenarının tam üstünde. Konum `left` ile DEĞİL `translate` ile:
   `left` her karede yerleşim hesabı tetikler, `translate` etmiyor. Ayrıca
   `transform` yerine `translate` özelliği seçildi ki ileride kurala bir
   `transform` gerekirse ikisi birlikte yaşasın.                            */
.v-b04b .v-b04b__seam {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 6px;
  background: var(--color-signal);
  /* Görünen «Было» genişliği (1 − kesim) × kare genişliği; kural o çizginin
     üstüne ORTALANIYOR, bu yüzden yarı kalınlığı geri alınıyor. */
  translate: calc(100cqw - var(--v-b04b-kesim) * 100cqw - 3px) 0;
}

/* ── Durum etiketleri ─────────────────────────────────────────────────────
   Köşelerde SABİT. Bölücüyle birlikte kaymıyorlar; tek değişen doygunluk.
   Doygunluk `opacity` ile değil `color-mix` ile — üst öğeye verilen bir
   opaklık içindeki mono satırı da soldurur ve o karışım AA'nın altına
   düşerdi (dosya başındaki hesap).                                         */

.v-b04b .v-b04b__tags {
  position: absolute;
  inset: 0;
  /* Etiketler bilgi taşıyor ama tıklanmıyor; katman fotoğrafın seçimini
     ve olası bir sürüklemesini engellemesin. */
  pointer-events: none;
}

.v-b04b .v-b04b__tag {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 47%;
  min-width: 0;
  padding: 10px 14px;
}

/* Yol boyunca kömür siyahından yıpranmış griye: «Было» tükeniyor. */
.v-b04b .v-b04b__tag--before {
  left: 0;
  background: color-mix(
    in srgb,
    var(--color-stage) calc(100% - var(--v-b04b-kesim) * 100%),
    var(--color-ink-2)
  );
  color: var(--color-on-stage);
}

/* Ters yönde: krem kâğıttan tam sarıya. Zemin iki uçta da AÇIK olduğu için
   mürekkep yazı yol boyunca 13:1'in altına inmiyor. */
.v-b04b .v-b04b__tag--after {
  right: 0;
  align-items: flex-end;
  text-align: end;
  background: color-mix(
    in srgb,
    var(--color-signal) calc(var(--v-b04b-kesim) * 100%),
    var(--color-paper-2)
  );
  color: var(--color-ink);
}

.v-b04b .v-b04b__tagname {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h4);
  line-height: 1.05;
  letter-spacing: var(--ls-h3);
}

/* Sönükleştirme YOK — ayrım punto ve harf aralığıyla kuruluyor. */
.v-b04b .v-b04b__tagnum {
  white-space: nowrap;
}

/* ── Kare büyüyünce etiket de büyür ───────────────────────────────────────
   Ölçü VİEWPORT'tan değil KARENİN KENDİ genişliğinden okunuyor: aynı kare
   1440'ta 1168px, tablette 660px, telefonda 305px oluyor ve bir media
   sorgusu bu üçünü ayırt edemezdi (aynı 768px'te kare hem dar hem geniş
   olabiliyor). 620px eşiği eski sabit levha genişliği: kare o boyu geçtiği
   anda 10/14px'lik dolgu ve h4 punto levhanın içinde kayboluyordu.
   Kesim kenarı ile bölücünün hizası korunuyor — kalınlık artınca yarısı
   yine geri alınıyor.                                                      */
@container (min-width: 620px) {
  .v-b04b .v-b04b__tag {
    gap: 4px;
    padding: 16px 20px;
  }

  .v-b04b .v-b04b__tagname {
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-h2);
  }

  .v-b04b .v-b04b__seam {
    width: 8px;
    translate: calc(100cqw - var(--v-b04b-kesim) * 100cqw - 4px) 0;
  }
}

/* Sorun cümlesi — çerçevenin ÜSTÜNDE, vaadin hemen altında. Karenin
   altyazısı olarak denendi ve bırakıldı: silme bitince kare tamamen
   «Стало» oluyor, altındaki cümle ise hâlâ sorunu anlatıyordu.
   İkincil rengi `.t-muted` veriyor (bileşende yazılı): kendi rengimi
   yazsaydım koyu zemin karşılığını da düşünmem gerekirdi (tuzak #17). */
.v-b04b .v-b04b__sub {
  max-width: var(--measure);
  margin-top: var(--spacing-sp2);
}

/* ══ KANIT SÜTUNLARI ══════════════════════════════════════════════════════ */

.v-b04b .v-b04b__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sp5);
  margin-top: var(--spacing-sp6);
}

.v-b04b .v-b04b__col {
  min-width: 0;
  min-height: 0;
  /* Kartlar kenardan girerken sütunun dışına taşıyor; kırpma yatay
     kaydırma çubuğunu engelliyor.

     `hidden` DEĞİL `clip` — `overflow: hidden` elemanı bir SCROLL
     CONTAINER yapıyor. `animation-timeline: view()` zaman çizelgesini
     "en yakın ATA scroll container"dan okuduğu için kartların, kicker'ın
     ve sütun başlığının çizelgesi belgeden kopup bu sütuna bağlanıyordu;
     sütunun kaydırma menzili sıfır olduğundan ilerleme sabit bir değerde
     donuyor ve `fill: both` ile hepsi bitiş karesinde takılı kalıyordu —
     yani giriş koreografisi DESTEKLEYEN tarayıcıda da hiç oynamıyordu.
     `clip` aynı kırpmayı yapıyor ama scroll container OLUŞTURMUYOR.
     (`.v-b04b__stack`teki `overflow: hidden` etkilenmiyor: elemanın kendi
     overflow'u onun İÇİNDEKİ animasyonlar için kaynak, orada zaten
     çizelge okuyan alt eleman yok.) */
  overflow-x: clip;
  padding-top: var(--spacing-sp3);
  border-top: var(--rule-heavy) solid var(--color-ink);
}

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

.v-b04b .v-b04b__colhead {
  margin-top: 6px;
  text-wrap: balance;
}

.v-b04b .v-b04b__list {
  list-style: none;
  margin: var(--spacing-sp3) 0 0;
  padding: 0;
  min-width: 0;
}

.v-b04b .v-b04b__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-sp3);
  min-width: 0;
  min-height: 0;
  padding-block: var(--spacing-sp3);
  border-bottom: var(--rule-hair) solid var(--rule-soft);
}

.v-b04b .v-b04b__card:last-child {
  border-bottom: 0;
}

/* Numara + işaret tek dar sütunda: poster künyesi gibi okunuyor. */
.v-b04b .v-b04b__gutter {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 34px;
  min-width: 0;
}

.v-b04b .v-b04b__no {
  color: var(--color-ink-2);
  line-height: 1.4;
}

.v-b04b .v-b04b__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--rule-mid) solid currentColor;
}

.v-b04b .v-b04b__mark svg {
  width: 16px;
  height: 16px;
}

/* İşaret rengi sütunun yönünü söylüyor — üretimdeki B04 ile aynı sistem. */
.v-b04b .v-b04b__col--bad .v-b04b__mark {
  color: var(--color-warn);
}

.v-b04b .v-b04b__col--good .v-b04b__mark {
  color: var(--color-ok);
}

.v-b04b .v-b04b__body {
  min-width: 0;
  /* Uzun Rusça bileşik kelime dar ekranda sütunu taşırmasın */
  overflow-wrap: break-word;
}

/* ══ MASAÜSTÜ · 768px ═════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .v-b04b .v-b04b__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--spacing-sp6);
  }
}

/* İnce ayırıcı yalnız iki sütun YAN YANAYKEN anlamlı; alt alta inince
   sütunun kendi üst kuralı işi görüyor. */
@media (min-width: 768px) {
  .v-b04b .v-b04b__col--good {
    padding-left: var(--spacing-sp5);
    margin-left: calc(var(--spacing-sp5) * -1);
    border-left: var(--rule-hair) solid var(--rule-soft);
  }
}

/* İşaretçisi olan cihazda kart üstüne gelince künye koyulaşıyor. Kartlar
   bağlantı değil, bu yüzden hareket yok — yalnız okunabilirlik artıyor. */
@media (hover: hover) {
  .v-b04b .v-b04b__card {
    transition: background-color var(--dur-fast) var(--ease-both);
  }

  .v-b04b .v-b04b__card:hover {
    background: var(--color-paper-2);
  }

  .v-b04b .v-b04b__card:hover .v-b04b__no {
    color: var(--color-ink);
  }
}

/* ══ KAYDIRMAYA BAĞLI KOREOGRAFİ ══════════════════════════════════════════
   Tamamı `@supports` + hareket tercihi içinde. Desteklemeyen tarayıcıda bu
   kuralların hiçbiri yazılmıyor: kesim %50'de, kartlar yerinde ve okunur.  */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Silme kare ekranın alt üçte birine girdiğinde başlıyor ve üst
       yarısını geçerken bitiyor: dönüşüm okur kareye BAKARKEN oluyor,
       ekranın dışında olup bitmiyor. */
    .v-b04b .v-b04b__stack {
      animation: v-b04b-sil linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 55%;
    }

    /* MOBİLDE SİLME GEÇ BAŞLIYOR · 29.08 ───────────────────────────────
       Kare mobilde 187px. `entry 25%` bu boyda, kare ekranda göründükten
       ~47px sonra başlıyor demek: okur kadraja bakmaya fırsat bulmadan
       kalabalık raf silinmiş oluyordu ve bölümün ANLATTIĞI şey — önce ne
       vardı — hiç görünmüyordu.
       Yeni aralık kareyi önce TAM ve kirli hâliyle bırakıyor: silme,
       kare ekranın ortasının biraz altındayken başlıyor ve üst üçte bire
       varmadan bitiyor. Masaüstünde kare çok daha büyük, orada erken
       başlaması doğru — dokunulmadı. */
    @media (max-width: 1023.98px) {
      .v-b04b .v-b04b__stack {
        animation-range: cover 36% cover 72%;
      }
    }

    /* Kartlar iki koldan. Kademe süreden DEĞİL kaydırma aralığından
       kısılıyor: her karta aynı uzunlukta yol veriliyor, yalnız başlangıç
       noktası öteleniyor. Süreden kısılsaydı üçü farklı hızda girer ve
       sıra dağılırdı. */
    .v-b04b .v-b04b__card {
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover calc(4% + var(--i, 0) * 6%) cover calc(30% + var(--i, 0) * 6%);
    }

    .v-b04b .v-b04b__col--bad .v-b04b__card {
      animation-name: v-b04b-soldan;
    }

    .v-b04b .v-b04b__col--good .v-b04b__card {
      animation-name: v-b04b-sagdan;
    }

    /* Sütun başlıkları kartlarla aynı koldan, onlardan bir adım önce. */
    .v-b04b .v-b04b__kicker,
    .v-b04b .v-b04b__colhead {
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 2% cover 24%;
    }

    .v-b04b .v-b04b__col--bad .v-b04b__kicker,
    .v-b04b .v-b04b__col--bad .v-b04b__colhead {
      animation-name: v-b04b-soldan;
    }

    .v-b04b .v-b04b__col--good .v-b04b__kicker,
    .v-b04b .v-b04b__col--good .v-b04b__colhead {
      animation-name: v-b04b-sagdan;
    }
  }
}

/* Tek iş: ilerlemeyi 0'dan 1'e taşımak. Geri kalan her şey — kırpma,
   bölücünün konumu, iki etiketin zemini — bu sayıdan türüyor. */
@keyframes v-b04b-sil {
  from {
    --v-b04b-kesim: 0;
  }
  to {
    --v-b04b-kesim: 1;
  }
}

@keyframes v-b04b-soldan {
  from {
    opacity: 0;
    translate: -28px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes v-b04b-sagdan {
  from {
    opacity: 0;
    translate: 28px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ══ HAREKET AZALTMA ══════════════════════════════════════════════════════
   Yukarıdaki koreografi zaten `prefers-reduced-motion: no-preference`
   içinde, yani burada iptal edilecek animasyon yok. Kalan tek hareket
   hover geçişi.                                                            */

@media (prefers-reduced-motion: reduce) {
  .v-b04b .v-b04b__card {
    transition: none;
  }
}


}