@layer components {
/* ============================================================================
   B15 · ALT BİLGİ — VARYANT C «Kinetik kapanış»  (efsane)
   ----------------------------------------------------------------------------
   Sayfanın son sözü: kalın krem kuralın altında dört sütun kademeli
   yükseliyor, ilk sütunda maskot marka imzası olarak duruyor, iletişim
   bilgisi koyu zeminin üstünde krem bir kartvizit oluyor.

   28.08.2026 · MÜŞTERİ REVİZYONU — bu dosyadan NE SİLİNDİ:

   · Sayfanın dibindeki dev PRACTIC kelime işaretinin TAMAMI:
     `__sign` `__markmask` `__markrow` `__ch` `__baseline` seçicileri,
     onların `@supports` içindeki koreografisi ve
     `v-b15c-rise` · `v-b15c-grow` · `v-b15c-draw` kare kümeleri.
     Ölü kural bırakılmadı — hiçbir seçici artık DOM'da olmayan bir şeye
     bakmıyor.
   · Kenardan bakan maskot bandı: `__peek`, onun `overflow: hidden`
     kırpması, `--v-b15c-peek-h` / `--v-b15c-mascot-h` jetonları,
     `v-b15c-peek` kare kümesi ve bandın kendi view-timeline'ı.

   NE KALDI, NEREYE GİTTİ:

   1 · MASKOT ARTIK IZGARANIN İLK SÜTUNUNDA, TAM GÖRÜNÜR.
       Eskiden tagline'ın olduğu yerde; boyu `clamp` ile ölçekleniyor,
       genişlik `auto` — yani gerçek 966×1077 oranı korunuyor ve kırpma
       YOK. En geniş hâli 236px yükseklik → 212px genişlik; 1280px'te o
       sütunun iç genişliği 284px, yani sığıyor. Mobilde tek sütunda
       172px yükseklikte kalıyor, ekranı boğmuyor.
       `--v-b15c-mascot-h` jetonu tek yerde: yükseklik gerekirse tek
       satırda değişiyor.

   2 · KALIN KURAL BANTTAN ALT BİLGİNİN ÜST KENARINA TAŞINDI.
       Poster dilinin kapanış çizgisi kaybolmadı; bandı kalkınca kural
       bölümün kendi `border-top`u oldu.

   3 · SÜTUN KADEMESİ SÜREDEN DEĞİL ARALIKTAN.
       Dört sütun aynı animasyonu, aynı uzunlukta alıyor; yalnız
       `animation-range` başlangıcı `--i` kadar öteleniyor. Süreden
       kısılsaydı her sütun başka hızda yükselir, ızgara eğrilirdi.

   YEDEK (destek yok ya da hareket azaltma): bu dosyadaki hiçbir animasyon
   yazılmıyor. Sütunlar yerinde, maskot görünür, kart yerinde. Hiçbir eleman
   `opacity: 0` ya da sıfır ölçekle BAŞLAMIYOR — durağan hâl zaten bitmiş hâl.

   Sarı artık yalnız TEK yerde: kartvizitin ofset gölgesi. (Kelime
   işaretinin sarı taban çizgisi kalktı.) Renk kuralı fazlasıyla korunuyor.
   ========================================================================== */

.v-b15c {
  /* Maskotun görünen boyu. Tek jeton: sütun genişliğine değil ekrana
     bağlı, çünkü ızgara 360'ta tek, 768'de iki, 1024'te dört sütun ve
     üçünde de aynı optik ağırlıkta durması isteniyor. */
  --v-b15c-mascot-h: clamp(172px, 16vw, 236px);

  /* Koyu zemin tonları — stage.css'teki alt bilgi tonlarıyla aynı aile.
     Üçü de #0b0b0e üzerinde karıştırılarak ölçüldü: 12.2 · 6.8 · 6.0. */
  --v-b15c-strong: rgba(242, 242, 238, 0.85);
  --v-b15c-dim: rgba(242, 242, 238, 0.62);
  --v-b15c-label: rgba(242, 242, 238, 0.58);

  padding-bottom: var(--spacing-sp5);
  /* Eskiden ince gri çizgiydi, kalın krem kural maskot bandının altındaydı.
     Bant kalkınca kural buraya taşındı — sayfanın son yatay çizgisi. */
  border-top: var(--rule-heavy) solid var(--color-on-stage);
}

/* ══ SÜTUNLAR ═════════════════════════════════════════════════════════════ */

.v-b15c .v-b15c__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sp5);
  padding-block: var(--spacing-sp5);
}

/* ══ MOBİL DÜZEN · 29.08 ══════════════════════════════════════════════════
   Dört blok tek sütunda alt alta dizilince alt bilgi ~1300px oluyordu:
   maskot kendi başına bir satır, beş gezinme bağlantısı beş satır, künye
   ayrı, kartvizit ayrı. Sayfanın son sözü, sayfanın en uzun bölümüydü —
   üstelik hepsi sola yaslı tek bir kolon olduğu için ritmi de yoktu.

   Yeni düzen aynı dört bloğu iki sütunlu bir ızgaraya oturtuyor:
     · maskot gezinmenin YANINA geçiyor — beş bağlantının yanındaki ölü
       alanı dolduruyor ve kendine satır harcamıyor. Alt hizalı: künye
       kuralının üstünde DURUYOR gibi görünüyor, havada asılı değil.
     · künye ve kartvizit tam genişlikte kalıyor; kartvizit sarı ofset
       gölgesiyle kapanışın ağırlık merkezi, daraltılmıyor.
   Sonuç ~800px: aynı bilgi, üçte bir daha kısa.

   Alan atamaları YALNIZ bu sorgunun içinde (tuzak #14): `grid-template-
   areas` tanımlı olmayan bir kırılımda `grid-area` vermek elemanları aynı
   hücreye yığıyor. DOM sırası değişmiyor, yani klavye odağı hâlâ maskot →
   gezinme → künye → kart diye ilerliyor; ızgara maskotu yalnız GÖRSEL
   olarak gezinmenin yanına alıyor. */
@media (max-width: 767.98px) {
  .v-b15c {
    --v-b15c-mascot-h: 148px;
  }

  .v-b15c .v-b15c__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nav  mark"
      "docs docs"
      "card card";
    gap: var(--spacing-sp4) var(--spacing-sp3);
    align-items: start;
  }

  /* Seçici ÜÇ sınıflı olmak zorunda: `.v-b15c .v-b15c__col`un kendi
     `border-top`u bu bloktan SONRA yazılıyor ve eşit özgüllükte (0,2,0)
     olsaydı onu ezerdi — maskotun üstünde koparılmış gibi duran kısa bir
     çizgi kalıyordu. */
  .v-b15c .v-b15c__grid .v-b15c__col--mark {
    grid-area: mark;
    /* Maskotun künyesi yok; sütun künyelerinin altını çizen ızgara
       çizgisi burada anlamsız duruyordu. */
    border-top: 0;
    padding-top: 0;
    align-self: end;
    justify-content: flex-end;
  }

  .v-b15c .v-b15c__col--nav {
    grid-area: nav;
  }

  .v-b15c .v-b15c__col--docs {
    grid-area: docs;
  }

  .v-b15c .v-b15c__card {
    grid-area: card;
  }

  /* 44px dokunma hedefi kalıyor ama alt bilgide beş bağlantı arka arkaya
     gelince liste gereğinden seyrek duruyordu; satırlar sıkışmadan
     birbirine yaklaşıyor. */
  .v-b15c .v-b15c__col--nav .v-b15c__link {
    min-height: 42px;
  }
}

@media (min-width: 768px) {
  .v-b15c .v-b15c__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dört sütun: marka (maskot) · gezinme · belgeler · kartvizit. Kart en
   geniş sütunda, çünkü telefon satırı display fontta ve kırılmamalı.

   PAYLAR ÖLÇÜLEREK BULUNDU, tahminle değil. Eski dağılım (kart 1.25fr,
   boşluk sp5) 1024px'te karta 235px veriyordu; iç genişlik 171px, telefon
   satırının ihtiyacı ise 233px — Chromium'da ölçüldü, satır GERÇEKTEN iki
   satıra kırılıyordu ve kartvizitin en büyük yazısı «+7 700 / 000 00 00»
   diye bölünüyordu. Taşma olmadığı (inline-flex, boşluktan sarıyor) için
   yatay kaydırma testinde de görünmüyordu.
   Şimdi kart 1.35fr. Ölçülen sonuç: 1280px'te iç genişlik 282px / satır
   233px, 1024px'te (aşağıdaki 1024–1279 kademesiyle birlikte) iç genişlik
   206px / satır 185px. İki kırılımda da tek satır. */
@media (min-width: 1024px) {
  .v-b15c .v-b15c__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.85fr)
      minmax(0, 1.35fr);
    gap: var(--spacing-sp5);
  }
}

/* Izgara çocuklarında ikisi de şart: yatayda uzun e-posta, dikeyde
   maskot/kart hücreyi şişirebiliyor (tuzak #1 ve #42). */
.v-b15c .v-b15c__col,
.v-b15c .v-b15c__card {
  min-width: 0;
  min-height: 0;
}

/* Üç metin sütununun ve marka sütununun tepesinde ince ızgara çizgisi —
   poster dilinde sütun künyeleri hep bir kuralın altından başlar. Kart bu
   kuralı ALMIYOR: o zeminin üstünde duran ayrı bir nesne. */
.v-b15c .v-b15c__col {
  padding-top: var(--spacing-sp3);
  border-top: var(--rule-hair) solid var(--rule-soft-stage);
}

/* ══ MARKA SÜTUNU · MASKOT ════════════════════════════════════════════════ */

/* Görsel sütunun sol kenarına hizalı: yanındaki üç sütunun künye yazısı da
   sol kenardan başlıyor, maskot ortalanırsa o dikey hat kırılıyor. */
.v-b15c .v-b15c__col--mark {
  display: flex;
  align-items: flex-start;
}

/* Yükseklik jetondan, genişlik orandan — kırpma yok, `object-fit` yok.
   `next/image` gerçek 966×1077 oranıyla yer ayırdığı için yükseklik
   sabitken genişlik de baştan biliniyor → CLS 0.
   `max-width: 100%` yalnız güvenlik ağı: sütun 212px'in altına inerse
   görsel taşmak yerine küçülür (tuzak #1'in görsel hâli). */
.v-b15c .v-b15c__mascot {
  display: block;
  height: var(--v-b15c-mascot-h);
  width: auto;
  max-width: 100%;
}

/* ══ SÜTUN KÜNYELERİ ══════════════════════════════════════════════════════ */

.v-b15c .v-b15c__coltitle {
  color: var(--v-b15c-label);
  font-weight: 500;
  margin-bottom: var(--spacing-sp2);
}

.v-b15c .v-b15c__list {
  display: flex;
  flex-direction: column;
}

/* Dokunma hedefi 44px (WCAG 2.5.5). Satırlar bu yüzden seyrek görünüyor;
   alt bilgide bu bir kayıp değil, parmakla en zor vurulan yer burası. */
.v-b15c .v-b15c__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-small);
  color: var(--v-b15c-strong);
  transition: color var(--dur-fast) var(--ease-both);
}

.v-b15c .v-b15c__link:hover {
  color: var(--color-signal);
}

.v-b15c .v-b15c__muted {
  padding-block: 6px;
  font-size: var(--fs-aux);
  color: var(--v-b15c-dim);
}

/* ══ KARTVİZİT ════════════════════════════════════════════════════════════ */

/* Krem kart koyu zeminin üstünde. Kalın çerçeve DIŞARIDA değil içeride:
   dış kenarlık #121212 olurdu ve #0b0b0e zeminde hiç görünmezdi. İçeriye
   çekilmiş kural hem görünüyor hem de basılı kartvizit hissini veriyor.
   Sarı ofset gölge kartı zeminden koparıyor — `box-shadow` mürekkep
   taşması olduğu için kaydırma genişliğine girmiyor, sağ sütunda bile
   yatay taşma yapmaz. */
.v-b15c .v-b15c__card {
  position: relative;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--spacing-sp4);
  box-shadow: 10px 10px 0 var(--color-signal);
}

.v-b15c .v-b15c__card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: var(--rule-mid) solid var(--color-ink);
  pointer-events: none;
}

/* Krem zeminde sahnenin sarı odak halkası okunmuyor (sarı/krem 1.3:1).
   Kartın içi krem olduğu için orada varsayılan mavi halkaya dönüyoruz. */
.v-b15c .v-b15c__card :focus-visible {
  outline-color: var(--color-brand-blue);
}

.v-b15c .v-b15c__cardtitle {
  color: var(--color-ink-2);
  font-weight: 500;
  margin-bottom: var(--spacing-sp2);
}

/* `<address>`in tarayıcı varsayılanı italik — künye italik değil. */
.v-b15c .v-b15c__cardbody {
  display: block;
  font-style: normal;
}

/* Kartın en büyük satırı. Alt bilgiye inen okurun aradığı tek şey
   çoğunlukla numara; kartvizitte de en büyük yazan odur. */
.v-b15c .v-b15c__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-both);
}

.v-b15c .v-b15c__phone:hover {
  color: var(--color-brand-blue);
}

.v-b15c .v-b15c__phoneicon {
  flex: none;
  color: var(--color-brand-blue);
}

/* 1024–1279px: shell henüz `--shell-max`a varmadığı için kart en dar hâlinde
   ve telefon satırı tam burada kırılıyordu. Üç küçük hamle birlikte:
   sütun boşluğu bir kademe iniyor (ızgaraya 48px kazandırıyor), telefon bir
   ölçek kademesi küçülüyor, ikon ve boşluğu ona uyuyor. Display fontun
   ağırlığı ve kartın en büyük satırı olma hiyerarşisi korunuyor.
   1280'den itibaren shell sabit, kart da sabit — satır tam ölçüsüne dönüyor.

   ⚠ BU BLOK `.v-b15c__phone` TANIMININ ALTINDA DURMALI. İlk denemede ızgara
   kurallarının yanına, dosyanın başına yazılmıştı: özgüllük aynı olduğu için
   aşağıdaki taban kural onu kaskatta eziyordu ve ölçüm hiç değişmedi. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .v-b15c .v-b15c__grid {
    gap: var(--spacing-sp4);
  }

  .v-b15c .v-b15c__phone {
    font-size: var(--fs-h4);
    gap: 8px;
  }

  .v-b15c .v-b15c__phoneicon {
    width: 18px;
    height: 18px;
  }
}

.v-b15c .v-b15c__cardlist {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-sp1);
}

.v-b15c .v-b15c__cardlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-small);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* Alt çizgi bu iki satırın TEK tıklanabilirlik işareti: yazı rengi
     `--color-ink`, hemen altındaki adres/saat satırları `--color-ink-2` —
     aralarındaki fark 1.7:1, yani renkle ayrışmıyorlar (WCAG 1.4.1 metin
     içi bağlantı için 3:1 istiyor). Bu yüzden çizginin GÖRÜNMESİ şart.
     Eskiden `--color-rule` idi: o jeton krem zeminde ince ızgara çizgisi
     için tanımlı ve kart zeminiyle (#f4e9ce) karıştırıldığında 1.30:1 —
     pratikte hiç yoktu, iki bağlantı düz metin gibi duruyordu.
     `--color-ink-2` aynı zeminde 7.4:1. */
  text-decoration-color: var(--color-ink-2);
  transition: text-decoration-color var(--dur-fast) var(--ease-both);
}

.v-b15c .v-b15c__cardlink:hover {
  text-decoration-color: var(--color-brand-blue);
}

.v-b15c .v-b15c__cardmeta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-aux);
  line-height: 1.5;
  color: var(--color-ink-2);
}

/* ══ TELİF SATIRI ═════════════════════════════════════════════════════════ */

/* Eskiden kelime işaretinin sarı taban çizgisi bu satırı ızgaradan
   ayırıyordu. O çizgi kalkınca telif satırı sütunlara yapışıyordu —
   ayırma işini artık kendi ince kuralı yapıyor. */
.v-b15c .v-b15c__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-sp2) var(--spacing-sp4);
  padding-top: var(--spacing-sp3);
  border-top: var(--rule-hair) solid var(--rule-soft-stage);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--v-b15c-label);
}

.v-b15c .v-b15c__made {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  transition: color var(--dur-fast) var(--ease-both);
}

.v-b15c .v-b15c__made:hover {
  color: var(--color-signal);
}

/* ══ KAYDIRMAYA BAĞLI KOREOGRAFİ ══════════════════════════════════════════
   Tamamı `@supports` + hareket tercihi içinde. Desteklemeyen tarayıcıda ve
   `prefers-reduced-motion: reduce` altında bu kuralların HİÇBİRİ yazılmıyor:
   yukarıdaki durağan hâl zaten bitmiş kompozisyon.

   Aralıklar `entry` fazında ve %92'yi geçmiyor. Alt bilgi sayfanın SON
   elemanı; `entry 100%` ancak sayfa sonuna 1px kala gelir. Koreografi
   ondan önce bitiyor ki okur bitmiş hâli görebilsin.                       */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Her sütun kendi `view()`ünü kullanıyor; kademe `--i` ile aralığın
       BAŞLANGICINDAN, süreden değil. Maskot da bu kademeye dahil:
       ayrı bir animasyonu yok, ilk sütunun kendisiyle yükseliyor. */
    .v-b15c .v-b15c__col,
    .v-b15c .v-b15c__card {
      animation-name: v-b15c-lift;
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry calc(6% + var(--i, 0) * 8%) entry calc(58% + var(--i, 0) * 8%);
    }
  }
}

/* Öteleme `transform` yerine `translate` özelliğinde: ileride bu
   elemanlara bir `transform` gerekirse ikisi birlikte yaşasın (tuzak #2). */
@keyframes v-b15c-lift {
  from {
    translate: 0 20px;
  }
  to {
    translate: 0 0;
  }
}

}