/* Siper Labs — ürün demo animasyonları (tanıtım sunumundan taşındı)
   Kapsam: .sl-demo. Keyframe adları sd- ile başlar (style.css ile çakışmaz).
   Oynatma: demos.js .playing ekler; reduced-motion'da .static (son kare). */

.sl-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.sl-demo {
  --acc: var(--brand-primary);
  --acc-2: var(--brand-secondary);
  --acc-wash: rgba(21, 94, 117, 0.08);
  --acc-wash-2: rgba(21, 94, 117, 0.16);
  --acc-line: rgba(21, 94, 117, 0.32);
  --bad: #c0453c;
  --bad-wash: rgba(192, 69, 60, 0.10);
  --blue: #6FAEDD;
  --blue-ink: #2F5C82;
  --warn-ink: #9a5a15;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  display: flex; flex-direction: column; min-width: 0;
}
.sl-demo *, .sl-demo *::before, .sl-demo *::after { box-sizing: border-box; }

.sl-demo.flow {
  --acc: var(--flow-accent);
  --acc-2: var(--flow-accent-hover);
  --acc-wash: var(--flow-glow);
  --acc-wash-2: var(--flow-glow-hi);
  --acc-line: var(--flow-border-hover);
}
.sl-demo.guard {
  --acc: var(--guard-accent);
  --acc-2: var(--guard-accent-hover);
  --acc-wash: var(--guard-glow);
  --acc-wash-2: var(--guard-glow-hi);
  --acc-line: var(--guard-border-hover);
}

/* ---------- ortak kart parçaları ---------- */
.sl-demo .demo-title {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.sl-demo.v-hit .demo-title { color: var(--blue-ink); }

.sl-demo .browser-mock {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 18px 40px rgba(21, 23, 30, .06);
}
.sl-demo .bm-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.sl-demo .bm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-hover); }
.sl-demo .bm-url {
  margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px;
}
.sl-demo .bm-body { padding: 22px 20px 26px; min-height: 210px; display: flex; flex-direction: column; gap: 13px; }

.sl-demo .chat-bubble {
  max-width: 92%; border-radius: 14px; padding: 12px 16px; font-size: 15px; line-height: 1.45; opacity: 0;
  color: var(--text-primary);
}
.sl-demo .chat-bubble.user { align-self: flex-end; background: var(--acc-wash-2); border-bottom-right-radius: 4px; }
.sl-demo .chat-bubble.ai { align-self: flex-start; background: var(--bg-subtle); border-bottom-left-radius: 4px; }
.sl-demo .mcp-call { font-family: var(--font-mono); font-size: 13.5px; word-break: break-word; }
.sl-demo .bm-meta { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

/* ---------- statik son kare (reduced-motion / IO yok) ---------- */
.sl-demo.static .chat-bubble,
.sl-demo.static .stage-strip,
.sl-demo.static .demo-flag,
.sl-demo.static .g-verdict,
.sl-demo.static .bm-meta.note,
.sl-demo.static .tool-desc,
.sl-demo.static .td-inject,
.sl-demo.static .turn,
.sl-demo.static .hitl-panel { opacity: 1; transform: none; }
.sl-demo.static .pii-real { opacity: 0; }
.sl-demo.static .pii-mask { opacity: 1; transform: none; }
.sl-demo.static .stage-chip { opacity: 1; background: var(--acc-wash); color: var(--acc); border-color: var(--acc-line); }
.sl-demo.static .stage-chip.s4.stop,
.sl-demo.static .stage-chip.solo { background: var(--bad); color: #fff; border-color: var(--bad); }

/* ---------- balon girişi ---------- */
.sl-demo.playing .chat-bubble.user { animation: sd-bubbleIn 6.4s ease-in-out infinite; }
@keyframes sd-bubbleIn {
  0%, 4%   { opacity: 0; transform: translateY(10px); }
  12%, 88% { opacity: 1; transform: translateY(0); }
  96%,100% { opacity: 0; transform: translateY(-6px); }
}

/* ---------- PII: gerçek metin ↔ maske (aynı grid hücresinde çapraz solar) ---------- */
.sl-demo .pii { position: relative; display: inline-grid; vertical-align: middle; }
.sl-demo .pii-real, .sl-demo .pii-mask { grid-area: 1 / 1; align-self: center; }
.sl-demo .pii-real { opacity: 1; border-radius: 4px; outline: 2px dashed transparent; outline-offset: 3px; }
.sl-demo .pii-mask {
  opacity: 0; transform: scale(.7);
  background: var(--text-primary); color: #fff; border-radius: 5px; padding: 1px 7px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.sl-demo .pii-tag {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 7px;
  transform: translate(-50%, 4px) scale(.7); white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .6px;
  color: var(--acc); background: var(--acc-wash); border: 1px solid var(--acc-line);
  border-radius: 999px; padding: 3px 9px; opacity: 0;
}
/* regex ile yakalananlar (sabit format) NER'den (bağlamsal) farklı renkte */
.sl-demo .pii-tag.regex { color: var(--warn-ink); background: rgba(201, 121, 31, .12); border-color: rgba(154, 90, 21, .35); }

.sl-demo.playing .pii-real { animation: sd-piiReal 6.4s ease-in-out infinite, sd-piiOutline 6.4s ease-in-out infinite; }
.sl-demo.playing .pii-mask { animation: sd-piiMask 6.4s ease-in-out infinite; }
.sl-demo.playing .pii-tag  { animation: sd-piiTag 6.4s ease-in-out infinite; }
.sl-demo.playing .pii-tag.regex ~ .pii-real { animation: sd-piiReal 6.4s ease-in-out infinite, sd-piiOutlineRegex 6.4s ease-in-out infinite; }
@keyframes sd-piiReal { 0%,20% { opacity: 1; } 26%,100% { opacity: 0; } }
@keyframes sd-piiOutline {
  0%,13%   { outline-color: transparent; }
  16%,20%  { outline-color: var(--acc-line); }
  26%,100% { outline-color: transparent; }
}
@keyframes sd-piiOutlineRegex {
  0%,13%   { outline-color: transparent; }
  16%,20%  { outline-color: rgba(154, 90, 21, .5); }
  26%,100% { outline-color: transparent; }
}
@keyframes sd-piiTag {
  0%,13%   { opacity: 0; transform: translate(-50%, 4px) scale(.7); }
  17%,22%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  27%,100% { opacity: 0; transform: translate(-50%, -4px) scale(.85); }
}
@keyframes sd-piiMask {
  0%,20%   { opacity: 0; transform: scale(.7); }
  26%,84%  { opacity: 1; transform: scale(1); }
  92%,100% { opacity: 0; transform: scale(.7); }
}

/* ---------- bayrak (maskelendi / HIT) ---------- */
.sl-demo .demo-flag {
  align-self: flex-start; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 8px 16px; opacity: 0; transform: scale(.7);
}
.sl-demo .demo-flag.is-mask { color: var(--acc); background: var(--acc-wash); border: 1px solid var(--acc-line); }
.sl-demo .demo-flag.is-hit  { color: var(--blue-ink); background: rgba(111, 174, 221, .14); border: 1px solid rgba(111, 174, 221, .4); }
.sl-demo.playing .demo-flag.is-mask { animation: sd-flagPop 6.4s ease-in-out infinite; }
.sl-demo.playing .demo-flag.is-hit  { animation: sd-flagPopHit 6.4s ease-in-out infinite; }
@keyframes sd-flagPop    { 0%,26% { opacity:0; transform:scale(.6); } 32%,86% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(.6); } }
@keyframes sd-flagPopHit { 0%,18% { opacity:0; transform:scale(.6); } 24%,86% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(.6); } }

/* ---------- AI yanıtı ---------- */
.sl-demo.v-mask.playing .chat-bubble.ai { animation: sd-aiIn 6.4s ease-in-out infinite; }
.sl-demo.v-hit.playing  .chat-bubble.ai { animation: sd-aiInHit 6.4s ease-in-out infinite; }
@keyframes sd-aiIn    { 0%,48% { opacity:0; transform:translateY(10px); } 56%,88% { opacity:1; transform:translateY(0); } 96%,100% { opacity:0; transform:translateY(-6px); } }
@keyframes sd-aiInHit { 0%,28% { opacity:0; transform:translateY(10px); } 34%,88% { opacity:1; transform:translateY(0); } 96%,100% { opacity:0; transform:translateY(-6px); } }

/* ---------- Guard: aşama zinciri ---------- */
.sl-demo .stage-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; opacity: 0; }
.sl-demo.playing .stage-strip { animation: sd-stripIn 6.4s ease-in-out infinite; }
@keyframes sd-stripIn { 0%,6% { opacity: 0; } 10%,90% { opacity: 1; } 96%,100% { opacity: 0; } }

.sl-demo .stage-chip {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
  color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border);
}
.sl-demo.playing .stage-chip.s1 { animation: sd-chipLit 6.4s ease-in-out infinite; animation-delay: 0s; }
.sl-demo.playing .stage-chip.s2 { animation: sd-chipLit 6.4s ease-in-out infinite; animation-delay: .35s; }
.sl-demo.playing .stage-chip.s3 { animation: sd-chipLit 6.4s ease-in-out infinite; animation-delay: .7s; }
.sl-demo.playing .stage-chip.s4.pass { animation: sd-chipLit 6.4s ease-in-out infinite; animation-delay: 1.05s; }
.sl-demo.playing .stage-chip.s4.stop { animation: sd-chipLitStop 6.4s ease-in-out infinite; animation-delay: 1.05s; }
.sl-demo.playing .stage-chip.solo    { animation: sd-chipLitStop 6.4s ease-in-out infinite; animation-delay: 1.8s; }
@keyframes sd-chipLit {
  0%,4%    { opacity: .35; background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); transform: scale(1); }
  8%,14%   { opacity: 1; background: var(--acc-wash-2); color: var(--acc); border-color: var(--acc-line); transform: scale(1.08); }
  18%,88%  { opacity: 1; background: var(--acc-wash); color: var(--acc); border-color: var(--acc-line); transform: scale(1); }
  94%,100% { opacity: .35; background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); transform: scale(1); }
}
@keyframes sd-chipLitStop {
  0%,4%    { opacity: .35; background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); transform: scale(1); }
  8%,14%   { opacity: 1; background: var(--bad); color: #fff; border-color: var(--bad); transform: scale(1.12); }
  18%,88%  { opacity: 1; background: var(--bad); color: #fff; border-color: var(--bad); transform: scale(1); }
  94%,100% { opacity: .35; background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); transform: scale(1); }
}

/* ---------- Guard: karar rozeti ---------- */
.sl-demo .g-verdict {
  align-self: flex-start; display: inline-flex; align-items: center;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .6px;
  border-radius: 999px; padding: 9px 18px; opacity: 0; transform: scale(.6);
}
.sl-demo .g-verdict.no { color: #fff; background: var(--bad); }
.sl-demo.playing .g-verdict.no { animation: sd-verdictPop 6.4s ease-in-out infinite, sd-glow 2.2s ease-in-out infinite; animation-delay: 0s, 1.4s; }
@keyframes sd-verdictPop { 0%,30% { opacity:0; transform:scale(.6); } 36%,86% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(.6); } }
@keyframes sd-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(192, 69, 60, 0); } 50% { box-shadow: 0 0 0 12px rgba(192, 69, 60, .14); } }
.sl-demo .bm-meta.note { opacity: 0; }
.sl-demo.playing .bm-meta.note { animation: sd-metaNote 6.4s ease-in-out infinite; }
@keyframes sd-metaNote { 0%,34% { opacity:0; } 40%,86% { opacity:1; } 94%,100% { opacity:0; } }

/* ---------- Guard: yanıtta redaksiyon (aynı PII motoru, ters yönde, daha geç) ----------
   Özgüllük bilerek .pii-tag.regex ~ .pii-real kuralıyla eşit (6 sınıf); dosyada sonra geldiği için kazanır. */
.sl-demo.v-redact.playing .chat-bubble.ai { animation: sd-aiInGuard 6.4s ease-in-out infinite; }
.sl-demo.v-redact.playing .pii .pii-tag ~ .pii-real { animation: sd-pii2Real 6.4s ease-in-out infinite; }
.sl-demo.v-redact.playing .pii .pii-mask { animation: sd-pii2Mask 6.4s ease-in-out infinite; }
.sl-demo.v-redact.playing .pii .pii-tag  { animation: sd-pii2Tag 6.4s ease-in-out infinite; }
.sl-demo.v-redact.playing .demo-flag.is-mask { animation: sd-flagPopRedact 6.4s ease-in-out infinite; }
@keyframes sd-aiInGuard { 0%,28% { opacity:0; transform:translateY(10px); } 34%,88% { opacity:1; transform:translateY(0); } 96%,100% { opacity:0; transform:translateY(-6px); } }
@keyframes sd-pii2Real { 0%,52% { opacity: 1; } 58%,100% { opacity: 0; } }
@keyframes sd-pii2Mask {
  0%,52%   { opacity: 0; transform: scale(.7); }
  58%,86%  { opacity: 1; transform: scale(1); }
  92%,100% { opacity: 0; transform: scale(.7); }
}
@keyframes sd-pii2Tag {
  0%,44%   { opacity: 0; transform: translate(-50%, 4px) scale(.7); }
  48%,54%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  58%,100% { opacity: 0; transform: translate(-50%, -4px) scale(.85); }
}
@keyframes sd-flagPopRedact { 0%,56% { opacity:0; transform:scale(.6); } 62%,86% { opacity:1; transform:scale(1); } 94%,100% { opacity:0; transform:scale(.6); } }

/* ---------- Guard: Rug Pull ---------- */
.sl-demo .tool-desc { border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.4; opacity: 0; }
.sl-demo .tool-desc.approved { background: var(--bg-subtle); border: 1px solid var(--border); }
.sl-demo .tool-desc.mutated { background: var(--bad-wash); border: 1px solid rgba(192, 69, 60, .35); }
.sl-demo .td-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 5px; }
.sl-demo .tool-desc.mutated .td-lbl { color: var(--bad); }
.sl-demo .td-text { color: var(--text-primary); font-family: var(--font-mono); font-size: 12.5px; word-break: break-word; }
.sl-demo .td-inject { display: inline-block; background: var(--bad); color: #fff; border-radius: 4px; padding: 1px 6px; font-weight: 700; opacity: 0; }
.sl-demo.playing .tool-desc.approved { animation: sd-turnIn 6.4s ease-in-out infinite; animation-delay: 0s; }
.sl-demo.playing .tool-desc.mutated  { animation: sd-turnIn 6.4s ease-in-out infinite; animation-delay: .55s; }
.sl-demo.playing .td-inject { animation: sd-tdInjectPop 6.4s ease-in-out infinite; animation-delay: 1.1s; }
@keyframes sd-tdInjectPop { 0%,4% { opacity:0; transform:scale(.7); } 8%,88% { opacity:1; transform:scale(1); } 96%,100% { opacity:0; transform:scale(.7); } }

/* ---------- Guard: çok turlu risk + insan onayı ---------- */
.sl-demo .turns { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.sl-demo .turn { display: flex; align-items: center; gap: 9px; opacity: 0; }
.sl-demo .turn .tn { width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.sl-demo .turn .tc { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-demo .turn .ts { font-family: var(--font-mono); font-weight: 700; font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--acc-wash); color: var(--acc); flex-shrink: 0; }
.sl-demo .turn.t2 .ts { background: rgba(201, 121, 31, .14); color: var(--warn-ink); }
.sl-demo .turn.t3 .ts { background: var(--bad-wash); color: var(--bad); }
.sl-demo.playing .turn { animation: sd-turnIn 6.4s ease-in-out infinite; }
.sl-demo.playing .turn.t1 { animation-delay: 0s; }
.sl-demo.playing .turn.t2 { animation-delay: .45s; }
.sl-demo.playing .turn.t3 { animation-delay: .9s; }
@keyframes sd-turnIn { 0%,4% { opacity:0; transform:translateX(-6px); } 8%,90% { opacity:1; transform:translateX(0); } 96%,100% { opacity:0; } }

.sl-demo .hitl-panel { margin-top: 6px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; opacity: 0; }
.sl-demo.playing .hitl-panel { animation: sd-turnIn 6.4s ease-in-out infinite; animation-delay: 1.5s; }
.sl-demo .hitl-lbl { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.sl-demo .hitl-btns { display: flex; gap: 8px; margin-top: 9px; }
.sl-demo .hb { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; padding: 6px 15px; border-radius: 999px; }
.sl-demo .hb.deny { background: var(--bad); color: #fff; }
.sl-demo .hb.approve { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* ---------- Pipeline: Uygulama → Siperlabs → Sağlayıcılar ---------- */
.sl-demo.pipeline { max-width: 1100px; margin: 0 auto; width: 100%; }
.sl-demo .pl-wrap { position: relative; height: 300px; }
.sl-demo .pl-track { position: absolute; left: 0; right: 0; top: 50%; margin-top: -2px; height: 4px; background: var(--border); border-radius: 2px; }
.sl-demo .pl-node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px;
  text-align: center; white-space: nowrap; color: var(--text-primary);
}
.sl-demo .pl-node small { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 5px; }
.sl-demo .pl-node.n1 { left: 15%; }
.sl-demo .pl-node.n2 { left: 50%; }
.sl-demo .pl-node.n3 { left: 85%; }
.sl-demo .pl-node.core {
  background: linear-gradient(135deg, var(--acc-2), var(--acc)); color: #fff; border: none;
  padding: 28px 38px; font-size: 24px; box-shadow: 0 14px 34px rgba(21, 94, 117, .28);
}
.sl-demo .pl-node.core small { color: rgba(255, 255, 255, .82); }

.sl-demo .pl-pkt { position: absolute; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; opacity: 0; }
.sl-demo .pl-pkt.a { background: var(--acc-2); box-shadow: 0 0 0 6px var(--acc-wash); }
.sl-demo .pl-pkt.b { background: var(--blue); box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
.sl-demo .pl-pkt.c { background: var(--bad); box-shadow: 0 0 0 6px var(--bad-wash); }
.sl-demo.playing .pl-pkt.a { animation: sd-pktA 12s linear infinite; }
.sl-demo.playing .pl-pkt.b { animation: sd-pktB 12s linear infinite; }
.sl-demo.playing .pl-pkt.c { animation: sd-pktC 12s linear infinite; }

/* 1) giden istek: PII maskelenip sağlayıcıya ulaşır */
@keyframes sd-pktA {
  0% { left: 15%; opacity: 0; } 2% { opacity: 1; }
  10% { left: 44%; } 14% { left: 56%; }
  22% { left: 84%; opacity: 1; } 25%, 100% { left: 86%; opacity: 0; }
}
/* 2) tekrarlayan istek: katmandan cache'ten geri döner, sağlayıcıya hiç gitmez */
@keyframes sd-pktB {
  0%, 25% { left: 15%; opacity: 0; } 27% { left: 16%; opacity: 1; }
  34% { left: 46%; opacity: 1; } 38% { left: 46%; }
  46% { left: 15%; opacity: 1; } 49%, 100% { left: 14%; opacity: 0; }
}
/* 3) saldırı: istek mavi çıkar, sağlayıcıda ajan zararlı çağrı üretir, dönüşte kırmızıya döner ve katmanda bloklanır */
@keyframes sd-pktC {
  0%, 50% { left: 15%; opacity: 0; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  52% { left: 16%; opacity: 1; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  60% { left: 48%; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  64% { left: 52%; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  70% { left: 84%; opacity: 1; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  75% { left: 84%; background: #c0453c; box-shadow: 0 0 0 6px rgba(192, 69, 60, .14); }
  83% { left: 58%; opacity: 1; transform: scale(1); }
  86% { transform: scale(1.8); }
  89% { transform: scale(1); }
  97% { left: 58%; opacity: 1; }
  100% { left: 58%; opacity: 0; }
}

.sl-demo .pl-evt {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; opacity: 0; white-space: nowrap;
}
.sl-demo .pl-evt.a { color: var(--acc); background: var(--acc-wash); border: 1px solid var(--acc-line); }
.sl-demo .pl-evt.b { color: var(--blue-ink); background: rgba(111, 174, 221, .14); border: 1px solid rgba(111, 174, 221, .4); }
.sl-demo .pl-evt.c { color: var(--bad); background: var(--bad-wash); border: 1px solid rgba(192, 69, 60, .3); }
.sl-demo .pl-evt.d { left: 78%; color: var(--bad); background: var(--bad-wash); border: 1px solid rgba(192, 69, 60, .3); }
.sl-demo.playing .pl-evt.a { animation: sd-evtA 12s linear infinite; }
.sl-demo.playing .pl-evt.b { animation: sd-evtB 12s linear infinite; }
.sl-demo.playing .pl-evt.c { animation: sd-evtC 12s linear infinite; }
.sl-demo.playing .pl-evt.d { animation: sd-evtD 12s linear infinite; }
@keyframes sd-evtA { 0%,8% { opacity:0; transform: translate(-50%, 8px); } 12%,21% { opacity:1; transform: translate(-50%, 0); } 25%,100% { opacity:0; } }
@keyframes sd-evtB { 0%,29% { opacity:0; transform: translate(-50%, 8px); } 33%,45% { opacity:1; transform: translate(-50%, 0); } 49%,100% { opacity:0; } }
@keyframes sd-evtD { 0%,69% { opacity:0; transform: translate(-50%, 8px); } 73%,80% { opacity:1; transform: translate(-50%, 0); } 83%,100% { opacity:0; } }
@keyframes sd-evtC { 0%,80% { opacity:0; transform: translate(-50%, 8px); } 84%,96% { opacity:1; transform: translate(-50%, 0); } 100% { opacity:0; } }

.sl-demo.static .pl-pkt, .sl-demo.static .pl-evt { opacity: 0; }

/* orta genişlik: biraz küçült */
@media (max-width: 960px) {
  .sl-demo .pl-node { padding: 14px 16px; font-size: 16px; }
  .sl-demo .pl-node small { font-size: 11.5px; }
  .sl-demo .pl-node.core { padding: 20px 24px; font-size: 20px; }
  .sl-demo .pl-evt { font-size: 12.5px; padding: 8px 14px; }
}

/* mobil: dikey varyant (üstte uygulama, ortada Siperlabs, altta sağlayıcılar) */
@media (max-width: 720px) {
  .sl-demo .pl-wrap { height: 600px; }
  .sl-demo .pl-track { left: 50%; right: auto; top: 0; bottom: 0; width: 4px; height: auto; margin: 0 0 0 -2px; }
  .sl-demo .pl-node.n1, .sl-demo .pl-node.n2, .sl-demo .pl-node.n3 { left: 50%; }
  .sl-demo .pl-node.n1 { top: 16%; }
  .sl-demo .pl-node.n2 { top: 52%; }
  .sl-demo .pl-node.n3 { top: 88%; }
  .sl-demo .pl-pkt { left: 50%; top: 16%; margin-top: 0; margin-left: -11px; }
  .sl-demo.playing .pl-pkt.a { animation: sd-pktAv 12s linear infinite; }
  .sl-demo.playing .pl-pkt.b { animation: sd-pktBv 12s linear infinite; }
  .sl-demo.playing .pl-pkt.c { animation: sd-pktCv 12s linear infinite; }
  .sl-demo .pl-evt, .sl-demo .pl-evt.d { left: 50%; top: 4px; }
}
/* dikey eşlemesi: top = 16 + (left − 15) × 36/35 */
@keyframes sd-pktAv {
  0% { top: 16%; opacity: 0; } 2% { opacity: 1; }
  10% { top: 45.8%; } 14% { top: 58.2%; }
  22% { top: 87%; opacity: 1; } 25%, 100% { top: 89%; opacity: 0; }
}
@keyframes sd-pktBv {
  0%, 25% { top: 16%; opacity: 0; } 27% { top: 17%; opacity: 1; }
  34% { top: 47.9%; opacity: 1; } 38% { top: 47.9%; }
  46% { top: 16%; opacity: 1; } 49%, 100% { top: 15%; opacity: 0; }
}
@keyframes sd-pktCv {
  0%, 50% { top: 16%; opacity: 0; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  52% { top: 17%; opacity: 1; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  60% { top: 49.9%; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  64% { top: 54.1%; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  70% { top: 87%; opacity: 1; background: #6FAEDD; box-shadow: 0 0 0 6px rgba(111, 174, 221, .18); }
  75% { top: 87%; background: #c0453c; box-shadow: 0 0 0 6px rgba(192, 69, 60, .14); }
  83% { top: 60.2%; opacity: 1; transform: scale(1); }
  86% { transform: scale(1.8); }
  89% { transform: scale(1); }
  97% { top: 60.2%; opacity: 1; }
  100% { top: 60.2%; opacity: 0; }
}
/* ===== son ===== */