/* ==========================================================================
   Delta Motor — Anasayfaya ozel yerlesim
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   Video SAHNE, metin onun uzerindeki altyazi — tersi degil. Uc karar:

   1. `.hero__bg` bolumun tamamini kaplar (inset:0), yalniz ust seridi degil.
      Boylece lift panosu da videonun uzerine oturur; pano ile video arasinda
      olu koyu bosluk kalmaz.
   2. Perde DIKEY ve hafif. Eski perde soldan %88 opaklikla giriyordu ve
      videonun sol yarisini olduruyordu. Yenisi ortada %8'e iner — video
      gercekten gorunur — metnin ve panonun oldugu alt bantta koyulasir.
   3. Okunabilirlik perdeden degil iki katmanli text-shadow'dan gelir
      (sikici + genis). Perdeyi koyultmak videoyu, golgeyi buyutmek harfleri
      bozar; ikisinin dengesi budur.

   Metin renkleri --c-invert-* ailesinden sabitlenir; perde her iki temada da
   koyu oldugu icin temaya gore degismezler.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Video katmani — bolumun tamami, kenardan kenara */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0B0F1A;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Duraklar olcumle secildi, goz karariyla degil. Ekran goruntusunden gercek
     piksel ornekleyip kontrast hesaplandi: ilk denemede lead'in sag yarisi
     parlak bir video karesine denk gelip 2,18:1'de kaliyordu (4,5 gerekli).
     Alt bant bu yuzden %44'ten itibaren koyulasir. Ust %40 hafif kalir —
     videonun yasadigi yer orasi. Degerler degisirse kontrast YENIDEN olculmeli. */
  background:
    linear-gradient(to right,
      rgba(8, 11, 18, 0.48) 0%,
      rgba(8, 11, 18, 0.20) 46%,
      rgba(8, 11, 18, 0) 80%),
    linear-gradient(to bottom,
      rgba(8, 11, 18, 0.42) 0%,
      rgba(8, 11, 18, 0.06) 22%,
      rgba(8, 11, 18, 0.38) 44%,
      rgba(8, 11, 18, 0.74) 68%,
      rgba(8, 11, 18, 0.94) 100%);
}

/* Metin sahnesi — icerik ALTA yaslanir. Eskiden izgaraydi ve ust satirda
   `.hero__meta` vardi; o blok kaldirilinca izgara metni yukari yapistiriyordu.
   Flex + flex-end ile metin her yukseklikte alt kenara oturur. */
.hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(var(--hero-h) - 18rem);
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

.hero__copy {
  max-width: 68rem;
  min-width: 0;
}

/* Izgara ogeleri varsayilan olarak min-content'ten kucuk olamaz; uzun bir
   Turkce kelime sutunu tasirip sayfaya yatay kaydirma ekliyordu. */
.hero__copy > * { min-width: 0; }

/* Bosluklar `em` — yani her ogenin KENDI puntosunun orani. Punto clamp ile
   olceklenirken sabit px bosluk verilirse mobilde punto kuculup bosluk ayni
   kalir ve oran bozulur. */
.hero__copy .label {
  color: var(--c-invert-mute);
  letter-spacing: 0.2em;
  margin-bottom: 1.7em;
}

/* Baslik. `.d1`in 800/wdth118 ayari bu olcekte duvar gibi bir kutle uretiyordu
   (olculdu: 87px'te 6 satir). Optik kural tersidir: punto buyudukce agirlik ve
   genislik AZALIR, harf araligi SIKILASIR. 64px/680/wdth106 ayninda ayni metin
   2 satira duser. Bu deger `.d1`i degil yalniz hero'yu baglar. */
.hero__title {
  font-size: clamp(2.25rem, 3.6vw + 0.75rem, 4rem);
  font-weight: 680;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.028em;
  max-width: none;
  color: var(--c-invert-fg);
  text-wrap: balance;
  margin-bottom: 0.44em;
  text-shadow:
    0 1px 2px rgba(8, 11, 18, 0.55),
    0 8px 30px rgba(8, 11, 18, 0.45);
}

/* Basligin vurgusu — koyu perde uzerinde acik mavi; --c-blue acik temada
   cok koyu kaldigi icin burada kullanilamaz.

   `display: block` satir kirilmasini da belirler: baslik uc satira boyle
   iner ve vurgulu ifade KENDI satirinda kalir. Dogal sarma birakilirsa
   kirilma vurgunun ortasindan geciyordu ("...GUVEN / VEREN BIR..."), yani
   mavi kutle iki satira yayilip capraz duruyordu.
   Not: uc satirlik yapi `<em>`e bagli — vurgu markup'tan kaldirilirsa baslik
   yeniden dogal sarmaya doner. */
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--c-blue-invert);
}

/* Lead TAM beyaz, kisik gri degil. Video uzerinde --c-invert-mute (#A9B2C4)
   parlak karelerde 2,18:1'e dusuyordu; hicbir makul perde bunu 4,5'e
   cikarmiyor (0,69 opaklik gerekirdi, o da videoyu oldururdu). Hiyerarsi
   renkten degil OLCEKTEN gelir: baslik 64px, lead 17px — 3,8 kat fark. */
.hero__copy .lead {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--c-invert-fg);
  max-width: 44rem;
  margin-bottom: 2.2em;
  text-shadow: 0 1px 3px rgba(8, 11, 18, 0.6), 0 2px 14px rgba(8, 11, 18, 0.55);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
}

/* Ikincil cagri dolu buton DEGIL, alti cizili metin baglantisi. Yan yana iki
   dolu buton ikisinin de agirligini dusuruyor; boylece birincil cagri tek
   basina one cikar. */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-invert-fg);
  text-decoration: none;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--c-invert-edge);
  transition: border-color var(--d-fast) var(--e-out),
              opacity var(--d-fast) var(--e-out);
}

.hero__link:hover {
  border-bottom-color: var(--c-invert-fg);
  opacity: 0.82;
}

.hero__link:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 4px;
}

@media (max-width: 30rem) {
  .hero__stage { padding-block: var(--s-5) 0; }
  .hero__actions { gap: var(--s-4); }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* --- Lift panosu — videonun uzerine oturur -------------------------------
   Bu projeye ozel hamle: atolyenin CANLI durumu, atolyenin GORUNTUSUNUN
   uzerinde durur. Pano eskiden videonun bittigi yerin altinda, duz koyu
   zeminde asili kaliyordu.

   `components.css` icindeki `.bays`/`.bay` bilesenine DOKUNULMAZ. Burada
   yalnizca jetonlar hero kapsaminda terse cevrilir; bilesen kendi
   `var(--c-line)` / `var(--c-blue)` yazimini korur ve dogru rengi alir.
   -------------------------------------------------------------------------- */
.hero__bays {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 4vw, 3rem);

  /* Kapsam icinde jeton devri — bilesen kodu degismeden renk terse doner */
  --c-line: var(--c-invert-line);
  --c-blue: var(--c-blue-invert);
  --c-red:  #FF6069;
}

/* Bulanikligi tek katmanda tut: perde `.bays` arkasinda bir kez hesaplanir,
   uc ayri `.bay` icin ucer kez degil. */
.hero__bays .bays {
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-color: var(--c-invert-edge);
}

.hero__bays .bay { background: rgba(11, 15, 26, 0.52); }

.hero__bays .label,
.hero__bays .bays__date,
.hero__bays .bay__focus_state { color: var(--c-invert-mute); }

.hero__bays .bay__id { color: var(--c-invert-fg); }
.hero__bays .bay__focus { color: var(--c-invert-faint); }


/* --- Hero girisi — kademeli --------------------------------------------
   `no-preference` sorgusu icinde: hareket azaltma acikken kural HIC
   uretilmez, yani opacity:0 ile takilip kalma riski de olmaz.
   Yon ve mesafe DESIGN.md'deki aciga cikma diliyle ayni: 14px yukari.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy .label,
  .hero__title,
  .hero__copy .lead,
  .hero__actions,
  .hero__bays {
    animation: heroIn 620ms var(--e-out) both;
  }

  .hero__copy .label { animation-delay:  60ms; }
  .hero__title       { animation-delay: 140ms; }
  .hero__copy .lead  { animation-delay: 230ms; }
  .hero__actions     { animation-delay: 310ms; }
  .hero__bays        { animation-delay: 390ms; }
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Atolye bolumu — kunye + gorsel ------------------------------------ */

/* Hakkimizda'daki kunye blogu (`.facts`) ile ayni yapi.
   DOM sirasi: baslik -> gorsel -> metin. Tek sutuna dusen olcude gorsel
   EN ALTA dusmesin diye; sayfanin geri kalani da bu ritimle akiyor.
   Sira CSS `order` ile degil MARKUP'ta kuruldu: ekran okuyucu ve klavye
   de ayni sirayi izlesin. */
.shop {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.shop__media {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

/* DIKKAT — bu blok `.shop__media` temel kuralindan SONRA gelmeli.
   Ikisinin ozgulugu esit; media sorgusu once yazilirsa sonraki temel
   kural `aspect-ratio: auto` degerini ezer ve gorsel kare kalir. */
@media (min-width: 960px) {
  /* Iki sutunda gorsel SOLDA kalir (bu bolumun mevcut yonu korundu;
     hakkimizda'da gorsel sagda). Alanlar isimlendirildigi icin markup
     sirasi degistigi halde yerlesim ayni. */
  .shop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
      'media head'
      'media text';
    align-content: start;
    align-items: stretch;
  }

  .shop__head  { grid-area: head; }
  .shop__media { grid-area: media; }
  .shop__text  { grid-area: text; }

  /* Gorsel, yanindaki sutunun yuksekligini alir (kare DEGIL).
     Kare kalinca sutun genisligiyle birlikte kuculuyor ama metin sutunu
     sabit kaliyor ve alttan tasiyor — hakkimizda kunyesinde olculdu:
     tasma 1440px'de 1px, 940px'de 172px. Kirpma `object-fit: cover`. */
  .shop__media {
    height: 100%;
    aspect-ratio: auto;
  }
}

.shop__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop__text {
  display: grid;
  align-content: start;
  gap: var(--s-5);
}


/* --- Serit birlesmesi — "iki farkli surus, tek servis uzmanligi" ---------
   Markalar bolumundeki iki kartin ALTINDA duran anlatim alani. Iki sutun
   yukaridan iner, ortadaki seritle ayrilir, altta tek noktada birlesir ve
   randevu CTA'sina baglanir.

   Uc kural:
   1. Renkler projedeki jetonlardan gelir (--c-red / --c-blue). Sabit hex
      YAZILMAZ: koyu temada bu jetonlar #FF6069 / #6E9BFF'e doner ve ustteki
      kartlarla (mark--red / mark--blue) ayni kalir.
   2. Giris animasyonu JS TETIKLI sirali bir koreografidir: metinler ->
      egriler -> kapanis (bkz. asagidaki "Giris koreografisi" blogu).
      Gizli baslangic durumu YALNIZCA `.lanes--anim` altinda tanimli ve o
      sinifi da JS koyar — betik calismazsa bolum tam gorunur kalir.
      Onceki hal saf CSS `animation-timeline: view()` idi; kaydirmaya senkron
      oldugu icin sira kaydirma hizina gore degisiyordu, sabit sira istendi.
   3. `.reveal` sinifi burada KULLANILMAZ: o sistem her ogeyi KENDI tetigiyle
      surer, buradaki koreografi ise TEK tetikle baslar. Ikisi ayni ogede
      bulusursa opaklik iki yerden yazilir.
   ------------------------------------------------------------------------ */

.lanes {
  --lane-1: var(--c-red);    /* Kymco  · sol sutun */
  --lane-2: var(--c-blue);   /* Suzuki · sag sutun */
  margin-top: clamp(3rem, 6vw, 5rem);
}

.lanes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .lanes__grid {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* --- Sutun --------------------------------------------------------------- */

/* Sutun icerigi ORTALI. Alttaki kapanis blogu (`.lanes__end`) zaten ortali;
   bolumun tamami tek bir merkez ekseninde okunuyor — ortadaki ray ve iki
   egrinin bulustugu nokta da o eksende. */
.lane {
  min-width: 0;
  text-align: center;
}

.lane--1 { --lane-c: var(--lane-1); }
.lane--2 { --lane-c: var(--lane-2); }

/* Dev indeks rakami — dekoratif, ekran okuyucudan gizli (aria-hidden) */
.lane__index {
  font-family: var(--f-mono);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 600;
  line-height: 0.9;
  color: color-mix(in srgb, var(--lane-c) 16%, transparent);
  margin-bottom: var(--s-4);
}

.lane__brand {
  display: flex;
  align-items: center;
  justify-content: center;   /* flex kabinde text-align ise yaramaz */
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: 0.6875rem;      /* 11px */
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-ink-faint);
  margin-bottom: var(--s-4);
}

.lane__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--lane-c);
}

.lane__title { margin-bottom: 0.8em; }

.lane__text {
  max-width: 46ch;
  margin-inline: auto;       /* text-align kutuyu degil ICINDEKINI ortalar */
  line-height: 1.8;
  margin-bottom: var(--s-6);
}

/* --- Nokta ayracli spec satiri ------------------------------------------- */

.lane__specs {
  display: grid;
  gap: 0.7rem;
  max-width: 46ch;
}

.lane__spec {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-ink-faint);
}

/* Ayrac: ortadaki bos span esner, alt kenarligi noktali cizgiyi cizer */
.lane__spec-dots {
  flex: 1;
  border-bottom: 1px dotted var(--c-line-strong);
  transform: translateY(-0.25em);
}

.lane__spec-val {
  flex: none;
  color: var(--c-ink);
}

/* --- Ortadaki yol seridi -------------------------------------------------- */

.lanes__rail {
  display: none;
  position: relative;
  overflow: hidden;
}

@media (min-width: 900px) {
  .lanes__rail { display: block; }
}

/* Kesikli cizgi. Yukseklik %200, boylece -20px kayarken bosluk olusmaz.
   20px = bir desen periyodu (8px dolu + 12px bosluk) -> kusursuz dongu. */
.lanes__rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 200%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    var(--c-line-strong) 0 8px,
    transparent 8px 20px
  );
}

/* --- Birlesen egriler ----------------------------------------------------- */

.lanes__merge {
  display: none;
  width: 100%;
  height: clamp(4rem, 7vw, 7rem);
  margin-top: var(--s-4);
}

@media (min-width: 900px) {
  .lanes__merge { display: block; }
}

.lanes__curve {
  fill: none;
  stroke-width: 1;
  stroke-opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

.lanes__curve--1 { stroke: var(--lane-1); }
.lanes__curve--2 { stroke: var(--lane-2); }

/* --- Kapanis -------------------------------------------------------------- */

.lanes__end {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
  margin-top: var(--s-4);
}

/* Bulusma noktasi. Halka ayri bir gölge degil, ::after ile ciziliyor. */
.lanes__node {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ink);
}

.lanes__node::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-ink) 9%, transparent);
}

.lanes__end-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  margin-top: 0.4rem;
}

.lanes__end-text {
  color: var(--c-ink-mute);
  max-width: 42ch;
}

.lanes__cta {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
  margin-top: 0.4rem;
  transition: color var(--d-base) var(--e-out);
}

.lanes__cta:hover { color: var(--c-blue); }

/* --- Hareket -------------------------------------------------------------
   Tumu prefers-reduced-motion: no-preference icinde. Giris animasyonlari
   ayrica @supports ile korunuyor: destek yoksa hicbir kural uygulanmaz ve
   ogeler yukaridaki varsayilan (gorunur) halinde kalir.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

  /* Serit surekli akar — yalnizca transform animasyonu */
  .lanes__rail::before {
    animation: laneFlow 2.4s linear infinite;
  }

  @keyframes laneFlow {
    to { transform: translateX(-50%) translateY(-20px); }
  }

  /* --- Giris koreografisi (JS tetikli) ----------------------------------
     `main.js initLanes()` bolum goruntuye girince `.lanes`e once
     `lanes--anim`, sonra `is-in` ekler. GIZLI baslangic durumu yalnizca
     `.lanes--anim` altinda tanimli oldugu icin betik calismazsa bolum tam
     gorunur kalir — icerik hicbir kosulda kaybolmaz.

     GECIS TANIMLARI GIZLI DURUMDA DEGIL, HEDEF DURUMDA (`is-in`) DURUR.
     Sebep olculdu: `lanes--anim` calisma aninda eklendigi icin, gecis gizli
     kuralda tanimliyken sinif dusme aninda opacity 1 -> 0 CSSTransition'i
     basliyor, yani bolum once GORUNURDEN gizliye suzuluyordu. Gecisi hedef
     durumda tanimlayinca gizlenme aninda, acilma animasyonlu olur.

     Sira TEK yerden ayarlanir:
       --lanes-step : kademe araligi (metin satirlari + kapanis satirlari)
       --lanes-text : metin maskesinin acilma suresi
       --lanes-draw : egrilerin cizilme suresi
     Turetilenler:
       --lanes-curve = son metin satiri bitince egriler baslar
       --lanes-end   = egriler bitince kapanis blogu baslar
       --lanes-cta   = zincirin son halkasi (CTA)

     Zincir UC metin satiri varsayar (brand -> title -> text). Sutuna yeni
     bir satir eklenirse hem gecikmesi hem `--lanes-curve` carpani
     guncellenmelidir, yoksa egriler metnin ustune biner.  */

  .lanes--anim {
    --lanes-step: 90ms;
    --lanes-text: 900ms;
    --lanes-draw: 1600ms;
    --lanes-curve: calc(var(--lanes-step) * 2 + var(--lanes-text));
    --lanes-end: calc(var(--lanes-curve) + var(--lanes-draw));
    --lanes-cta: calc(var(--lanes-end) + var(--lanes-step) * 3);
  }

  /* 900px altinda `.lanes__merge` display:none — beklenecek bir cizim yok,
     kapanis blogu metinlerin hemen ardindan gelir. `--lanes-end` turetilmis
     oldugu icin tek degiskeni sifirlamak yetiyor. */
  @media (max-width: 899.98px) {
    .lanes--anim { --lanes-draw: 0ms; }
  }

  /* --- Gizli baslangic (gecissiz) ---------------------------------------- */

  /* Metinler bir PERDE gibi ustten asagi acilir — egrilerin cizilmesiyle
     ayni dil: tek yonlu, yavas, kenari net. Opaklik/kaydirma BILEREK yok;
     ikisi eklenirse maskenin acilan kenari yumusar ve "cizim" hissi kaybolur.
     `clip-path` desteklenmezse kural hic uygulanmaz ve metin gorunur kalir —
     bozulma yonu daima "gorunur" tarafinda. */
  .lanes--anim .lane__brand,
  .lanes--anim .lane__title,
  .lanes--anim .lane__text {
    clip-path: inset(0 0 100% 0);
  }

  .lanes--anim .lanes__rail { opacity: 0; }

  /* pathLength="1" oldugu icin dasharray/offset 1; yol uzunlugu JS ile
     OLCULMEZ (DESIGN.md kurali). */
  .lanes--anim .lanes__curve {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .lanes--anim .lanes__node,
  .lanes--anim .lanes__end-title,
  .lanes--anim .lanes__end-text,
  .lanes--anim .lanes__cta {
    opacity: 0;
    transform: translateY(10px);
  }

  .lanes--anim .lanes__node { transform: scale(0.4); }

  /* --- Acik durum: zincir burada kurulur --------------------------------- */

  /* 1 · Iki sutunun metinleri, maske USTTEN ASAGI acilarak, 90ms kademeyle.
     Iki sutun ES ZAMANLI: Kymco ve Suzuki esit agirlikta, birini one almak
     olmayan bir hiyerarsi ima ederdi; ayrica alttaki birlesme ancak ikisi
     ayni anda gelirse anlam kazaniyor. */
  /* Yumusama BILEREK `--e-in-out`: `--e-out` hareketi one yigiyor (olculdu:
     900ms'in 620. ms'inde maske %96 acilmis oluyor), yani "hizli baslayip
     surunen" bir his veriyordu. Cizim izlenimi icin perdenin SABIT hizda
     inmesi gerekir; simetrik yumusama buna en yakini. */
  .lanes--anim.is-in .lane__brand,
  .lanes--anim.is-in .lane__title,
  .lanes--anim.is-in .lane__text {
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--lanes-text) var(--e-in-out);
  }

  .lanes--anim.is-in .lane__title { transition-delay: var(--lanes-step); }
  .lanes--anim.is-in .lane__text  { transition-delay: calc(var(--lanes-step) * 2); }

  .lanes--anim.is-in .lanes__node,
  .lanes--anim.is-in .lanes__end-title,
  .lanes--anim.is-in .lanes__end-text {
    opacity: 1;
    transform: none;
    transition: opacity var(--d-slow) var(--e-out),
                transform var(--d-slow) var(--e-out);
  }

  .lanes--anim.is-in .lanes__rail {
    opacity: 1;
    transition: opacity var(--d-slow) var(--e-out) var(--lanes-step);
  }

  /* 2 · Egriler cizilir */
  .lanes--anim.is-in .lanes__curve {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--lanes-draw) var(--e-out) var(--lanes-curve);
  }

  /* 3 · Bulusma noktasi ve kapanis — egriler bittikten sonra */
  .lanes--anim.is-in .lanes__node      { transition-delay: var(--lanes-end); }
  .lanes--anim.is-in .lanes__end-title { transition-delay: calc(var(--lanes-end) + var(--lanes-step)); }
  .lanes--anim.is-in .lanes__end-text  { transition-delay: calc(var(--lanes-end) + var(--lanes-step) * 2); }

  /* CTA ayri yazilir: `.lanes__cta` kendi RENK gecisini tasiyor. Ustteki
     grup kurali onu listeden dusururdu; tek degerli bir `transition-delay`
     ise rengi de gecikterip hover'i 1,8 sn sonra baslatirdi. Bu yuzden
     opaklik/transform gecikmeli, renk gecikmesiz olarak burada tanimli. */
  .lanes--anim.is-in .lanes__cta {
    opacity: 1;
    transform: none;
    transition: opacity var(--d-slow) var(--e-out) var(--lanes-cta),
                transform var(--d-slow) var(--e-out) var(--lanes-cta),
                color var(--d-base) var(--e-out);
  }
}