/* The generated environment sits in the same coordinate space as the original Neo. */
.flow-v82 .setup-render{position:absolute;left:14%;top:18%;width:74%;height:auto;max-width:none;pointer-events:none;mix-blend-mode:multiply}
.flow-v82 .setup-notes li{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,var(--utility-start),var(--utility-end));border-color:var(--utility-color);box-shadow:inset 0 1px #ffffff38,0 5px 15px color-mix(in srgb,var(--utility-color) 20%,transparent)}
.flow-v82 .setup-notes li[data-utility=sebeke]{--utility-color:#0284c7;--utility-start:#075985;--utility-end:#0284c7;--utility-ink:#fff;--utility-detail:#e0f2fe;--utility-effect:#7dd3fc}
.flow-v82 .setup-notes li[data-utility=atik]{--utility-color:#737373;--utility-start:#525252;--utility-end:#737373;--utility-ink:#fff;--utility-detail:#f5f5f5;--utility-effect:#d4d4d4}
.flow-v82 .setup-notes li[data-utility=elektrik]{--utility-color:#f59e0b;--utility-start:#f59e0b;--utility-end:#fbbf24;--utility-ink:#422006;--utility-detail:#572c09;--utility-effect:#92400e}
.flow-v82 .setup-notes li>i,.flow-v82 .setup-notes li>div{position:relative;z-index:1}
.flow-v82 .setup-notes li>div{align-self:center}
.flow-v82 .setup-notes li>i{align-self:start;color:var(--utility-ink)}
.flow-v82 .setup-notes b{color:var(--utility-ink)}
.flow-v82 .setup-notes span{color:var(--utility-detail)}
.flow-v82 .setup-notes .utility-effect{position:absolute;inset:0;width:100%;height:100%;color:var(--utility-effect);pointer-events:none;overflow:hidden;z-index:0;mask-image:linear-gradient(90deg,#0006,#000 70%)}
.flow-v82 .setup-notes .utility-effect *{animation-play-state:paused}
.flow-v82 .flow-stage.is-on-screen[data-step=kurulum] .setup-notes li.is-revealed .utility-effect *{animation-play-state:running}

/* Water rises and flows softly across its card. */
.water-swell{fill:currentColor;fill-opacity:.36;animation:setup-water-wave 6s linear infinite}
.water-surface{fill:none;stroke:#e0f7ff;stroke-opacity:.8;stroke-width:1.3}
.water-swell-back{fill-opacity:.22;animation-duration:8s;animation-direction:reverse}
.water-bubble{fill:#fff;stroke:#b9efff;stroke-width:.8;stroke-opacity:.9;animation:setup-water-bubble 3.8s ease-in infinite}
.bubble-two{animation-delay:-1.4s;animation-duration:4.2s}
.bubble-three{animation-delay:-2.7s}
@keyframes setup-water-wave{to{transform:translateX(-160px)}}
@keyframes setup-water-bubble{0%{transform:translateY(7px);opacity:0}20%{opacity:.9}80%{opacity:.6}100%{transform:translateY(-44px);opacity:0}}

/* Drainage moves down into a small outlet, away from the label. */
.drain-channel{fill:none;stroke:currentColor;stroke-width:11;stroke-opacity:.24}
.drain-current{fill:none;stroke:#fafafa;stroke-width:1.3;stroke-opacity:.9;stroke-dasharray:5 12;animation:setup-drain-current 2.4s linear infinite}
.drain-ring{fill:none;stroke:currentColor;stroke-opacity:.8;stroke-width:1;transform-origin:128px 74px;animation:setup-drain-ripple 3s ease-out infinite}
.drain-ring-two{animation-delay:-1.5s}
.drain-drop{fill:#f5f5f5;fill-opacity:.9;animation:setup-drain-drop 2.6s ease-in infinite}
.drop-two{animation-delay:-1.3s;animation-duration:3s}
@keyframes setup-drain-current{to{stroke-dashoffset:-68}}
@keyframes setup-drain-ripple{0%{transform:scale(.45);opacity:0}20%{opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes setup-drain-drop{0%{transform:translateY(-20px);opacity:0}20%{opacity:1}85%,100%{transform:translateY(45px);opacity:0}}

/* A slow electrical pulse travels through a circuit; no flashing. */
.energy-circuit{fill:none;stroke:currentColor;stroke-width:1.2;stroke-opacity:.35}
.energy-current{fill:none;stroke:#fff8d6;stroke-width:1.8;stroke-linecap:round;stroke-opacity:1;stroke-dasharray:12 75;animation:setup-energy-current 3.2s linear infinite}
.energy-bolt{fill:#fff8d6;fill-opacity:.95;stroke:currentColor;stroke-opacity:.6;stroke-linejoin:round;animation:setup-energy-glow 3.2s ease-in-out infinite}
.energy-halo{fill:#fff8d6;fill-opacity:.35;transform-origin:121px 47px;animation:setup-energy-halo 3.2s ease-in-out infinite}
.energy-node{fill:#fff8d6;fill-opacity:1;animation:setup-energy-glow 3.2s ease-in-out infinite}
.node-two{animation-delay:-1.6s}
@keyframes setup-energy-current{to{stroke-dashoffset:-174}}
@keyframes setup-energy-glow{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes setup-energy-halo{0%,100%{transform:scale(.8);opacity:.35}50%{transform:scale(1.3);opacity:1}}

@media(orientation:portrait){
 .flow-v82 .setup-render{left:14%;top:24.5%;width:66%}
}
@media(prefers-reduced-motion:reduce){
 .flow-v82 .setup-notes .utility-effect *{animation:none!important}
 .water-bubble{opacity:.6}.drain-ring-two{opacity:0}
}