:root{
  --ana:#1B1B1B; 
  --zemin:#FFFFFF; 
  --ikincil:#F3F3F3; 
  --vurgulu:#D5CBB2; 
  --hat:#C6C6C6;
  --font-stack: 'Futura PT', 'Futura', system-ui, -apple-system, Arial, sans-serif;
}
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--zemin);color:var(--ana);font-family:var(--font-stack);line-height:1.5}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px, 92%);margin:0 auto}
.site-header{border-bottom:1px solid var(--hat)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:500;text-decoration:none;color:var(--ana);letter-spacing:.06em}
.logo span{opacity:.85}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.menu a{color:var(--ana);text-decoration:none;position:relative}
.menu a:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--vurgulu);transition:width .3s}
.menu a:hover:after{width:100%}

.hero{position:relative}
.hero img{width:100%;object-fit:cover;filter:saturate(.95)}
.hero-caption{position:absolute;left:8%;bottom:10%;background:rgba(255,255,255,.85);padding:16px 20px;border-left:3px solid var(--vurgulu)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.project-card h3{margin:.6rem 0 .2rem 0}
.project-card .meta{opacity:.7}

.project-single .project-header{margin:28px 0}
.project-single .project-content{display:grid;grid-template-columns:3fr 1fr;gap:40px;margin-top:24px}
.project-facts ul{list-style:none;padding:0;margin:0}
.project-nav{display:flex;justify-content:space-between;border-top:1px solid var(--hat);padding:20px 0;margin-top:30px}

.site-footer{border-top:1px solid var(--hat); padding:18px 0; font-size:.95rem}
.site-footer .container{display:flex;justify-content:space-between;gap:20px;align-items:center}

@media(max-width:860px){
  .project-single .project-content{grid-template-columns:1fr}
}
.hero{
  position:relative;
  min-height:78vh;
  overflow:hidden;
}

.hero > img{
  width:100%;
  height:78vh;
  object-fit:cover;
}

.hero-caption{
  position:absolute;
  left:8%;
  bottom:10%;
  max-width:620px;
  background:rgba(255,255,255,.88);
  padding:32px 40px;
  border-left:3px solid var(--vurgulu);
}

.hero-caption h1{
  font-size:64px;
  line-height:1;
  margin:0 0 18px;
  font-weight:500;
}

.hero-caption p{
  font-size:20px;
  line-height:1.45;
  margin:0;
}

.home-intro{
  margin-top:56px;
  margin-bottom:72px;
}

.home-intro .lead{
  max-width:760px;
  font-size:24px;
  line-height:1.45;
}

.home-projects,
.home-services,
.home-contact{
  margin-top:88px;
}

@media(max-width:768px){
  .hero{
    min-height:auto;
    display:block;
  }

  .hero > img{
    height:62vh;
    min-height:420px;
  }

  .hero-caption{
    position:relative;
    left:auto;
    bottom:auto;
    width:92%;
    max-width:none;
    margin:-72px auto 0;
    padding:26px 24px;
    background:rgba(255,255,255,.94);
    border-left:none;
    z-index:2;
  }

  .hero-caption h1{
    font-size:44px;
    line-height:1;
    margin-bottom:16px;
  }

  .hero-caption p{
    font-size:17px;
    line-height:1.55;
  }

  .home-intro{
    margin-top:40px;
    margin-bottom:56px;
  }

  .home-intro .lead{
    font-size:20px;
    line-height:1.55;
  }
}/* MOBİL HERO */

@media (max-width: 768px){

  .hero{
    height: 70vh;
    overflow:hidden;
  }

  .hero img{
    width:100%;
    height:70vh;
    object-fit:cover;
    object-position:center;
  }

  .hero-caption{
    left:20px;
    right:20px;
    bottom:20px;
    width:auto;
    max-width:none;
    padding:20px;
  }

  .hero-caption h1{
    font-size:2rem;
    margin:0 0 10px 0;
  }

  .hero-caption p{
    font-size:.95rem;
    line-height:1.5;
  }

}@media (max-width: 768px){

  .hero{
    position:relative !important;
    height:70vh !important;
    min-height:520px !important;
    overflow:hidden !important;
  }

  .hero > img{
    width:100% !important;
    height:70vh !important;
    min-height:520px !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .hero-caption{
    position:absolute !important;
    left:20px !important;
    right:20px !important;
    bottom:24px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:22px !important;
    background:rgba(255,255,255,.90) !important;
    border-left:none !important;
  }

  .hero-caption h1{
    font-size:34px !important;
    line-height:1 !important;
    margin:0 0 12px 0 !important;
  }

  .hero-caption p{
    font-size:15px !important;
    line-height:1.45 !important;
    margin:0 !important;
  }

}@media (max-width: 768px){

  .site-header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
  }

  .logo{
    font-size:32px;
    line-height:1;
    white-space:nowrap;
  }

  .logo span{
    display:none;
  }

  .menu{
    display:none;
  }

}.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.menu-toggle{
  display:none;
}

@media(max-width:768px){

  .site-header .container{
    width:100%;
    padding:16px 20px;
  }

  .logo{
    font-size:28px;
    line-height:1;
    white-space:nowrap;
  }

  .logo span{
    display:none;
  }

  .menu-toggle{
    display:flex;
    flex-direction:column;
    gap:7px;
    width:34px;
    height:28px;
    border:0;
    background:transparent;
    padding:0;
  }

  .menu-toggle span{
    display:block;
    height:1px;
    width:34px;
    background:var(--ana);
  }

  .primary-nav{
    display:none;
    width:100%;
    margin-top:24px;
  }

  .primary-nav.is-open{
    display:block;
  }

  .primary-nav .menu{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .primary-nav .menu a{
    font-size:18px;
    letter-spacing:.06em;
  }

  .header-inner{
    flex-wrap:wrap;
  }
}