@layer components {
/* ============================================================================
   B03 · GÜVEN ŞERİDİ · varyant C — "Ters akan bant"   (.v-b03c)
   ----------------------------------------------------------------------------
   Koyu hero ile krem gövde arasındaki geçiş bandı. Dört güven maddesi sonsuz
   bir şerit halinde akıyor, ama kaynak otomatik bir marquee DEĞİL: şerit
   `animation-timeline: scroll(root block)` ile sayfanın kaydırma konumuna
   bağlı. Aşağı kaydırınca sağa, yukarı kaydırınca sola gidiyor; sayfa durunca
   şerit de duruyor. Böylece hareket okurun kendi hareketi oluyor — dördünün
   de detayı hâlâ "—" olan bir bantta ayakta duran tek şey bu.

   DOSYANIN SIRASI ÖNEMLİ:
     1) Önce YEDEK yazılıyor — hareketsiz, dört sütunlu sabit dizilim.
        Desteklemeyen tarayıcı ve prefers-reduced-motion burada kalıyor.
     2) Sonra @supports + (prefers-reduced-motion: no-preference) içinde
        akış açılıyor. Yani hareket opt-in; yedek asla "kapatılmış animasyon"
        artığı gibi görünmüyor.

   DİKİŞ MATEMATİĞİ: ray = 4 özdeş grup, kayma rayın %50'si = TAM 2 grup.
   İki grup her ekrandan geniş olduğu için kaymanın iki ucunda da pencere
   baştan başa örtülü; gruplar birebir aynı olduğundan -2G ile 0 aynı faz.
   Kayma `translate` özelliğinde (transform DEĞİL) — tuzak #2/#3, ileride
   öğeye bir transform eklenirse kayma silinmesin.
   ========================================================================== */

.v-b03c {
  position: relative;
  /* Bandın kapanışı: krem gövde bu sarı kuralın hemen altından başlıyor.
     Alan olarak yok denecek kadar küçük, ama geçişi işaretleyen tek çizgi. */
  border-block-end: var(--rule-heavy) solid var(--color-signal);

  /* Koyu zeminde tek renk kaynağı. Sönükleştirme `color` ile yapılıyor,
     opacity ile değil — tuzak #8: üst öğeye verilen opacity çocukta geri
     alınamıyor ve ikon rengi de onunla birlikte ölüyordu.
     Alfa'lı tonlar `color-mix` ile JETONDAN türetiliyor; elle yazılmış
     rgb(242,242,238) üçlüsü jeton değişince sessizce eski renkte kalırdı. */
  --v-b03c-label: color-mix(in srgb, var(--color-on-stage) 92%, transparent);
  --v-b03c-mono: color-mix(in srgb, var(--color-on-stage) 55%, transparent);
  --v-b03c-ic: var(--color-blue-lift);
}

/* <Pending> koyu zeminde okunmuyordu: .ph-val krem gövde için yazılmış
   (ink-2 + opacity .7). Alfa zeminle karıştırılarak yeniden hesaplandı. */
.v-b03c .ph-val {
  color: var(--v-b03c-mono);
  opacity: 1;
}

/* ── SAYFA KONUMU ÖLÇERİ ─────────────────────────────────────────────────
   Yalnız akış modunda görünür; yedekte yalan söylememesi için gizli.     */
.v-b03c__meter {
  display: none;
  block-size: var(--rule-mid);
  background: var(--rule-soft-stage);
}

.v-b03c__meter-fill {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--color-blue-lift);
  transform-origin: left center;
}

/* ── BANT ────────────────────────────────────────────────────────────── */

.v-b03c__band {
  /* `clip` — `hidden` DEĞİL. `hidden` elemanı SCROLL CONTAINER yapıyor
     ve içerideki `view()` çizelgesi belgeden kopup bu banda bağlanıyor;
     bandın kaydırma menzili sıfır olduğu için ilerleme sabit kalırdı.
     Aynı tuzak b04b.css içinde de yazılı. Kırpma birebir aynı. */
  overflow: clip; /* yatay taşmanın tek savunması */
  border-block-start: var(--rule-hair) solid var(--rule-soft-stage);
}

/* ── YEDEK DİZİLİM · hareketsiz, iki sütun ───────────────────────────── */

.v-b03c__rail {
  inline-size: 100%;
  max-inline-size: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Şerit görsel bir tekrar; hareketsizken tek kopya yeter. */
.v-b03c__group + .v-b03c__group {
  display: none;
}

/* 480 altında TEK sütun. İki sütuna sıkıştırılınca hücre içi 96px'e
   düşüyor ve «производство» tek başına o genişliği taşıyordu. */
.v-b03c__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.v-b03c__sep {
  display: none;
}

/* Item'lar `div`, ayırıcılar `span` — :nth-of-type yalnız div'leri sayıyor,
   yani ayırıcılar DOM'da dururken de sayım bozulmuyor. */
.v-b03c__item:nth-of-type(-n + 3) {
  border-block-end: var(--rule-hair) solid var(--rule-soft-stage);
}

@media (min-width: 480px) {
  .v-b03c__group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v-b03c__item:nth-of-type(3) {
    border-block-end: 0;
  }
  .v-b03c__item:nth-of-type(2n + 1) {
    border-inline-end: var(--rule-hair) solid var(--rule-soft-stage);
  }
}

@media (min-width: 768px) {
  .v-b03c__group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .v-b03c__item:nth-of-type(-n + 2) {
    border-block-end: 0;
  }
  .v-b03c__item:nth-of-type(2n) {
    border-inline-end: var(--rule-hair) solid var(--rule-soft-stage);
  }
  .v-b03c__item:nth-of-type(4) {
    border-inline-end: 0;
  }
}

/* ── MADDE ───────────────────────────────────────────────────────────── */

.v-b03c__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-sp1);
  /* Izgara çocuğu — tuzak #1'in ikiz kuralı. Uzun etiket hücreyi şişirmesin. */
  min-inline-size: 0;
  min-block-size: 0;
  padding-block: var(--spacing-sp3);
  padding-inline: var(--spacing-sp3);
  color: var(--v-b03c-label);
}

.v-b03c__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--v-b03c-mono);
}

.v-b03c__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sp2);
  min-inline-size: 0;
}

.v-b03c__ic {
  flex: none;
  color: var(--v-b03c-ic);
  transition: color var(--dur-fast) var(--ease);
}

.v-b03c__label {
  min-inline-size: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* Emniyet kemeri: dar hücrede «производство» tek kelimeyle kutuyu
     taşırıyordu. Sadece sığmadığında bölünüyor. */
  overflow-wrap: break-word;
  color: var(--v-b03c-label);
  transition: color var(--dur-fast) var(--ease);
}

/* Detay satırı HER ZAMAN görünür ve HER ZAMAN yer kaplıyor.
   `min-block-size` — sabit `block-size` + `overflow: hidden` DEĞİL: sabit
   yükseklik bir satırı aşan değeri elipssiz, uyarısız yutuyordu. Müşteriden
   beklenen «hangi belgeler» ve «hangi şehirler / süre» alanlarının ikisi de
   360px'lik tek sütunda bir satırı rahat aşıyor. Minimum yükseklik yeri
   yine önceden ayırıyor, yani CLS hâlâ 0; fark, uzun değerin kaybolmak
   yerine sarması. */
.v-b03c__detail {
  display: block;
  min-block-size: 1.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--v-b03c-mono);
}

/* İç sarmalayıcı artık hareket taşımıyor; tek işi satır yüksekliğini
   sabitlemek — 1.7 burada, 1.7em orada, yani ayrılan yer tam bir satıra
   denk geliyor ve değer sardığında kutu satır satır büyüyor. */
.v-b03c__detail-in {
  display: block;
  line-height: 1.7;
}

/* ============================================================================
   AKIŞ MODU
   Yalnız scroll-driven animasyonu olan VE hareket isteyen tarayıcıda.
   ========================================================================== */

@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    .v-b03c__meter {
      display: block;
    }

    .v-b03c__meter-fill {
      animation-name: v-b03c-meter;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    /* Kenarlarda eriyor: şeridin başı ve sonu yok, bant kadraj oluyor. */
    .v-b03c__band {
      -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 7%,
        #000 93%,
        transparent 100%
      );
      mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 7%,
        #000 93%,
        transparent 100%
      );
    }

    .v-b03c__rail {
      display: flex;
      inline-size: max-content;
      max-inline-size: none;
      margin-inline: 0;
      padding-inline: 0;

      animation-name: v-b03c-flow;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    /* MOBİLDE ÇİZELGE BANDIN KENDİ GEÇİŞİ · 29.08 ──────────────────────
       `scroll(root block)` bütün SAYFAYI 0→100 sayıyor. Masaüstünde
       sayfa kısa ve bant dört maddeyi zaten yan yana gösterdiği için
       sorun yok; mobilde ise sayfa ~17 000px ve bant ekranda kaldığı
       ~950pxlik pencerede ilerleme yalnız %5 oluyordu. Ray iki grup
       yerine 128px kayıyor, yani okur DÖRT maddenin BİRİNCİSİNİ
       görüyordu, o da neredeyse kımıldamadan.
       `view()` çizelgeyi bandın ekrandan geçişine bağlıyor: bant
       geçerken ray tam bir grup kayıyor ve dördü de sırayla önden
       geçiyor. Hareket yine tamamen okurun kaydırmasına bağlı. */
    @media (max-width: 1023.98px) {
      .v-b03c__rail {
        animation-name: v-b03c-flow-m;
        animation-timeline: view(block);
        animation-range: cover 0% cover 100%;
      }
    }

    /* Bandın üstünde durunca akış duruyor — okumak için kaydırmayı bırakmak
       gerekmesin. Ölçer duraklamıyor: o sayfa konumunu söylüyor, yalan
       söylememeli. */
    .v-b03c__band:hover .v-b03c__rail {
      animation-play-state: paused;
    }

    .v-b03c__group,
    .v-b03c__group + .v-b03c__group {
      display: flex;
    }

    /* Sabit genişlik disiplin meselesi: grup genişliği içerikten bağımsız
       hale geliyor, dikiş matematiği her dilde ve her ekranda aynı kalıyor.
       Seçici `.v-b03c__rail`le başlıyor çünkü yedekteki `:nth-of-type`
       kuralları (0,2,0) tek sınıflı bir kuralı yener — kenarlıklar akış
       modunda ayakta kalıyordu. */
    .v-b03c__rail .v-b03c__item {
      flex: none;
      inline-size: 300px;
      padding-inline: var(--spacing-sp4);
      border: 0;
    }

    /* Ayırıcı: ince dikey kural + ortasında sarı eşkenar işaret. Poster
       dilinin noktalama işareti; grup dikişinde de aynı işaret duruyor,
       o yüzden tekrarın nerede başladığı belli olmuyor. */
    .v-b03c__sep {
      display: block;
      flex: none;
      position: relative;
      inline-size: var(--rule-hair);
      background: var(--rule-soft-stage);
      margin-block: var(--spacing-sp3);
    }

    .v-b03c__sep::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      inline-size: 7px;
      block-size: 7px;
      background: var(--color-signal);
      /* Merkezleme `translate`te, dönme `rotate`ta: ikisi ayrı özellik,
         birbirini silmiyor (tuzak #2/#3). */
      translate: -50% -50%;
      rotate: 45deg;
    }

    @media (min-width: 768px) {
      .v-b03c__rail .v-b03c__item {
        inline-size: 340px;
      }
    }

    /* ── ÜSTÜNE GELİNCE · madde ÖNE ÇIKIYOR ──────────────────────────────
       Genişlik değişmiyor; değişseydi dikiş matematiği bozulurdu.

       BURADA HİÇBİR İÇERİK GİZLENMİYOR — bilerek. Önceki hâlde detaylar
       `opacity: 0` ile başlıyor, yalnız üstlerine gelince açılıyordu; bantta
       odaklanabilir eleman olmadığı ve ray `aria-hidden` olduğu için
       faresiz ama GÖREN bir masaüstü kullanıcısı bölümün asıl satış
       argümanına (üretim yeri, sertifikalar, teslimat, yanıt süresi)
       hiçbir yoldan ulaşamıyordu. Ekran okuyucu sr-only <dl>'den okuyor,
       o kullanıcı ise hiçbir şeyden.

       Mekanizma kapatılmadı, YENİDEN KURULDU: dört madde de baştan okunur,
       üstüne gelmek yalnız VURGU yapıyor — kardeşler geri çekiliyor,
       seçilen maddenin ikonu markanın sarısına dönüyor. Aynı koreografi,
       aynı :has() tekniği, bilgi kaybı yok. Klavye kullanıcısı da,
       dokunmatik de, hover'sız masaüstü de dördünü birden görüyor.

       Sönük tonlar jetonlardan TÜRETİLİYOR (color-mix), elle yazılmış RGB
       üçlüsüyle değil: jeton değişirse bu değerler eski renkte kalmasın. */
    @media (hover: hover) {
      /* Bir madde okunuyorsa kardeşleri geri çekiliyor. :has() rayın
         tamamına bakıyor, o yüzden AYNI maddenin dört kopyası birlikte
         vurgulanıyor — iki kopya aynı anda ekrandayken çelişmesin diye. */
      .v-b03c__rail:has(.v-b03c__item:hover) .v-b03c__item {
        --v-b03c-label: color-mix(in srgb, var(--color-on-stage) 58%, transparent);
        --v-b03c-mono: color-mix(in srgb, var(--color-on-stage) 50%, transparent);
        --v-b03c-ic: color-mix(in srgb, var(--color-blue-lift) 62%, transparent);
      }

      .v-b03c__rail:has([data-t="1"]:hover) [data-t="1"],
      .v-b03c__rail:has([data-t="2"]:hover) [data-t="2"],
      .v-b03c__rail:has([data-t="3"]:hover) [data-t="3"],
      .v-b03c__rail:has([data-t="4"]:hover) [data-t="4"] {
        --v-b03c-label: color-mix(in srgb, var(--color-on-stage) 92%, transparent);
        --v-b03c-mono: color-mix(in srgb, var(--color-on-stage) 62%, transparent);
        --v-b03c-ic: var(--color-signal);
      }
    }
  }
}

/* Ray %50 = tam iki grup. Kaymanın `translate` özelliğinde olması şart:
   `transform` olsaydı ileride eklenecek her transform onu silerdi. */
@keyframes v-b03c-flow {
  from {
    translate: -50% 0;
  }
  to {
    translate: 0 0;
  }
}

/* Mobil: ray %25 = TAM BİR grup, yani dört maddenin hepsi. İki grup
   yerine bir grup çünkü yol da kısaldı (sayfanın tamamı değil, bandın
   tek geçişi) — hız masaüstündekine yakın kalıyor. Gruplar birebir
   aynı olduğu için -25% ile 0 aynı faz: dikiş yine görünmüyor. */
@keyframes v-b03c-flow-m {
  from {
    translate: -25% 0;
  }
  to {
    translate: 0 0;
  }
}

@keyframes v-b03c-meter {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

}