:root{
  --ink:#0F2238;        /* pafta laciverti */
  --ink-2:#17304D;
  --line:#9EC3E8;       /* çizim mavisi */
  --concrete:#E6E7E3;   /* brüt beton */
  --concrete-2:#D3D5CF;
  --graphite:#1E2329;
  --muted:#5B636C;
  --yellow:#F5B700;     /* kule vinç sarısı */
  --white:#FBFBF9;

  --f:'Archivo',system-ui,sans-serif;
  --wide:"wdth" 125;
  --narrow:"wdth" 75;

  --wrap:1200px;
  --pad:clamp(20px,5vw,48px);
  --sec:clamp(72px,11vw,140px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.6;color:var(--graphite);background:var(--white);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05;font-variation-settings:var(--wide);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(34px,5vw,60px)}
h3{font-size:20px;font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:0;line-height:1.25}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:8px 14px;z-index:100;font-weight:700}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;font:700 16px/1 var(--f);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow:hover{background:#FFC929}
.btn--ghost{border-color:rgba(158,195,232,.5);color:var(--white)}
.btn--ghost:hover{border-color:var(--white)}
.btn--sm{padding:11px 18px;font-size:15px}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.nav.is-solid{background:rgba(15,34,56,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(158,195,232,.15)}
.nav__inner{max-width:var(--wrap);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white)}
.brand__mark{width:34px;height:34px}
.brand__mark rect{fill:var(--yellow)}
.brand__name{font-weight:800;font-size:19px;font-variation-settings:var(--wide);letter-spacing:-.01em}
.brand__name span{font-weight:400;opacity:.75}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a:not(.btn){color:var(--white);text-decoration:none;font-size:15px;font-weight:500;opacity:.85}
.nav__links a:not(.btn):hover{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--yellow)}
.nav__toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.nav__toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--white);transition:transform .25s}
.nav__toggle span:first-child{top:17px}.nav__toggle span:last-child{top:25px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* hero */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden;padding-top:96px}
.hero__grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(158,195,232,.09) 1px,transparent 1px),
  linear-gradient(90deg,rgba(158,195,232,.09) 1px,transparent 1px),
  linear-gradient(rgba(158,195,232,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(158,195,232,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  mask-image:radial-gradient(ellipse at 70% 40%,#000 30%,transparent 85%)}
.hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(24px,5vw,64px) var(--pad) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero__kicker{color:var(--line);font-size:15px;font-weight:500;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.hero__kicker::before{content:"";width:28px;height:2px;background:var(--yellow)}
.hero__title{font-size:clamp(40px,5.6vw,80px);line-height:1;font-weight:850;letter-spacing:-.02em}
.hero__lead{margin-top:28px;max-width:46ch;font-size:clamp(17px,1.5vw,19px);color:#C7D6E6}
.hero__cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.hero__art{margin:0;position:relative;justify-self:end;width:100%;max-width:560px}
.hero__caption{position:absolute;right:0;bottom:6px;font-size:12px;color:var(--line);opacity:.7;font-variation-settings:var(--narrow);letter-spacing:.04em}

/* build svg */
#build{width:100%;height:auto;overflow:visible}
#build .dim line{stroke:var(--line);stroke-width:1;opacity:.5}
#build .dim text{fill:var(--line);font:500 12px var(--f);opacity:.7}
#build .outline{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.4s .2s ease-out forwards}
#build .ground{stroke:var(--line);stroke-width:2}
.floor{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:rise .45s cubic-bezier(.2,.8,.2,1) forwards}
.floor__slab{fill:#2A4A6E}
.floor__wall{fill:#213E60;stroke:var(--line);stroke-width:.6;stroke-opacity:.35}
.floor__win{fill:#0F2238;stroke:var(--line);stroke-width:.6;stroke-opacity:.5}
.floor__win.lit{fill:var(--yellow);fill-opacity:.85;stroke:none;animation:flick 6s infinite}
.floor--top .floor__wall{fill:none;stroke:var(--line);stroke-width:1;stroke-opacity:.8;stroke-dasharray:4 4}
.floor--top .floor__win{fill:none}
.crane path,.crane line{fill:none;stroke:var(--yellow);stroke-width:2;stroke-linejoin:round}
.crane__lattice{stroke-width:1 !important;opacity:.8}
.crane__weight,.crane__cab{fill:var(--yellow)}
.crane__trolley rect:first-child{fill:var(--yellow)}
.crane__cable{stroke-width:1 !important}
.crane__load{fill:var(--line);opacity:.9}
.crane{opacity:0;animation:fade .6s 1.2s forwards}
.crane__trolley{animation:trolley 9s 2s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes trolley{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(120px)}}
@keyframes flick{0%,92%,100%{fill-opacity:.85}95%{fill-opacity:.4}}

.facts{position:relative;max-width:var(--wrap);margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(158,195,232,.2)}
.facts>div{padding:28px 0 36px;border-right:1px solid rgba(158,195,232,.2);padding-left:24px}
.facts>div:first-child{padding-left:0}
.facts>div:last-child{border-right:0}
.facts dt{font-size:14px;color:var(--line);order:2}
.facts dd{margin:0 0 4px;font-size:clamp(24px,2.6vw,38px);font-weight:800;font-variation-settings:var(--wide);color:var(--white);line-height:1.1}
.facts div{display:flex;flex-direction:column-reverse}

/* section heads */
.sec-head{max-width:640px;margin-bottom:clamp(40px,6vw,72px)}
.sec-head p{margin-top:18px;color:var(--muted);font-size:18px;max-width:52ch}
.sec-head--split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.sec-head--split>div{max-width:640px}

/* services */
.services{padding:var(--sec) 0;background:var(--white)}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--graphite)}
.svc__item{padding:36px 32px 40px 0;border-bottom:1px solid var(--concrete-2)}
.svc__item:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid var(--concrete-2)}
.svc__item svg{width:44px;height:44px;margin-bottom:24px}
.svc__item svg path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.svc__item:hover svg path{stroke:#C08F00}
.svc__item p{margin-top:10px;color:var(--muted);font-size:16px;max-width:36ch}

/* projects */
.projects{padding:var(--sec) 0;background:var(--concrete)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filter{font:600 15px var(--f);padding:10px 18px;border:1.5px solid var(--graphite);background:transparent;color:var(--graphite);cursor:pointer;transition:background .2s,color .2s}
.filter:hover{background:rgba(30,35,41,.06)}
.filter[aria-pressed="true"]{background:var(--graphite);color:var(--white)}
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.pcard{grid-column:span 4;background:var(--white);display:flex;flex-direction:column;transition:opacity .3s}
.pcard:nth-child(1){grid-column:span 8;grid-row:span 2}
.pcard[hidden]{display:none}
.pgrid--filtered .pcard{grid-column:span 4 !important;grid-row:auto !important}
.pgrid--filtered .pcard .pcard__art{aspect-ratio:4/3 !important;min-height:0 !important}
.pcard__art{position:relative;background-color:var(--ink);background-image:linear-gradient(rgba(158,195,232,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(158,195,232,.08) 1px,transparent 1px);background-size:20px 20px;aspect-ratio:4/3;overflow:hidden;flex:1}
.pcard:nth-child(1) .pcard__art{aspect-ratio:auto;min-height:420px}
.pcard__art svg{position:absolute;inset:0;width:100%;height:100%}
.pcard__status{position:absolute;left:16px;top:16px;background:var(--yellow);color:var(--ink);font-size:13px;font-weight:700;padding:5px 10px}
.pcard__status--done{background:var(--white)}
.pcard__body{padding:20px 22px 22px}
.pcard__body h3{font-size:21px}
.pcard__meta{margin-top:6px;color:var(--muted);font-size:15px}
.pcard__specs{display:flex;gap:24px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--concrete-2);font-size:14px}
.pcard__specs dt{color:var(--muted)}
.pcard__specs dd{margin:0;font-weight:700}
.pcard .el-line{stroke:var(--line);fill:none}
.pcard .el-fill{fill:#1C3756}
.pcard .el-win{fill:#0F2238;stroke:var(--line);stroke-opacity:.55}
.pcard .el-lit{fill:var(--yellow);opacity:.9}
.pcard .el-grid{stroke:var(--line);opacity:.08}
.pcard .el-txt{fill:var(--line);font:500 11px var(--f);opacity:.65}

/* process */
.process{padding:var(--sec) 0;background:var(--white)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--graphite) 0 10px,transparent 10px 18px)}
.steps li{position:relative;padding-right:28px}
.steps__n{display:grid;place-items:center;width:56px;height:56px;background:var(--yellow);color:var(--ink);font-size:24px;font-weight:800;font-variation-settings:var(--wide);margin-bottom:28px;position:relative}
.steps p{margin-top:10px;color:var(--muted);font-size:16px;max-width:30ch}

/* about */
.about{padding:var(--sec) 0;background:var(--ink);color:var(--white)}
.about__inner{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}
.about__text p{margin-top:20px;color:#C7D6E6;max-width:56ch}
.about__text h2{margin-bottom:8px}
.badges{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.badges li{border:1px solid rgba(158,195,232,.35);padding:8px 14px;font-size:14px;color:var(--line)}
.quote{margin:0;padding:clamp(28px,4vw,48px);border-left:4px solid var(--yellow);background:var(--ink-2)}
.quote blockquote{margin:0}
.quote p{font-size:clamp(22px,2.4vw,30px);line-height:1.3;font-weight:600;font-variation-settings:"wdth" 90}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:15px;color:var(--line)}
.quote figcaption strong{color:var(--white)}
.quote__avatar{width:48px;height:48px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-weight:800;font-variation-settings:var(--wide)}

/* contact */
.contact{padding:var(--sec) 0;background:var(--concrete)}
.contact__inner{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,96px)}
.contact__info>p{margin-top:18px;color:var(--muted);font-size:18px;max-width:42ch}
.cinfo{margin:36px 0 0;display:grid;gap:20px}
.cinfo dt{font-size:14px;color:var(--muted)}
.cinfo dd{margin:2px 0 0;font-weight:600;font-size:18px}
.cinfo a{text-decoration:none}.cinfo a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:5px}
.form{background:var(--white);padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:start}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:400 16px var(--f);padding:13px 14px;border:1.5px solid var(--concrete-2);background:var(--white);color:var(--graphite);border-radius:0;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:#B3261E}
.form__error{grid-column:1/-1;color:#B3261E;font-size:15px}
.form .btn{grid-column:1/-1;justify-self:start}

/* footer */
.foot{background:var(--graphite);color:#A9B1BA;padding:36px 0;font-size:14px}
.foot__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.social{display:flex;gap:20px}
.social a{text-decoration:none}.social a:hover{color:var(--white)}

.wa{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:40}
.wa svg{width:30px;height:30px;fill:#fff}

/* responsive */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr}
  .hero__art{max-width:520px;margin:0 auto;width:100%}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts>div{padding-left:0 !important;border-right:0;border-bottom:1px solid rgba(158,195,232,.2)}
  .facts>div:nth-child(odd){padding-right:16px}
  .svc{grid-template-columns:repeat(2,1fr)}
  .svc__item,.svc__item:not(:nth-child(3n+1)){padding:32px 24px 32px 0;border-left:0}
  .svc__item:nth-child(even){padding-left:24px;border-left:1px solid var(--concrete-2)}
  .pcard,.pcard:nth-child(1){grid-column:span 6;grid-row:auto}
  .pcard:nth-child(1) .pcard__art{min-height:0;aspect-ratio:4/3}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:48px}
  .steps::before{display:none}
  .about__inner,.contact__inner{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:68px 0 auto;background:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 24px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;border-bottom:1px solid rgba(158,195,232,.2)}
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .nav__links a:not(.btn){padding:16px 0;border-bottom:1px solid rgba(158,195,232,.12);font-size:18px}
  .nav__links .btn{margin-top:20px}
  .nav.menu-open{background:var(--ink)}
}
@media (max-width:600px){
  body{font-size:16px}
  .svc{grid-template-columns:1fr}
  .svc__item,.svc__item:nth-child(even),.svc__item:not(:nth-child(3n+1)){padding:28px 0;border-left:0}
  .pcard,.pcard:nth-child(1){grid-column:1/-1}
  .steps{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .form .btn{justify-self:stretch}
  .hero__cta .btn{flex:1 1 100%}
  .hero__caption{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition:none !important}
  html{scroll-behavior:auto}
}