/*! ESHIK · Scroll Light 1.0.0 — yapı (Motion System V1.0 · P3, 2026-10-14). Tipografi bileşene ait değildir (demo.html).
 * Ayarlanabilir: --sl-s (çizgi), --sl-d (düğüm), --sl-gx (düğüm–metin), --sl-gap-d / --sl-gap-m (duraklar arası = scroll mesafesi),
 * --sl-ink (eşik ve boş düğüm), --sl-bg (boş düğüm içi), --sl-saffron / --sl-fill (motor seçeneklerden atar).
 * Mobil kırılım (max-width: 599.98px) (kap genişliği): motorun geometry.mobileBelow değeriyle birlikte değiştirilir. */
.sl-wrap { container-type: inline-size; }
.sl, .sl * { box-sizing: border-box; }
.sl { --sl-s: 3px; --sl-d: 13px; --sl-gx: 18px; --sl-gap: var(--sl-gap-d, 44vh); position: relative; }
.sl-path { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.sl-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sl-base { stroke: var(--sl-ink, currentColor); }
.sl-trace { stroke: var(--sl-saffron, #E1A623); display: none; }
.sl-tip { display: none; }
.sl-stops { list-style: none; margin: 0; padding: 96px 0; }
.sl-stop { position: relative; z-index: 1; width: 50%; padding-right: 32px; }
.sl-stop:nth-child(even) { margin-left: 50%; }
.sl-stop + .sl-stop { margin-top: var(--sl-gap); }
.sl-meta { margin: 0 0 6px; padding-left: calc(var(--sl-d) + var(--sl-gx)); min-height: 16px; white-space: nowrap; }
.sl-row { display: flex; align-items: center; gap: var(--sl-gx); }
.sl-node { flex: none; width: var(--sl-d); height: var(--sl-d); border-radius: 50%; border: var(--sl-s) solid var(--sl-ink, currentColor); background: var(--sl-bg, transparent); }
.sl-desc { padding-left: calc(var(--sl-d) + var(--sl-gx)); }
/* durum: biçim (dolu / halka) + etiket + aria-current; renk tek başına bilgi taşımaz. Geçiş animasyonu yok. */
.sl-stop[data-state="done"] .sl-node, .sl-stop[data-state="current"] .sl-node { background: var(--sl-fill, var(--sl-saffron, #E1A623)); border-color: var(--sl-fill, var(--sl-saffron, #E1A623)); }
@container (max-width: 599.98px) {
  .sl { --sl-s: 2px; --sl-d: 9px; --sl-gx: 16px; --sl-gap: var(--sl-gap-m, 38vh); }
  .sl-stops { padding: 64px 0; }
  .sl-stop, .sl-stop:nth-child(even) { width: auto; margin-left: 0; padding-right: 0; }
}