.cc_lz85qzy3_LWwP181Ysv .timeback {
  width: 100%;
  padding: var(--space-3xl) 0;
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  /* Basamaklar arası boşluk. Konteynerin `gap`'i DEĞİL — sebebi aşağıda,
     `.timeback__path` kuralında. */
  --adim-bosluk: 0.75rem;
}

/* Bu bölüm ortalanmış: sayfadaki tek "duraksama" anı. Etrafındaki bölümler
   sola yaslı akarken burada göz merkeze gelir ve cümle nefes alır. */
.cc_lz85qzy3_LWwP181Ysv .timeback__container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cc_lz85qzy3_LWwP181Ysv .timeback__eyebrow {
  margin: 0 0 var(--space-md);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.cc_lz85qzy3_LWwP181Ysv .timeback__statement {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════
   Silinen basamaklar

   Basamaklar `max-width` ile kapanıyor, `display:none` ile değil:
   kapanış animasyonlanabilir olsun ve sıra kapanırken kalan rozet merkeze
   doğru kaysın. Kaymanın kendisi mesaj — arada duran şeyler kalkınca
   hedef yaklaşıyor.
   ═══════════════════════════════════════════════════════════════ */

.cc_lz85qzy3_LWwP181Ysv .timeback__path {
  display: flex;
  align-items: center;
  justify-content: center;
  /* SATIR SARAR. Kusur: bes rozet birden acikken satir sarmiyordu (flex
     varsayilani nowrap) ve dar ekranda kabi tasiyordu. Sonucu yalnizca
     'biraz tasma' degildi: belge viewport'tan genis olunca mobil tarayici
     YERLESIM VIEWPORT'UNU genisletiyor ve position:fixed ogeler gorsel
     viewport'a degil o genislemis kutuya gore konumlaniyor -- sag alttaki
     sohbet balonu ve cerez seridi ekranin disina kayiyordu. Rozetler
     kapanip tasma bitince ikisi de geri geliyordu. Yani bu bolumun kendi
     animasyonu sayfanin sabit ogelerini oynatiyordu.

     column-gap YOK, eskisi gibi: bosluk basamagin kendi margin-right'i ve
     keyframe icinde sifira iniyor. row-gap guvenli, yalnizca satir
     gercekten sardiginda devreye giriyor. */
  flex-wrap: wrap;
  row-gap: 0.5rem;
  /* GAP YOK — ORTALAMA BOZULUYORDU.
     `gap` öğeler sıfır genişliğe inse bile aralarında durmaya devam ediyor.
     Dört basamak silindiğinde geriye dört boşluk kalıyor ve kalan rozet
     merkezden ~3 rem sağa kayıyordu. Boşluk artık basamağın kendi
     `margin-right`'ı ve keyframe içinde o da sıfıra iniyor; basamaklar
     kapandığında rozet gerçekten ortada kalıyor. */
  margin: var(--space-xl) 0 0;
}

.cc_lz85qzy3_LWwP181Ysv .timeback__step, .cc_lz85qzy3_LWwP181Ysv .timeback__destination {
  display: inline-flex;
  /* Sarma tek basina yetmiyor: TEK bir rozet bile kaptan genisse (uzun
     metin, dar telefon) yine tasar. Keyframe'deki max-width: 12rem sabit;
     burada ayrica kabin genisligiyle sinirlaniyor. */
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Basamaklar VARSAYILAN OLARAK YOK. Animasyon çalışmazsa hiç belirmezler ve
   bölüm doğru mesajı verir. Yer kaplamamaları için genişlik de sıfır. */
.cc_lz85qzy3_LWwP181Ysv .timeback__step {
  overflow: hidden;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  margin-right: 0;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* KALAN ROZET DOLU ALTIN — SİLİNENLERDEN AYRI CİNSTEN.
   Silinen dört öğe (randevu, yol, bekleme, SEANS) hepsi birer MALİYET.
   Seans da artık onların arasında: kliniğe gidilmediği için o da ortadan
   kalkan şeylerden biri, ve bunu söylemenin en net yolu onu da aynı soluk
   çerçeveyle çizip silmek.

   Geriye kalan şey onlarla aynı cinsten değil; onların yokluğunda ortaya
   çıkan şey. Bu yüzden tek dolu rozet o: biçim farkı "bu, diğerlerinin
   yerine geçmiyor — onlar gidince kalan" diyor. */
.cc_lz85qzy3_LWwP181Ysv .timeback__destination {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.cc_lz85qzy3_LWwP181Ysv .timeback__support {
  margin: var(--space-lg) 0 0;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .cc_lz85qzy3_LWwP181Ysv .timeback {
    --adim-bosluk: 1rem;
  }
}

/* ─── Basamaklar belirir, sonra silinir ───────────────────────
   Tek keyframe iki işi yapıyor: önce açılıp görünür oluyor, sonra
   kapanıp yok oluyor. İki ayrı animasyona bölmek gecikmelerin
   birbirine kaymasına açık; tek eğri faz kaymasını imkânsız kılar.

   `forwards` yok: keyframe zaten sıfırda bitiyor, bitişte de öyle
   kalıyor. */

@keyframes cc_lz85qzy3_LWwP181Ysv_timeback-step {
  0% {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    opacity: 0;
  }
  8%,
  30% {
    max-width: 12rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: var(--adim-bosluk);
    opacity: 1;
  }
  45%,
  100% {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* `.is-visible` KOŞULU KALDIRILDI.
     Döngü tek seferlik olsaydı animasyonu bölüm ekrana girene kadar
     bekletmenin anlamı vardı. Sürekli döndüğü için o koşul artık yalnızca
     bir kırılma noktası: `is-visible` sınıfını IntersectionObserver
     ekliyor ve tetiklenmediği her durumda (JS geç gelir, gözlemci
     tetiklenmez, bölüm hiç gözlemlenmez) hareket sonsuza dek durur.
     Koşulsuz döngüde ziyaretçi bölüme ne zaman varırsa varsın en geç
     6 saniye içinde bir tur görür. */
  /* SÜREKLİ OYNAR. Tek seferlikken bölüme ikinci kez bakan ya da ekranı
     biraz geç kaydıran kişi hareketi hiç görmüyordu; geriye üç sabit
     kelime kalıyordu ve o hâliyle bölüm bir şey anlatmıyordu.

     Döngü 6 sn: basamaklar ~0,5 sn'de belirir, ~1,8 sn durur, ~2,7 sn'de
     silinir; kalan ~3,3 sn boyunca yalnızca kalan rozet durur.

     YORUMLAR KURALIN İÇİNDE DEĞİL, ÜSTÜNDE — sebebi ölçüldü: süslü
     parantezin hemen ardında yorum varken derleme `@keyframes` adını
     kapsıyor ama bu kuraldaki referansı yeniden yazmıyor; kural var
     olmayan bir animasyonu çağırıyor ve hiçbir şey oynamıyor. Aynı
     dosyada yorum dışarı alınınca referans doğru kapsanıyor. */
  .cc_lz85qzy3_LWwP181Ysv .timeback__step {
    animation-name: cc_lz85qzy3_LWwP181Ysv_timeback-step;
    animation-duration: 6000ms;
    animation-timing-function: var(--ease-out);
    animation-iteration-count: infinite;
    /* Basamaklar sırayla siliniyor: üçü aynı anda kaybolursa hareket
       "bir şey kayboldu" olur, "yol kısaldı" olmaz. Dört basamak için
       en büyük gecikme 780 ms; 6 sn'lik turun içinde rahat kalıyor. Gecikme her turda
       korunur, yani sıra bozulmadan tekrarlanır. */
    animation-delay: var(--step-delay, 0ms);
  }
}