:root{
  --paper:#FFFFFF; --frost:#EEF5F7; --frost-2:#DCEAEE; --line:#D2E0E5;
  --ink:#14303F; --steel:#566A76; --copper:#A4592A; --copper-lt:#D58B54; --wa:#1B8A4C;
  color-scheme: light;
}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--copper);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;font-stretch:112%;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-weight:780;font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-weight:720;font-size:clamp(1.55rem,3.2vw,2.2rem)}
h3{font-weight:680;font-size:1.2rem;font-stretch:105%}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.measure{max-width:64ch}
.muted{color:var(--steel)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand b{font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:780;font-size:1.12rem;letter-spacing:-.01em;line-height:1}
.brand small{display:block;font-size:.74rem;color:var(--steel);font-weight:500;margin-top:3px}
.nav{display:flex;gap:22px}
.nav a{text-decoration:none;font-weight:500;font-size:.96rem;color:var(--steel)}
.nav a:hover{color:var(--ink)}
.head-call{font-weight:600;text-decoration:none;white-space:nowrap}
@media (max-width:900px){.nav{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;text-decoration:none;font-size:1rem;line-height:1.2;border:2px solid transparent}
.btn-copper{background:var(--copper);color:#fff}
.btn-copper:hover{background:#8E4B22}
.btn-wa{border-color:var(--wa);color:var(--wa);background:#fff}
.btn-wa:hover{background:#EEF8F2}
.btn svg{width:20px;height:20px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* copper pipe divider: liquid + gas line */
.pipe{height:12px;position:relative;margin:0}
.pipe::before,.pipe::after{content:"";position:absolute;left:0;right:0;border-radius:3px}
.pipe::before{top:1px;height:3px;background:var(--copper)}
.pipe::after{top:7px;height:5px;background:linear-gradient(90deg,var(--copper) 0 36%,#fff 36% 42%,var(--copper) 42%)}

section{padding:72px 0}
.band{background:var(--frost)}

/* mobile call bar */
.callbar{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .callbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line)}
  .callbar .btn{flex:1;justify-content:center;padding:13px 10px}
  .head-call{display:none}
  section{padding:52px 0}
}

/* footer */
.site-foot{background:var(--ink);color:#DCE7EC;padding:56px 0 36px;font-size:.95rem}
.site-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.site-foot h3{color:#fff;font-size:1rem;margin-bottom:.7em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:0 0 .45em}
.kunye{border-top:1px solid #2C4A5A;margin-top:40px;padding-top:20px;font-size:.84rem;color:#A9BCC6}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.hero{padding:56px 0 64px;background:linear-gradient(180deg,var(--frost) 0,#fff 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem)}
.hero p.lead{font-size:1.16rem;color:var(--steel);max-width:44ch}
.hours{font-size:.92rem;color:var(--steel);margin-top:16px}
.scheme text{font:500 15px "IBM Plex Sans",sans-serif;fill:var(--steel)}
.scheme .t-strong{fill:var(--ink);font-weight:600}

.scheme .status text{fill:var(--ink);font-weight:600;font-size:14px}
.a-in{opacity:0;animation:fade .6s ease-out forwards}
.a-in1{animation-delay:.1s}.a-in2{animation-delay:.3s}
@keyframes fade{to{opacity:1}}
/* 12 saniyelik döngü: tüm parçalar aynı süreyle senkron */
.draw,.draw2,.st,.dot,.led,.flap,.fan,.flow,.drip,.air,.gauge,.needle{animation-duration:12s;animation-iteration-count:infinite}
.draw{stroke-dasharray:520;stroke-dashoffset:520;animation-name:pipe;animation-timing-function:linear}
.draw2{animation-name:pipe2}
@keyframes pipe{0%,4%{stroke-dashoffset:520;opacity:1}17%{stroke-dashoffset:0;opacity:1}93%{stroke-dashoffset:0;opacity:1}98%{stroke-dashoffset:0;opacity:0}99%,100%{stroke-dashoffset:520;opacity:0}}
@keyframes pipe2{0%,5%{stroke-dashoffset:520;opacity:1}18%{stroke-dashoffset:0;opacity:1}93%{stroke-dashoffset:0;opacity:1}98%{stroke-dashoffset:0;opacity:0}99%,100%{stroke-dashoffset:520;opacity:0}}
.st{opacity:0}
.st1{animation-name:s1}.st2{animation-name:s2}.st3{animation-name:s3}.st4{animation-name:s4}
@keyframes s1{0%,3%{opacity:0}5%,18%{opacity:1}20%,100%{opacity:0}}
@keyframes s2{0%,20%{opacity:0}22%,31%{opacity:1}33%,100%{opacity:0}}
@keyframes s3{0%,33%{opacity:0}35%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes s4{0%,46%{opacity:0}48%,92%{opacity:1}95%,100%{opacity:0}}
.dot{animation-name:dotc}
@keyframes dotc{0%,3%{fill:#C3D6DD}5%{fill:#D58B54;opacity:1}10%{opacity:.35}15%{opacity:1}20%{opacity:.35}25%{opacity:1}30%{opacity:.35}35%{opacity:1}40%{opacity:.35}45%{fill:#D58B54;opacity:1}47%,93%{fill:#1B8A4C;opacity:1}96%,100%{fill:#C3D6DD}}
.led{animation-name:ledc}
@keyframes ledc{0%,46%{fill:#C3D6DD}48%,93%{fill:#1B8A4C}96%,100%{fill:#C3D6DD}}
.flap{transform-box:fill-box;transform-origin:center top;animation-name:flapc}
@keyframes flapc{0%,47%{transform:translateY(0)}50%,90%{transform:translateY(5px)}94%,100%{transform:translateY(0)}}
.fan{transform-box:fill-box;transform-origin:center;animation-name:spinc;animation-timing-function:linear}
@keyframes spinc{0%,47%{transform:rotate(0)}52%{transform:rotate(150deg)}93%{transform:rotate(2160deg)}100%{transform:rotate(2160deg)}}
.flow{opacity:0;animation-name:show,flowm;animation-duration:12s,1.4s;animation-timing-function:linear}
.flow-r{animation-duration:12s,1.8s}
.drip{opacity:0;animation-name:show,dripm;animation-duration:12s,2.2s;animation-timing-function:linear}
.air{opacity:0;animation-name:show}
@keyframes show{0%,48%{opacity:0}51%,91%{opacity:1}94%,100%{opacity:0}}
@keyframes flowm{to{stroke-dashoffset:-38}}
@keyframes dripm{to{stroke-dashoffset:-48}}
.w{opacity:0;animation:wave 2.4s linear infinite}
.w2{animation-delay:.8s}.w3{animation-delay:1.6s}
@keyframes wave{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(46px)}}
.gauge{opacity:0;animation-name:gshow}
@keyframes gshow{0%,18%{opacity:0}21%,45%{opacity:1}48%,100%{opacity:0}}
.needle{animation-name:needlec;animation-timing-function:ease-in-out}
@keyframes needlec{0%,21%{transform:rotate(60deg)}31%{transform:rotate(-115deg)}34%{transform:rotate(-115deg)}43%,100%{transform:rotate(35deg)}}
@media (prefers-reduced-motion:reduce){
 .a-in,.st4,.flow,.air{opacity:1}.st1,.st2,.st3,.gauge,.drip{opacity:0}
 .draw{stroke-dashoffset:0}.led,.dot{fill:#1B8A4C}.w1{opacity:.8}
}


@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:36px}}

.twin{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.twin > div{padding:34px 36px 6px 0}
.twin > div + div{padding-left:36px;border-left:1px solid var(--line)}
.twin h3{font-size:1.5rem;font-stretch:115%}
.twin .k{font-family:"Archivo",sans-serif;font-stretch:120%;font-weight:800;font-size:3.2rem;color:var(--copper);line-height:1;margin-bottom:12px}
@media (max-width:760px){.twin{grid-template-columns:1fr}.twin > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:28px}
.svc a{display:block;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.svc a b{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;font-size:1.18rem;font-weight:700}
.svc a span{color:var(--steel);font-size:.97rem}
.svc a:hover b{color:var(--copper)}
@media (max-width:760px){.svc{grid-template-columns:1fr}}

.types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media (max-width:900px){.types{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.types{grid-template-columns:1fr}}
.type{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none}
.type:hover{border-color:var(--copper)}
.type b{display:block;font-weight:600}
.type span{font-size:.92rem;color:var(--steel);line-height:1.45;display:block}
.type svg{width:64px;height:48px}

.price{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.factors{list-style:none;margin:0;padding:0;counter-reset:f}
.factors li{padding:14px 0 14px 34px;border-bottom:1px solid var(--line);position:relative}
.factors li::before{content:"";position:absolute;left:0;top:24px;width:20px;height:3px;background:var(--copper);border-radius:2px}
@media (max-width:900px){.price{grid-template-columns:1fr}}

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Archivo",sans-serif;font-size:1.4rem;line-height:1;color:var(--copper)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.7em 0 0;color:var(--steel)}
.area{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.area{grid-template-columns:1fr}}

.art-head{background:var(--frost);padding:34px 0 40px}
.crumbs{font-size:.88rem;color:var(--steel);margin-bottom:18px}
.crumbs a{color:var(--steel)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:#9AB0BA}
.art-head h1{max-width:20ch;font-size:clamp(2rem,4.4vw,3rem)}
.art-head .lead{font-size:1.14rem;color:var(--steel);max-width:62ch;margin:0}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-top:48px;padding-bottom:72px}
.prose > h2:first-child{margin-top:0}
.prose{max-width:68ch}
.prose h2{margin-top:1.8em;font-size:clamp(1.4rem,2.6vw,1.8rem)}
.prose ul,.prose ol{padding-left:1.3em}.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--copper)}
figure{margin:28px 0;padding:22px;background:var(--frost);border-radius:16px}
figcaption{font-size:.9rem;color:var(--steel);margin-top:10px}
.fig text{font:500 14px "IBM Plex Sans",sans-serif;fill:var(--steel)}
.fig .t-strong{fill:var(--ink);font-weight:600}
.note{border-left:4px solid var(--copper);padding:4px 0 4px 18px;margin:24px 0}
aside .box{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;padding:22px}
aside h3{font-size:1.1rem}
aside .btn{width:100%;justify-content:center;margin-bottom:10px}
aside ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
aside li{margin-bottom:.5em}
aside li a{text-decoration:none;color:var(--steel)}
aside li a:hover{color:var(--copper)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--copper);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.6em 0 0;color:var(--steel)}
@media (max-width:960px){.layout{grid-template-columns:1fr}aside .box{position:static}}

.svc-index{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.svc-index a{display:block;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.svc-index a b{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;font-size:1.25rem;font-weight:700;margin-bottom:4px}
.svc-index a span{color:var(--steel)}
.svc-index a:hover b{color:var(--copper)}
@media (max-width:760px){.svc-index{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 28px}
.contact-grid > div{border:1px solid var(--line);border-radius:14px;padding:20px}
.contact-grid b{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;margin-bottom:6px}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 46px;margin:0!important}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--frost);border:2px solid var(--copper);color:var(--copper);font:700 .9rem/26px "Archivo",sans-serif;text-align:center}
.steps li::marker{content:none}
.toc-list{list-style:none;padding:0!important}
.toc-list li{border-bottom:1px solid var(--line);margin:0!important}
.toc-list a{display:block;padding:14px 0;text-decoration:none;font-weight:600}
.toc-list a span{display:block;font-weight:400;color:var(--steel);font-size:.95rem}
.toc-list a:hover{color:var(--copper)}
.nf{padding:90px 0;text-align:left}
/* terazi animasyonu */
.scale text{font:500 14px "IBM Plex Sans",sans-serif;fill:var(--steel)}
.scale .t-strong{fill:var(--ink);font-weight:600}
.scale .lcd{font:700 18px "Archivo",sans-serif;fill:#1B8A4C}
.d{opacity:0;animation:dig 8s infinite}
.d1{animation-name:d1}.d2{animation-name:d2}.d3{animation-name:d3}.d4{animation-name:d4}.d5{animation-name:d5}
@keyframes d1{0%,30%{opacity:1}31%,100%{opacity:0}}
@keyframes d2{0%,30%{opacity:0}31%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes d3{0%,45%{opacity:0}46%,58%{opacity:1}59%,100%{opacity:0}}
@keyframes d4{0%,58%{opacity:0}59%,68%{opacity:1}69%,100%{opacity:0}}
@keyframes d5{0%,68%{opacity:0}69%,96%{opacity:1}97%,100%{opacity:0}}
.gasflow{stroke-dasharray:3 14;animation:gf 1s linear infinite, gshow2 8s infinite}
@keyframes gf{to{stroke-dashoffset:-34}}
@keyframes gshow2{0%,28%{opacity:0}31%,68%{opacity:1}71%,100%{opacity:0}}
.ok{opacity:0;animation:okc 8s infinite}
@keyframes okc{0%,69%{opacity:0}72%,96%{opacity:1}99%,100%{opacity:0}}
.cyl{animation:cyl 8s infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes cyl{0%,30%{transform:scaleY(1)}69%,100%{transform:scaleY(.86)}}
@media (prefers-reduced-motion:reduce){.d{opacity:0}.d5,.ok{opacity:1}.gasflow{opacity:0}}

.vfig text{font:500 14px "IBM Plex Sans",sans-serif;fill:var(--steel)}
.vfig .t-strong{fill:var(--ink);font-weight:600}
.p{animation:suck 6s linear infinite}
@keyframes suck{0%{opacity:0;transform:translateX(0)}8%{opacity:1}70%{opacity:1}85%,100%{opacity:0;transform:translateX(330px)}}
.p2{animation-delay:-1s}.p3{animation-delay:-2s}.p4{animation-delay:-3s}.p5{animation-delay:-4s}.p6{animation-delay:-5s}
.vneedle{animation:vn 6s ease-in-out infinite}
@keyframes vn{0%{transform:rotate(60deg)}70%,90%{transform:rotate(-115deg)}100%{transform:rotate(60deg)}}
.pumpfan{transform-box:fill-box;transform-origin:center;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.compare div{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.compare b{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;font-size:1.1rem;margin-bottom:6px}
.compare .good{border-color:#1B8A4C;background:#F2FAF5}
@media (max-width:640px){.compare{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.p{opacity:0}.vneedle{transform:rotate(-115deg)}}

.ar{animation:arp 2.4s ease-in-out infinite}.ar2{animation-delay:.6s}.ar3{animation-delay:1.2s}.ar4{animation-delay:1.8s}@keyframes arp{0%,100%{opacity:.25}40%{opacity:1}}@media (prefers-reduced-motion:reduce){.ar{opacity:1}}
.air2{animation:af 1.2s linear infinite}@keyframes af{to{stroke-dashoffset:-40}}@media (prefers-reduced-motion:reduce){.air2{animation:none}}