/* =========================================================
   EKO MİMARLIK | MÜHENDİSLİK — style.css
   ========================================================= */

:root{
  --bg:            #0d0d0d;
  --bg-2:          #131313;
  --bg-3:          #181818;
  --line:          rgba(255,255,255,.10);
  --line-soft:     rgba(255,255,255,.06);
  --txt:           #f2f2f2;
  --txt-dim:       #9a9a9a;
  --txt-dimmer:    #6e6e6e;
  --accent:        #ffffff;

  --header-h:      86px;
  --pad-x:         clamp(20px, 4vw, 56px);
  --ease:          cubic-bezier(.22,.61,.36,1);

  --font: "Helvetica Neue", "Inter", "Segoe UI", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ max-width:100%; display:block; }

svg{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

::selection{ background:#fff; color:#0d0d0d; }

body.is-loading{ overflow:hidden; }

/* =========================================================
   SPLASH
   ========================================================= */
#splash{
position:fixed;
inset:0;
z-index:1000;
display:grid;
place-items:center;
background:#000;
transition:
opacity .8s var(--ease),
visibility .8s var(--ease);
}

#splash.is-hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.splash-inner{
position:relative;
}


.splash-inner::before{
content:"";
position:absolute;

width:125%;
aspect-ratio:1;

border:1px solid rgba(255,255,255,.12);
border-radius:50%;

opacity:0;
transform:scale(.8);

animation:ringReveal 1.5s ease forwards;
}


@keyframes ringReveal{

to{
opacity:1;
transform:scale(1);
}

}

.splash-inner::before{
content:"";
position:absolute;
width:120%;
aspect-ratio:1;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
animation:ringPulse 2.5s ease infinite;
}

.splash-inner{
position:relative;
}


.splash-inner::before{
content:"";
position:absolute;

width:130%;
aspect-ratio:1;

border:1px solid rgba(255,255,255,.08);
border-radius:50%;

animation:
circleReveal 2s ease forwards;
}


@keyframes circleReveal{

from{
opacity:0;
transform:scale(.7);
}

to{
opacity:1;
transform:scale(1);
}

}

.splash-mark{
width:clamp(220px,34vw,420px);
height:auto;
display:block;

opacity:0;
transform:scale(.88);
filter:blur(10px);

animation:
logoReveal 1.3s cubic-bezier(.22,.61,.36,1) forwards;
}


@keyframes logoReveal{

0%{
opacity:0;
transform:scale(.88);
filter:blur(10px);
}

60%{
opacity:1;
transform:scale(1.04);
filter:blur(0);
}

100%{
opacity:1;
transform:scale(1);
}

}

/* ---------- reusable bits ---------- */
.section-title{
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--txt-dim);
  text-transform:uppercase;
}

.block{
  padding:clamp(28px,3.4vw,44px) var(--pad-x);
  border-top:1px solid var(--line);
  background:var(--bg);
}
.block--first{
  padding-top:calc(var(--header-h) + clamp(28px,3.4vw,44px));
  border-top:0;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  background:#000;
  transition:border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
}

.header-inner{
  height:100%;
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
  padding:0 var(--pad-x);
}

/* brand */
.brand{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.brand-photo{
  height:clamp(56px,9vw,74px); width:auto;
  display:block;
}

/* nav */
.main-nav{
  display:flex; align-items:center; gap:clamp(18px,2.6vw,40px);
  margin-inline:auto;
}
.main-nav a{
  position:relative;
  font-size:.72rem; letter-spacing:.18em; color:#e6e6e6;
  padding:6px 0;
  transition:color .25s var(--ease);
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:rgba(255,255,255,.35);
  transform:scaleX(1); transform-origin:left;
  transition:background .25s var(--ease);
}
.main-nav a:hover,
.main-nav a.is-active{ color:#fff; }
.main-nav a:hover::after,
.main-nav a.is-active::after{ background:#fff; }

/* language */
.lang-switch{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.lang-btn{
  font-size:.72rem; letter-spacing:.16em; color:var(--txt-dim);
  padding-bottom:5px; border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.lang-btn:hover{ 
  color:#fff; 
}

.lang-btn.is-active{ 
  color:#fff; 
  border-bottom-color:#fff; 
}

.lang-sep{ 
  color:var(--txt-dimmer); 
  font-size:.72rem; 
}
/* burger */
.nav-toggle{ display:none; width:26px; height:18px; position:relative; flex:0 0 auto; }
.nav-toggle span{
  position:absolute; left:0; right:0; height:1.5px; background:#fff;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:8px; }
.nav-toggle span:nth-child(3){ top:16px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:min(100svh, 780px);
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 70% 40%, #3a3f45 0%, #1c1f23 45%, #0d0d0d 100%);
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  animation:heroIn 1.6s var(--ease) forwards;
}
@keyframes heroIn{ to{ transform:scale(1); } }

.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,8,8,.96) 0%, rgba(8,8,8,.72) 32%, rgba(8,8,8,.15) 62%, rgba(8,8,8,.45) 100%),
    linear-gradient(180deg, rgba(8,8,8,.85) 0%, rgba(8,8,8,0) 28%, rgba(8,8,8,.55) 100%);
}

.hero-content{
  position:relative; z-index:2;
  padding:0 var(--pad-x);
  margin-top:var(--header-h);
  max-width:760px;
  border-left:1px solid rgba(255,255,255,.28);
  padding-left:clamp(24px,3vw,44px);
  margin-left:var(--pad-x);
}

.hero-title{
  font-size:clamp(2.6rem, 6.2vw, 5.1rem);
  font-weight:200;
  line-height:1.06;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hero-title span{ display:block; }

.hero-text{
  margin-top:clamp(20px,2.6vw,34px);
  font-size:clamp(.95rem, 1.35vw, 1.18rem);
  line-height:1.65;
  color:#d8d8d8;
  white-space:pre-line;
}

.hero-cta{
  margin-top:clamp(30px,4vw,52px);
  display:inline-flex; align-items:center; gap:clamp(28px,6vw,90px);
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.5);
  font-size:.78rem; letter-spacing:.2em;
  transition:gap .35s var(--ease), border-color .35s var(--ease);
}
.hero-cta svg{ width:40px; height:12px; stroke-width:1.2; }
.hero-cta:hover{ gap:clamp(38px,8vw,120px); border-bottom-color:#fff; }

/* animate-in */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* =========================================================
   BİZ KİMİZ (ana sayfa)
   ========================================================= */
.team{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,34px);
}
.member{ display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.8vw,24px); }

.member-photo{
  width:clamp(88px,8.4vw,126px);
  aspect-ratio:3/4;
  background:linear-gradient(160deg,#2a2a2a,#141414);
  background-size:cover; background-position:center top;
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s var(--ease);
}
.member:hover .member-photo{ filter:grayscale(.15) contrast(1); }

.member-name{
  font-size:clamp(.95rem,1.25vw,1.2rem);
  font-weight:300; letter-spacing:.06em; line-height:1.25;
}
.member-role{
  margin-top:10px;
  font-size:.76rem; color:var(--txt-dim);
}
.member-tags{
  margin-top:clamp(14px,1.6vw,22px);
  display:grid; gap:7px;
}
.member-tags li{
  position:relative; padding-left:13px;
  font-size:.72rem; color:#b9b9b9;
}
.member-tags li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:3px; height:3px; border-radius:50%; background:#8a8a8a;
}

/* =========================================================
   HAKKIMIZDA (ayrı sayfa)
   ========================================================= */
.about-grid{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,64px);
  align-items:start;
}
.about-intro{
  display:grid;
  gap:clamp(16px,2vw,22px);
  font-size:.92rem; line-height:2.5; color:#d8d8d8;
}

.about-team{
  display:grid;
  gap:clamp(44px,5.5vw,72px);
}
.about-member{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,3.2vw,44px);
  align-items:start;
}

.about-photo{
  width:clamp(150px,17vw,230px);
  aspect-ratio:3/4;
  background:linear-gradient(160deg,#2a2a2a,#141414);
  background-size:cover; background-position:center top;
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s var(--ease);
}
.about-member:hover .about-photo{ filter:grayscale(.15) contrast(1); }

.about-name{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:300; letter-spacing:.02em;
}
.about-role{
  margin-top:8px;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-dim);
}
.about-bio{
  margin-top:clamp(16px,2vw,22px);
  max-width:640px;
  font-size:.92rem; line-height:1.75; color:#d8d8d8;
}

/* =========================================================
   PROJELER (carousel)
   ========================================================= */
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.carousel-nav{ display:flex; gap:10px; }
.round-btn{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:#cfcfcf;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.round-btn svg{ width:14px; height:14px; stroke-width:1.4; }
.round-btn:hover{ background:#fff; border-color:#fff; color:#0d0d0d; }
.round-btn:disabled{ opacity:.3; cursor:default; }
.round-btn:disabled:hover{ background:none; border-color:var(--line); color:#cfcfcf; }

.carousel{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * clamp(10px,1.1vw,16px)) / 4);
  gap:clamp(10px,1.1vw,16px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:4px;
}
.carousel::-webkit-scrollbar{ display:none; }

.project{ scroll-snap-align:start; display:block; }
.project-img{
  aspect-ratio:16/11;
  background:linear-gradient(150deg,#2f3338,#15171a);
  background-size:cover; background-position:center;
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.project:hover .project-img{ transform:scale(1.03); filter:brightness(1.08); }

.project-meta{
  margin-top:14px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.project-name{
  font-size:.74rem; font-weight:400; letter-spacing:.14em;
}
.project-loc{
  margin-top:8px;
  font-size:.68rem; letter-spacing:.12em; color:var(--txt-dim);
}
.project-arrow{
  width:34px; height:11px; stroke-width:1.1; color:#cfcfcf;
  transition:transform .35s var(--ease), color .35s var(--ease);
}
.project:hover .project-arrow{ transform:translateX(6px); color:#fff; }

.projects-grid{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,28px);
}

/* =========================================================
   PROJE DETAY
   ========================================================= */
.back-link{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:clamp(20px,2.4vw,30px);
  font-size:.72rem; letter-spacing:.18em; color:var(--txt-dim);
  transition:color .25s var(--ease);
}
.back-link:hover{ color:#fff; }
.back-link svg{ width:16px; height:11px; stroke-width:1.2; transform:scaleX(-1); }

.project-detail-loc{
  margin-top:10px;
  font-size:.78rem; letter-spacing:.12em; color:var(--txt-dim); text-transform:uppercase;
}

.gallery-grid{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,20px);
}
.gallery-img{
  aspect-ratio:4/3;
  background:linear-gradient(150deg,#2f3338,#15171a);
  background-size:cover; background-position:center;
}

/* =========================================================
   SÜREÇ
   ========================================================= */
.process{
  padding:clamp(34px,4vw,58px) var(--pad-x);
  border-top:1px solid var(--line);
  background:var(--bg-2);
}
.process-list{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(16px,2vw,30px);
}
.process-list li{
  padding-top:18px;
  border-top:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.process-list li:hover{ border-top-color:rgba(255,255,255,.45); }
.step-no{
  font-size:.68rem; letter-spacing:.16em; color:var(--txt-dimmer);
}
.process-list h3{
  margin-top:12px;
  font-size:.76rem; font-weight:400; letter-spacing:.14em;
}
.process-list p{
  margin-top:10px;
  font-size:.74rem; line-height:1.6; color:var(--txt-dim);
}

/* =========================================================
   HİZMETLER
   ========================================================= */
.services{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid; grid-template-columns:repeat(6,1fr);
}
.service{
  padding:clamp(14px,1.6vw,22px) clamp(8px,1vw,16px) clamp(6px,1vw,14px);
  text-align:center;
  border-right:1px solid var(--line-soft);
  transition:background .35s var(--ease);
}
.service:last-child{ border-right:0; }
.service:hover{ background:var(--bg-3); }

.service-icon{
  width:clamp(34px,3vw,44px); height:clamp(34px,3vw,44px);
  margin:0 auto;
  color:#e2e2e2; stroke-width:1.2;
  transition:transform .45s var(--ease);
}
.service:hover .service-icon{ transform:translateY(-4px); }

.service h3{
  margin-top:clamp(16px,1.8vw,26px);
  font-size:.7rem; font-weight:400; letter-spacing:.1em; line-height:1.4;
}
.service-rule{
  display:block; width:22px; height:1px;
  margin:16px auto 0;
  background:rgba(255,255,255,.32);
  transition:width .4s var(--ease), background .4s var(--ease);
}
.service:hover .service-rule{ width:40px; background:#fff; }

/* =========================================================
   İLETİŞİM
   ========================================================= */
.contact-form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,64px);
  align-items:start;
}

.contact-list{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid; gap:clamp(14px,1.8vw,22px);
}
.contact-list li{
  display:flex; align-items:center; gap:16px;
  font-size:.82rem; color:#dcdcdc;
}
.contact-list svg{ width:19px; height:19px; color:#bdbdbd; stroke-width:1.3; flex:0 0 auto; }
.contact-list a{ transition:color .25s var(--ease); }
.contact-list a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }

.socials{
  margin-top:clamp(24px,3vw,38px);
  display:flex; gap:14px;
}
.socials a{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:#cfcfcf;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.socials svg{ width:17px; height:17px; stroke-width:1.3; }
.socials a:hover{ background:#fff; border-color:#fff; color:#0d0d0d; transform:translateY(-2px); }

.map{
  margin-top:clamp(24px,3vw,38px);
  aspect-ratio:16/9;
  border:1px solid var(--line);
  overflow:hidden;
  filter:grayscale(.4) invert(90%) contrast(.9) brightness(.95);
}
.map iframe{ width:100%; height:100%; border:0; display:block; }

.quote-title{
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:200;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.quote-sub{
  margin-top:14px;
  max-width:520px;
  font-size:.9rem;
  line-height:1.6;
  color:#d8d8d8;
}
.quote-form{
  margin-top:clamp(26px,3.2vw,38px);
  max-width:720px;
  display:grid;
  gap:clamp(20px,2.4vw,28px);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,28px);
}
.form-field{ display:flex; flex-direction:column; gap:10px; }
.form-field label{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim);
}
.form-field input,
.form-field textarea{
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:8px 0 10px;
  font:inherit; font-size:.9rem; color:#fff;
  transition:border-color .25s var(--ease);
  resize:vertical;
}
.form-field input:focus,
.form-field textarea:focus{ outline:0; border-bottom-color:#fff; }
.form-field textarea{ min-height:66px; }

.quote-submit{
  justify-self:start;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.5);
  font-size:.78rem; letter-spacing:.2em;
  transition:border-color .3s var(--ease), opacity .3s var(--ease);
}
.quote-submit:hover{ border-bottom-color:#fff; }
.quote-submit:disabled{ opacity:.5; cursor:default; }

.quote-status{
  font-size:.8rem; min-height:1.2em; margin:0;
  color:var(--txt-dim);
}
.quote-status.is-success{ color:#8fd3a3; }
.quote-status.is-error{ color:#e08b8b; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg);
}
.footer-inner{
  padding:clamp(18px,2.2vw,26px) var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;
}

.copyright{ font-size:.7rem; color:var(--txt-dimmer); }
.footer-links{ display:flex; align-items:center; gap:14px; }
.footer-links a{
  font-size:.68rem; letter-spacing:.14em; color:var(--txt-dim);
  transition:color .25s var(--ease);
}
.footer-links a:hover{ color:#fff; }
.footer-sep{ color:#3d3d3d; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .carousel{ grid-auto-columns:calc((100% - 2 * 14px) / 3); }
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .services{ grid-template-columns:repeat(3,1fr); }
  .service{ border-bottom:1px solid var(--line-soft); }
  .service:nth-child(3n){ border-right:0; }
  .service:nth-last-child(-n+3){ border-bottom:0; }
  .process-list{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:960px){
  :root{ --header-h:72px; }

  .main-nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,10,10,.97);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:6px var(--pad-x) 18px;
    transform:translateY(-12px);
    opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .main-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .main-nav a{ padding:15px 0; border-bottom:1px solid var(--line-soft); }
  .main-nav a::after{ display:none; }

  .lang-switch{ margin-left:auto; }
  .nav-toggle{ display:block; }

  .hero-content{ margin-left:0; max-width:none; }
  .carousel{ grid-auto-columns:calc((100% - 14px) / 2); }
  .contact-form-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .team{ grid-template-columns:1fr; }
  .projects-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .about-member{ grid-template-columns:1fr; }
  .about-photo{ width:150px; }
  .process-list{ grid-template-columns:1fr 1fr; }
  .services{ grid-template-columns:1fr 1fr; }
  .service:nth-child(3n){ border-right:1px solid var(--line-soft); }
  .service:nth-child(2n){ border-right:0; }
  .service:nth-last-child(-n+3){ border-bottom:1px solid var(--line-soft); }
  .service:nth-last-child(-n+2){ border-bottom:0; }
  .carousel{ grid-auto-columns:78%; }
  .hero-title{ font-size:clamp(2.2rem,10vw,3.2rem); }
  .footer-inner{ justify-content:center; text-align:center; }
  .form-row{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}