/* One product, one coordinate system. Location and installation only change its surroundings. */
.flow-v82 .flow-stage:is([data-step=lokasyon],[data-step=kurulum]) .flow-copy{align-self:stretch;width:100%;max-width:none;padding:0;text-align:center;min-height:0}
.flow-v82 :is(#flow-lokasyon,#flow-kurulum){height:100%;display:grid;grid-template-rows:122px minmax(180px,1fr) 160px;animation:none}
.flow-v82 :is(#flow-lokasyon,#flow-kurulum)[hidden]{display:none}
.flow-v82 .flow-heading{padding-top:5px}
.flow-v82 .flow-heading .step-kicker{margin:0 0 10px}
.info-page .flow-v82 .flow-heading h3{font-size:clamp(29px,3vw,42px);line-height:1.08;margin:0 0 10px}
.flow-v82 .flow-heading h3 br{display:none}
.flow-v82 .flow-heading :is(.flow-lead,.loc-info>p){font-size:14px;line-height:1.5;max-width:none;min-height:0;margin:0}
.flow-v82 .loc-info.is-active{animation:flow-heading-in .4s ease both}
.flow-v82 .flow-heading{animation:flow-heading-in .4s ease both}
@keyframes flow-heading-in{from{opacity:0}to{opacity:1}}
.flow-v82 .flow-stage:is([data-step=lokasyon],[data-step=kurulum]) .flow-visual-space{display:block;height:100%;min-height:0}
.flow-v82 .flow-tail{width:min(100%,760px);justify-self:center;text-align:left;padding-top:10px}
.flow-v82 .location-choices{margin:0}
.flow-v82 .flow-panel .choice-label{text-align:center;margin:0 0 10px}
.flow-v82 .loc-picker{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.flow-v82 .loc-picker button{justify-content:center;font-size:11px;gap:5px}
.flow-v82 .zone-note,.flow-v82 .flow-stage[data-step=kurulum] .zone-note{justify-content:center;margin:15px 0 0!important;padding-top:12px;border-top:1px solid var(--brand-line);font-size:11px!important}
.flow-v82 .zone-note b{font-size:25px}
.flow-v82 :is(.location-art,.setup-art,.shared-product-art){position:absolute;inset:auto 0;top:var(--art-top,260px);height:var(--art-height,330px);pointer-events:none}
.flow-v82 .shared-product-art{z-index:2;opacity:1;transition:opacity .4s}
.flow-v82 .flow-stage[data-step=belgeler] .shared-product-art{opacity:0;visibility:hidden}
.flow-v82 .flow-stage .frame-box{--fw:calc(var(--art-height,330px)*2.9);left:calc(50% - var(--fw)*.4998);top:calc(var(--art-height,330px)*.51 - var(--fw)*.427);width:var(--fw);aspect-ratio:2304/1856;transform:none;translate:none;scale:none;transition:none}
.flow-v82 .stage-product{left:41.797%;top:35.56%;width:16.363%;height:auto;opacity:1;transform:none;transition:none}
.flow-v82 .location-art{overflow:hidden}
.flow-v82 .location-art:after{background:linear-gradient(0deg,#fff 0,#fff0 25%),linear-gradient(180deg,#fff 0,#fff0 20%)}
.flow-v82 .stage-frame{mask-image:radial-gradient(ellipse 49% 44% at 50% 44%,#000 46%,#0000 88%)}
.flow-v82 .setup-svg{left:0;top:0;width:100%;height:100%;overflow:visible}
.flow-v82 .setup-caption{left:50%;top:95%;font-size:10px}
.flow-v82 .setup-notes{margin:10px 0 0;min-height:73px;gap:20px;max-width:none}
.flow-v82 .setup-notes li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;align-items:start}
.flow-v82 .setup-notes b{line-height:26px;font-size:14px}
.flow-v82 .setup-notes span{margin-top:2px;font-size:11px}
.flow-v82 .setup-notes i{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:color-mix(in srgb,var(--utility-color) 10%,white);color:var(--utility-color)}
.flow-v82 .setup-notes li[data-utility=sebeke]{--utility-color:var(--primary-dark)}
.flow-v82 .setup-notes li[data-utility=atik]{--utility-color:var(--text-muted)}
.flow-v82 .setup-notes li[data-utility=elektrik]{--utility-color:var(--warning)}
.flow-v82 .setup-notes i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
/* Reveal a complete tube from the left; recurring flow is independent of the connection. */
.flow-v82 .utility-line{opacity:1!important;clip-path:inset(0 100% 0 0);transform-box:fill-box;transition:clip-path .9s cubic-bezier(.2,.65,.3,1)}
.flow-v82 .utility-line.is-connected{clip-path:inset(0 0 0 0)}
.flow-v82 .flow-stage:not([data-step=kurulum]) .utility-line{clip-path:inset(0 100% 0 0);transition:none}
.flow-v82 .utility-drain .utility-stream{animation:utility-flow 2.7s linear infinite}
@media(max-width:900px){
 .flow-v82 :is(#flow-lokasyon,#flow-kurulum){grid-template-rows:132px minmax(180px,1fr) 171px}
 .flow-v82 .flow-stage:is([data-step=lokasyon],[data-step=kurulum]) .flow-copy{text-align:left;max-width:none}
 .flow-v82 .flow-heading{padding-top:13px}
 .flow-v82 .flow-heading .step-kicker{font-size:9px;line-height:1.5;margin-bottom:9px}
 .info-page .flow-v82 .flow-heading h3{font-size:29px;line-height:1.08;margin-bottom:8px}
 .flow-v82 .flow-heading h3 br,.flow-v82 .flow-stage[data-step=kurulum] .flow-heading h3 br{display:block}
 .flow-v82 .flow-heading :is(.flow-lead,.loc-info>p){font-size:12px;line-height:1.5}
 .flow-v82 .flow-tail{padding-top:8px;width:100%}
 .flow-v82 .flow-panel .choice-label{text-align:left;margin-bottom:8px;font-size:10px}
 .flow-v82 .loc-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
 .flow-v82 .loc-picker button{min-height:37px}
 .flow-v82 .zone-note,.flow-v82 .flow-stage[data-step=kurulum] .zone-note{justify-content:flex-start;margin-top:12px!important;padding-top:12px}
 .flow-v82 .setup-notes{margin:12px 0 0;min-height:79px;gap:10px}
 .flow-v82 .setup-notes li{grid-template-columns:20px minmax(0,1fr);gap:5px}
 .flow-v82 .setup-notes i{width:20px;height:20px;border-radius:7px}
 .flow-v82 .setup-notes i svg{width:14px;height:14px}
 .flow-v82 .setup-notes b{font-size:11px;line-height:20px;white-space:nowrap}
 .flow-v82 .setup-notes span{font-size:10px;line-height:1.45}
 .flow-v82 .setup-caption{top:95%;font-size:9px}.flow-v82 .setup-caption>span:last-child{font-size:9px}
}
@media(max-width:360px){
 .info-page .flow-v82 .flow-heading h3{font-size:26px}
 .flow-v82 .flow-heading :is(.flow-lead,.loc-info>p){font-size:11px}
 .flow-v82 .setup-notes{gap:5px}.flow-v82 .setup-notes li{gap:4px;grid-template-columns:17px minmax(0,1fr)}
 .flow-v82 .setup-notes i{width:17px;height:19px}.flow-v82 .setup-notes b{font-size:10px}.flow-v82 .setup-notes span{font-size:9px}
 .flow-v82 .loc-picker button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.flow-v82 *{animation:none!important;transition:none!important}}
/* Override the earlier dot colours as well as the icon's own colour. */
.flow-v82 .setup-notes li:nth-child(n) i{background:color-mix(in srgb,var(--utility-color) 10%,white)}
.flow-v82 .utility-drain .utility-stream{animation:drain-flow 2.7s linear infinite}