/* ══════════════════════════════════════════════════════════════════════════════════
   akkopar.com — v8 · SÜREÇ sayfası (yalnız bu sayfa kullanır)
   Sözleşme: web/TASARIM_SOZLESMESI_v8_TASLAK.md §5b (soru → hat → belge → bağ) ·
   H1 = B'deki soru ("Ne zaman, hangi sırayla?") · ilk cümle = eski v7 tezi ("Altı durak,
   altı teslim.") · cevap bandı = A alternatifinin BELGE ŞERİDİ (Ş1 düğüm dili + her
   durağın üstünde o durakta teslim edilen belgenin yüzeyi).

   ⛔ `_v8.css`'e DOKUNULMAZ. Bu dosya onun ÜSTÜNE gelir (surec.html'de ikinci <link>).
   Yeni renk YOK: §2'nin yedi token'ı + lacivert alfa (K11) · kart YOK · radius YOK ·
   animasyon YOK · zebra YOK — yapı ince `Hat` çizgisi + tipografiyle taşınır (§6).

   ŞERİT: `_arsiv/_v8_altA.css`'ten YALNIZ şeride ait seçiciler alındı (hero-A · ai-hat ·
   "üç soru" widget'ı ALINMADI; `_v8_altA.js` de alınmadı — bu sayfada CTA tek ve statik).
   Şeridin dizini (`.serit-dizin`) A'da kısa satırlıydı; burada v7 metnini TAŞIDIĞI için
   3 sütuna açıldı (6 dar sütunda paragraf okunmuyordu — ölçüldü).
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── SAYFA BAŞI — Tur 3b'de `_v8.css`'e TERFİ ETTİ (§5b ORTAK İSKELET, kalıp aynen
   `_v8_raporlar.css`'ten geliyordu) — bu sayfada gerçek fark YOK, satır kalmadı. */

/* ══ CEVAP BANDI — BELGE ŞERİDİ ═════════════════════════════════════════════════
   Ş1 şerit ölçüleri TEK KAYNAK: bağlaç ve dönüş hesapları bu iki değişkenden türer. */
.serit-alan{
  --serit-gap:clamp(10px, 1.4vw, 22px);
  --serit-dugum:56px;                    /* `_v8.css` --dugum ile aynı ölçü, yerel ad */
}
.serit-bas{margin-bottom:0}

.serit{
  display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));
  column-gap:var(--serit-gap);row-gap:clamp(18px, 2vw, 30px);
  margin:clamp(24px, 2.6vw, 38px) 0 0;
}
.serit-sut{
  position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:clamp(10px, 1vw, 14px);
}
/* bağlaç: hücrenin tam genişliği + yarım oluk (komşuyla birleşsin); düğümün opak
   zemini çizgiyi maskeler → çizgi düğümler ARASINDA görünür. Ölçü DÜĞÜMDEN türer
   (bottom), belge yüzeyinin yüksekliğinden bağımsız. */
.serit-sut::before{
  content:"";position:absolute;height:0;
  bottom:calc(var(--serit-dugum) / 2 - 0.75px);
  inset-inline:calc(var(--serit-gap) / -2);
  border-top:1.5px solid var(--lacivert);
}
.serit-sut:nth-child(1)::before{inset-inline-start:50%}
.serit-sut:nth-child(6)::before{inset-inline-end:50%}

.serit-yuzey{display:block;width:min(100%, 168px);position:relative;z-index:1;margin:0}
.serit-yuzey img,.serit-yuzey svg{
  display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:top center;
  background:var(--beyaz);border:1px solid var(--hat);
  box-shadow:0 14px 26px -22px rgba(11, 37, 69, .55);
}
.serit .dugum{margin-bottom:0;align-self:center}
/* 52px'lik pulda gizlenen "Büyüt" künyesi burada SIĞAR (168px) — açık kalır (§3b) */

/* 06 → 01 kesik dönüş yolu — uçları ilk/son düğüm merkezine oturur:
   yarım hücre = (100% − 5 oluk) / 12 */
.serit-donus{
  grid-column:1 / -1;position:relative;height:24px;margin-top:.1rem;
  margin-inline:calc((100% - 5 * var(--serit-gap)) / 12);
}
.serit-donus::before{
  content:"";position:absolute;inset:0 0 5px 0;
  border:1.5px dashed var(--ikincil);border-top:0;
}
.serit-donus-ok{
  position:absolute;top:0;inset-inline-start:0;width:0;height:0;
  transform:translate(-50%, -1px);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:7px solid var(--ikincil);
}

/* ── ŞEMANIN DİZİNİ — gerçek metin, figürün DIŞINDA (erişilebilirlik ağacında kalır).
   v7'nin altı durak metni BURADA yaşar: kopya yok, tek yer. ── */
.serit-dizin{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:clamp(26px, 2.8vw, 48px);row-gap:clamp(26px, 2.8vw, 40px);
  margin:clamp(28px, 3vw, 46px) 0 0;padding:0;list-style:none;
}
.serit-dizin li{
  display:flex;flex-direction:column;min-width:0;
  padding-top:.9rem;border-top:1px solid var(--hat);
}
.serit-kod{display:flex;align-items:baseline;gap:.65rem;margin:0}
/* 09-07 (2a): punto/renk/büyük-harf/ağırlık artık `_v8.css` `.etiket-vurgu`den (rol 8) —
   HTML'de her iki span'a da o sınıf eklendi. Burada yalnız düzen (font-family/line-height) kalır. */
.serit-no{line-height:1;font-variant-numeric:tabular-nums}
.serit-ad{line-height:1.4}
.serit-tez{margin-top:.5rem;font-size:var(--p2);line-height:1.34}
.serit-metin{margin:.6rem 0 .9rem;font-size:var(--p2);line-height:1.66;color:var(--govde)}
/* `margin-top:auto` → teslim satırının çizgisi satırdaki ÜÇ maddede aynı hizada durur
   (ızgara satırı eşit yükseklikte; metin uzunluğu farkı alta itilir). Asgari boşluk
   `.serit-metin`in alt payından gelir — auto onun altına inmez. Ölçüldü: 09-05. */
.serit-teslim{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--hat);
              font-size:var(--p1);line-height:1.55;color:var(--ikincil)}
.serit-kunye{margin-top:1.5rem;max-width:66ch}

/* ══ ÜÇ CEVAP — başlık solda, nesir sağda (kart YOK, ayrım ince Hat) ═════════════ */
.cevaplar{margin-top:2.4rem;border-top:1px solid var(--hat)}
.cevap{
  display:grid;grid-template-columns:minmax(0, 21rem) minmax(0, 1fr);
  column-gap:clamp(28px, 3.4vw, 62px);row-gap:.8rem;align-items:start;
  margin:0;padding:clamp(26px, 2.6vw, 40px) 0;border-bottom:1px solid var(--hat);
}
.cevap h3{font-size:var(--p3);line-height:1.34}
.cevap p{max-width:62ch;color:var(--govde)}
.cevap-kanit{margin-top:.95rem;padding-top:.85rem;border-top:1px solid var(--hat);
             font-size:var(--p1);line-height:1.6;color:var(--ikincil)}

/* ══ ALTI SÜTUN — AI katmanı + çerçevenin kendisi ═══════════════════════════════
   TEK lacivert blok (2026-09-08 16:4x, AKK: iki-katmanlı çizgili nesir + küçük beyaz bant
   "hem yazı hem biçim olarak zayıf, çizimimin kötü kopyası" REDDETTİ — eski `.ai-katman` +
   `.ai-bant` KALDIRILDI). Fable kararı: AI katmanı sayfadaki TEK lacivert blok, altı
   sütunun üstüne FİZİKSEL çatı — kendi iç ızgarası `.sutunlar`ın 3-kolonuyla AYNI genişlik
   dizisini kullanır (ikisi de `.kutu` içinde repeat(3,1fr) — sıfır-gap izler kolon
   sınırlarını otomatik hizalar), böylece tez'in sol kenarı "Konum" başlığıyla, metnin sol
   kenarı "Değer" başlığıyla ölçekte hizalanır (ölçüm: web/_olcum/2026-09-08_ai_katman_v2/). */
.ai-kat{
  --sacak:clamp(20px, 2.5vw, 36px);
  background:var(--lacivert);color:var(--beyaz);
  margin-top:clamp(28px, 2.8vw, 44px);
  /* 2026-09-18 (AKK ③): saçak KALDIRILDI — kutu kart ızgarasıyla birebir aynı hizada.
     İç payı artık çocuklar taşır (22px = kartın kendi iç payı, `_v8-apple.css` `.sutun`). */
  margin-inline:0;
  padding-block:clamp(30px, 3vw, 46px);
  padding-inline:0;
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:0;row-gap:.9rem;
  align-items:start;
}
/* Etiket: `.sutun-no`/`.etiket-vurgu` ile AYNI harf-aralığı+büyük-harf tipografisi (G24: serif kaldırıldı),
   ama sınıf DEVRALINMAZ (K20e: `.etiket-vurgu` bu bantta kırmızı kalırdı — koyu zeminde
   kırmızı yasak, bkz `.vurgu-sistemi .bant--lacivert .etiket-vurgu{color:var(--hat)}`
   yalnız o seçici altında geçerli, `.ai-kat` `.bant--lacivert` DEĞİL). Önündeki kısa çizgi
   h2'lerin ROL 3 işaretinin koyu-zemin ölçüsüyle AYNI (`.vurgu-sistemi .vurgu-bas::before`
   40×3px, satır ~1066 `_v8.css`). */
.ai-kat-etiket{
  grid-column:1 / -1;position:relative;margin:0;padding-inline-start:22px;
  font-size:var(--p2);font-weight:700;line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kagit);
}
.ai-kat-etiket::before{
  content:"";position:absolute;top:-1.05rem;inset-inline-start:22px;
  width:40px;height:3px;background:var(--kagit);
}
.ai-kat-tez{
  grid-column:1 / 2;margin:0;padding-inline-start:22px;
  font-size:var(--p4);
  line-height:1.25;max-width:none;color:var(--beyaz);
}
/* Sol pay = sütun 2'nin kendi payı + `.sutun`ın 1px iç-hat kalınlığı (ai-kat'ta görünür hat
   yok ama x hizası onu telafi eder) — "Değer" h3'ünün sol x'iyle ölçekte eşleşir. */
.ai-kat-metin{
  grid-column:2 / -1;margin:0;
  padding-inline-start:22px;
  font-size:var(--p2);line-height:1.62;max-width:58ch;color:var(--kagit);
}
.ai-kat .bag{color:var(--beyaz);border-bottom-color:rgba(255,255,255,.5)}
.ai-kat .bag:hover,.ai-kat .bag:focus-visible{border-bottom-color:var(--beyaz)}

.sutunlar{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:0;
          margin:0;padding:0;list-style:none}
.sutun{padding:1.35rem clamp(18px, 1.8vw, 28px) 1.55rem;
       border-inline-start:1px solid var(--hat);border-top:1px solid var(--hat)}
.sutun:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}
.sutun:nth-child(3n){padding-inline-end:0}
.sutun-no{line-height:1;
          font-variant-numeric:tabular-nums}
.sutun h3{margin-top:.45rem;font-size:var(--p2);line-height:1.3}
.sutun p{margin-top:.55rem;font-size:var(--p2);line-height:1.62;color:var(--govde);max-width:34ch}

.teslim-satir{margin-top:clamp(26px, 2.6vw, 40px);padding-top:1.1rem;
              border-top:1px solid var(--hat);max-width:66ch;color:var(--govde)}

/* ── KAPANIŞ CTA BANDI — `.cta-blok` ortak kalıbı bir bölümün SONUNA gelmek için
   var(--bosluk) üst pay + üst çizgi taşır; burada bandın KENDİSİ o bölüm olduğu için
   ikisi de sıfırlanır (yoksa bant payı + blok payı üst üste binip ~240px boşluk açıyordu
   — 09-05 göz-doğrulaması). Ayrım zaten kağıt→beyaz bant geçişiyle kuruluyor. ── */
.cta-bant{padding-block:clamp(48px, 4.6vw, 78px) clamp(56px, 5.4vw, 92px)}
.cta-bant .cta-blok{margin-top:0;padding-top:0;border-top:0}

/* ══ DUYARLI ═══════════════════════════════════════════════════════════════════
   Bağlaç uçları HER kırılımda İKİ tarafı da açıkça yazar (yarım-kural bir sonraki
   kırılımda sızıp çift-kırpma yapıyordu — eşit özgüllük, son yazan kazanır). */
@media (max-width:1240px){
  /* .serit-ad punto ROL 8'den gelir (0,2,0 > bu kuralın 0,1,0'ı) — ölü kural silindi */
  .serit-metin{font-size:var(--p1)}
}
@media (max-width:1240px){
  .serit{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .serit-yuzey{width:min(100%, 196px)}
  .serit-sut:nth-child(1)::before,.serit-sut:nth-child(4)::before{
    inset-inline-start:50%;inset-inline-end:calc(var(--serit-gap) / -2)}
  .serit-sut:nth-child(2)::before,.serit-sut:nth-child(5)::before{
    inset-inline-start:calc(var(--serit-gap) / -2);inset-inline-end:calc(var(--serit-gap) / -2)}
  .serit-sut:nth-child(3)::before,.serit-sut:nth-child(6)::before{
    inset-inline-start:calc(var(--serit-gap) / -2);inset-inline-end:50%}
  /* dönüş yolu tek satırlık akışa çizildi; iki satırda anlamı bozulur → yalnız künye cümlesi */
  .serit-donus{display:none}
  .cevap{grid-template-columns:1fr;row-gap:.5rem}
}
@media (max-width:900px){
  .serit-dizin{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sutunlar{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sutun:nth-child(3n+1){border-inline-start:1px solid var(--hat);
                         padding-inline-start:clamp(18px, 1.8vw, 28px)}
  .sutun:nth-child(3n){padding-inline-end:clamp(18px, 1.8vw, 28px)}
  .sutun:nth-child(2n+1){border-inline-start:0;padding-inline-start:0}
  .sutun:nth-child(2n){padding-inline-end:0}
  .ai-kat{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ai-kat-tez{grid-column:1 / 2}
  .ai-kat-metin{grid-column:2 / 3}
}

/* ── 900 ALTI (T2 kanonik 2026-09-16, eski eşik 720): şerit DİKEY zaman-çizgisi (düğüm solda · yüzey sağda · çizgi düğümlerden
   geçer) — kalıp `_v8.css`'in Ş1 mobil kuralından; yatay dizide 390'da yüzey okunmuyordu. */
@media (max-width:900px){
  .serit-alan{--serit-gap:clamp(12px, 3.2vw, 20px);--serit-dugum:48px}
  .serit{grid-template-columns:1fr;row-gap:0}
  .serit-sut{
    display:grid;grid-template-columns:var(--serit-dugum) minmax(0, 1fr);
    column-gap:1.15rem;align-items:center;
    padding:1.25rem 0;border-bottom:1px solid var(--hat);
  }
  .serit-sut:nth-child(6){border-bottom:0}
  .serit .dugum{grid-column:1;grid-row:1;width:48px;height:48px;align-self:center}
  .serit .dugum .pikto{width:23px;height:23px}
  /* 2026-09-16 T2: cap 240 → 288px (18rem). 430 eşiği kalkınca `width:100%` istisnası da
     kalktı; 288 o istisnanın 390'da verdiği ölçüdür (kutu 283,6px → `100%` kazanır, mobil
     görünüm BİREBİR aynı kalır) ve 641-900 bandında satırı daha iyi doldurur. Tek ölçü. */
  .serit-yuzey{grid-column:2;grid-row:1;width:min(100%, 288px)}
  .serit-sut::before,
  .serit-sut:nth-child(1)::before,.serit-sut:nth-child(2)::before,
  .serit-sut:nth-child(3)::before,.serit-sut:nth-child(4)::before,
  .serit-sut:nth-child(5)::before,.serit-sut:nth-child(6)::before{
    top:0;bottom:0;height:auto;
    inset-inline-start:calc(var(--serit-dugum) / 2 - 0.75px);inset-inline-end:auto;
    border-top:0;border-inline-start:1.5px solid var(--lacivert);
  }
  .serit-sut:nth-child(1)::before{top:50%}
  .serit-sut:nth-child(6)::before{bottom:50%}
  /* AI katmanı tek kolona düşer. 2026-09-18: blok artık kenardan-kenara TAŞMIYOR
     (saçak kalktı, masaüstüyle aynı hiza) → iç pay masaüstündekiyle AYNI 22px kalır;
     eskiden 0'a düşürülüyordu çünkü blok `.kutu` payının dışına çıkıyordu. */
  .ai-kat{grid-template-columns:1fr;row-gap:.85rem}
  .ai-kat-etiket,.ai-kat-tez,.ai-kat-metin{grid-column:1 / -1;padding-inline-start:22px}
  .ai-kat-tez{max-width:none}
  .ai-kat-metin{max-width:none}
}
@media (max-width:640px){
  .serit-dizin,.sutunlar{grid-template-columns:1fr}
  .sutun,.sutun:nth-child(2n),.sutun:nth-child(2n+1),
  .sutun:nth-child(3n),.sutun:nth-child(3n+1){border-inline-start:0;padding-inline:0}
}
/* ⛔ KALDIRILDI (2026-09-16 · T2 kanonik turu-2): burada `@media (max-width:430px){
   .serit-yuzey{width:100%} }` vardı — 430 eşiği 640'a katılınca kural 431-640 bandına da
   yayıldı ve ÖLÇÜLDÜ: belge önizlemeleri 240px'ten ~600px'e şişti (surec@640 sayfa boyu
   5.171 → 6.459px, "Büyüt" hapı karttan koptu). Kural 430'a özgü 45px'lik bir nezaketti;
   dikey şerit bandının TEK dili artık `.serit-yuzey{width:min(100%,240px)}` (yukarıdaki
   ≤900 bloğu) — 390'dan 900'e kadar aynı ölçü, eşiksiz, sıçramasız. */

/* ═══════════════════════════════════════════════════════════════════════════════════
   ═══ §11 HAREKET DİLİ + §11.8 KIRMIZI VURGU — TUR 6 YAYILIMI (2026-09-06) ═══
   Kapsam `body.vurgu-sistemi` (surec.html <body>). Rol 1 (CTA dolgusu) · rol 3 (40×3px
   bölüm işareti) · rol 7 (çift-renk başlık) · rol 6 (marka noktası, logoda) ORTAK
   `_v8.css` §11.8 bloğundan gelir — burada TEKRAR EDİLMEZ. Bu dosya yalnız bu sayfaya
   ait iki şeyi kurar: (④) şeridin teslim bağlarında rol-4 cevap-hareketi ve (⑤) sayfanın
   TEK ANI = altı durak zincirinin kaydırmayla çizilmesi.
   Rol 2 (ölçülen rakam) YOK: bu sayfadaki 01-06 rakamları SIRA dizinidir, ölçüm çıktısı
   değil — kırmızıya boyamak rakamı "ölçülmüş" gibi gösterirdi (§11.8 rol 2 + A35).
   Rol 5 (belge damgası) YOK: sayfada canlı `.belge-yaprak` yok; şerit yüzeyleri gerçek
   teslimat render'ları, mühür onların künyesini taşımaz.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── ROL 4 · CEVAP-HAREKETİ (150 ms) — şeridin ALTI TESLİM bağı ────────────────────
   Dinlenmede lacivert; kırmızı yalnız okur dokunduğunda belirir (§11.1 "cevap" sınıfı).
   `.bag` hover/transition Tur 6'dan beri ORTAK `_v8.css` §11.8'de (satır ~932, TÜM
   `.bag`'i kapsar) — burada tekrarlanmaz (gecekondu temizliği 09-06). */

/* ── SAYFANIN TEK ANI · ZİNCİR KAYDIRMAYLA ÇİZİLİR (§11.1 istisnası) ───────────────
   Sözleşme §11.1: "İstisna: `surec` altı-durak zinciri kaydırma ilerlemesiyle çizilir
   (ilerleme = bilgi; CSS scroll-driven `animation-timeline`), o sayfanın tek anı budur."
   MEKANİK: `.serit` bir görünürlük zaman çizgisi yayınlar (`view-timeline`); altı bağlaç
   ve dönüş yolu o çizgide SIRAYLA (`animation-range` dilimleri) 0→1 ölçeklenir. Süre YOK
   — ilerleme kaydırmanın kendisidir (sayfa yüklenince oynayan bir giriş DEĞİL, §11 "bölüm
   girişleri" yasağı korunur). JS yok → K20f `sessionStorage` şartı da doğmaz (`data-an`
   özniteliği bilerek KULLANILMADI: bu an sekme-başına-bir-kez değil, kaydırmaya bağlı).

   ⛔ DİNLENME DURUMU TAM (§11.1): `::before` = zincirin KENDİSİ, her koşulda tam çizili.
   Animasyon ayrı bir katmanda (`::after`) yaşar ve YALNIZ scroll-timeline destekleyen
   tarayıcıda + `no-preference`te devreye girer; o durumda `::before` iz'e (`--hat`)
   döner, dolgu lacivert gelir (index'in `.belge-cubuk-iz`/`-dolu` deseni). Desteksiz
   tarayıcı / `reduce` / JS'siz → bugünkü tam lacivert zincir, tek satır fark yok.
   Kırmızı YOK: zincir bir ÖLÇÜM değil, yol; §11.8 rolleri dışında kırmızı = dekor. */
@keyframes serit-zincir-yatay{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes serit-zincir-dikey{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .serit{view-timeline-name:--serit-akis;view-timeline-axis:block}

    /* iz: zincirin çizilmemiş kısmı — geçilen kısım üstüne lacivert olarak yazılır */
    .serit-sut::before{border-top-color:var(--hat)}

    .serit-sut::after{
      content:"";position:absolute;height:0;z-index:0;   /* düğüm (z-index:1) üstte kalır */
      bottom:calc(var(--serit-dugum) / 2 - 0.75px);
      inset-inline:calc(var(--serit-gap) / -2);
      border-top:1.5px solid var(--lacivert);
      transform-origin:left center;transform:scaleX(0);
      animation-name:serit-zincir-yatay;animation-duration:auto;
      animation-timing-function:linear;animation-fill-mode:both;
      animation-timeline:--serit-akis;
    }
    .serit-sut:nth-child(1)::after{inset-inline-start:50%;animation-range:contain 0% contain 16%}
    .serit-sut:nth-child(2)::after{animation-range:contain 12% contain 28%}
    .serit-sut:nth-child(3)::after{animation-range:contain 24% contain 40%}
    .serit-sut:nth-child(4)::after{animation-range:contain 36% contain 52%}
    .serit-sut:nth-child(5)::after{animation-range:contain 48% contain 64%}
    .serit-sut:nth-child(6)::after{inset-inline-end:50%;animation-range:contain 60% contain 76%}

    /* dönüş yolu 06 → 01: zincirin kapanışı, ters yönde (sağdan sola) çizilir */
    .serit-donus{
      transform-origin:right center;transform:scaleX(0);
      animation-name:serit-zincir-yatay;animation-duration:auto;
      animation-timing-function:linear;animation-fill-mode:both;
      animation-timeline:--serit-akis;animation-range:contain 76% contain 94%;
    }
  }

  /* 1040 altı: şerit 3 sütuna iner — uç dilimler satır başında/sonunda değişir */
  @media (max-width:1240px) and (prefers-reduced-motion:no-preference){
    .serit-sut:nth-child(1)::after,.serit-sut:nth-child(4)::after{
      inset-inline-start:50%;inset-inline-end:calc(var(--serit-gap) / -2)}
    .serit-sut:nth-child(2)::after,.serit-sut:nth-child(5)::after{
      inset-inline-start:calc(var(--serit-gap) / -2);inset-inline-end:calc(var(--serit-gap) / -2)}
    .serit-sut:nth-child(3)::after,.serit-sut:nth-child(6)::after{
      inset-inline-start:calc(var(--serit-gap) / -2);inset-inline-end:50%}
  }

  /* 900 altı (T2 kanonik, eski 720): zincir DİKEY zaman çizgisi — aynı ilerleme, yukarıdan aşağı çizilir.
     ⚠️ İZ kuralı burada nth-child listesiyle TEKRARLANIR: mobil taban kuralı
     (`.serit-sut:nth-child(1)::before` = 0,2,1) tek sınıflı kuralı (0,1,1) EZERDİ —
     iz lacivert kalır, dolgu görünmezdi (özgüllük kör-noktası, ölçüldü). */
  @media (max-width:900px) and (prefers-reduced-motion:no-preference){
    .serit-sut::before,
    .serit-sut:nth-child(1)::before,.serit-sut:nth-child(2)::before,
    .serit-sut:nth-child(3)::before,.serit-sut:nth-child(4)::before,
    .serit-sut:nth-child(5)::before,.serit-sut:nth-child(6)::before{
      border-inline-start-color:var(--hat)}

    .serit-sut::after,
    .serit-sut:nth-child(1)::after,.serit-sut:nth-child(2)::after,
    .serit-sut:nth-child(3)::after,.serit-sut:nth-child(4)::after,
    .serit-sut:nth-child(5)::after,.serit-sut:nth-child(6)::after{
      top:0;bottom:0;height:auto;
      inset-inline-start:calc(var(--serit-dugum) / 2 - 0.75px);inset-inline-end:auto;
      border-top:0;border-inline-start:1.5px solid var(--lacivert);
      transform-origin:center top;transform:scaleY(0);
      animation-name:serit-zincir-dikey;
    }
    .serit-sut:nth-child(1)::after{top:50%}
    .serit-sut:nth-child(6)::after{bottom:50%}
  }
}