/* ESHIK · W07 · Systems sayfası — "Scroll Flow Experiment" taslağının tasarım dili (02-WEB/EXPLORATION; kullanıcı kararı, 02.11.2026).
   Süreç yolu onaylı P3 Scroll Light 1.0.0 (03-ASSETS, salt okuma) varsayılanlarıyla: geçilen yol safran, uç parlak; burada yalnız CSS değişkenleri.
   Zeytin dünya: başlık, açıklama ve dal uçlarındaki bilgi kireç ≥ 24 px; numara kısa tanıtıcı etiket (zeytinde kalabilir).
   Düğüm açıklamanın altında; bilgi düğümden çıkan üç dalın ucunda (04.11.2026). Dallar ana yolla aynı biçimde (P3 kalınlığı, köşesi, safran iz, parlak uç) ve aynı
   kaydırmayla çizilir; önlerinde soluk iz yoktur. Dal çizimi ve bilginin belirmesi assets/systems.js'te, yalnız kaydırmanın fonksiyonu (zamanlı geçiş yok).
   Düğüm durumu biçimle de okunur (renk tek başına bilgi taşımaz): sırada boş halka · şu an safran + grafit nokta + dış halka · tamamlandı safran + grafit onay;
   durum metni yalnız ekran okuyucu için (P3 .sl-state, görünmez). JS yoksa ya da azaltılmış harekette bütün bilgi açık. */

/* açılış: etiket, başlık, tek cümle (site.css .s-ust.cumle); yol açılışın altından başlar */
.sys-ust { padding-bottom: 0; }

/* süreç: P3 · zeytin üstünde; önündeki yol soluk kireç iz */
.sys-akis { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.sys .sl { --sl-ink: var(--eshik-chalk); --sl-bg: var(--eshik-olive); --sl-d: 21px; --sl-s: 3px; --sl-gx: 22px; }
.sys .sl-stops { padding: 120px 0 150px; }
.sys .sl-base { stroke-opacity: .32; }
.sys .sl-node { position: relative; display: block; }
.sys .sl-stop[data-state="current"] .sl-node { box-shadow: 0 0 0 5px var(--eshik-olive), 0 0 0 7px var(--eshik-chalk); }
.sys .sl-stop[data-state="current"] .sl-node::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--eshik-graphite); }
.sys .sl-stop[data-state="done"] .sl-node::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 9px; border: solid var(--eshik-graphite); border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -62%) rotate(45deg); }
/* numara: adım / toplam, aralarında kısa eşik çizgisi (durum metni yok) */
.sys .sl-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--eshik-chalk); }
.sys .sl-num { font: 400 15px/1 var(--f-label); letter-spacing: .14em; }
.sys .sys-sayac { display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--f-label); letter-spacing: .14em; }
.sys .sys-sayac::before { content: ""; width: 34px; height: 2px; background: currentColor; }
.sys .sl-title { margin: 0; padding-left: calc(var(--sl-d) + var(--sl-gx)); font: 600 clamp(30px, 3vw, 42px)/1.1 var(--f-display); letter-spacing: -.005em; color: var(--eshik-chalk); }
.sys .sl-desc > p { margin: 14px 0 0; max-width: 26ch; font: 400 24px/1.4 var(--f-text); color: var(--eshik-chalk); }   /* zeytin üstünde ≥ 24 px */
/* düğüm satırı: açıklamanın altında; dallar buradan çıkar */
.sys-dugum { position: relative; margin-top: 30px; }

/* bilgi dalları: dal uçlarında kireç metin (≥ 24 px); dal çizgileri systems.js (SVG, durağın içinde, metnin altında) */
.sys-dal { list-style: none; margin: 22px 0 0; padding: 0 0 0 calc(var(--sl-d) + var(--sl-gx) + 30px); display: grid; gap: 16px; justify-items: start; }
.sys-dal li { font: 400 24px/1.3 var(--f-text); color: var(--eshik-chalk); }
.sys-dal .dal-sayi { margin-right: 4px; }   /* bütün dallar aynı ağırlıkta (kullanıcı kararı 09.11.2026); seçilen dal yalnız ekran okuyucu metniyle belirtilir */
.sys-dal-cizgi { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.sys-dal-cizgi path { fill: none; stroke-width: var(--sl-s); stroke-linecap: round; stroke-linejoin: round; display: none; }
.sys-dal-cizgi .sys-iz { stroke: var(--sl-saffron, #E1A623); }
/* geniş kap: bilgi yolun karşı yarısında, ortadaki dal düğüm hizasında (--kay: systems.js) */
@container (min-width: 600px) {
  .sys .sl-stops { padding: calc(var(--sl-gap) / 2 + 40px) 0 calc(var(--sl-gap) / 2 + 60px); }   /* düğüm hizası (systems.js ortala()): yolun başı ve sonu kabın içinde */
  .sys .sl-stop .sys-dal { position: absolute; top: calc(var(--sl-d) / 2); left: calc(100% + 32px + 56px); width: min(400px, calc(100% - 20px)); margin: 0; padding: 0; gap: 26px;
    transform: translateY(calc(-50% + var(--kay, 0px))); }
  .sys .sl-stop:nth-child(even) .sys-dal { left: auto; right: calc(100% + var(--sl-d) + var(--sl-gx) + 56px); justify-items: end; text-align: right; }
}
/* JS ile: dal ucundaki bilgi dal ona ulaşınca belirir (saydamlık systems.js'ten, kaydırmaya bağlı) */
.sys .sl.sl-ready.sys-dallar .sys-dal li { opacity: 0; }

/* dar kap (P3 mobil geometrisi: tek dikey omurga, kap genişliği < 600 px): dallar düğümden sağa, alt alta */
@container (max-width: 599.98px) {
  .sys .sl { --sl-d: 17px; --sl-s: 2px; --sl-gx: 16px; }
  .sys .sl-stops { padding: 80px 0 110px; }
  .sys .sl-stop[data-state="current"] .sl-node { box-shadow: 0 0 0 4px var(--eshik-olive), 0 0 0 6px var(--eshik-chalk); }
  .sys .sl-stop[data-state="current"] .sl-node::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
  .sys .sl-stop[data-state="done"] .sl-node::after { width: 4px; height: 7px; border-width: 0 2px 2px 0; }
  .sys .sl-title { font-size: 30px; }
  .sys-dugum { margin-top: 24px; }
}

/* kapanış: site.css .s-son */

/* azaltılmış hareket: bütün bilgi açık; dallar ulaşılan durakta tam çizili, parlak uç yok (P3 izi gibi hareketsiz) */
@media (prefers-reduced-motion: reduce) { .sys .sl .sys-dal li { opacity: 1 !important; } }
@media (forced-colors: active) { .sys-dal-cizgi path { stroke: CanvasText !important; } .sys .sys-sayac::before { background: CanvasText; } }