/* ══════════════════════════════════════════════════════════════════════
   ÜCRETSİZ ARAÇLAR ve SÖZLÜK dizinleri

   İkisi de "çok sayıda küçük bağlantı" sorunu: 122 araç ve 423 terim.
   Düz bir liste okunmuyordu; ortak çözüm ARA + GRUPLA + DOĞRUDAN SEÇ.

   Grup başlığındaki renk `--c` ile şablondan gelir (platformun marka
   rengi). Böylece tek bir kural on iki platformu boyar; her platform
   için ayrı sınıf yazılmıyor.
   ══════════════════════════════════════════════════════════════════════ */

.ar-head { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-10); }
.ar-head h1 {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--ink);
}
@media (min-width: 700px) { .ar-head h1 { font-size: var(--fs-4xl); } }
.ar-head p { margin: 0; color: var(--ink-2); max-width: 68ch; }
.ar-head .b-kicker { align-self: flex-start; }

.ar-sec { margin-top: var(--sp-9); }

/* ── Doğrudan seçim kutusu ─────────────────────────────────────────── */

.ar-pick {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  margin-bottom: var(--sp-6);
}
@media (min-width: 800px) { .ar-pick { grid-template-columns: 1.25fr 1fr; gap: var(--sp-9); } }

.ar-pick__lbl {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--sp-4);
}
.ar-pick__row { display: flex; gap: var(--sp-4); position: relative; }

.ar-pick__sel, .ar-pick__in {
  flex: 1;
  min-width: 0;
  height: var(--tap);
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
}
.ar-pick__sel:focus-visible, .ar-pick__in:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ar-pick__in { padding-inline-start: calc(var(--sp-6) + 22px); }
.ar-pick__ico {
  position: absolute;
  inset-inline-start: var(--sp-5);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--mute);
  pointer-events: none;
  display: flex;
}
.ar-pick__ico svg { width: 18px; height: 18px; }

.ar-chips { margin-bottom: 0; }
.ar-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ar-chip__n { color: var(--mute); font-weight: var(--fw-normal); }
.thz-chip.is-active .ar-chip__n { color: inherit; opacity: .7; }

.ar-bos { margin: var(--sp-8) 0 0; color: var(--ink-2); }

/* ── Platform grupları ────────────────────────────────────────────── */

.ar-grp { margin-top: var(--sp-10); }
.ar-grp[hidden] { display: none; }

.ar-grp__hd {
  display: flex;
  align-items: center;
  /* SARILSIN: sağdaki "… Ücretsiz Araçlar" hapı tek satıra sıkışınca
     375 px'te 14 px taşırıyordu (ölçüm: body.scrollWidth 389). */
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  /* Marka rengi zeminde değil, sol şeritte ve yazıda: koyu temada dolu
     renkli bir bant metni okunmaz hâle getiriyordu. */
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, var(--card)), var(--card));
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--c);
  margin-bottom: var(--sp-5);
}
.ar-grp__hd b {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.ar-grp__hd span { margin-inline-start: auto; font-size: var(--fs-sm); color: var(--mute); }

/* Kart yükseklikleri SABİT: başlık kimi kartta bir kimi kartta iki
   satır olduğu için ikon ve açıklama satırları aynı satırda
   hizalanmıyordu (denetim, madde 10). */
/* 230 px'lik izle 1240 px'te BEŞ sütun çıkıyordu: açıklama üç satıra
   sığmayıp kırpılıyor, kartlar kalabalık görünüyordu. 288 px ile aynı
   genişlikte DÖRT sütun oluyor (4×288 + 3×10 = 1182 ≤ 1240). */
.ar-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); grid-auto-rows: 1fr; }

.ar-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  /* Orta iz boşluğu yutar, üçüncü iz "Aracı aç" ipucunu dibe yapıştırır;
     böylece yan yana kartlarda ipuçları aynı hizada durur. */
  grid-template-rows: auto 1fr auto;
  column-gap: var(--sp-5);
  row-gap: var(--sp-3);
  /* ÜSTE HİZALI. `center` başlığı kendi satır izinde ortalıyordu:
     ikon iki satırı kapladığı için iz en az 34 px oluyor, tek satırlık
     bir başlık (15 px) o izin ortasına düşüp 4 px aşağı kayıyordu.
     Ölçüm: iki satırlık başlık 15 px, tek satırlık 19 px — yan yana
     kartlarda başlıklar aynı hizada durmuyordu. İkonlar zaten
     hizalıydı; kayan başlıktı. */
  align-items: start;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ar-card:hover { border-color: var(--c, var(--brand)); transform: translateY(-1px); box-shadow: 0 6px 18px -12px var(--c, var(--brand)); }
.ar-card:focus-visible { outline: 2px solid var(--c, var(--brand)); outline-offset: 2px; }
.ar-card:hover .ar-card__go { color: var(--c, var(--brand)); }
.ar-card:hover .ar-card__go svg { transform: translateX(2px); }
.ar-card[hidden] { display: none; }
.ar-card__i {
  grid-row: span 2;
  /* ÜSTE HİZALI: `align-items: center` ile ikon iki satırlık başlık +
     üç satırlık özetin dikey ortasına düşüyor ve başlıktan kayıyordu.
     Göz ilk satırı arıyor; ikon oraya hizalanır. */
  align-self: start;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  /* GRID + place-items. `inline-flex` bu bağlamda `flow-root`a
     düşüyordu: kutu esnek kutu olmayınca `align-items`/`justify-content`
     hiç işlemiyor ve 18 px'lik glif 34 px'lik karenin SOL ÜST KÖŞESİNE
     yapışıyordu. Ölçüm: glifin kutuya göre üst farkı 0 px, olması
     gereken 8 px. Her kartta olduğu için ızgara boydan boya kayık
     görünüyordu.

     `grid` blokifikasyona takılmıyor; projede `.s-yz__i` ve `.s-git__i`
     zaten bu kalıbı kullanıyor. */
  display: grid;
  /* `place-items` YETMİYOR: sütun izi kutuyu doldurduğu için yatayda
     ortalıyor ama satır izi İÇERİĞE göre boyutlanıyor (18 px) ve
     `align-content` varsayılanı `start` olduğu için iz kutunun
     tepesine yaslanıyordu — glif yatayda ortalı, dikeyde tepede
     kalıyordu. `place-content` izin KENDİSİNİ ortalıyor. */
  place-content: center;
  place-items: center;
  background: color-mix(in srgb, var(--c, var(--brand)) 16%, transparent);
  color: var(--c, var(--brand));
}
/* GRUP DİZİNİ — "Instagram Ücretsiz Araçlar" gibi liste sayfaları
   kartlar arasında değil, başlığın sağ köşesinde durur. */
.ar-grp__all {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 24px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--c, var(--brand));
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-decoration: none;
  white-space: nowrap;
}
.ar-grp__all:hover { border-color: var(--c, var(--brand)); }
.ar-grp__all:focus-visible { outline: 2px solid var(--c, var(--brand)); outline-offset: 2px; }
.ar-grp__all svg { width: 14px; height: 14px; }

@media (max-width: 560px) {
  .ar-grp__all { margin-left: 0; width: 100%; justify-content: center; }
}

.ar-card b {
  font-size: var(--fs-md); line-height: var(--lh-tight);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* `:not(.ar-card__i)` ŞART. Bu kural `.ar-card > span` idi ve ikon
   karesi de doğrudan çocuk bir `<span>`: özgüllüğü (0,1,1) `.ar-card__i`
   (0,1,0) kuralını yeniyordu, dolayısıyla kutunun `display: grid`i
   `-webkit-box`a düşüyor, ızgara bağlamında `flow-root` olarak
   blokifiye oluyor ve `place-content` HİÇ İŞLEMİYORDU. Glifin kutunun
   ortasına gelmesi tesadüftü; ölçüm: `display` hesaplanan değeri
   `flow-root`. Şimdi kural yalnızca açıklamayı vuruyor. */
.ar-card > span:not(.ar-card__i):not(.ar-card__go) {
  font-size: var(--fs-xs); color: var(--mute); line-height: var(--lh-body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.ar-card:not(:has(> span:not(.ar-card__i):not(.ar-card__go))) .ar-card__i { grid-row: auto; }

/* "ARACI AÇ" İPUCU (denetim, madde 09): kartlarda tıklanabilir olduğunu
   gösteren hiçbir işaret yoktu — ne ok, ne düğme, ne vurgu. */
.ar-card__go {
  grid-column: 2;
  align-self: end;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--mute);
  transition: color var(--dur-fast) var(--ease-out);
}
.ar-card__go svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .ar-card, .ar-card__go, .ar-card__go svg { transition: none; }
  .ar-card:hover { transform: none; }
}

/* ── Sözlük ───────────────────────────────────────────────────────── */

.sz-ara { position: relative; display: flex; max-width: 520px; margin-bottom: var(--sp-6); }

.sz-harfler { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sz-harfler a, .sz-harfler span {
  min-width: 32px; height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border: 1px solid var(--line);
}
.sz-harfler a { color: var(--ink); background: var(--card); }
.sz-harfler a:hover { border-color: var(--brand); color: var(--brand); }
/* Karşılığı olmayan harf tıklanabilir görünmesin. */
.sz-harfler span { color: var(--mute); opacity: .4; }

.sz-grp { margin-top: var(--sp-10); scroll-margin-top: 90px; }
.sz-grp[hidden] { display: none; }
.sz-grp__hd { display: flex; align-items: baseline; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.sz-grp__h {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--brand);
  line-height: 1;
}
.sz-grp__n { font-size: var(--fs-sm); color: var(--mute); }
.sz-grp__hd::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.sz-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sz-kart {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.sz-kart:hover { border-color: var(--brand); }
.sz-kart[hidden] { display: none; }
.sz-kart b { font-size: var(--fs-md); }
.sz-kart span { font-size: var(--fs-xs); color: var(--mute); line-height: var(--lh-body); }

/* ══ TÜM HİZMETLER dizini ═════════════════════════════════════════════
   Araç dizinindeki grup düzeninin aynısı; tek fark, kart yerine
   platform başlığı + hizmet bağlantıları. Ortak kuralları (`--c`,
   `.ar-head`, `.ar-sec`) tekrar yazmıyoruz.                            */

.hz-liste { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.hz-plat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  overflow: hidden;
}
.hz-plat__hd {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  color: var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, var(--card)), var(--card));
  border-block-end: 1px solid var(--line);
}
.hz-plat__ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hz-plat__ad b { font-family: var(--font-head); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.hz-plat__ad span { font-size: var(--fs-xs); color: var(--mute); }
.hz-plat__git { margin-inline-start: auto; color: var(--c); display: flex; }
.hz-plat__git svg { width: 18px; height: 18px; }

.hz-plat__list { display: flex; flex-direction: column; padding: var(--sp-4); gap: 1px; }
.hz-plat__list a {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.hz-plat__list a:hover { background: var(--card-2); color: var(--ink); }
.hz-plat__i { color: var(--c); display: inline-flex; flex: none; }
.hz-plat__more { font-weight: var(--fw-bold); color: var(--brand); }

/* Izgara çocuklarının varsayılan `min-width: auto` değeri, içindeki
   `<select>` seçeneklerinin min-content genişliğini kutuya dayatıyor ve
   dar ekranda sütunu viewport'un dışına taşırıyordu. */
.ar-pick > * { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════
   ARAÇ SAYFASI YAN SÜTUNU — onaylı `AracSayfasi.dc.html` karşılığı.
   Önceden düz bağlantı listesiydi; şablonda marka kareli, adet alt
   satırlı, sağa hizalı fiyatlı satırlar var.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Öne çıkan paket kartı ─────────────────────────────────────────── */
.s-yan__one { position: relative; }

/* İndirim rozeti — yalnızca compare_at_price gerçekten yüksekse basılır. */
.s-yan__rozet {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red, #e5484d);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}

.s-yan__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.s-yan__fiyat s { color: var(--mute); font-size: var(--fs-sm); text-decoration-thickness: 1px; }
.s-yan__fiyat > b { color: var(--brand); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.s-yan__kdv { flex-basis: 100%; color: var(--mute); font-size: var(--fs-2xs); }
.s-yan__cta { margin-block-start: var(--sp-5); width: 100%; justify-content: center; }

/* ── Satır listesi ─────────────────────────────────────────────────── */
.s-yan__liste { display: flex; flex-direction: column; }

.s-yan__sat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: color .15s ease;
}
.s-yan__sat:last-child { border-block-end: 0; }
.s-yan__sat:hover { color: var(--brand); }

.s-yan__sol { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.s-yan__ad { display: flex; flex-direction: column; min-width: 0; }
.s-yan__ad b {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-yan__ad > span { color: var(--mute); font-size: var(--fs-2xs); }

.s-yan__p { flex: none; color: var(--brand); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Araç satırları: fiyat yok, sağda chevron var. */
.s-yan__sat--arac .s-yan__ad { flex: 1; }
.s-yan__ok {
  flex: none;
  display: inline-flex;
  color: var(--mute);
  transition: transform .15s ease, color .15s ease;
}
.s-yan__ok svg { width: 16px; height: 16px; }
.s-yan__sat--arac:hover .s-yan__ok { color: var(--brand); transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .s-yan__sat, .s-yan__ok { transition: none; }
}

/* ══ AKIŞ: ŞU AN → ÜCRETSİZLE → PAKETLE ═══════════════════════════════
   Tek kart, tek şerit. Eskiden `.s-gon__fark` ve `.s-tool__once`
   neredeyse ÖZDEŞ iki "Mevcut → İşlem sonrası" şeridi basıyordu; ikisi
   de bu şeride indi. Kart eski `.s-gon` görünümünü aynen sürdürüyor —
   aynı çerçeve, aynı marka tonu; yeni bir yüzey icat edilmedi.        */
.s-akis {
  display: grid; gap: var(--sp-7);
  margin: var(--sp-7) 0;
  padding: var(--sp-8);
  border: 1px solid color-mix(in oklab, var(--brand) 45%, var(--line));
  border-radius: var(--r-card);
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
}

/* Şerit: duraklar eşit paylaşır, aralarına ok girer. `nowrap` bilinçli —
   sarmak yerine dar ekranda dikey akışa geçiyor (aşağıdaki @media). */
.s-akis__serit {
  display: flex; align-items: stretch; gap: var(--sp-4); flex-wrap: nowrap;
}
.s-akis__durak {
  flex: 1 1 0;
  min-width: 0;                       /* taşma kilidi: uzun sayı kutuyu itemez */
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); text-align: center;
}
.s-akis__durak small {
  color: var(--mute); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
/* clamp yalnızca iki TOKEN arasını bağlıyor; yeni ölçü uydurulmuyor. */
.s-akis__durak b {
  font-family: var(--font-head);
  font-size: clamp(var(--fs-lg), 4.6vw, var(--fs-2xl));
  line-height: var(--lh-tight);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.s-akis__durak > span {
  color: var(--mute); font-size: var(--fs-xs); overflow-wrap: anywhere;
}
.s-akis__ok { flex: none; display: grid; place-items: center; color: var(--brand); }
.s-akis__ok svg { width: 18px; height: 18px; }

/* GERÇEKLEŞEN DURAK — bu ekranda marka rengi "oldu / oluyor" demek.
   Sipariş sağlayıcıya açıldı, kimlik elimizde. */
.s-akis__durak--ucretsiz {
  border-color: color-mix(in oklab, var(--brand) 60%, var(--line));
}
.s-akis__durak--ucretsiz b,
.s-akis__durak--ucretsiz > span { color: var(--brand); }

/* KOŞULLU DURAK — kesikli çerçeve, dolgusuz zemin, marka rengi YOK.
   Marka rengi verilseydi satın alınmamış bir artış gerçekleşmiş gibi
   görünürdü. Ayrım tipografik olmak zorunda, yoksa ekran yalan söyler. */
.s-akis__durak--kosullu { border-style: dashed; background: none; }
.s-akis__durak--kosullu b { color: var(--ink-2); }
.s-akis__durak--kosullu em {
  margin-top: var(--sp-2); font-style: normal;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink-2);
}

/* Dar ekran: şerit dikey akar, ok 90° dönüp aşağıyı gösterir.
   Statik dönüş — hareket değil, prefers-reduced-motion'ı ilgilendirmez. */
@media (max-width: 599px) {
  .s-akis__serit { flex-direction: column; align-items: stretch; }
  .s-akis__ok { transform: rotate(90deg); }
}

/* 2. durağın kanıtı: adımlar + ray + sayaç. */
.s-akis__canli { display: grid; gap: var(--sp-6); }

/* Kart içinde TEK hiza. `.s-gon__bas`ın ortalanması tek panelde
   doğruydu; birleşik kartta paketin sol hizasıyla çakışıyordu. */
.s-akis .s-gon__adimlar { justify-content: flex-start; }
.s-akis .s-gon__bas { text-align: start; }

/* Adım etiketi hiç biçimlenmemişti — düz metin çıkıyordu. */
.s-gon__ad { font-size: var(--fs-xs); overflow-wrap: anywhere; }

.s-gon__adimlar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4);
  list-style: none; margin: 0; padding: 0;
}
.s-gon__adim {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--card); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--mute);
  /* Sırayla belirir: `--i` adımın sırası, her biri 260 ms sonra.
     Bir ilerleme simülasyonu değil — üç adım da render anında zaten
     olmuş bitmiş; bu yalnızca okuma sırası. `backwards` şart, yoksa
     gecikme boyunca adım son hâliyle görünür ve animasyon anlamsızlaşır. */
  animation: s-gon-gir 420ms var(--ease-out, ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 260ms);
}
@keyframes s-gon-gir {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

/* Adım şeridi: ilk iki adım bitti, üçüncüsü sürüyor → %66.
   Genişlik SABİT; saniye sayan bir çubuk değil. */
.s-gon__ray { height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; }
/* Genişlik JS'ten geliyor ve SAYACIN ilerlemesini gösteriyor.
   Önce sabit %66 idi ve hiç kımıldamıyordu — ekran "ilerlemiyor"
   görünüyordu. Betik yoksa 0'da kalır, şerit yalnızca boş bir ray olur. */
.s-gon__ray > i {
  display: block; height: 100%; width: 0;
  border-radius: 99px; background: var(--brand);
  transition: width 1s linear;
}
@media (prefers-reduced-motion: reduce) { .s-gon__ray > i { transition: none; } }
.s-gon__adim[data-durum='bitti'] {
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  color: var(--brand);
}
.s-gon__adim[data-durum='suruyor'] {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 16%, var(--card));
  color: var(--ink);
}
.s-gon__adim[data-durum='bekliyor'] { opacity: .6; }
.s-gon__no { display: inline-flex; }
.s-gon__no svg { width: 13px; height: 13px; }
/* Süren adımın ikonu yavaşça nefes alır — ilerleme YERİNE geçmez,
   yalnızca "bekliyor" der. Hareket kısıtlıysa hiç oynamaz. */
.s-gon__adim[data-durum='suruyor'] .s-gon__no { animation: s-gon-nefes 1.8s ease-in-out infinite; }
@keyframes s-gon-nefes { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  /* Hareket kısıtlıysa hiçbir şey oynamaz ve hepsi ANINDA görünür:
     `animation: none` gecikmeyi de iptal eder, kimse boş ekran görmez. */
  .s-gon__adim, .s-gon__ray > i, .s-gon__adim[data-durum='suruyor'] .s-gon__no { animation: none; }
}

.s-gon__bas strong {
  display: block; font-family: var(--font-head);
  font-size: var(--fs-lg); color: var(--ink); margin-bottom: var(--sp-4);
}
.s-gon__bas p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.s-gon__bas p b { color: var(--brand); }
.s-gon__not { display: block; margin-top: var(--sp-5); color: var(--mute); font-size: var(--fs-xs); }


/* ── BAŞLIK, SAYAÇ, ALT ÇAĞRI ─────────────────────────────────────── */
.s-gon__bas { text-align: center; }
.s-gon__sayac { margin: var(--sp-4) 0 0; color: var(--mute); font-size: var(--fs-sm); }
/* Sayaç `data-gon-sayac` ile kuruluyor ve süre dolunca `/arac-durum/`
   soruluyor — boşa saymıyor. Betik yoksa satır sabit kalır. */
.s-gon__sayac b {
  font-family: var(--font-head); font-size: var(--fs-xl);
  color: var(--brand); font-variant-numeric: tabular-nums;
  margin-inline: var(--sp-2);
}
.s-gon__sayac[hidden] { display: none; }
.s-gon__durum { margin: var(--sp-5) 0 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.s-gon__durum b { color: var(--brand); }



/* ── "Nasıl çalışır" adımları ──────────────────────────────────────────
   Bileşen `hizmet-paket.css`teki `.s-nasil__adimlar` — hizmet sayfasında
   aynı iş için zaten kullanılıyor ve `base.php` o dosyayı her sayfada
   yüklüyor. Burada YENİ bir bileşen tanımlanmıyor; tek fark sütun sayısı.

   Kaynak kural 760px'te İKİ sütuna geçiyor (dört adımlık hizmet listesi
   için doğru). Araç sayfasında adım ÜÇ, o yüzden 700px'ten itibaren üç
   sütun. Bu dosya `hizmet-paket.css`ten SONRA yükleniyor, aynı
   özgüllükte olduğu için bu kural kazanıyor. */
@media (min-width: 700px) {
  .s-tool__adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}