/* Üç adım şeridi: tek dikiş hattı, üç durak, gezen iğne.

   Önceki hâli üç büyük daire ikon + başlık + açıklama idi. Doğru
   çalışıyordu ama internetin en çok kopyalanan kalıbıydı; markaya ait
   hiçbir şey taşımıyordu.

   Bu hâlde şerit hero'nun diliyle konuşuyor: sayfa boyunca giden iplik
   burada bir kez daha görünüyor. Fare bir durağa gelince İĞNE oraya
   kayıyor, arkasında bıraktığı hat DOLU (dikilmiş), önündeki kısım
   KESİK (henüz dikilmemiş) kalıyor. Hareket süs değil: "bu adımı
   seçersen buraya kadar dikilir" diyor.

   Yükseklik bilerek düşük — banner değil, şerit. Üç büyük daire yerine
   hattın üstünde küçük duraklar var.                                    */

.ftk-akis{
  --ftk-sari:#F0B429; --ftk-ink:#16150F; --ftk-soft:#5B564A;
  --ftk-line:#E6E0D3; --ftk-zemin:#FAF8F3; --ftk-kart:#fff;
  --ftk-wa:#1FA855;
  font-family:inherit;
}
.ftk-akis--koyu{
  --ftk-ink:#F2EDE3; --ftk-soft:#9A9384; --ftk-line:#2C2822;
  --ftk-zemin:#100E0C; --ftk-kart:#17140F;
}

.ftk-akis-ic{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--ftk-adim,3), minmax(0,1fr));
  gap:0;
  background:var(--ftk-kart);
  border:1px solid var(--ftk-line);
  border-radius:18px;
  --ftk-kap-pad:clamp(14px,2vw,26px);
  --ftk-adim-pad:clamp(12px,1.6vw,22px);
  padding:30px var(--ftk-kap-pad) 26px;
  box-shadow:0 1px 2px rgba(22,21,15,.04), 0 22px 44px -30px rgba(22,21,15,.42);
  /* İğnenin durağı: fare gelince değişiyor, varsayılan ilk durak. */
  --ftk-yer:1;
}

/* ---- Dikiş hattı --------------------------------------------------------
   İki hat üst üste: altta kesik olan (henüz dikilmemiş), üstte dolu olan
   (dikilmiş). Dolu hattın genişliği iğnenin bulunduğu durağa kadar. */

/* Hat, ızgarayla birebir aynı genişlikte: sol/sağ kenarı kabın iç
   boşluğu. Böylece "i. sütunun başlangıcı" yüzde olarak hesaplanabiliyor
   ve durakların gerçek yerine oturuyor. */
.ftk-akis-dikis{
  position:absolute; left:var(--ftk-kap-pad); right:var(--ftk-kap-pad);
  top:54px; height:2px; pointer-events:none;   /* 30 üst boşluk + 24 yarıçap */
}
/* Durak merkezi: sütun başlangıcı + adımın iç boşluğu + düğümün yarısı.
   Önce sütun ORTASINA göre hesaplıyordum; duraklar solda olduğu için
   iğne hep sağa kaçık duruyordu. */
.ftk-akis-dikis{
  --ftk-durak:calc((var(--ftk-yer) - 1) / var(--ftk-adim,3) * 100%
                   + var(--ftk-adim-pad) + 24px);   /* 48/2: çerçeve dahil */
}
.ftk-akis-iz{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    var(--ftk-sari) 0 8px, transparent 8px 16px);
  opacity:.45;
}
.ftk-akis-dolu{
  position:absolute; left:0; top:0; height:100%;
  width:var(--ftk-durak);
  background:var(--ftk-sari);
  transition:width .42s cubic-bezier(.22,1,.28,1);
}

/* İğne: hattın üstünde, durağa kayıyor. Hero'daki iğnenin aynısı,
   yalnızca yatık. */
/* İĞNE YOK — denendi, kaldırıldı.

   Şeridin ölçeğinde (60 piksel boy) iğne silüeti okunmuyor: gövdesi tek
   renk bir çubuğa dönüşüyor, gözü kayboluyor ve yakından bakınca koyu bir
   leke gibi duruyor. Büyütmek de çare değil — şerit alçak olsun diye
   tasarlandı, oraya 100 pikselllik bir iğne sığmıyor.

   Anlamı taşıyan kısım zaten iğne değil, HATTIN KENDİSİ: fare bir durağa
   gelince hat oraya kadar dikiliyor (dolu), gerisi kesik kalıyor. Onu
   koruyup fazlalığı attık.                                              */

/* Fare hangi duraktaysa iğne oraya. :has desteklenmeyen tarayıcıda iğne
   ilk durakta duruyor; şerit yine doğru görünüyor. */
.ftk-akis-ic:has(.ftk-adim:nth-of-type(1):hover){ --ftk-yer:1; }
.ftk-akis-ic:has(.ftk-adim:nth-of-type(2):hover){ --ftk-yer:2; }
.ftk-akis-ic:has(.ftk-adim:nth-of-type(3):hover){ --ftk-yer:3; }
.ftk-akis-ic:has(.ftk-adim:nth-of-type(1):focus-visible){ --ftk-yer:1; }
.ftk-akis-ic:has(.ftk-adim:nth-of-type(2):focus-visible){ --ftk-yer:2; }
.ftk-akis-ic:has(.ftk-adim:nth-of-type(3):focus-visible){ --ftk-yer:3; }

/* ---- Duraklar ---------------------------------------------------------- */

.ftk-adim{
  position:relative; z-index:1;
  display:block; padding:0 var(--ftk-adim-pad);
  text-decoration:none; color:inherit;
}

/* Durak işareti: hattın üstünde küçük bir düğüm. 52 piksellik daireler
   şeridi bir "özellik kutusu" gibi gösteriyordu. */
.ftk-adim-dugum{
  position:relative;
  width:44px; height:44px; margin:0 0 16px; border-radius:50%;
  background:var(--ftk-kart); border:2px solid var(--ftk-sari);
  display:grid; place-items:center; color:var(--ftk-ink);
  transition:background-color .2s, color .2s, transform .2s;
}
.ftk-adim-dugum svg{ width:20px; height:20px; }
.ftk-adim--wa .ftk-adim-dugum{ border-color:var(--ftk-wa); color:var(--ftk-wa); }

.ftk-adim-yazi{ display:block; min-width:0; }
.ftk-adim-yazi strong{
  display:block; font-size:15px; font-weight:600; color:var(--ftk-ink);
  letter-spacing:-.015em; margin-bottom:4px;
}
.ftk-adim-alt{
  display:block; font-size:13px; line-height:1.5; color:var(--ftk-soft);
  max-width:28ch;
}
.ftk-adim-eylem{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-size:12.5px; font-weight:600; color:var(--ftk-ink);
  border-bottom:1.5px solid var(--ftk-sari); padding-bottom:2px;
}
.ftk-adim--wa .ftk-adim-eylem{ border-bottom-color:var(--ftk-wa); }
.ftk-adim-eylem svg{ transition:transform .18s cubic-bezier(.23,1,.32,1); }

@media (hover:hover) and (pointer:fine){
  .ftk-adim:hover .ftk-adim-dugum{
    background:var(--ftk-sari); color:#14110B; transform:scale(1.06);
  }
  .ftk-adim--wa:hover .ftk-adim-dugum{ background:var(--ftk-wa); color:#fff; }
  .ftk-adim:hover .ftk-adim-eylem svg{ transform:translateX(4px); }
}
.ftk-adim:focus-visible{ outline:2px solid var(--ftk-sari); outline-offset:6px; border-radius:12px; }

/* ---- Dar ekran: hat dikey, iğne yok -------------------------------------
   Telefonda duraklar alt alta; gezen iğne orada anlamını yitiriyor
   (fare yok) ve yer kaplıyor. Hat dikey kesik olarak kalıyor. */
@media (max-width:900px){
  .ftk-akis-ic{ grid-template-columns:1fr; padding:24px 18px; gap:22px; }
  .ftk-akis-dikis{
    left:calc(18px + 24px - 1px); right:auto; top:44px; bottom:44px;
    width:2px; height:auto;
  }
  .ftk-akis-iz{
    background:repeating-linear-gradient(180deg,
      var(--ftk-sari) 0 8px, transparent 8px 16px);
  }
  .ftk-akis-dolu{ display:none; }
  .ftk-adim{ padding:0 0 0 68px; }
  .ftk-adim-dugum{ position:absolute; left:0; top:0; margin:0; }
  .ftk-adim-alt{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .ftk-akis-dolu,
  .ftk-adim-dugum, .ftk-adim-eylem svg{ transition:none; }
}