/* Layout: deep-water hero band with an installation drawing, illustrated service cards, copper reserved for calls to action */
:root{
  --bg:#f3f7f8; --surface:#ffffff; --ink:#0f2730; --muted:#4d6871;
  --water:#0b5c73; --water-2:#1b86a3; --water-soft:#e1eef2; --deep:#0a2a35; --on-deep:#e6f3f6; --on-deep-muted:#a9c8d1;
  --copper:#b8602a; --copper-2:#d98a4f; --copper-ink:#ffffff; --line:#cddde2; --pale:#eef4f6; --heat:#e0482f;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#081419; --surface:#0f2229; --ink:#e4eff2; --muted:#9fb8c0;
  --water:#5fb6cc; --water-2:#3a93ab; --water-soft:#123039; --deep:#06161c; --on-deep:#e4eff2; --on-deep-muted:#93b3bc;
  --copper:#e08a4f; --copper-2:#f0a774; --copper-ink:#1a0d04; --line:#21404a; --pale:#17323b; --heat:#ff6a4d; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#081419; --surface:#0f2229; --ink:#e4eff2; --muted:#9fb8c0;
  --water:#5fb6cc; --water-2:#3a93ab; --water-soft:#123039; --deep:#06161c; --on-deep:#e4eff2; --on-deep-muted:#93b3bc;
  --copper:#e08a4f; --copper-2:#f0a774; --copper-ink:#1a0d04; --line:#21404a; --pale:#17323b; --heat:#ff6a4d; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
.wrap{max-width:74rem;margin:0 auto;padding-inline:1rem}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,6vw,4.4rem);text-transform:uppercase;letter-spacing:.005em}
h2{font-size:clamp(1.9rem,4vw,2.7rem);text-transform:uppercase}
h3{font-size:1.45rem}
p{margin:0}
a{color:var(--water)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.eyebrow{font:700 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--water)}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:.4rem;font:700 1.15rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-call{background:var(--copper);color:var(--copper-ink)}
.btn-wa{background:#1f9d55;color:#fff}
.btn-ghost{border:2px solid currentColor;color:var(--on-deep);background:transparent}

/* SVG paint classes, theme-aware */
.f-w{fill:var(--water)}.f-w2{fill:var(--water-2)}.f-c{fill:var(--copper)}.f-c2{fill:var(--copper-2)}
.f-s{fill:var(--surface)}.f-p{fill:var(--pale)}.f-ws{fill:var(--water-soft)}.f-i{fill:var(--ink)}.f-h{fill:var(--heat)}.f-l{fill:var(--line)}
.s-l{stroke:var(--line)}.s-i{stroke:var(--ink)}.s-c{stroke:var(--copper)}.s-w{stroke:var(--water)}.s-w2{stroke:var(--water-2)}.s-s{stroke:var(--surface)}
.nf{fill:none}

/* top info strip */
.strip{background:var(--deep);color:var(--on-deep-muted);font-size:.92rem}
.strip .wrap{display:flex;justify-content:space-between;gap:.4rem 1.5rem;padding-block:.45rem;flex-wrap:wrap}
.strip span{display:inline-flex;align-items:center;gap:.4rem}
.strip svg{width:1rem;height:1rem;fill:var(--copper-2)}
.strip b{color:var(--on-deep);font-weight:600}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 4px 18px -14px rgba(0,0,0,.4)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.65rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.55rem;font:700 1.75rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:.02em}
.logo svg{width:2.2rem;height:2.2rem}
.logo small{display:block;font:600 .7rem/1 var(--body);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:.15rem}
nav ul{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none;font-weight:600}
nav a:hover{color:var(--water)}
@media (max-width:860px){nav{display:none}}

/* hero */
.hero{background:var(--deep);color:var(--on-deep);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60rem 30rem at 85% 20%,rgba(27,134,163,.35),transparent 60%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:center;padding-block:3.5rem 3rem}
.hero .wrap > *{min-width:0}
.hero .eyebrow{color:var(--copper-2)}
.hero h1{margin-top:.8rem}
.hero h1 em{font-style:normal;color:var(--copper-2)}
.hero p.lead{font-size:1.18rem;color:var(--on-deep-muted);max-width:36rem;margin-block:1.1rem 1.7rem}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-art{background:var(--pale);border-radius:.8rem;padding:.8rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);max-width:100%}
.hero-art svg{display:block;width:100%;height:auto}
.badges{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2rem}
.badges div{display:grid;gap:.15rem}
.badges b{font:700 1.9rem/1 var(--display);color:var(--on-deep);font-variant-numeric:tabular-nums}
.badges span{font-size:.9rem;color:var(--on-deep-muted)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-block:2.5rem}}

/* trust strip */
.trust{background:var(--surface);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.trust li{background:var(--surface);display:flex;gap:.8rem;align-items:center;padding:1.1rem 1rem}
.trust svg{width:2.4rem;height:2.4rem;flex:none}
.trust b{display:block;font-weight:700}
.trust span{color:var(--muted);font-size:.92rem}
@media (max-width:860px){.trust ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.trust ul{grid-template-columns:1fr}}

section{padding-block:4rem}
.sec-head{display:grid;gap:.6rem;margin-bottom:2.2rem;max-width:46rem}
.sec-head p{color:var(--muted)}

/* services */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:.6rem;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .2s,box-shadow .2s}
.svc:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,0,0,.45)}
.svc .pic{background:var(--water-soft);display:grid;place-items:center;padding:1rem}
.svc .pic svg{width:100%;max-width:11rem;height:auto}
.svc .txt{padding:1.1rem 1.2rem 1.3rem;display:grid;gap:.45rem;align-content:start}
.svc .code{font:700 .72rem/1 var(--body);letter-spacing:.12em;color:var(--copper);text-transform:uppercase}
.svc p{color:var(--muted);font-size:1rem}
@media (max-width:1000px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.services{grid-template-columns:1fr}}

/* leak */
.leak{background:var(--water)}
.leak .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.leak .wrap > *{min-width:0}
.leak h2,.leak .eyebrow{color:#fff}
.leak p{color:#e3f1f5;margin-top:1rem}
.thermal{background:#0d1418;border-radius:.7rem;padding:.7rem;box-shadow:0 26px 50px -30px rgba(0,0,0,.7)}
.thermal svg{display:block;width:100%;height:auto}
.leak ol{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.leak li{background:rgba(255,255,255,.1);border-left:4px solid var(--copper-2);padding:.8rem .9rem;border-radius:.25rem;color:#e3f1f5;font-size:.97rem}
.leak li b{display:block;font:700 1.2rem/1.1 var(--display);letter-spacing:.02em;color:#fff;margin-bottom:.2rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .leak{background:var(--water-soft)}}
:root[data-theme="dark"] .leak{background:var(--water-soft)}
@media (max-width:860px){.leak .wrap{grid-template-columns:1fr}}
@media (max-width:480px){.leak ol{grid-template-columns:1fr}}

/* districts */
.area{display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start}
.area > *{min-width:0}
.mapcard{background:var(--surface);border:1px solid var(--line);border-radius:.6rem;padding:1rem}
.mapcard svg{display:block;width:100%;height:auto}
.mapcard p{color:var(--muted);font-size:.95rem;margin-top:.6rem}
.districts{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.5rem;list-style:none;margin:0;padding:0}
.districts li{background:var(--surface);border:1px solid var(--line);border-radius:.35rem;padding:.6rem .8rem;font-weight:700}
.districts li.home{border-color:var(--copper);box-shadow:inset 3px 0 0 var(--copper)}
.districts li small{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
@media (max-width:860px){.area{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:.45rem;border-top:3px solid var(--water);padding-top:1rem}
.steps li::before{content:counter(s,decimal-leading-zero);font:700 2.1rem/1 var(--display);color:var(--copper)}
.steps p{color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* faq */
.faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:2.5rem}
.faq-wrap > *{min-width:0}
.faq{display:grid;gap:.6rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:.4rem;padding:1rem 1.2rem}
.faq summary{cursor:pointer;font-weight:700;font-size:1.08rem}
.faq details p{margin-top:.6rem;color:var(--muted)}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}

/* contact */
.contact{background:var(--surface);border-block:1px solid var(--line)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.contact .wrap > *{min-width:0}
.phone{font:700 clamp(2.2rem,5vw,3.2rem)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;margin-block:1rem .4rem;user-select:all;letter-spacing:.02em}
.info{display:grid;gap:.9rem;margin-top:1.4rem}
.info div{display:flex;gap:.8rem;align-items:flex-start}
.info svg{width:1.5rem;height:1.5rem;flex:none;fill:var(--water);margin-top:.15rem}
.info b{display:block}
.info span{color:var(--muted)}
.contact .actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
form{display:grid;gap:.8rem;background:var(--bg);border:1px solid var(--line);border-radius:.6rem;padding:1.4rem}
form h3{margin-bottom:.2rem}
label{font-weight:600;display:grid;gap:.3rem}
input,select,textarea{font:inherit;padding:.65rem .75rem;border:1px solid var(--line);border-radius:.35rem;background:var(--surface);color:var(--ink);width:100%}
form .note{color:var(--water);font-weight:600;min-height:1.5em}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}}

footer{background:var(--deep);color:var(--on-deep-muted);padding-block:2.5rem 6rem;font-size:.95rem}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
footer .wrap > *{min-width:0}
footer h4{font:700 1.2rem/1 var(--display);color:var(--on-deep);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .8rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
footer a{color:var(--on-deep-muted);text-decoration:none}
footer a:hover{color:var(--on-deep)}
footer .copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

.callbar{position:fixed;left:0;right:0;bottom:0;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);display:none;z-index:6;gap:.5rem;grid-template-columns:1fr auto}
.callbar .btn{justify-content:center}
@media (max-width:760px){.callbar{display:grid}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.svc{transition:none}}

/* photo slots: a real photo in img/ covers the drawing; without one the drawing shows */
.ph{position:relative;margin:0;overflow:hidden;background:var(--water-soft);aspect-ratio:16/10;display:grid;place-items:center}
.ph > svg{width:70%;max-width:12rem;height:auto}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc .ph{border-bottom:1px solid var(--line)}
.svc ul.sub{list-style:none;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.svc ul.sub li{font-size:.85rem;background:var(--water-soft);color:var(--ink);padding:.2rem .55rem;border-radius:99rem}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero .wrap{z-index:1}
.crumb{font-size:.9rem;color:var(--on-deep-muted);margin-bottom:.4rem}
.crumb a{color:var(--on-deep-muted)}
.cat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:.6rem;overflow:hidden;display:grid;grid-template-columns:13rem 1fr}
.cat > *{min-width:0}
.cat .ph{aspect-ratio:auto;height:100%;min-height:12rem;border-right:1px solid var(--line)}
.cat .body{padding:1.1rem 1.2rem;display:grid;gap:.5rem;align-content:start}
.cat p{color:var(--muted);font-size:1rem}
.cat ul{margin:0;padding-left:1.1rem;columns:2;column-gap:1.2rem;font-size:.95rem}
.cat ul li{break-inside:avoid;margin-bottom:.15rem}
@media (max-width:1000px){.cat-list{grid-template-columns:1fr}}
@media (max-width:560px){.cat{grid-template-columns:1fr}.cat .ph{aspect-ratio:16/9;height:auto;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.cat ul{columns:1}}
.districts a{color:inherit;text-decoration:none;display:block}
.districts li:hover{border-color:var(--water)}
.mahalle{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:1rem 0 0}
.mahalle li{border:1px solid var(--on-deep-muted);color:var(--on-deep);border-radius:99rem;padding:.25rem .7rem;font-size:.9rem}
.allsvc{columns:4 14rem;column-gap:2rem;margin:0;padding:0;list-style:none}
.allsvc li{break-inside:avoid;padding:.3rem 0;border-bottom:1px dashed var(--line)}
.allsvc li a{color:var(--ink);text-decoration:none}
.allsvc li a:hover{color:var(--water)}

.hero-art .ph{aspect-ratio:3/2}
.hero-photo img{opacity:.22}
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.work{position:relative;margin:0;border-radius:.6rem;overflow:hidden;background:var(--water-soft);aspect-ratio:4/3;display:grid;place-items:center;border:1px solid var(--line)}
.work > svg{width:60%;max-width:10rem;height:auto}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .6rem;background:linear-gradient(transparent,rgba(6,22,28,.85));font-weight:700;font-size:.95rem}
.work figcaption a{color:#fff;text-decoration:none}
.work figcaption a:hover{text-decoration:underline}
@media (max-width:900px){.works{grid-template-columns:repeat(2,1fr)}}
a.catlink{color:inherit;text-decoration:none}a.catlink:hover{color:var(--water)}
.svcpage-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.6rem;list-style:none;margin:0;padding:0}
.svcpage-list li{background:var(--surface);border:1px solid var(--line);border-radius:.4rem;padding:.8rem 1rem}
.svcpage-list b{display:block}
.svcpage-list span{color:var(--muted);font-size:.93rem}
.svclinks{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.svclinks a{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:99rem;padding:.35rem .85rem;color:var(--ink);text-decoration:none;font-weight:600}
.svclinks a:hover{border-color:var(--water);color:var(--water)}