@layer components {


/* ── PİN SARMALAYICI · VARSAYILAN: PİN YOK ──────────────────────────────
   Yükseklik ve sticky sadece koreografi açıkken veriliyor. Burada sadece
   iki sahnenin dikey ritmi var.                                          */

.v-b08c__pin {
  position: relative;
  margin-top: var(--spacing-sp5);
}

.v-b08c__stage {
  min-width: 0;
}

.v-b08c__inner {
  min-width: 0;
  min-height: 0;
}

/* ── SAHNE 1 · DEFTER ───────────────────────────────────────────────────── */

.v-b08c__ledgerhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sp1) var(--spacing-sp3);
  margin-bottom: var(--spacing-sp3);
}

.v-b08c__ledgertitle {
  margin: 0;
  min-width: 0;
}

/* Sütun adları mobilde gizli: orada her hücre kendi adını taşıyor. */
.v-b08c__cols {
  display: none;
}

.v-b08c__col {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.v-b08c__col--a {
  color: var(--color-brand-blue);
}

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

/* Defterin üst kuralı kalın, satır araları ince — Industrial Poster ritmi. */
.v-b08c__rows {
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.v-b08c__row {
  position: relative;
  min-width: 0;
  padding-block: var(--spacing-sp3);
}

/* Satır çizgisi border değil ayrı bir katman: koreografide ortadan dışarı
   doğru çizilebilmesi için `scale` gerekiyor, border ölçeklenemiyor. */
.v-b08c__row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--rule-hair);
  background: var(--rule-soft);
  transform-origin: center;
}

.v-b08c__crit {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-bottom: var(--spacing-sp1);
  min-width: 0;
}

.v-b08c__val {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  min-width: 0;
  padding-block: 3px;
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* Sütun adı hücrenin kendi içinde. Masaüstünde görsel olarak gizleniyor
   (başlıkta zaten yazıyor) ama erişilebilirlik ağacında kalıyor. */
.v-b08c__val::before {
  content: attr(data-col);
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.v-b08c__val--a {
  color: var(--color-ink);
  font-weight: 600;
}

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

.v-b08c__mark {
  align-self: start;
  margin-top: 2px;
}

/* Onay işareti YEŞİL DEĞİL marka mavisi. Gerekçe iki yönlü: (1) poster dili
   krem · mürekkep · sarı · mavi üzerine kurulu, --color-ok beşinci bir renk
   olarak yalnız burada beliriyordu; (2) bu varyantta PRACTIC tarafını zaten
   mavi işaretliyor (sütun adı `--col--a`, madde numaraları `__in`) — işaret
   de mavi olunca taraf tek bir renkle konuşuyor. Kontrast da kazanıyor:
   krem zeminde yeşil 4.4:1, mavi 7.3:1. */
.v-b08c__mark--yes {
  color: var(--color-brand-blue);
}

/* Üretimdeki `.cmp__mark--no` %60 opaklıkta; krem zeminle karışınca 2.9:1'e
   düşüyor. Burada tam ton kullanılıyor — 7.2:1. */
.v-b08c__mark--no {
  color: var(--color-ink-2);
}

/* ============================================================================
   MASAÜSTÜ DÜZENİ — hâlâ hareket yok
   Defter üç sütuna açılıyor: solda PRACTIC (sağa yaslı), ortada ölçüt
   sütunu (iki ince dikey kural arasında), sağda "обычное". Ölçüt ortada
   olunca iki taraf gerçekten KARŞI KARŞIYA duruyor — zıt kayma da bu
   eksende okunuyor.
   ========================================================================== */

@media (min-width: 1024px) {
  .v-b08c__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22ch) minmax(0, 1fr);
    column-gap: var(--spacing-sp3);
    width: 100%;
    margin: 0;
  }

  .v-b08c__col--a {
    grid-column: 1;
    text-align: right;
  }

  .v-b08c__col--b {
    grid-column: 3;
  }

  .v-b08c__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22ch) minmax(0, 1fr);
    column-gap: var(--spacing-sp3);
    align-items: center;
    padding-block: clamp(12px, 1.6vh, 20px);
  }

  /* Kaynak sırası dt → dd → dd (anlam); görsel sıra dd → dt → dd. */
  .v-b08c__crit {
    order: 2;
    grid-column: 2;
    text-align: center;
    margin-bottom: 0;
    padding-inline: var(--spacing-sp2);
    border-inline: var(--rule-hair) solid var(--rule-soft);
  }

  .v-b08c__val--a {
    order: 1;
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    text-align: right;
  }

  /* Sol taraf aynalanıyor: metin solda, işaret dış kenarda. */
  .v-b08c__val--a > span {
    order: 1;
  }

  .v-b08c__val--a .v-b08c__mark {
    order: 2;
  }

  .v-b08c__val--b {
    order: 3;
    grid-column: 3;
  }

  /* Sütun adı masaüstünde görünmez ama okunur kalıyor. */
  .v-b08c__val::before {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ============================================================================
   ★ İMZA AN · ZIT KAYAN SATIRLAR
   Üç koşul: scroll-driven animasyon desteği + masaüstü genişliği + hareket
   serbest. Biri düşerse yukarıdaki düz tasarım kalıyor — o da bitmiş bir
   tasarım, hiçbir içerik kaybolmuyor.

   28.08 · PİN KALDIRILDI. Bölüm eskiden ekrana çakılıyordu ve koreografi
   pinin `contain` fazına bağlıydı; bedeli başlıkla defter arasında ve
   defterden sonra birer ekran boşluktu. Artık her satır KENDİ `view()`
   çizelgesinde çalışıyor: sayfa hiç durmuyor, ölü kaydırma yok, hareket
   aynı. Ekran YÜKSEKLİĞİ koşulu da bu yüzden kalktı — sığması gereken
   sabit bir sahne kalmadı.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* ── PİN KALDIRILDI ────────────────────────────────────────────────
       Sarmalayıcı 165vh, sahne sticky ve içerik dikeyde ortalıydı. Sonuç:
       başlıkla defter arasında bir ekran, defterden sonra bir ekran daha
       boşluk — koreografi bittikten sonra pinin kalanı ölü kaydırmaydı.
       Kısaltmak yetmedi çünkü boşluk pinin KENDİSİNDEN geliyordu.

       Artık pin yok. Satırlar kendi görünürlüklerine bağlı: her satır
       ekrana girerken iki yandan gelip birleşiyor. Aynı hareket, sıfır
       ölü alan — kademeyi satırların kendi konumları veriyor. */
    .v-b08c__pin {
      margin-top: var(--spacing-sp3);
    }

    .v-b08c__stage {
      /* `overflow: hidden` KALIYOR: satırlar ∓%45 yandan geliyor ve onları
         kabuğun dışına taşırmayan tek şey bu. Sticky ve sabit yükseklik
         gitti — boşluğun kaynağı onlardı. */
      overflow: hidden;
    }

    .v-b08c__scene {
      min-width: 0;
      min-height: 0;
    }


    /* — satırlar · zıt kayma —
       `--v-b08c-s` / `--v-b08c-e` TSX'ten geliyor ve dizi uzunluğuna göre hesaplanıyor.
       Öteleme `translate` özelliğinde: `transform` boş bırakılıyor ki
       ileride bir dönüş/ölçek eklenirse birbirini silmesinler. */
    .v-b08c__val--a,
    .v-b08c__val--b,
    .v-b08c__crit {
      animation: v-b08c-settle linear both;
      /* Her satır KENDİ görünürlüğüne bağlı. Ortak pin çizelgesi yerine
         `view()`: satır ekranın altından girerken hareket başlıyor,
         ekranın üçte birine gelince bitiyor. Kademe satırların kendi
         konumlarından doğuyor — ayrıca hesaplamaya gerek yok, bölüm de
         hiçbir yerde durmuyor. */
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }

    .v-b08c__val--a {
      animation-name: v-b08c-from-left;
    }

    .v-b08c__val--b {
      animation-name: v-b08c-from-right;
    }

    /* Ölçüt sütunu yerinde duruyor, sadece açılıyor: iki taraf ONA doğru
       geliyorsa o sabit kalmalı, yoksa buluşma noktası kaybolur. */
    .v-b08c__crit {
      animation-name: v-b08c-settle;
    }

    /* Satır çizgisi ortadan dışarı çiziliyor — satırın kendi çizelgesinde.
       Pin kalktığı için `--v-b08c-pin` artık YOK; adı kalsaydı çizelge
       çözülemez, animasyon hiç oynamaz ve çizgi `from` karesinde, yani
       scaleX(0)'da donardı: satır ayracı sessizce kaybolurdu. */
    .v-b08c__row::after {
      animation: v-b08c-draw linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
  }
}

/* Desteklemeyen tarayıcı: açıkça hiçbir şey yapma. Sarmalayıcı normal
   yükseklikte, sticky yok, iki sahne alt alta, rakamlar 0, bütün metin
   görünür. Bu blok bilerek boş kural değil — sözleşmeyi yazıya döküyor. */
@supports not (animation-timeline: view()) {
  .v-b08c__pin {
    height: auto;
  }

  .v-b08c__stage {
    position: static;
  }
}

/* ── KARELER ─────────────────────────────────────────────────────────────
   Hepsi sadece `opacity` / `translate` / `scale` — düzen hesabı yok,
   birleştirici katmanda kalıyor.                                         */

@keyframes v-b08c-settle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes v-b08c-from-left {
  from {
    opacity: 0;
    translate: -45% 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes v-b08c-from-right {
  from {
    opacity: 0;
    translate: 45% 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes v-b08c-draw {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}


@keyframes v-b08c-take {
  from {
    opacity: 0;
    translate: 0 6%;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Bölümün kendi dikey dolgusu da kısaldı: pinli sahne zaten ekran boyu
   bir nefes alanı üretiyor, üstüne standart 112px'lik bölüm dolgusu
   binince başlığın önü ve arkası boş kalıyordu. */
.v-b08c.section {
  padding-block: calc(var(--section-pad) * 0.55);
}

}