/* ---------- Scroll hikâyesi: BERA nasıl çalışır ---------- */
.story{position:relative;height:520vh;background:radial-gradient(1200px 700px at 75% 20%,#14306e 0%,var(--navy-2) 60%);color:#fff}
.story__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:70px}
.story__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;width:100%}
.story h2{color:#fff;font-size:clamp(26px,3.2vw,40px);margin-bottom:22px}
.story__steps{position:relative;min-height:230px}
.sstep{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(18px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;max-width:460px}
.sstep.is-on{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s ease .2s,transform .5s ease .2s}
.sstep__n{font:600 14px var(--f-body);letter-spacing:.14em;color:#7fe3d8;display:block;margin-bottom:8px}
.sstep h3{font:700 clamp(22px,2.4vw,28px)/1.2 var(--f-head);margin-bottom:10px}
.sstep p{color:#c4d1ee;margin:0}
.sstep strong{color:#fff}
.story__dots{display:flex;gap:8px;margin-top:26px}
.story__dots i{height:4px;flex:1;max-width:52px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.story__dots i::after{content:"";position:absolute;inset:0;background:var(--teal);transform:scaleX(var(--f,0));transform-origin:left}
.story__stage{position:relative;perspective:1500px}
.story__stage::before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(closest-side,rgba(24,181,166,.22),transparent 70%);filter:blur(30px);pointer-events:none}
.story__stage svg{width:100%;height:auto;max-height:78vh;display:block;overflow:visible;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;transform-style:preserve-3d;position:relative}
.story__note{font-size:12px;color:#8fa3cf;text-align:center;margin:6px 0 0}

/* katmanlı derinlik (imleç ile hafif kayma) */
#story-svg .lyr{transition:transform .25s ease-out}
#story-svg .lyr1{transform:translate(calc(var(--px,0)*-8px),calc(var(--py,0)*-6px))}
#story-svg .lyr2{transform:translate(calc(var(--px,0)*-3px),calc(var(--py,0)*-2px))}
#story-svg .lyr3{transform:translate(calc(var(--px,0)*5px),calc(var(--py,0)*3px))}
#story-svg .lyr4{transform:translate(calc(var(--px,0)*14px),calc(var(--py,0)*10px))}

/* anatomi */
#story-svg .base{fill:none;stroke:#2c4c93;stroke-linecap:round;stroke-linejoin:round}
#story-svg .base.thin{stroke-width:2;stroke:#4a74d0;opacity:.55}
#story-svg .pinna{fill:none;stroke:#5b7fd0;stroke-width:4;stroke-linecap:round;opacity:.8}
#story-svg .pinna.thin{stroke-width:2.4;opacity:.5}
#story-svg .tube{fill:none;stroke:url(#g-tube);stroke-width:20;stroke-linecap:round}
#story-svg .tube-hi{fill:none;stroke:#9db8f3;stroke-opacity:.35;stroke-width:2;stroke-linecap:round}
#story-svg .drum{fill:none;stroke:#7fa0e8;stroke-width:5;stroke-linecap:round;opacity:.85}
#story-svg .drum-in{fill:none;stroke:#7fa0e8;stroke-width:2;stroke-linecap:round;opacity:.4}
#story-svg .ossi ellipse,#story-svg .ossi path{fill:#2d4f9e;stroke:#7fa0e8;stroke-width:1.4}
#story-svg .coil-thick{fill:none;stroke:#1e3f86;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
#story-svg .coil{fill:none;stroke:#5b8be0;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#story-svg .coil-core{fill:#0f2a63;stroke:#7fa0e8;stroke-width:1.5}
#story-svg .nerve-thick{fill:none;stroke:#1e3f86;stroke-width:9;stroke-linecap:round}
#story-svg .stem{fill:url(#g-stem);stroke:#6f93e0;stroke-width:1.6;transition:filter .6s}
#story-svg .stem-hi{fill:none;stroke:#fff;stroke-opacity:.18;stroke-width:4;stroke-linecap:round}
#story-svg.s3 .stem,#story-svg.s4 .stem{filter:brightness(1.35)}

/* parlayan yol */
#story-svg .glow{fill:none;stroke:#5eead4;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}

/* teller, elektrot, ekran */
#story-svg .wire{fill:none;stroke:#5b7fd0;stroke-width:2;stroke-dasharray:5 6;opacity:.55;transition:stroke .4s,opacity .4s}
#story-svg .elec{fill:#0b1f4d;stroke:#5b7fd0;stroke-width:3;transition:.4s}
#story-svg.s4 .wire{stroke:#7fe3d8;opacity:1;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
#story-svg.s4 .elec{stroke:#7fe3d8;fill:#18b5a6}
#story-svg .monitor rect{fill:#0a1a42;stroke:#4a74d0;stroke-width:2;transition:stroke .4s}
#story-svg .monitor .mshadow{fill:#000;opacity:.3;stroke:none}
#story-svg.s4 .monitor rect:not(.mshadow){stroke:#7fe3d8}
#story-svg .mgrid{stroke:#1d3a7c;stroke-width:1;fill:none}
#story-svg .wave{fill:none;stroke:#7fe3d8;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#story-svg .wlab text{fill:#cfeee9;font:700 17px var(--f-body);opacity:0;transition:opacity .4s}
#story-svg.s4 .wlab text{opacity:1}
#story-svg .mtitle{fill:#7fa0e8;font:700 17px var(--f-body);letter-spacing:.2em}
#story-svg .badge-done{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
#story-svg .badge-done rect{fill:#18b5a6}
#story-svg .badge-done text{fill:#042b27;font:800 17px var(--f-body)}
#story-svg.s4.done .badge-done{opacity:1;transform:none}

/* kulaklık ve ses halkaları */
#story-svg .phone rect{fill:#13306e;stroke:#7fa0e8;stroke-width:2}
#story-svg .phone path{stroke:#7fe3d8;stroke-width:2.4;fill:none}
#story-svg .rings circle{fill:none;stroke:#7fe3d8;stroke-width:2.4;opacity:0;transform-box:fill-box;transform-origin:center}
#story-svg.s0 .rings circle{animation:ring 2s ease-out infinite}
#story-svg.s0 .rings circle:nth-child(2){animation-delay:.65s}
#story-svg.s0 .rings circle:nth-child(3){animation-delay:1.3s}
@keyframes ring{0%{opacity:.9;transform:scale(.45)}100%{opacity:0;transform:scale(1.9)}}

/* etiket çipleri */
#story-svg .chip rect{fill:rgba(10,26,66,.85);stroke:#3a5aa3;stroke-width:1.2;transition:fill .4s,stroke .4s}
#story-svg .chip text{fill:#8fa8dc;font:700 18px var(--f-body);transition:fill .4s}
#story-svg .chip{opacity:.4;transition:opacity .4s}
#story-svg .chip.on{opacity:1}
#story-svg .chip.on rect{fill:rgba(24,181,166,.2);stroke:#7fe3d8}
#story-svg .chip.on text{fill:#fff}

/* I–V düğümleri */
#story-svg .node{fill:#13306e;stroke:#5b7fd0;stroke-width:2;transition:.35s}
#story-svg .node.on{fill:#18b5a6;stroke:#7fe3d8}
#story-svg .nlab{fill:#cfeee9;font:700 18px var(--f-body);opacity:0;transition:opacity .35s}
#story-svg .nlab.on{opacity:1}

/* nabız */
#story-svg #pulse{fill:#fff;transition:opacity .3s}
#story-svg #halo{fill:url(#g-halo);transition:opacity .3s}
#story-svg #sonar{fill:none;stroke:#7fe3d8;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:sonar 1.5s ease-out infinite}
@keyframes sonar{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
#story-svg.done #pulse,#story-svg.done #halo,#story-svg.done #sonar{opacity:0}

/* parçacıklar */
#story-svg .pt{fill:#7fe3d8;opacity:.35;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

@media (max-width:1020px){
  .story{height:500vh}
  .story__pin{align-items:center;padding-top:70px}
  .story__grid{grid-template-columns:1fr;gap:0;align-content:start}
  .story__stage{order:-1}
  .story__stage svg{max-height:46vh;max-height:46svh;margin:0 auto;transform:none!important}
  .story__stage::before{inset:0}
  .story__note{display:none}
  .story h2,.story .eyebrow{display:none}
  .story__steps{min-height:190px;margin-top:6px}
  .sstep{max-width:none}
  .sstep h3{font-size:21px}
  .sstep p{font-size:15.5px}
  .story__dots{margin-top:14px}
  #story-svg .lyr{transform:none!important}
  #story-svg .pt{display:none}
}
@media (prefers-reduced-motion:reduce){
  .story{height:auto}.story__pin{position:static;height:auto;display:block;padding:70px 0}
  .story__steps{min-height:0}.sstep{position:static;opacity:1;transform:none;margin-bottom:22px}
  .story__dots{display:none}
  #story-svg *{animation:none!important}
  .story__stage svg{transform:none!important}
}