@layer components {
/* ============================================================================
   B13 · SSS — VARYANT C «Konuşma»  (efsane)
   ----------------------------------------------------------------------------
   Danışma masası düzeni. Solda altı soru dikey liste, sağda cevabın durduğu
   kâğıt kart. Kart masaüstünde YAPIŞKAN: sol sütunda gezinirken cevap hep
   aynı yerde kalıyor.

   Üç mekanizma bu dosyada:

   1 · MOBİL AKORDEON — İKİNCİ DOM KOPYASI DA `order` DA YOK.
       Kart, seçili sorunun hemen ardına DOM'da basılıyor (bileşen tarafı);
       mobilde akış tek sütun olduğu için görsel sıra = DOM sırası = odak
       sırası. Eski çözüm `display: contents` + `order: i*2 / cur*2+1` ile
       kartı taşıyordu: ekranda doğru yerdeydi ama DOM'da altı düğmenin de
       sonrasında kalıyor, Tab tuşu cevabı ve WhatsApp düğmesini atlıyordu
       (WCAG 2.4.3). `order` bu yüzden tamamen kalktı.

       MASAÜSTÜNDE iki sütun: `.v-b13c__nav` orada `display: contents`
       alıyor, düğmeler 1. sütuna diziliyor, kart 2. sütunda bütün
       satırları kaplıyor (`grid-row: 1 / -1`) ve yapışıyor. Satır sayısı
       `--n` ile bileşenden geliyor — `-1`in bir yere tutunması için
       satırların açıkça tanımlı olması gerekiyor.

   2 · YERİNDE DEĞİŞEN CEVAP.
       Giren cevap iki EŞ keyframe arasında gidip geliyor (`data-flip`
       0/1). React'te aynı sınıf yeniden basılınca `transition`
       tetiklenmiyor; `animation-name` değişince tarayıcı animasyonu
       sıfırdan başlatıyor. (Kart artık seçim değişince DOM'da yer
       değiştirdiği için zaten yeniden bağlanıyor; `data-flip` yine de
       duruyor — animasyonun yeniden başlaması React'in eleman geri
       dönüştürme kararına kalmasın.) Çıkan cevap ayrı bir "hayalet"
       katmanda ve MUTLAK konumlu — akış dışı olduğu için kartın
       yüksekliğini yalnız yeni cevap belirliyor, geçişte zıplama olmuyor.

   3 · KART KENDİ KIRILIMINI TAŞIYOR.
       Ayak (ürün + WhatsApp) kartın GENİŞLİĞİNE göre tek/üç sütuna
       geçiyor — `@container`. Medya sorgusuyla yapılsaydı 1024px'de kart
       daralırken ayak hâlâ üç sütun sanıp taşacaktı.

   Sarı yalnız plakadaki soru numarasında: koyu şerit üzerinde, alanın
   binde biri. Renk kuralı korunuyor.
   ========================================================================== */

/* ══ KAPSAYICI ════════════════════════════════════════════════════════════ */

/* Mobil: tek sütun akış. Kart zaten DOM'da doğru yerde — taşıma yok. */
.v-b13c .v-b13c__desk {
  min-width: 0;
}

.v-b13c .v-b13c__nav {
  min-width: 0;
}

/* ══ SORU LİSTESİ ═════════════════════════════════════════════════════════ */

.v-b13c .v-b13c__q {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  /* Sol dolgu seçim çubuğunun kalınlığından geniş: çubuk açıldığında
     yazı yerinden oynamasın. */
  padding: 18px 12px 18px 18px;
  background: transparent;
  color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--rule-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-both),
    color var(--dur-fast) var(--ease-both);
}

/* Bloğun üst kuralı listenin ilk düğmesinde: iki düzende de doğru yerde
   duruyor (mobilde kart araya girse bile ilk çocuk hep 1. soru). */
.v-b13c .v-b13c__nav .v-b13c__q:first-child {
  border-top: var(--rule-heavy) solid var(--color-ink);
}

/* Seçim çubuğu. `scale` kullanıldı, `transform` değil: ileride düğmeye
   bir transform gerekirse ikisi birlikte yaşasın. */
.v-b13c .v-b13c__q::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rule-heavy);
  background: var(--color-ink);
  scale: 1 0;
  transform-origin: 50% 0;
  transition: scale var(--dur) var(--ease);
}

.v-b13c .v-b13c__q[aria-expanded="true"] {
  background: var(--color-paper-2);
  font-weight: 700;
}

.v-b13c .v-b13c__q[aria-expanded="true"]::before {
  scale: 1 1;
}

.v-b13c .v-b13c__qno {
  color: var(--color-ink-2);
  /* Mono rakam gövde yazısının tepesiyle hizalansın */
  padding-top: 4px;
}

.v-b13c .v-b13c__q[aria-expanded="true"] .v-b13c__qno {
  color: var(--color-brand-blue);
}

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

/* Ok dekoratif (aria-hidden) — seçim ayrıca zemin, kalınlık, çubuk ve
   `aria-expanded` ile anlatılıyor. Yine de bir YÖN işareti: mobilde
   aşağıyı, masaüstünde sağı gösteriyor. `--color-rule` denendi ve
   BIRAKILDI, krem zeminde kontrastı 1.29:1 — ok görünmeyince taşıdığı
   bilgi de ulaşmıyordu. Jetondan türetilmiş bu ton 3.6:1 veriyor:
   okunur ama seçili satırın `--color-ink`i yanında hâlâ sessiz. */
.v-b13c .v-b13c__qarrow {
  flex: none;
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-ink-2) 70%, var(--color-paper));
  /* Mobilde kart ALTA açılıyor; ok da aşağıyı göstersin. */
  rotate: 90deg;
  transition: color var(--dur-fast) var(--ease-both);
}

.v-b13c .v-b13c__q[aria-expanded="true"] .v-b13c__qarrow {
  color: var(--color-ink);
}

/* ══ CEVAP KARTI ══════════════════════════════════════════════════════════ */

.v-b13c .v-b13c__card {
  /* Ayak kırılımı kartın kendi genişliğinden okunuyor */
  container-type: inline-size;
  container-name: v-b13c-card;
  min-width: 0;
  min-height: 0;
  margin-block: var(--spacing-sp3) var(--spacing-sp4);
  background: var(--color-paper-2);
  border: var(--rule-heavy) solid var(--color-ink);
  box-shadow: var(--shadow-lift);
}

/* Plaka — koyu şerit: solda soru numarası, sağda konum sayacı. */
.v-b13c .v-b13c__plate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sp3);
  min-width: 0;
  padding: 10px var(--spacing-sp3);
  background: var(--color-ink);
  color: var(--color-paper-2);
}

.v-b13c .v-b13c__plateno {
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--ls-h2);
  color: var(--color-signal);
}

/* Sönükleştirme `color` ile, `opacity` ile DEĞİL: şerit içindeki sarı
   rakam da soluyordu. Saydamlık da elle yazılmıyor — jeton bir gün
   değişirse şeridin iki metni ayrışmasın diye zeminle KARIŞTIRILIYOR.
   Şerit zemini `--color-ink` olduğu için sonuç eski rgba ile birebir
   aynı piksel; kontrast 9.4:1. */
.v-b13c .v-b13c__platepos {
  flex: none;
  color: color-mix(in srgb, var(--color-paper-2) 72%, var(--color-ink));
}

/* ── Cevap yığını ─────────────────────────────────────────────────────── */

.v-b13c .v-b13c__stack {
  position: relative;
  min-width: 0;
  padding: var(--spacing-sp4) var(--spacing-sp3) var(--spacing-sp3);
}

.v-b13c .v-b13c__live {
  min-width: 0;
}

.v-b13c .v-b13c__ansq {
  margin-bottom: 10px;
  text-wrap: balance;
}

.v-b13c .v-b13c__anst {
  max-width: var(--measure);
  color: var(--color-ink-2);
  overflow-wrap: break-word;
}

/* Giren cevap. `opacity`/`translate` SADECE keyframe'lerde geçiyor —
   aynı özelliğe normal kural yazılırsa animasyon onu eziyor. */
.v-b13c .v-b13c__ans {
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
}

/* İki keyframe birebir aynı; tek işi `animation-name`i değiştirip
   animasyonu yeniden başlatmak. */
.v-b13c .v-b13c__live[data-flip="0"] .v-b13c__ans {
  animation-name: v-b13c-gir-a;
}

.v-b13c .v-b13c__live[data-flip="1"] .v-b13c__ans {
  animation-name: v-b13c-gir-b;
}

/* Çıkan cevap: akış dışı, tıklanamaz, ekran okuyucudan gizli. */
.v-b13c .v-b13c__ghost {
  position: absolute;
  inset: var(--spacing-sp4) var(--spacing-sp3) auto;
  pointer-events: none;
  animation: v-b13c-cik var(--dur) var(--ease-both) both;
}

@keyframes v-b13c-gir-a {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes v-b13c-gir-b {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes v-b13c-cik {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 0 -16px;
  }
}

/* ── Kartın ayağı · ilgili ürün + WhatsApp ────────────────────────────── */

.v-b13c .v-b13c__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px var(--spacing-sp3);
  padding: var(--spacing-sp3);
  border-top: var(--rule-hair) solid var(--rule-soft);
}

/* Sabit kutu — ürün oranları 0.39 ile 1.85 arasında değişiyor, kutu
   değişmiyor. Yer önceden ayrıldığı için görsel gelince kayma yok. */
.v-b13c .v-b13c__pshot {
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  min-width: 0;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--rule-soft);
}

/* Boy `urunBoyu`ndan bağımsız: burada ambalaj bir kimlik rozeti, sahne
   elemanı değil. İki sınır birden verildiği için oran korunarak sığıyor. */
.v-b13c .v-b13c__pshot .pimg {
  width: auto;
  height: auto;
  max-width: 76px;
  max-height: 76px;
}

.v-b13c .v-b13c__pmeta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

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

.v-b13c .v-b13c__pname {
  overflow-wrap: break-word;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* Dar kartta düğme tam satır. `nowrap` bırakılırsa min-content genişliği
   sütunu şişirip kartı taşırıyor. */
.v-b13c .v-b13c__wa {
  grid-column: 1 / -1;
  white-space: normal;
}

@container v-b13c-card (min-width: 560px) {
  .v-b13c .v-b13c__foot {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .v-b13c .v-b13c__wa {
    grid-column: auto;
  }
}

/* ══ MASAÜSTÜ · 1024px ════════════════════════════════════════════════════
   Liste solda dar sütun, kart sağda geniş sütun ve YAPIŞKAN. Kart DOM'da
   soruların arasında duruyor (odak sırası için); burada `display: contents`
   ile nav çözülüyor ve altı düğme ile kart doğrudan ızgaraya diziliyor:
   düğmeler 1. sütunda kendi satırlarına, kart 2. sütunda bütün satırları
   kaplayan tek alana. Kart o uzun alanın içinde kayıyor.                   */

@media (min-width: 1024px) {
  .v-b13c .v-b13c__desk {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* Satırlar AÇIKÇA tanımlı olmalı: kartın `grid-row: 1 / -1`i ancak
       o zaman listenin sonuna kadar uzanıyor. `--n` bileşenden geliyor,
       yedeği altı soru. calc() DEĞİL düz var(): ızgara çizgisi tamsayı
       bekliyor ve calc() orada geçersiz. */
    grid-template-rows: repeat(var(--n, 6), auto);
    column-gap: var(--spacing-sp6);
    align-items: start;
  }

  .v-b13c .v-b13c__nav {
    display: contents;
  }

  .v-b13c .v-b13c__q {
    grid-column: 1;
  }

  .v-b13c .v-b13c__card {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: calc(var(--header-h) + var(--spacing-sp3));
    margin-block: 0;
  }

  /* Cevaplar 2–4 satır arasında değişiyor. Alt sınır olmadan yapışkan
     kartın ayağı her seçimde yukarı aşağı zıplıyordu. */
  .v-b13c .v-b13c__stack {
    min-height: 210px;
    padding: var(--spacing-sp5) var(--spacing-sp4) var(--spacing-sp4);
  }

  .v-b13c .v-b13c__ghost {
    inset: var(--spacing-sp5) var(--spacing-sp4) auto;
  }

  .v-b13c .v-b13c__plate,
  .v-b13c .v-b13c__foot {
    padding-inline: var(--spacing-sp4);
  }

  /* Masaüstünde kart SAĞDA duruyor; ok oraya işaret etsin. */
  .v-b13c .v-b13c__qarrow {
    rotate: none;
    /* Öteleme `translate` özelliğinde: `rotate`tan ÖNCE uygulandığı için
       ileride ok yeniden döndürülse bile yol düz kalır. */
    transition:
      color var(--dur-fast) var(--ease-both),
      translate var(--dur-fast) var(--ease);
  }

  .v-b13c .v-b13c__q:hover {
    background: var(--color-paper-2);
    color: var(--color-brand-blue);
  }

  .v-b13c .v-b13c__q:hover .v-b13c__qarrow {
    color: var(--color-brand-blue);
    translate: 4px 0;
  }

  .v-b13c .v-b13c__q[aria-expanded="true"]:hover {
    color: var(--color-ink);
  }
}

/* ══ KAYDIRMAYA BAĞLI GİRİŞ ═══════════════════════════════════════════════
   Sorular görüş alanına girerken sırayla belirir. Tamamen `@supports`
   içinde: `view()` desteklenmeyen tarayıcıda kural hiç yazılmıyor ve altı
   soru en baştan tam görünür oluyor.                                       */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .v-b13c .v-b13c__q {
      animation: v-b13c-belir linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
  }
}

@keyframes v-b13c-belir {
  from {
    opacity: 0;
    translate: -14px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ══ HAREKET AZALTMA ══════════════════════════════════════════════════════
   Hiçbir hareket kalmıyor, blok tam işlevsel: seçili cevap yerinde,
   liste görünür, klavye ve WhatsApp çalışıyor. Hayalet katman hiç
   çizilmiyor; DOM'dan alınması zaten zamanlayıcıya bağlı.                  */

@media (prefers-reduced-motion: reduce) {
  .v-b13c .v-b13c__ans {
    animation: none;
  }

  /* Adı, adı VEREN kuralla eşit özgüllükte iptal ediliyor. Yukarıdaki
     kısayol (0,2,0) tek başına `animation-name`i alamıyor — adı yazan
     seçici (0,4,0) daha güçlü. Şu an blok yine de iş görüyordu ama
     tesadüfen: kısayolun sıfırladığı süre ve fill-mode kazanıyordu.
     Dosyadaki sıra bir gün değişirse hareket azaltma sessizce kırılırdı. */
  .v-b13c .v-b13c__live[data-flip="0"] .v-b13c__ans,
  .v-b13c .v-b13c__live[data-flip="1"] .v-b13c__ans {
    animation-name: none;
  }

  .v-b13c .v-b13c__ghost {
    display: none;
  }

  .v-b13c .v-b13c__q,
  .v-b13c .v-b13c__q::before,
  .v-b13c .v-b13c__qarrow {
    transition: none;
  }
}

}