@layer components {
/* ============================================================================
   B12b · TOPTAN — VARYANT C «Kanal seçici»  (efsane)
   ----------------------------------------------------------------------------
   Bölüm bir listeden bir ARACA dönüşüyor: üstte beş kanal slabı, altında o
   kanala göre kurulan koyu okuma plakası. Seçili slab koyu ve plakayla
   birleşiyor — girdi ile çıktı arasında görsel bir boru var, mekanizmanın
   kendisi ekranda duruyor.

   Bu dosyadaki üç mekanizma:

   1 · EŞİK SAYACI — CSS GEÇİŞİ.
       `--v-b12wc-n` `@property` ile <integer> olarak kayıtlı. React yalnız
       hedef sayıyı satır içi yazıyor; kadranın üzerindeki `transition` eski
       hesaplanmış değerden yenisine yürüyor, `counter-reset` +
       `content: counter()` her karede basıyor.
       YEDEK: `@property` yoksa özellik kayıtsız kalıyor, `counter-reset`
       var()'ı düz sayı olarak yutuyor — rakam DOĞRU, sadece animasyon yok.
       Kadranın genişliği `2ch` + `tabular-nums` ile sabit: 20'den 5'e
       inerken yanındaki kelime yerinden oynamıyor.

   2 · VURGU DARBESİ — AYNI RAKAM İÇİN.
       Beş kanalın üçünde eşik "1". Aynı sayıya saymak sahte durduğu için o
       durumda kadran kremden sarıya bir kez gidip dönüyor. İki EŞ keyframe
       (`-a` / `-b`) arasında gidip geliyor: React'te aynı sınıf yeniden
       basılınca animasyon baştan başlamıyor, `animation-name` değişince
       tarayıcı sıfırdan başlatıyor.

   3 · KOŞUL SİLMESİ — clip-path.
       Üç koşul soldan sağa açılıyor, kademe `animation-delay` ile (süreden
       kısılsaydı üçü üç farklı hızda gelirdi). `fill-mode: both` yüzünden
       son kare kalıcı; açılan uç DIŞINDAKİ üç kenar negatif, yoksa odak
       halkası sürekli kırpılır (BRIEF tuzak 9).

   RENK BÜTÇESİ. Sarı üç yerde: seçili slabın üst çentiği, seçili slabın eşik
   satırı ve öne çıkan koşulun işareti (+ darbe anında kadran). Hepsi koyu
   zeminde ve toplamı bölüm alanının binde birkaçı. Mavi hiç kullanılmadı,
   krem zeminde yalnız kart numaralarında (küçük doz güven rengi).
   ========================================================================== */

/* Sayacın değeri. `inherits: false` — aynı elemanda hem yazılıyor hem
   okunuyor, kalıtım gereksiz maliyet. İlk değer 1: kayıtlı ama satır içi
   değer gelmeden basılırsa bile gerçekçi bir eşik görünsün. */
@property --v-b12wc-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

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

.v-b12wc .v-b12wc__lead {
  margin-top: var(--spacing-sp3);
  color: var(--color-ink-2);
}

/* ══ ARAÇ ═════════════════════════════════════════════════════════════════
   Şerit ile plaka arasında BOŞLUK YOK: seçili slab plakaya akıyor.        */

.v-b12wc .v-b12wc__tool {
  margin-top: var(--spacing-sp5);
  min-width: 0;
}

.v-b12wc .v-b12wc__toolhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px var(--spacing-sp3);
  margin-bottom: var(--spacing-sp2);
}

.v-b12wc .v-b12wc__label {
  margin: 0;
  color: var(--color-ink);
}

.v-b12wc .v-b12wc__label--on {
  color: var(--color-signal);
}

.v-b12wc .v-b12wc__note {
  margin: 0;
  color: var(--color-ink-2);
}

/* ── MOBİL SAYFALAYICI · 29.08 ────────────────────────────────────────────
   Şeridin ÜSTÜNDE, künyenin sağında. Şerit yatay kayıyordu ama kaydığını
   söyleyen hiçbir işaret yoktu; okur ilk slabı okuyup bölümü bitmiş
   sanıyordu. Konum sayacı ("01 / 05") kaç kanal olduğunu da söylüyor,
   yani oklara dokunmadan önce bile şerit kendini anlatıyor.
   Dil sayfanın öteki oklarıyla aynı: köşesiz slab, ince kural, dokununca
   sarı. 1024ten sonra beş kanal zaten yan yana — `only-mobile` gizliyor. */
.v-b12wc .v-b12wc__pager {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.v-b12wc .v-b12wc__pagerbtn {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-none);
  background: transparent;
  box-shadow: inset 0 0 0 var(--rule-mid) var(--color-rule);
  color: var(--color-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Dokunmatikte geri bildirim `:active` — `:hover` bir sonraki dokunuşa
   kadar yapışıyor (aynı gerekçe şeridin slablarında da yazılı). */
.v-b12wc .v-b12wc__pagerbtn:active {
  background: var(--color-signal);
  box-shadow: inset 0 0 0 var(--rule-mid) var(--color-signal);
}

.v-b12wc .v-b12wc__pagerbtn:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

.v-b12wc .v-b12wc__pagernum {
  min-inline-size: 54px;
  text-align: center;
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

/* Künye ile oklar aynı satırda, açıklama notu kendi satırında: üçü
   `space-between` ile yan yana sıkışınca not iki kelimede bir kırılıyordu. */
@media (max-width: 1023.98px) {
  .v-b12wc .v-b12wc__toolhead {
    align-items: center;
  }

  .v-b12wc .v-b12wc__note {
    order: 3;
    flex-basis: 100%;
  }
}

/* ══ ŞERİT · MOBİL: YATAY SCROLL-SNAP ═════════════════════════════════════
   Tam genişlikte taşıyor (negatif kenar boşluğu), böylece slablar ekranın
   kenarından çıkıyor ve şeridin devam ettiği anlaşılıyor. `scroll-padding-
   inline` şart: yoksa `snap-align: start` ilk slabı 0'a çekip sol boşluğu
   yiyor.                                                                   */

.v-b12wc .v-b12wc__strip {
  display: flex;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}

.v-b12wc .v-b12wc__strip::-webkit-scrollbar {
  display: none;
}

.v-b12wc .v-b12wc__tab {
  flex: 0 0 auto;
  inline-size: min(64%, 260px);
  min-inline-size: 186px;
  min-height: 112px;
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px 16px;
  /* Üst çentik durumun taşıyıcısı: sönük kural → mürekkep (hover) → sarı
     (seçili). Kalınlık hep aynı, yani yazı hiçbir durumda yerinden oynamıyor. */
  border: 0;
  border-top: var(--rule-heavy) solid var(--color-rule);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-sans);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-both),
    border-top-color var(--dur-fast) var(--ease-both),
    color var(--dur-fast) var(--ease-both);
}

.v-b12wc .v-b12wc__tab:last-child {
  border-inline-end: 0;
}

/* HOVER YALNIZ İŞARETÇİLİ CİHAZDA. Dokunmatikte tıklanan eleman hover
   durumunu bir sonraki dokunuşa kadar taşıyor: kullanıcı bir slaba dokunup
   başkasını seçince ÖNCEKİ slab mürekkep çentik + krem zeminle kalıyor ve
   iki slab aynı anda "seçiliymiş" gibi duruyordu. */
@media (hover: hover) {
  .v-b12wc .v-b12wc__tab:hover {
    border-top-color: var(--color-ink);
    background: var(--color-paper);
  }
}

.v-b12wc .v-b12wc__tab[aria-selected="true"] {
  border-top-color: var(--color-signal);
  border-inline-end-color: transparent;
  background: var(--color-stage);
  color: var(--color-on-stage);
}

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

.v-b12wc .v-b12wc__tab[aria-selected="true"] .v-b12wc__tabnum {
  /* Krem üzerine %72 → #b0b0ae; koyu zeminde kontrast 8,9:1. */
  color: rgba(242, 242, 238, 0.72);
}

.v-b12wc .v-b12wc__tabname {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  /* Uzun kanal adı ("Кафе · рестораны · отели") dar sütunda kırılabilsin. */
  overflow-wrap: anywhere;
}

.v-b12wc .v-b12wc__tabmin {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-aux);
  line-height: 1.3;
  color: var(--color-ink-2);
}

.v-b12wc .v-b12wc__tab[aria-selected="true"] .v-b12wc__tabmin {
  color: var(--color-signal);
}

/* ══ PLAKA ════════════════════════════════════════════════════════════════ */

.v-b12wc .v-b12wc__panel {
  display: grid;
  gap: var(--spacing-sp4);
  min-width: 0;
  padding: var(--spacing-sp4) var(--spacing-sp3) var(--spacing-sp5);
  background: var(--color-stage);
  color: var(--color-on-stage);
}

.v-b12wc .v-b12wc__read {
  min-width: 0;
}

.v-b12wc .v-b12wc__chan {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  color: rgba(242, 242, 238, 0.72);
}

/* ── EŞİK OKUMASI ──────────────────────────────────────────────────────── */

.v-b12wc .v-b12wc__min {
  position: relative;
  margin: 10px 0 0;
}

.v-b12wc .v-b12wc__minvis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.26em;
  min-width: 0;
}

/* Değişmeyen kelimeler sönük: gözün gittiği yer rakam olsun. */
.v-b12wc .v-b12wc__fix {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--ls-h3);
  color: rgba(242, 242, 238, 0.72);
}

/* Kadranın rengi BİLEREK yazılmadı: darbe animasyonu `color`u sürüyor,
   aynı özelliği ikinci kez statik yazmak kaskatta çakışır (BRIEF tuzak 4).
   Renk `.v-b12wc__minvis` üzerinden, oradan da plakadan miras alınıyor. */
.v-b12wc .v-b12wc__dial {
  counter-reset: v-b12wc-c var(--v-b12wc-n);
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.86;
  letter-spacing: var(--ls-h1);
  text-align: center;
  transition: --v-b12wc-n var(--dur-slow) var(--ease-both);
}

.v-b12wc .v-b12wc__dial::after {
  content: counter(v-b12wc-c);
}

/* Rakam değişmeyen seçimlerde tek darbe. İki keyframe birebir aynı; tek
   işleri `animation-name`i değiştirip animasyonu yeniden başlatmak. */
@keyframes v-b12wc-beat-a {
  0% {
    color: var(--color-on-stage);
  }
  22% {
    color: var(--color-signal);
  }
  100% {
    color: var(--color-on-stage);
  }
}

@keyframes v-b12wc-beat-b {
  0% {
    color: var(--color-on-stage);
  }
  22% {
    color: var(--color-signal);
  }
  100% {
    color: var(--color-on-stage);
  }
}

/* SÜRE JETONDAN. Önce elle 460ms yazılmıştı; jeton dışı bir sayı olduğu
   için hareket azaltmada jetonların 0.01ms'ye inmesinden de etkilenmiyordu.
   `--dur-slow` (600ms) hem doğru his hem de sayacın kendi geçişiyle AYNI
   uzunluk: rakam değişse de değişmese de okuma aynı sürede tamamlanıyor. */
.v-b12wc .v-b12wc__minvis[data-pulse="a"] {
  animation: v-b12wc-beat-a var(--dur-slow) var(--ease-both) both;
}

.v-b12wc .v-b12wc__minvis[data-pulse="b"] {
  animation: v-b12wc-beat-b var(--dur-slow) var(--ease-both) both;
}

.v-b12wc .v-b12wc__unit {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-aux);
  line-height: 1.4;
  color: rgba(242, 242, 238, 0.72);
}

/* ── KOŞULLAR ──────────────────────────────────────────────────────────── */

.v-b12wc .v-b12wc__terms {
  min-width: 0;
}

.v-b12wc .v-b12wc__termlist {
  list-style: none;
  margin: var(--spacing-sp2) 0 0;
  padding: 0;
  border-top: var(--rule-hair) solid var(--rule-soft-stage);
}

.v-b12wc .v-b12wc__term {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding-block: 14px;
  border-bottom: var(--rule-hair) solid var(--rule-soft-stage);
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
  animation-delay: calc(var(--v-b12wc-i, 0) * var(--stagger));
}

/* Soldan sağa silme. Açılan uç dışındaki üç kenar NEGATİF: son kare kalıcı
   olduğu için sıfır inset odak halkasını ve alt kuralı kırpardı. */
@keyframes v-b12wc-wipe-a {
  from {
    clip-path: inset(-12px 100% -12px -12px);
  }
  to {
    clip-path: inset(-12px -12px -12px -12px);
  }
}

@keyframes v-b12wc-wipe-b {
  from {
    clip-path: inset(-12px 100% -12px -12px);
  }
  to {
    clip-path: inset(-12px -12px -12px -12px);
  }
}

.v-b12wc .v-b12wc__termlist[data-flip="0"] .v-b12wc__term {
  animation-name: v-b12wc-wipe-a;
}

.v-b12wc .v-b12wc__termlist[data-flip="1"] .v-b12wc__term {
  animation-name: v-b12wc-wipe-b;
}

/* İşaret bir kural parçası, ikon değil: poster dilinde durum çizgiyle
   söyleniyor. Öne çıkan koşulda sarıya dönüp uzuyor. */
.v-b12wc .v-b12wc__termmark {
  inline-size: 18px;
  block-size: var(--rule-mid);
  margin-top: 0.62em;
  background: rgba(242, 242, 238, 0.34);
  transition:
    background-color var(--dur-fast) var(--ease-both),
    inline-size var(--dur-fast) var(--ease-both);
}

.v-b12wc .v-b12wc__term[data-hot="1"] .v-b12wc__termmark {
  inline-size: 30px;
  background: var(--color-signal);
}

.v-b12wc .v-b12wc__termtext {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(242, 242, 238, 0.72);
}

.v-b12wc .v-b12wc__term[data-hot="1"] .v-b12wc__termtext {
  font-weight: 600;
  color: var(--color-on-stage);
}

/* ── ÇAĞRI ─────────────────────────────────────────────────────────────── */

.v-b12wc .v-b12wc__cta {
  min-width: 0;
}

.v-b12wc .v-b12wc__btn {
  width: 100%;
  /* Dar ekranda düğmenin min-content genişliği sütunu şişiriyor. */
  white-space: normal;
}

/* ══ GEREKÇELER ═══════════════════════════════════════════════════════════ */

.v-b12wc .v-b12wc__cards {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sp4);
  margin: var(--spacing-sp5) 0 0;
  padding: var(--spacing-sp4) 0 0;
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.v-b12wc .v-b12wc__card {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding-top: var(--spacing-sp2);
  border-top: var(--rule-hair) solid var(--rule-soft);
}

.v-b12wc .v-b12wc__cardnum {
  color: var(--color-brand-blue);
}

.v-b12wc .v-b12wc__cardtitle {
  margin: 0;
}

.v-b12wc .v-b12wc__cardtext {
  margin: 0;
  color: var(--color-ink-2);
}

/* ══ 480px+ · GEREKÇELER İKİ SÜTUN ════════════════════════════════════════ */

@media (min-width: 480px) {
  .v-b12wc .v-b12wc__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sp4) var(--spacing-sp3);
  }

  /* Beş madde, iki sütun: sonuncusu tek başına kalmasın, satırı kaplasın. */
  .v-b12wc .v-b12wc__card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* ══ 768px+ · PLAKA İKİ SÜTUN ═════════════════════════════════════════════
   Alan atamaları SADECE burada: alanların tanımlı olmadığı bir kırılımda
   `grid-area` vermek elemanları aynı hücreye yığıyor (BRIEF tuzak 12).
   DOM sırası okuma → koşullar → çağrı; mobilde görsel sıra da bu, yani Tab
   ekranda görüneni takip ediyor.                                           */

@media (min-width: 768px) {
  .v-b12wc .v-b12wc__panel {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-areas:
      "read terms"
      "cta  terms";
    align-content: start;
    column-gap: var(--spacing-sp6);
    row-gap: var(--spacing-sp4);
    padding: var(--spacing-sp5);
  }

  .v-b12wc .v-b12wc__read {
    grid-area: read;
  }

  .v-b12wc .v-b12wc__terms {
    grid-area: terms;
  }

  .v-b12wc .v-b12wc__cta {
    grid-area: cta;
    align-self: end;
  }

  .v-b12wc .v-b12wc__btn {
    width: auto;
  }

  .v-b12wc .v-b12wc__termlist {
    margin-top: var(--spacing-sp3);
  }
}

/* ══ 1024px+ · ŞERİT BEŞ SÜTUN ════════════════════════════════════════════
   Kaydırma burada bırakılıyor: beş slab yan yana sığdığı andan itibaren
   gizli içerik kalmıyor, karşılaştırma tek bakışta yapılıyor.              */

@media (min-width: 1024px) {
  .v-b12wc .v-b12wc__strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .v-b12wc .v-b12wc__tab {
    inline-size: auto;
    min-inline-size: 0;
    min-height: 124px;
    padding: 16px 18px 18px;
  }

  .v-b12wc .v-b12wc__cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--spacing-sp5) var(--spacing-sp4);
    margin-top: var(--spacing-sp6);
  }

  /* Beş madde altılık ızgarada: üçü 2'şer, ikisi 3'er sütun. İki satır da
     tam doluyor, poster ızgarası kırılmıyor. */
  .v-b12wc .v-b12wc__card {
    grid-column: span 2;
  }

  .v-b12wc .v-b12wc__card:nth-child(4),
  .v-b12wc .v-b12wc__card:nth-child(5) {
    grid-column: span 3;
  }
}

/* ══ HAREKET AZALTMA ══════════════════════════════════════════════════════
   Sayma, darbe ve silme kapalı; değerler doğrudan değişiyor. Silme kapanınca
   `clip-path` hiç yazılmıyor (statik kural yok), yani koşullar tam görünür.
   Seçiciler yukarıdakilerle EŞİT özgüllükte ve sonra geldikleri için
   `!important` gerekmiyor.                                                 */

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

  .v-b12wc .v-b12wc__dial {
    transition: none;
  }

  .v-b12wc .v-b12wc__minvis[data-pulse] {
    animation: none;
  }

  .v-b12wc .v-b12wc__termlist[data-flip] .v-b12wc__term {
    animation-name: none;
  }

  .v-b12wc .v-b12wc__termmark {
    transition: none;
  }
}

}