@layer components {
/* ============================================================================
   B10 · VARYANT C — «DÖNEN ÇARK»
   ----------------------------------------------------------------------------
   Koyu sahnede tek bir manifesto cümlesi; arkasında sekiz dilimli ikon çarkı
   ve son cümlecikte kenardan giren ambalaj baskısı. Üç hareket de TEK bir
   `view-timeline`den sürülüyor, JS yok.

   ── ÜÇ KATMAN, SIRASI ÖNEMLİ ──────────────────────────────────────────
   1) Bu dosyanın gövdesi HAREKETSİZ ve BİTMİŞ tasarımdır: çark sabit bir
      desen, ambalajlar tam görünür, cümle tam parlaklıkta. Eski tarayıcı,
      `prefers-reduced-motion` ve mobilin bir kısmı bu hâli görüyor.
   2) @media (min-width: 1024px) yalnız DÜZENİ değiştirir — pin + büyük
      çark. Hâlâ hareket yok.
   3) Koreografi @supports + hareket serbestken açılır.

   ── KONTRAST · BU DOSYANIN EN ÖNEMLİ KARARI ───────────────────────────
   Metnin arkasına desen koymak, "arka plan rengi" diye tek bir değer
   bırakmaz: kontrast artık en PARLAK arka plan pikseline göre hesaplanmak
   zorunda. Üç değer bunun için ölçüldü (hepsi #0b0b0e ile karıştırılarak):

     · sönük kelime — `--color-on-stage` %62 · sahne %38 karışımı
       (≈ #9a9a95) → çıplak sahnede 6,9:1 · çark çizgisi üstünde 5,2:1
       · ambalaj baskısı üstünde 5,0:1
     · sarı yay  rgba(255,210,0,.30) → sönük kelime üstünde 3,26:1.
       51px/800 metin için AA sınırı 3:1, yani en kötü durumda bile
       geçiyor — ama pay ince. Yay bu yüzden çarkın ALT sekizine alındı
       (bkz. b10c.tsx): çember ±34° dönerken bile metin satırlarının
       altında kalıyor, hiçbir kelimenin üstünden geçmiyor.
     · eyebrow `.stage .eyebrow`in %60 kremini KULLANMIYOR. O ton çıplak
       zeminde 6,6:1 ama ambalaj baskısı üstünde 4,0:1'e düşüyordu — küçük
       metin için sınırın altı. Tam parlaklığa çekildi.
       DİKKAT: bunu yapan seçici `.v-b10c.stage .v-b10c__eyebrow` olmak
       ZORUNDA. `.stage .eyebrow` 0-2-0; tek sınıflı bir varyant kuralı
       (0-1-0) aynı katmanda ona kaybediyor ve düzeltme sessizce ölüyor.

   Sönükten aydınlığa geçiş `opacity` ile DEĞİL `color` ile yapılıyor. Sebep
   ölçülebilir: %18 opaklık okunamaz bir ara kare üretiyor, renk ise sönük
   ucu bile AA'nın üstünde tutabiliyor. Yan kazanç, geçişin ORTASINDA sarıya
   uğrayabilmek — cümlede soldan sağa ilerleyen sarı bir okuma başlığı
   oluşuyor ve marka rengi dolgu olarak değil, hareket olarak giriyor.
   ========================================================================== */

/* ── JETONLAR · MOBİL TABAN ─────────────────────────────────────────────
   Çark mobilde hem küçük hem daha sönük: dar ekranda metin sütunu tuvalin
   tamamını kaplıyor, aynı yoğunluktaki desen cümleyi boğuyordu.          */

.v-b10c {
  /* Aydınlanmamış kelime. Ham hex DEĞİL, iki jetonun karışımı: sahne rengi
     bir gün değişirse sönük ton onunla birlikte kayar. Sonuç ≈ #9a9a95.
     `color-mix` desteklenmezse özel özellik geçersiz kalır, `color` da
     miras alır — kelime tam parlaklıkta basılır, yani okunabilirlik kaybı
     olmadan hareketsiz tabana düşülür. */
  --v-b10c-dim: color-mix(in srgb, var(--color-on-stage) 62%, var(--color-stage));
  --v-b10c-line: rgba(242, 242, 238, 0.09); /* çark konturu */
  --v-b10c-hot: rgba(255, 210, 0, 0.22); /* tek dilimin sarı yayı */
  --v-b10c-digit: rgba(242, 242, 238, 0.11); /* dilim numarası */
  --v-b10c-cark: min(86vw, 420px);
  --v-b10c-pack-h: min(38vh, 300px);
  --v-b10c-pack-op: 0.1;

  padding-block: calc(var(--section-pad) * 1.15);
  overflow-x: clip;

  /* Kelime, çark ve ambalaj AYNI çizelgeyi okuyor — koreografi tek
     kaynaktan sürülüyor, üçü birbirinden kaymıyor. İçerideki pin
     masaüstünde yapıştığı için ilerleyen kap bu DIŞ eleman. */
  view-timeline-name: --v-b10c-tl;
  view-timeline-axis: block;
}

.v-b10c__pin {
  position: relative;
  min-width: 0;
}

/* ── ARKA DÜNYA ─────────────────────────────────────────────────────────
   Kendi taşmasını kendisi kırpıyor. Kırpma BURADA, bölümün kendisinde
   değil: sticky bir çocuğu olan kabı scroll kabına çevirmek istemiyoruz. */

.v-b10c__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Metin katmanı da konumlandırılmış — yoksa mutlak konumlu arka dünya
   akıştaki metnin ÜSTÜNE boyanır (konumlanmış eleman konumlanmamışı
   örter, z-index yazmaya gerek yok: DOM sırası yetiyor). */
.v-b10c__inner {
  position: relative;
  /* Masaüstünde pinin ızgara çocuğu — iki eksende de sıfırlanmalı, yoksa
     uzun bir kelime hücreyi yatayda, uzun cümle dikeyde şişiriyor. */
  min-width: 0;
  min-height: 0;
}

/* ── SEKİZ DİLİMLİ ÇARK ─────────────────────────────────────────────────
   `inset: 0` + `margin: auto` + iki kesin ölçü = iki eksende ortalama.  */

.v-b10c__wheel {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--v-b10c-cark);
  height: var(--v-b10c-cark);
  overflow: visible;
}

/* Kontur çark büyüdükçe kalınlaşmasın: viewBox 240 birim, ekranda 420–720
   px, yani ölçek 1,75–3×. `non-scaling-stroke` olmadan "ince kontur"
   3 piksellik bir kabloya dönüşüyor.
   NOT: bu kural `pathLength` normalizasyonunu bozar — bu dosyada kesik
   çizgi (stroke-dasharray) animasyonu YOK, o yüzden güvenli. */
.v-b10c__stroke {
  fill: none;
  stroke: var(--v-b10c-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.v-b10c__hotarc {
  fill: none;
  stroke: var(--v-b10c-hot);
  stroke-width: 2;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.v-b10c__digit {
  fill: var(--v-b10c-digit);
  font-family: var(--font-mono);
  font-size: 8px; /* viewBox birimi — ekranda 14–24px */
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Dönme merkezi: `fill-box` grubun kendi sınır kutusu, o da çarkın
   merkezinde. `transform` yerine `rotate` özelliği kullanılıyor — SVG'de
   `transform` niteliği ile CSS `transform` AYNI özelliktir; ileride bir
   gruba yerleşim niteliği yazılırsa animasyon onu silmesin. */
.v-b10c__ring,
.v-b10c__hub {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* ── AMBALAJ BASKISI ────────────────────────────────────────────────────
   Boy ve genişlik ikisi de kesin (genişlik orandan hesaplanıyor) — mutlak
   konumlu olsa bile ölçüsü tarayıcı çıkarımına bırakılmıyor.
   Eğim `rotate` özelliğinde, giriş `translate` özelliğinde: ikisi ayrı
   özellik olduğu için birlikte yaşıyorlar ve tarayıcı sırası
   (translate → rotate) ötelemeyi eğimden ETKİLENMEDEN uyguluyor.        */

.v-b10c__pack {
  position: absolute;
  display: block;
  height: var(--v-b10c-pack-h);
  width: calc(var(--v-b10c-pack-h) * var(--v-b10c-ar));
  opacity: var(--v-b10c-pack-op);
}

/* AMBALAJ ARTIK KADRAJIN İÇİNDE.
   Önce iki ambalaj tuvalin iki yanından taşıyordu (left: -9% / right: -11%)
   ve ekranda yalnız köşeleri görünüyordu; niyet "arkada soluk bir baskı"ydı
   ama okuyan kişi bunu kırık bir görsel sanıyor. Tek ambalaj kaldı ve
   tamamı çerçevenin içinde: iddia ("her ambalaja yazılı") hâlâ ekranda
   kanıtlanıyor, ama artık bilerek konmuş gibi duruyor. */
.v-b10c__pack--a {
  right: 4%;
  bottom: 0;
  rotate: -4deg;
}

/* İKİNCİ BASKI KALDIRILDI — bkz. yukarıdaki gerekçe. Kural duruyor ki
   bileşen ikinci ambalajı bassa bile ekranda görünmesin. */
.v-b10c__pack--b {
  display: none;
}

.v-b10c__packimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── MANİFESTO ──────────────────────────────────────────────────────────── */

/* `.stage .eyebrow` %60 krem veriyor; ambalaj baskısının üstünde o ton
   4,0:1'e düşüyor (küçük metin sınırı 4,5:1). Tam parlaklık.
   Seçicide `.stage` ŞART: kök eleman `section stage v-b10c` taşıyor, yani
   `.stage .eyebrow` (0-2-0) burada da geçerli ve aynı katmanda. Tek sınıflı
   `.v-b10c__eyebrow` (0-1-0) ona kaybediyordu — kural dosyada duruyor ama
   render'da hiç uygulanmıyordu. 0-3-0 kaynak sırasından da bağımsız. */
.v-b10c.stage .v-b10c__eyebrow {
  color: var(--color-on-stage);
  margin-bottom: var(--spacing-sp5);
}

.v-b10c__statement {
  font-family: var(--font-display);
  font-weight: 800;
  /* display ölçekle aynı 1.07 payı — bkz. tokens.css --fs-h1 */
  font-size: clamp(26px, 1.07rem + 3.4vw, 51px);
  line-height: 1.24;
  letter-spacing: -0.03em;
  max-width: 24ch;
  margin: 0;
  color: var(--color-on-stage);
  text-wrap: pretty;
}

/* Varsayılan: kelime TAM PARLAK. Karartma yalnız koreografi açıkken
   devreye giriyor (aşağıda). */
.v-b10c__word {
  display: inline;
}

.v-b10c__foot {
  margin-top: var(--spacing-sp6);
  display: block;
}

.v-b10c__sign {
  display: block;
  color: var(--color-on-stage);
}

/* İmzanın altına çekilen sarı kural. Genişliği metne değil tuvale bağlı —
   poster dilinde kural bir ölçü işareti, bir altı çizme değil. */
.v-b10c__rule {
  display: block;
  width: min(320px, 62%);
  height: var(--rule-mid);
  margin-top: var(--spacing-sp2);
  background: var(--color-signal);
  transform-origin: left center;
}

/* ── MASAÜSTÜ · SADECE DÜZEN ────────────────────────────────────────────
   Pin ve büyük çark burada. Mobilde pin YOK: dokunmatikte pinleme
   scroll'u ele geçiriyor (üretim kararı, korundu).                      */

@media (min-width: 1024px) {
  .v-b10c {
    --v-b10c-line: rgba(242, 242, 238, 0.13);
    --v-b10c-hot: rgba(255, 210, 0, 0.3);
    --v-b10c-digit: rgba(242, 242, 238, 0.15);
    --v-b10c-cark: min(78vh, 720px);
    --v-b10c-pack-h: min(60vh, 520px);
    --v-b10c-pack-op: 0.14;

    /* Pin süresi: bölüm bu yükseklik boyunca ekranda sabit durur ve
       cümle bu sırada okunur. */
    min-height: 230vh;
    padding-block: 0;
  }

  .v-b10c__pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: grid;
    align-content: center;
  }
}

@media (min-width: 768px) {
}

/* ── KOREOGRAFİ ─────────────────────────────────────────────────────────
   Dört animasyon, tek çizelge:

     çark    cover  0 → 100      çember bir yöne, göbek ters yöne
     kelime  cover 18+i·2,1 → 26+i·2,1   sönük → SARI → krem
     ambalaj cover 14+son·2,1 → 34+son·2,1   son cümlecikle birlikte
     kural   cover 20+n·2,1  → 32+n·2,1     cümle bittikten sonra

   `--i` kelimenin sırası, `--v-b10c-son` son cümleciğin ilk kelimesi,
   `--v-b10c-n` toplam kelime sayısı; üçü de TSX'ten geliyor. Yani ritim
   metnin uzunluğuna göre kendini dağıtıyor, /kk sözlüğü farklı uzunlukta
   olsa da koreografi bozulmuyor.

   Aralıklar `min()` ile tavanlanıyor: alışılmadık uzun bir çeviride
   (n ≈ 40) son kelimeler zaman çizelgesinin DIŞINA taşardı ve hiç
   aydınlanmazdı. Tavanla en kötü ihtimalde birkaç kelime birlikte
   yanıyor — ritim bozulur ama hiçbir şey karanlıkta kalmaz.             */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .v-b10c__ring {
      animation: v-b10c-ring linear both;
      animation-timeline: --v-b10c-tl;
      animation-range: cover 0% cover 100%;
    }

    .v-b10c__hub {
      animation: v-b10c-hub linear both;
      animation-timeline: --v-b10c-tl;
      animation-range: cover 0% cover 100%;
    }

    .v-b10c__word {
      color: var(--v-b10c-dim);
      animation: v-b10c-word linear both;
      animation-timeline: --v-b10c-tl;
      animation-range: cover min(84%, calc(18% + var(--i) * 2.1%)) cover
        min(92%, calc(26% + var(--i) * 2.1%));
    }

    .v-b10c__pack {
      opacity: 0;
      animation: v-b10c-pack linear both;
      animation-timeline: --v-b10c-tl;
      animation-range: cover min(70%, calc(14% + var(--v-b10c-son) * 2.1%))
        cover min(90%, calc(34% + var(--v-b10c-son) * 2.1%));
    }

    .v-b10c__pack--a {
      --v-b10c-gir: -14%;
    }

    .v-b10c__pack--b {
      --v-b10c-gir: 14%;
    }

    .v-b10c__rule {
      animation: v-b10c-rule linear both;
      animation-timeline: --v-b10c-tl;
      animation-range: cover min(86%, calc(20% + var(--v-b10c-n) * 2.1%)) cover
        min(98%, calc(32% + var(--v-b10c-n) * 2.1%));
    }
  }
}

/* Çeyrek turdan az: çark dönüyor ama hiçbir dilim komşusunun yerine
   geçmiyor — hareket fark ediliyor, desen tanınabilir kalıyor. */
@keyframes v-b10c-ring {
  from {
    rotate: -34deg;
  }
  to {
    rotate: 34deg;
  }
}

@keyframes v-b10c-hub {
  from {
    rotate: 26deg;
  }
  to {
    rotate: -26deg;
  }
}

/* Ara duraktaki sarı, cümlede ilerleyen okuma başlığı. Pencere dar
   (kelime başına %8) ve adım %2,1 olduğu için aynı anda ekranda ancak
   bir-iki kelime sarıya yakın — sarı bütçesi zorlanmıyor. */
@keyframes v-b10c-word {
  0% {
    color: var(--v-b10c-dim);
  }
  55% {
    color: var(--color-signal);
  }
  100% {
    color: var(--color-on-stage);
  }
}

@keyframes v-b10c-pack {
  from {
    opacity: 0;
    translate: var(--v-b10c-gir, 0) 0;
  }
  to {
    opacity: var(--v-b10c-pack-op);
    translate: 0 0;
  }
}

@keyframes v-b10c-rule {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}

}