:root{
  --navy:#0B1F33;
  --teal:#14B8B0;
  --teal2:#0D8F89;
  --paper:#F6FBFC;
  --mint:#E8FAF7;
  --text:#183246;
  --muted:#6E8090;
  --line:rgba(11,31,51,.11);
  --shadow:0 24px 70px rgba(7,26,42,.12);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body{
  font-family:Manrope,system-ui,sans-serif;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  padding:16px 0;
  transition:.3s;
}

.site-header.scrolled{
  padding:9px 0;
}

.nav-shell{
  width:min(1220px,calc(100% - 28px));
  margin:auto;

  min-height:78px;

  padding:0 18px 0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border:1px solid rgba(255,255,255,.22);
  border-radius:22px;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    0 8px 34px rgba(7,26,42,.08),
    0 1px 0 rgba(255,255,255,.45);

  transition:
    min-height .25s ease,
    padding .25s ease,
    box-shadow .25s ease;
}


/* HEADER LOGO */

.brand{
  display:flex;
  align-items:center;

  flex-shrink:0;

  line-height:0;
}

.brand img{
  height:52px;
  width:auto;

  max-width:205px;

  display:block;
  object-fit:contain;
}


/* NAVIGATION */

.main-nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.main-nav a{
  font-size:14px;
  font-weight:700;

  color:#375268;

  position:relative;

  padding:10px 0;
}

.main-nav a:after{
  content:"";

  position:absolute;

  left:0;
  right:100%;
  bottom:5px;

  height:2px;

  background:var(--teal);

  transition:.25s;
}

.main-nav a:hover:after,
.main-nav a.active:after{
  right:0;
}


/* HEADER CTA */

.nav-cta{
  background:var(--navy);
  color:#fff;

  padding:13px 18px;

  border-radius:14px;

  font-size:13px;
  font-weight:800;

  transition:
    transform .2s ease,
    background .2s ease;
}

.nav-cta:hover{
  transform:translateY(-2px);
  background:#102c44;
}


/* MOBILE MENU */

.menu-toggle{
  display:none;

  border:0;
  background:none;

  width:42px;

  cursor:pointer;
}

.menu-toggle span{
  display:block;

  height:2px;

  background:var(--navy);

  margin:5px;

  border-radius:5px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:100svh;

  position:relative;

  display:grid;
  align-items:center;

  padding:150px 0 90px;
}

.hero-bg{
  position:absolute;
  inset:0;

  background:
    url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1800&q=85')
    center/cover;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(7,25,42,.94),
      rgba(7,25,42,.78) 45%,
      rgba(7,25,42,.18)
    );
}

.hero-grid{
  position:relative;

  display:grid;

  grid-template-columns:1.15fr .85fr;

  gap:70px;

  align-items:center;
}

.hero-copy{
  color:white;
}

.eyebrow{
  display:inline-flex;

  gap:9px;

  align-items:center;

  font-size:13px;
  font-weight:700;

  letter-spacing:.04em;

  text-transform:uppercase;

  color:#d8f8f6;

  margin-bottom:26px;
}

.eyebrow i{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--teal);

  box-shadow:
    0 0 0 6px rgba(20,184,176,.15);
}

.hero h1{
  font-size:clamp(48px,7vw,88px);

  line-height:.98;

  letter-spacing:-.055em;
}

.hero h1 span{
  color:#67DDD7;
}

.hero-copy>p{
  margin-top:28px;

  max-width:640px;

  font-size:18px;

  color:rgba(255,255,255,.78);
}


/* HERO BUTTONS */

.hero-actions{
  display:flex;

  gap:12px;

  flex-wrap:wrap;

  margin-top:34px;
}

.btn{
  min-height:56px;

  padding:0 22px;

  border-radius:16px;

  display:inline-flex;

  align-items:center;

  gap:12px;

  font-size:14px;

  font-weight:800;

  transition:.25s;
}

.btn.primary{
  background:var(--teal);

  color:#062a2c;
}

.btn.primary:hover{
  transform:translateY(-3px);
}

.btn.ghost{
  color:#fff;

  border:1px solid rgba(255,255,255,.26);

  background:rgba(255,255,255,.08);
}

.btn.ghost:hover{
  background:rgba(255,255,255,.13);

  transform:translateY(-2px);
}


/* TRUST */

.trust-row{
  display:flex;

  align-items:center;

  gap:20px;

  margin-top:42px;
}

.trust-row div{
  display:grid;
}

.trust-row strong{
  font-size:24px;
}

.trust-row span{
  font-size:10px;

  color:rgba(255,255,255,.6);

  text-transform:uppercase;
}

.trust-row em{
  height:36px;

  width:1px;

  background:rgba(255,255,255,.18);
}


/* HERO CARD */

.hero-card{
  display:flex;

  justify-content:flex-end;
}

.glass-card{
  width:min(100%,390px);

  padding:32px;

  border:
    1px solid rgba(255,255,255,.27);

  border-radius:28px;

  background:rgba(255,255,255,.13);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  color:white;
}

.glass-card>small{
  color:#7be0da;

  font-weight:800;

  letter-spacing:.12em;
}

.glass-card h2{
  font-size:34px;

  line-height:1.08;

  margin:8px 0 24px;
}

.quick-steps div{
  display:grid;

  grid-template-columns:45px 1fr;

  gap:12px;

  padding:14px 0;

  border-bottom:
    1px solid rgba(255,255,255,.15);
}

.quick-steps b{
  color:#79e2dc;

  font-size:12px;
}

.quick-steps span{
  font-weight:700;
}

.glass-card>a{
  margin-top:24px;

  display:flex;

  justify-content:space-between;

  font-weight:800;

  font-size:13px;
}


/* =========================================================
   SERVICES
   ========================================================= */

.services-band{
  padding:110px 0;

  background:var(--paper);
}

.section-heading{
  display:grid;

  grid-template-columns:1fr .7fr;

  gap:80px;

  align-items:end;

  margin-bottom:48px;
}

.section-heading h2,
.about h2,
.request h2{
  font-size:clamp(38px,5vw,62px);

  line-height:1.02;

  letter-spacing:-.045em;

  color:var(--navy);
}

.section-heading>p{
  color:var(--muted);

  max-width:430px;

  justify-self:end;
}

.label{
  display:block;

  margin-bottom:15px;

  text-transform:uppercase;

  font-size:11px;

  font-weight:800;

  letter-spacing:.16em;

  color:var(--teal2);
}

.label.light{
  color:#71ddd6;
}

.service-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.service-card{
  background:white;

  border-radius:26px;

  overflow:hidden;

  border:
    1px solid rgba(11,31,51,.07);

  box-shadow:
    0 14px 40px rgba(11,31,51,.06);

  transition:.3s;
}

.service-card:hover{
  transform:translateY(-7px);

  box-shadow:var(--shadow);
}

.service-image{
  height:270px;

  background-size:cover;

  background-position:center;
}

.service-image.home{
  background-image:
    url('https://images.unsplash.com/photo-1556912172-45b7abe8b7e1?auto=format&fit=crop&w=900&q=85');
}

.service-image.office{
  background-image:
    url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=900&q=85');
}

.service-image.construction{
  background-image:
    url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=900&q=85');
}

.service-content{
  padding:25px;
}

.service-content>small{
  font-size:10px;

  font-weight:800;

  color:var(--teal2);
}

.service-content h3{
  font-size:25px;

  color:var(--navy);

  margin:7px 0;
}

.service-content p{
  color:var(--muted);

  font-size:14px;

  min-height:48px;
}

.service-content a{
  margin-top:18px;

  display:flex;

  justify-content:space-between;

  font-weight:800;

  font-size:13px;
}

.service-content a span{
  color:var(--teal2);
}


/* =========================================================
   ABOUT
   ========================================================= */

.about{
  padding:120px 0;
}

.about-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:85px;

  align-items:center;
}

.about-visual{
  position:relative;

  min-height:610px;
}

.about-photo{
  position:absolute;

  inset:0 35px 0 0;

  border-radius:32px;

  background:
    url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1100&q=85')
    center/cover;
}

.about-floating{
  position:absolute;

  right:0;

  bottom:48px;

  background:var(--navy);

  color:white;

  padding:24px 26px;

  border-radius:22px;

  box-shadow:
    0 22px 50px rgba(11,31,51,.22);
}

.about-floating span{
  display:block;

  color:#6ce0da;

  font-size:24px;
}

.about-floating strong,
.about-floating small{
  display:block;
}

.about-floating strong{
  font-size:22px;
}

.about-floating small{
  color:rgba(255,255,255,.6);
}

.about-copy .lead{
  font-size:19px;

  color:#3d566a;

  margin:25px 0 18px;
}

.about-copy>p:not(.lead){
  color:var(--muted);
}

.values{
  margin-top:35px;

  border-top:1px solid var(--line);
}

.values>div{
  display:grid;

  grid-template-columns:48px 1fr;

  gap:12px;

  padding:18px 0;

  border-bottom:1px solid var(--line);
}

.values b{
  font-size:11px;

  color:var(--teal2);
}

.values span strong,
.values span small{
  display:block;
}

.values span small{
  color:var(--muted);
}


/* =========================================================
   PROCESS
   ========================================================= */

.process{
  padding:35px 0 110px;
}

.process-shell{
  background:var(--navy);

  border-radius:34px;

  padding:54px;

  display:grid;

  grid-template-columns:.7fr 1.3fr;

  gap:60px;

  color:white;
}

.process-shell h2{
  font-size:43px;

  line-height:1.04;
}

.process-steps{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.process-steps div{
  padding:24px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:22px;

  background:rgba(255,255,255,.04);
}

.process-steps small{
  color:#74ddd7;

  font-weight:800;
}

.process-steps h3{
  margin:16px 0 8px;
}

.process-steps p{
  font-size:13px;

  color:rgba(255,255,255,.6);
}


/* =========================================================
   REQUEST
   ========================================================= */

.request{
  padding:120px 0;

  background:
    linear-gradient(180deg,#f7fbfc,#eef9f8);
}

.request-grid{
  display:grid;

  grid-template-columns:.75fr 1.25fr;

  gap:70px;
}

.request-copy>p{
  color:var(--muted);

  margin:22px 0 28px;

  max-width:460px;
}

.contact-card{
  display:flex;

  gap:14px;

  align-items:center;

  padding:15px 0;

  border-bottom:1px solid var(--line);

  max-width:390px;
}

.contact-card i{
  width:42px;

  height:42px;

  border-radius:13px;

  background:white;

  display:grid;

  place-items:center;

  color:var(--teal2);

  font-style:normal;
}

.contact-card span small,
.contact-card span a{
  display:block;
}

.contact-card span small{
  color:var(--muted);

  font-size:11px;
}

.contact-card a{
  font-weight:800;

  color:var(--navy);
}


/* FORM */

.request-form{
  background:white;

  border-radius:30px;

  padding:34px;

  border:
    1px solid rgba(11,31,51,.08);

  box-shadow:var(--shadow);
}

.form-top{
  display:flex;

  justify-content:space-between;

  margin-bottom:26px;
}

.form-top small{
  font-size:10px;

  font-weight:800;

  letter-spacing:.14em;

  color:var(--teal2);
}

.form-top h3{
  font-size:28px;
}

.form-top>b{
  height:max-content;

  font-size:11px;

  color:var(--teal2);

  background:var(--mint);

  padding:8px 11px;

  border-radius:999px;
}

.form-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;
}

.form-grid label{
  display:grid;

  gap:7px;
}

.form-grid label.full{
  grid-column:1/-1;
}

.form-grid label span{
  font-size:11px;

  font-weight:800;

  color:#456075;
}

input,
select,
textarea{
  width:100%;

  border:1px solid #dfe8ec;

  background:#fbfdfd;

  border-radius:14px;

  padding:14px 15px;

  outline:none;

  font-family:inherit;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#65d6d0;

  box-shadow:
    0 0 0 4px rgba(20,184,176,.1);
}

textarea{
  resize:vertical;
}

.request-form button{
  width:100%;

  border:0;

  border-radius:15px;

  margin-top:18px;

  background:var(--teal);

  color:#06292b;

  font-weight:800;

  padding:16px 18px;

  display:flex;

  justify-content:space-between;

  cursor:pointer;
}

.privacy{
  text-align:center;

  font-size:10px;

  color:#97a6b1;

  margin-top:12px;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact{
  padding:95px 0;

  background:#eef9f8;
}

.contact-shell{
  border-radius:34px;

  padding:55px;

  background:
    linear-gradient(
      120deg,
      rgba(11,31,51,.97),
      rgba(10,65,72,.95)
    );

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:end;

  color:white;
}

.contact-shell h2{
  font-size:clamp(38px,5vw,60px);

  line-height:1.02;
}

.contact-shell p{
  color:rgba(255,255,255,.62);

  margin-top:15px;
}

.contact-actions{
  display:grid;

  gap:12px;
}

.contact-actions a{
  position:relative;

  padding:19px 50px 19px 20px;

  border-radius:18px;

  background:rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.13);
}

.contact-actions small,
.contact-actions strong{
  display:block;
}

.contact-actions small{
  color:rgba(255,255,255,.48);

  font-size:10px;

  letter-spacing:.12em;
}

.contact-actions a>span{
  position:absolute;

  right:20px;

  top:50%;

  transform:translateY(-50%);

  color:#74ddd7;

  font-size:22px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background:#071929;

  color:white;

  padding:38px 0;
}

.footer-inner{
  display:grid;

  grid-template-columns:1fr auto 1fr;

  align-items:center;

  gap:30px;
}

.footer-brand img{
  height:34px;
}

.footer-brand p{
  font-size:10px;

  color:rgba(255,255,255,.42);

  margin-top:7px;
}

.footer-links{
  display:flex;

  gap:20px;

  font-size:11px;

  color:rgba(255,255,255,.62);
}

.footer-copy{
  text-align:right;

  font-size:10px;

  color:rgba(255,255,255,.35);
}


/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */

.floating-whatsapp{
  position:fixed;

  right:18px;

  bottom:18px;

  z-index:900;

  background:#16b9ae;

  color:#062a2a;

  border-radius:999px;

  display:flex;

  align-items:center;

  gap:9px;

  padding:12px 16px;

  font-size:12px;

  font-weight:800;

  box-shadow:
    0 16px 35px rgba(8,91,87,.24);
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0;

  transform:translateY(24px);

  transition:
    opacity .75s,
    transform .75s;
}

.reveal.in-view{
  opacity:1;

  transform:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:980px){

  .nav-cta{
    display:none;
  }

  .menu-toggle{
    display:block;

    margin-left:auto;
  }

  .main-nav{
    position:absolute;

    left:14px;
    right:14px;

    top:88px;

    display:grid;

    gap:0;

    padding:10px;

    border-radius:18px;

    background:white;

    box-shadow:var(--shadow);

    opacity:0;

    pointer-events:none;

    transform:translateY(-10px);

    transition:.2s;
  }

  .main-nav.open{
    opacity:1;

    pointer-events:auto;

    transform:none;
  }

  .main-nav a{
    padding:14px 12px;

    border-bottom:1px solid #edf2f4;
  }

  .main-nav a:after{
    display:none;
  }

  .hero-grid,
  .about-grid,
  .request-grid,
  .contact-shell{
    grid-template-columns:1fr;
  }

  .hero-card{
    justify-content:flex-start;
  }

  .service-grid{
    grid-template-columns:1fr 1fr;
  }

  .section-heading{
    grid-template-columns:1fr;

    gap:18px;
  }

  .section-heading>p{
    justify-self:start;
  }

  .process-shell{
    grid-template-columns:1fr;
  }

  .footer-inner{
    grid-template-columns:1fr;

    text-align:center;
  }

  .footer-brand img{
    margin:auto;
  }

  .footer-links{
    justify-content:center;

    flex-wrap:wrap;
  }

  .footer-copy{
    text-align:center;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .container{
    width:calc(100% - 28px);
  }


  /* MOBILE HEADER */

  .site-header{
    padding:12px 0;
  }

  .site-header.scrolled{
    padding:7px 0;
  }

  .nav-shell{
    width:calc(100% - 20px);

    min-height:68px;

    padding:0 14px 0 16px;

    border-radius:20px;
  }

  .brand img{
    height:44px;

    max-width:175px;
  }

  .main-nav{
    top:78px;
  }


  /* HERO */

  .hero{
    min-height:auto;

    padding:128px 0 60px;
  }

  .hero h1{
    font-size:48px;
  }

  .hero-copy>p{
    font-size:15px;
  }

  .hero-actions{
    display:grid;
  }

  .btn{
    width:100%;

    justify-content:center;
  }

  .trust-row{
    gap:12px;
  }

  .trust-row strong{
    font-size:20px;
  }


  /* SECTIONS */

  .services-band,
  .about,
  .request{
    padding:78px 0;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .service-image{
    height:235px;
  }


  /* ABOUT */

  .about-visual{
    min-height:430px;
  }

  .about-photo{
    right:0;
  }

  .about-floating{
    right:14px;

    bottom:18px;
  }


  /* PROCESS */

  .process{
    padding-bottom:75px;
  }

  .process-shell{
    padding:30px 22px;
  }

  .process-steps{
    grid-template-columns:1fr;
  }


  /* FORM */

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-grid label.full{
    grid-column:auto;
  }

  .request-form{
    padding:22px;
  }


  /* CONTACT */

  .contact{
    padding:70px 0;
  }

  .contact-shell{
    padding:34px 24px;
  }


  /* WHATSAPP */

  .floating-whatsapp b{
    display:none;
  }

  .floating-whatsapp{
    width:50px;

    height:50px;

    padding:0;

    justify-content:center;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;

    transform:none;
  }

  *{
    transition:none!important;
  }

}


/* =========================================================
   HONEYPOT / FORM STATUS
   ========================================================= */

.hp-field{
  position:absolute!important;

  left:-9999px!important;

  width:1px!important;

  height:1px!important;

  overflow:hidden!important;
}

.form-status{
  display:none;

  margin-top:14px;

  padding:12px 14px;

  border-radius:12px;

  font-size:13px;

  font-weight:700;
}

.form-status.show{
  display:block;
}

.form-status.success{
  background:#e8faf7;

  color:#08776f;

  border:1px solid #bcece7;
}

.form-status.error{
  background:#fff1f1;

  color:#a12e2e;

  border:1px solid #f0caca;
}

.request-form button:disabled{
  opacity:.65;

  cursor:not-allowed;

  transform:none!important;
}


/* =========================================================
   TALEP BAŞARI POPUP
   ========================================================= */

.success-modal{
  position:fixed;

  inset:0;

  z-index:99999;

  display:grid;

  place-items:center;

  padding:20px;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}

.success-modal.is-open{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}

.success-modal__backdrop{
  position:absolute;

  inset:0;

  background:rgba(4,18,29,.76);

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.success-modal__card{
  position:relative;

  z-index:2;

  width:min(92vw,470px);

  background:#fff;

  color:#183246;

  border-radius:28px;

  padding:40px 32px 30px;

  text-align:center;

  box-shadow:
    0 35px 110px rgba(4,18,29,.42);

  border:
    1px solid rgba(11,31,51,.09);

  transform:
    translateY(18px)
    scale(.96);

  transition:
    transform .22s ease;
}

.success-modal.is-open .success-modal__card{
  transform:
    translateY(0)
    scale(1);
}

.success-modal__close{
  position:absolute;

  top:14px;

  right:16px;

  width:40px;

  height:40px;

  border:0;

  border-radius:12px;

  background:#f2f6f7;

  color:#476072;

  font-size:26px;

  line-height:1;

  cursor:pointer;
}

.success-modal__icon{
  width:78px;

  height:78px;

  margin:0 auto 18px;

  border-radius:24px;

  display:grid;

  place-items:center;

  background:#E8FAF7;

  color:#0D8F89;
}

.success-modal__eyebrow{
  display:block;

  margin-bottom:7px;

  color:#0D8F89;

  font-size:11px;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.15em;
}

.success-modal__card h3{
  margin:0 0 12px;

  color:#0B1F33;

  font-size:32px;

  line-height:1.05;

  letter-spacing:-.04em;
}

.success-modal__card p{
  margin:0 auto;

  max-width:355px;

  color:#6E8090;

  font-size:15px;

  line-height:1.7;
}

.success-modal__button{
  width:100%;

  margin-top:24px;

  border:0;

  border-radius:15px;

  padding:15px 18px;

  background:#14B8B0;

  color:#06292b;

  font-weight:800;

  font-size:15px;

  cursor:pointer;
}

.success-modal__button:hover{
  background:#43d2cb;
}

body.modal-open{
  overflow:hidden;
}

@media(max-width:700px){

  .success-modal__card{
    padding:36px 22px 24px;

    border-radius:22px;
  }

  .success-modal__card h3{
    font-size:28px;
  }

}