/* ============================================================
   ARKHE YAPI — Fütüristik mimari/inşaat · dark editorial
   Static · self-host font · WCAG · reduced-motion + WebGL fallback
   ============================================================ */

/* ---------- Fonts (self-host, latin + latin-ext = TR) ---------- */
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url("../fonts/sg-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url("../fonts/sg-500-latinext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url("../fonts/sg-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url("../fonts/sg-700-latinext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("../fonts/inter-400-latinext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("../fonts/inter-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("../fonts/inter-500-latinext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url("../fonts/sm-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url("../fonts/sm-400-latinext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --bg:#0A0B0D; --surface-1:#111317; --surface-2:#16191F;
  --line:#23262D; --line-strong:#313640;
  --text:#F2F0EC; --text-dim:#8B9099; --text-mute:#565B63;
  --accent:#4C6FFF; --accent-ink:#0A0B0D; --warm:#C8A97E; --focus:#7C98FF;

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --tracking-label:.18em; --tracking-hero:-.02em;

  --step--1:clamp(.83rem,.78rem + .26vw,1rem);
  --step-0:clamp(1rem,.93rem + .35vw,1.2rem);
  --step-1:clamp(1.2rem,1.09rem + .55vw,1.5rem);
  --step-2:clamp(1.44rem,1.28rem + .82vw,1.95rem);
  --step-3:clamp(1.73rem,1.49rem + 1.19vw,2.6rem);
  --step-4:clamp(2.1rem,1.6rem + 2.4vw,3.6rem);
  --hero:clamp(2.4rem,1rem + 6.2vw,6.2rem);

  --space-s:clamp(1rem,.9rem + .5vw,1.5rem);
  --space-m:clamp(1.5rem,1.3rem + 1vw,2.5rem);
  --space-l:clamp(2.5rem,2rem + 2.5vw,4rem);
  --space-section:clamp(5rem,3rem + 8vw,11rem);
  --gutter:clamp(1.15rem,.5rem + 2.4vw,2.6rem);
  --measure:60ch; --maxw:1520px;

  --dur-2:400ms; --dur-3:700ms; --dur-4:1200ms;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.55;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* Film grain atmosphere */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.skip-link{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-160%);
  background:var(--text);color:var(--bg);padding:.6rem 1rem;font:600 .85rem/1 var(--font-mono);transition:transform .2s}
.skip-link:focus{transform:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Custom cursor ---------- */
@media (hover:hover) and (pointer:fine){ body{cursor:none} }
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:120;pointer-events:none;will-change:transform;mix-blend-mode:difference}
.cursor{width:46px;height:46px;margin:-23px 0 0 -23px;border:1px solid var(--text);border-radius:50%;
  display:grid;place-items:center;transition:width .35s var(--ease-out-quart),height .35s var(--ease-out-quart),background .3s}
.cursor-dot{width:5px;height:5px;margin:-2.5px;background:var(--text);border-radius:50%}
.cursor__label{font:600 .62rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bg);
  opacity:0;transition:opacity .25s;white-space:nowrap}
.cursor.is-hover{width:66px;height:66px;margin:-33px 0 0 -33px}
.cursor.has-label{width:104px;height:104px;margin:-52px 0 0 -52px;background:var(--text);border-color:var(--text)}
.cursor.has-label .cursor__label{opacity:1}
@media (hover:hover) and (pointer:fine){ .cursor.has-label ~ .cursor-dot,.cursor.has-label{} }
:where(html:not(.cursor-on)) .cursor,:where(html:not(.cursor-on)) .cursor-dot{display:none}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--accent);z-index:130;box-shadow:0 0 12px var(--accent)}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--gutter);overflow:hidden}
.loader__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(40px,7vw,90px) clamp(40px,7vw,90px);mask:radial-gradient(120% 120% at 50% 30%,#000,transparent 75%)}
.loader__row{position:relative;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line-strong);padding-bottom:.7rem}
.loader__word{font:700 clamp(1.4rem,5vw,3rem)/1 var(--font-display);letter-spacing:var(--tracking-hero)}
.loader__count{font:400 var(--step-1)/1 var(--font-mono);color:var(--text-dim)}
.loader__count i{color:var(--text-mute);font-style:normal}
.loader__bar{position:relative;height:2px;background:var(--line-strong);margin-top:.9rem}
.loader__bar span{position:absolute;inset:0;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* ---------- WebGL canvas ---------- */
.webgl-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease .1s}
.webgl-on .webgl-canvas{opacity:1}

/* ---------- Buttons / links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;font:600 var(--step--1)/1 var(--font-mono);
  letter-spacing:.05em;text-transform:uppercase;padding:1.05em 1.6em;border:1px solid var(--line-strong);border-radius:2px;
  transition:color .3s,background .3s,border-color .3s;overflow:hidden;white-space:nowrap}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--text);transform:translateY(101%);transition:transform .5s var(--ease-out-expo);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--solid::before{background:var(--accent)}
.btn--solid:hover{color:#fff}
.btn--line,.btn--ghost{color:var(--text)}
.btn--line:hover,.btn--ghost:hover{color:var(--bg)}
.btn--full{width:100%;justify-content:center;margin-top:.4rem}

.link-arrow{display:inline-flex;align-items:center;gap:.6em;font:600 var(--step--1)/1 var(--font-mono);
  letter-spacing:.04em;text-transform:uppercase;color:var(--text);padding-bottom:.4em;border-bottom:1px solid var(--line-strong);
  margin-top:var(--space-m);transition:gap .3s,border-color .3s,color .3s}
.link-arrow i{color:var(--accent);transition:transform .3s var(--ease-out-quart)}
.link-arrow:hover{gap:1em;border-color:var(--text)}
.link-arrow:hover i{transform:translateX(4px)}

/* ---------- Shared bits ---------- */
.tag{font:400 var(--step--1)/1 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:.7em}
.tag__idx{color:var(--warm)}
.sec-idx{display:block;font:400 var(--step--1)/1 var(--font-mono);letter-spacing:.12em;color:var(--warm);margin-bottom:1.2rem}
.sec-kicker{font:400 var(--step--1)/1 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-dim)}
.sec-title{font:500 var(--step-4)/1.02 var(--font-display);letter-spacing:var(--tracking-hero);text-wrap:balance}
.line{display:block;overflow:hidden}
.line>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease-out-expo);will-change:transform}
.line.is-in>span{transform:none}
[data-fade]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo);will-change:transform,opacity}
[data-fade].is-in{opacity:1;transform:none}
em{font-style:normal;color:var(--warm)}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;transition:transform .5s var(--ease-out-expo),background .4s,border-color .4s;
  border-bottom:1px solid transparent}
.site-header::before{content:"";position:absolute;inset:0;background:color-mix(in oklab,var(--bg) 72%,transparent);
  backdrop-filter:blur(10px);opacity:0;transition:opacity .4s;z-index:-1}
.site-header.is-scrolled{border-color:var(--line)}
.site-header.is-scrolled::before{opacity:1}
.site-header.nav--hidden{transform:translateY(-101%)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--maxw);margin-inline:auto;padding:1.35rem var(--gutter);transition:padding .4s}
.site-header.is-scrolled .site-header__inner{padding-block:.9rem}
.brand{display:inline-flex;align-items:center;gap:.7em}
.brand__mark{width:14px;height:14px;border:1.5px solid var(--text);transform:rotate(45deg);position:relative}
.brand__mark::after{content:"";position:absolute;inset:3px;background:var(--accent)}
.brand__name{font:700 var(--step-0)/1 var(--font-display);letter-spacing:.02em}
.brand__name em{color:var(--text-dim);font-style:normal}
.nav{display:flex;gap:clamp(1rem,2.2vw,2.4rem);margin-left:auto}
.nav a{font:500 var(--step--1)/1 var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim);
  position:relative;padding:.3em 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--text);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-out-expo)}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
.nav__cta{padding:.85em 1.2em;margin-left:.5rem}
.burger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center}
.burger span{width:22px;height:1.5px;background:var(--text);transition:transform .35s,opacity .35s}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(6rem,14vh,10rem) var(--gutter) var(--space-l);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:1;transition:opacity .8s;
  background:
    radial-gradient(90% 70% at 68% 18%,rgba(76,111,255,.14),transparent 60%),
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:auto,clamp(46px,6vw,84px) clamp(46px,6vw,84px),clamp(46px,6vw,84px) clamp(46px,6vw,84px);
  mask:radial-gradient(130% 120% at 60% 25%,#000 15%,transparent 78%)}
.webgl-on .hero::before{opacity:0}
.hero__inner{max-width:min(100%,56rem);position:relative;z-index:1}
.hero .tag{margin-bottom:var(--space-m)}
.hero__title{font:700 var(--hero)/1 var(--font-display);letter-spacing:var(--tracking-hero);margin-bottom:var(--space-m);max-width:none}
.hero__sub{max-width:44ch;color:var(--text-dim);font-size:var(--step-1);line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:var(--space-l)}
.hero__foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-top:auto;
  padding-top:var(--space-l);font:400 var(--step--1)/1 var(--font-mono);color:var(--text-mute);letter-spacing:.06em}
.hero__scroll{display:inline-flex;align-items:center;gap:.7em}
.hero__scroll i{width:1px;height:34px;background:linear-gradient(var(--text-mute),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--accent);animation:scrolldrop 1.8s var(--ease-inout) infinite}
@keyframes scrolldrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(280%)}}
.hero__coord{text-align:right}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);padding-block:1.1rem;overflow:hidden;white-space:nowrap;background:var(--bg)}
.marquee__track{display:inline-flex;will-change:transform}
.marquee__track span{font:500 var(--step-2)/1 var(--font-display);letter-spacing:.01em;color:var(--text);text-transform:uppercase;padding-right:0}
.marquee__track i{color:var(--warm);font-style:normal;padding-inline:.7em}

/* ---------- STUDYO ---------- */
.studyo{background:var(--bg);padding-block:var(--space-section)}
.studyo__grid{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:var(--space-l)}
.studyo__label{position:sticky;top:20vh;align-self:start;display:flex;flex-direction:column;gap:.6rem}
.studyo__label .sec-idx{margin:0}
.studyo__line{width:1px;height:120px;background:linear-gradient(var(--line-strong),transparent);margin-top:1rem;transform-origin:top;transform:scaleY(0);transition:transform 1.1s var(--ease-out-expo)}
.studyo__line.is-in{transform:scaleY(1)}
.studyo__title{margin-bottom:var(--space-m)}
.studyo__p{max-width:var(--measure);color:var(--text-dim);font-size:var(--step-1);margin-bottom:var(--space-s)}
.studyo__p:first-of-type{color:var(--text)}

/* ---------- GALLERY (horizontal pinned) ---------- */
.gallery{background:var(--bg);padding-top:var(--space-section);position:relative}
.gallery__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:var(--space-l)}
.gallery__lead{max-width:34ch;color:var(--text-dim);text-align:right}
.gallery__viewport{overflow:hidden}
.gallery__track{display:flex;gap:clamp(1.4rem,3vw,3rem);padding:0 var(--gutter) var(--space-section);align-items:stretch;will-change:transform}
.proj{flex:0 0 auto;width:min(82vw,860px);display:flex;flex-direction:column;opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo)}
.proj.is-in{opacity:1;transform:none}
.proj__media{position:relative;aspect-ratio:16/10;background:var(--surface-1);overflow:hidden;border:1px solid var(--line);
  clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease-out-expo) .06s}
.proj.is-in .proj__media{clip-path:inset(0 0 0 0)}
.proj__ph{position:absolute;inset:0;background:
    radial-gradient(120% 100% at 30% 20%,color-mix(in oklab,var(--pc,#3a4658) 90%,#fff 6%),transparent 65%),
    linear-gradient(150deg,var(--pc,#3a4658),#0b0c0f 88%);
  transform:scale(1.08)}
.proj__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 44px;mix-blend-mode:overlay;opacity:.6}
.proj__idx{position:absolute;top:1rem;left:1.1rem;font:400 var(--step-1)/1 var(--font-mono);color:var(--warm);z-index:2;mix-blend-mode:difference}
.proj__meta{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.2rem 1rem;padding-top:1.1rem;border-top:1px solid var(--line);margin-top:1.1rem}
.proj__name{grid-column:1;font:500 var(--step-2)/1.05 var(--font-display);letter-spacing:-.01em}
.proj__type{grid-column:2;grid-row:1;font:400 var(--step--1)/1 var(--font-mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.proj__desc{grid-column:1/-1;color:var(--text-dim);max-width:52ch;margin-top:.5rem}
.proj__spec{grid-column:1/-1;display:flex;gap:1.2rem;margin-top:.9rem}
.proj__spec b{font:400 var(--step--1)/1 var(--font-mono);color:var(--text-mute);font-weight:400;letter-spacing:.04em}
.proj__ph{transition:transform .6s var(--ease-out-quart)}
@media (hover:hover){.proj:hover .proj__ph{transform:scale(1.13)}}
.proj--all{width:min(60vw,340px);align-self:stretch;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:2px;opacity:1;transform:none;transition:background .4s,border-color .4s}
.proj--all__inner{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.proj--all i{font:400 2.4rem/1 var(--font-display);color:var(--accent);transition:transform .4s var(--ease-out-quart)}
.proj--all span{font:500 var(--step-2)/1.05 var(--font-display)}
.proj--all:hover{background:var(--surface-1);border-color:var(--line-strong)}
.proj--all:hover i{transform:translateX(8px)}

/* ---------- SERVICES (pinned narration) ---------- */
.services{background:var(--bg);padding-block:var(--space-section)}
.services__grid{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:var(--space-l)}
.services__sticky{position:sticky;top:22vh;align-self:start;display:flex;flex-direction:column}
.services__sticky .sec-idx{margin-bottom:1rem}
.services__intro{color:var(--text-dim);max-width:34ch;margin-top:var(--space-m)}
.services__count{font:400 var(--step-1)/1 var(--font-mono);color:var(--text-mute);margin-top:var(--space-l)}
.services__count b{color:var(--warm);font-weight:400}
.services__list{list-style:none;counter-reset:svc}
.svc{padding:var(--space-m) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.4rem;align-items:baseline;
  opacity:.42;transition:opacity .5s}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc.is-active{opacity:1}
.svc__idx{font:400 var(--step--1)/1 var(--font-mono);color:var(--warm)}
.svc__name{grid-column:2;font:500 var(--step-3)/1.05 var(--font-display);letter-spacing:-.01em}
.svc__desc{grid-column:2;color:var(--text-dim);max-width:46ch;margin-top:.4rem}

/* ---------- PROCESS (timeline) ---------- */
.process{background:var(--surface-1);padding-block:var(--space-section);border-block:1px solid var(--line)}
.process__head{margin-bottom:var(--space-l)}
.steps{list-style:none;position:relative;display:grid;gap:0;padding-left:clamp(2rem,6vw,5rem)}
.steps__rail{position:absolute;left:clamp(.5rem,2.4vw,2rem);top:1.2rem;bottom:1.2rem;width:1px;background:var(--line-strong)}
.steps__rail span{position:absolute;top:0;left:0;width:100%;height:0;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:baseline;padding:var(--space-m) 0;border-top:1px solid var(--line);
  opacity:.4;transition:opacity .5s}
.step:first-child{border-top:0}
.step.is-active{opacity:1}
.step__idx{font:400 var(--step-2)/1 var(--font-mono);color:var(--warm);position:relative}
.step__idx::before{content:"";position:absolute;left:calc(-1*clamp(2rem,6vw,5rem) - .5px);top:.35em;width:9px;height:9px;
  background:var(--surface-1);border:1px solid var(--line-strong);border-radius:50%;transform:translateX(-3px)}
.step.is-active .step__idx::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent)}
.step__name{font:500 var(--step-2)/1.1 var(--font-display)}
.step__desc{color:var(--text-dim);margin-top:.4rem;max-width:48ch}

/* ---------- STATS ---------- */
.stats{background:var(--bg);padding-block:var(--space-section)}
.stats__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-m);border-block:1px solid var(--line);padding-block:var(--space-l)}
.stat{display:flex;flex-direction:column;gap:.5rem}
.stat__num{font:500 var(--step-3)/1 var(--font-display);color:var(--text);letter-spacing:.02em}
.stat__label{font:400 var(--step--1)/1.3 var(--font-mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.stats__note{margin-top:var(--space-m);color:var(--text-mute);font:400 var(--step--1)/1.4 var(--font-mono)}

/* ---------- CONTACT ---------- */
.contact{background:var(--bg);padding-block:var(--space-section)}
.contact__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-l)}
.contact__title{margin-bottom:var(--space-m)}
.contact__lead{color:var(--text-dim);font-size:var(--step-1);max-width:34ch}
.contact__info{list-style:none;margin-top:var(--space-l);display:grid;gap:0}
.contact__info li{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.contact__info li:last-child{border-bottom:1px solid var(--line)}
.contact__info span{font:400 var(--step--1)/1 var(--font-mono);color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em}
.contact__info b{font-weight:500;color:var(--text-dim);text-align:right}
.contact__form{background:var(--surface-1);border:1px solid var(--line);border-radius:3px;padding:clamp(1.4rem,3vw,2.4rem)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{margin-bottom:1.15rem}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{display:block;font:400 var(--step--1)/1 var(--font-mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.55rem}
.field label i{color:var(--text-mute);font-style:normal;text-transform:none}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:2px;
  color:var(--text);font:400 var(--step-0)/1.4 var(--font-body);padding:.85rem .95rem;transition:border-color .3s}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B9099' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center}
.form-status{margin-top:.9rem;font:400 var(--step--1)/1.4 var(--font-mono);color:var(--warm);min-height:1.2em}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding-top:var(--space-section)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-l);padding-bottom:var(--space-l)}
.footer__logo{font-size:var(--step-2);display:inline-block;margin-bottom:1rem}
.footer__brand p{font-family:var(--font-display);font-size:var(--step-1);color:var(--text);max-width:22ch}
.footer__desc{display:block;margin-top:.6rem;color:var(--text-mute);font:400 var(--step--1)/1.4 var(--font-mono)}
.footer__col{display:flex;flex-direction:column;gap:.75rem}
.footer__h{font:400 var(--step--1)/1 var(--font-mono);color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.footer__col a,.footer__col b{color:var(--text-dim);font-weight:400;transition:color .3s;display:inline-flex;gap:.4em;align-items:center}
.footer__col a:hover{color:var(--text)}
.footer__col i{color:var(--text-mute);font-style:normal}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.4rem 0;border-top:1px solid var(--line);font:400 var(--step--1)/1 var(--font-mono);color:var(--text-mute)}
.footer__ph{color:var(--warm);opacity:.7}

/* ---------- WebGL-on transparency ---------- */
/* Canvas (z0) is behind sections; the gallery must be transparent so the
   see-through media boxes reveal the WebGL planes, not the gallery's own bg. */
.webgl-on .gallery{background:transparent}
.webgl-on .proj__media{background:transparent;border-color:var(--line);clip-path:none!important}
.webgl-on .proj__ph{opacity:0}
.webgl-on .proj__media::after{opacity:0}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .studyo__grid,.services__grid,.contact__grid{grid-template-columns:1fr}
  .studyo__label,.services__sticky{position:static;top:auto}
  .studyo__line{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .stats__grid{grid-template-columns:repeat(3,1fr);row-gap:var(--space-l)}
}
@media (min-width:761px){
  .gallery__viewport{height:100vh;display:flex;align-items:center}
  .gallery__track{padding-bottom:0;align-items:center;height:auto}
}
@media (max-width:760px){
  .nav,.nav__cta{display:none}
  .burger{display:flex}
  .site-header.menu-open + *{}
  .nav.is-open{display:flex;position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:1.4rem;padding:var(--gutter);z-index:99}
  .nav.is-open a{font-family:var(--font-display);font-size:var(--step-3);color:var(--text);text-transform:none}
  .nav.is-open a::after{display:none}
  .burger.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .burger.is-open span:last-child{transform:translateY(-3px) rotate(-45deg)}
  /* Gallery → vertical stack */
  .gallery__viewport{overflow:visible}
  .gallery__track{flex-direction:column;transform:none!important;padding-bottom:var(--space-l)}
  .proj{width:auto;opacity:1;transform:none}
  .proj--all{width:auto;padding:var(--space-l)}
  .gallery__lead{text-align:left}
  .field--2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr 1fr}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:.6rem}
  .hero__coord{text-align:left}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .line>span,[data-fade],[data-feat],.proj,.step{transform:none!important;opacity:1!important}
  .proj__media{clip-path:none!important}
  .webgl-canvas{display:none!important}
  .hero__scroll i::after{animation:none}
  body{cursor:auto!important}
  .cursor,.cursor-dot{display:none!important}
  .svc,.step{opacity:1!important}
}

/* ── Pera İnşaat — görsel override ── */
.proj__media{background-size:cover;background-position:center;background-repeat:no-repeat}
@media (hover:hover){.proj:hover .proj__media{transform:scale(1.03)}}
.proj__media{transition:transform .6s var(--ease-out-quart)}
.hero::before{
  background:linear-gradient(180deg,rgba(10,11,13,.68),rgba(10,11,13,.90)),url("../assets/projeler/hero.jpg") center/cover no-repeat;
  mask:none;opacity:1}
.webgl-on .hero::before{opacity:1}

/* ══ PROJE DETAY SAYFASI ══ */
.pd-hero{position:relative;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(6rem,14vh,10rem) var(--gutter) var(--space-l);overflow:hidden;isolation:isolate}
.pd-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,11,13,.35),rgba(10,11,13,.55) 45%,rgba(10,11,13,.94)),var(--pd-img) center/cover no-repeat}
.pd-back{position:absolute;top:clamp(5rem,10vh,7rem);left:var(--gutter);z-index:2;display:inline-flex;gap:.5rem;align-items:center;
  font:500 var(--step--1)/1 var(--font-mono);color:var(--text-dim);letter-spacing:.04em}
.pd-back:hover{color:var(--text)}
.pd-hero__tag{font:400 var(--step--1)/1 var(--font-mono);color:var(--warm);letter-spacing:.14em;margin-bottom:var(--space-s)}
.pd-hero__title{font:700 clamp(2.6rem,7vw,6rem)/.98 var(--font-display);letter-spacing:-.02em;margin-bottom:var(--space-m);max-width:14ch}
.pd-metabar{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);border-top:1px solid var(--line);padding-top:var(--space-m)}
.pd-metabar div{display:flex;flex-direction:column;gap:.35rem}
.pd-metabar span{font:400 var(--step--1)/1 var(--font-mono);color:var(--text-mute);letter-spacing:.05em;text-transform:uppercase}
.pd-metabar b{font:500 var(--step-1)/1 var(--font-body);color:var(--text)}
.pd-section{padding:var(--space-l) 0}
.pd-lead{max-width:44ch;font:400 var(--step-2)/1.4 var(--font-body);color:var(--text-dim);margin-bottom:var(--space-l)}
.pd-spec{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pd-spec li{background:var(--bg);padding:1.3rem 1.4rem;display:flex;gap:1rem;align-items:flex-start}
.pd-spec b{font:400 var(--step--1)/1 var(--font-mono);color:var(--warm);flex:0 0 auto}
.pd-spec p{font:400 var(--step-0)/1.5 var(--font-body);color:var(--text-dim)}
.pd-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.2rem)}
.pd-gallery figure{position:relative;overflow:hidden;background:var(--surface-1);border:1px solid var(--line);
  opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.pd-gallery figure.is-in{opacity:1;transform:none}
.pd-gallery img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/11;transition:transform .8s var(--ease-out-quart)}
@media(hover:hover){.pd-gallery figure:hover img{transform:scale(1.04)}}
.pd-gallery .g-wide{grid-column:span 8}.pd-gallery .g-tall{grid-column:span 4}
.pd-gallery .g-half{grid-column:span 6}.pd-gallery .g-full{grid-column:span 12}
.pd-plans img{aspect-ratio:auto;object-fit:contain;background:#fff}
.pd-cta{border-top:1px solid var(--line);padding:var(--space-l) 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-m)}
.pd-cta h2{font:700 clamp(1.8rem,4vw,3.2rem)/1 var(--font-display);letter-spacing:-.02em}
.pd-next{display:flex;gap:1.5rem;flex-wrap:wrap}
.pd-next a{font:500 var(--step-0)/1 var(--font-body);color:var(--text-dim);display:inline-flex;gap:.5rem;align-items:center}
.pd-next a:hover{color:var(--warm)}
@media(max-width:720px){.pd-gallery .g-wide,.pd-gallery .g-tall,.pd-gallery .g-half{grid-column:span 12}}

/* ══ PAGE TRANSITION (akaru-ilhamlı wipe) ══ */
.page-wipe{position:fixed;inset:0;z-index:200;background:var(--bg);transform:scaleY(0);transform-origin:bottom;pointer-events:none}
.page-wipe.is-out{transform:scaleY(1);transform-origin:bottom;transition:transform .6s var(--ease-out-expo)}
.page-wipe.is-in{transform:scaleY(1);transform-origin:top}
.page-wipe.is-in.play{transform:scaleY(0);transition:transform .7s var(--ease-out-expo) .05s}
.page-wipe__label{position:absolute;inset:0;display:grid;place-items:center;font:400 var(--step-1)/1 var(--font-mono);color:var(--warm);opacity:0}
.page-wipe.is-out .page-wipe__label{opacity:1;transition:opacity .3s .2s}

/* proje kartı tam-kaplama link */
.proj__go{position:absolute;inset:0;z-index:4}
.proj{position:relative}

/* WebGL texture devraldığında CSS bg'yi bırak (plane arkadan görünsün) */
.proj__media--gl{background-image:none!important;background:transparent!important;border-color:transparent}

/* ══ HİZMET DETAY SAYFASI ══ */
.pd-hero__sub{max-width:38ch;margin-top:var(--space-s);font:400 var(--step-1)/1.4 var(--font-body);color:var(--text-dim)}
.svc-block{max-width:52ch;margin-top:var(--space-l)}
.svc-block h2{font:700 clamp(1.4rem,3vw,2.2rem)/1.1 var(--font-display);letter-spacing:-.01em;margin-bottom:.7rem}
.svc-block p{font:400 var(--step-0)/1.6 var(--font-body);color:var(--text-dim)}
.svc-h{font:700 clamp(1.5rem,3.4vw,2.6rem)/1 var(--font-display);letter-spacing:-.01em;margin-bottom:var(--space-m)}
.svc-list li{align-items:center}
.svc-list b{color:var(--warm);font:400 var(--step-0)/1 var(--font-mono)}
.svc-list p{font:400 var(--step-0)/1.4 var(--font-body);color:var(--text)}
.faq-list{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 0;font:500 var(--step-1)/1.3 var(--font-body);color:var(--text);display:flex;justify-content:space-between;gap:1rem;align-items:center;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--font-mono);color:var(--warm);transition:transform .3s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--warm)}
.faq p{padding:0 0 1.3rem;font:400 var(--step-0)/1.6 var(--font-body);color:var(--text-dim);max-width:60ch}

/* hizmet listesi → detay linki */
.svc--link{position:relative}
.svc__go{position:absolute;inset:0;z-index:3}
.svc__more{display:inline-flex;gap:.4rem;align-items:center;margin-top:.9rem;font:500 var(--step--1)/1 var(--font-mono);color:var(--warm);opacity:.65;transition:opacity .3s,gap .3s}
.svc--link:hover .svc__more{opacity:1;gap:.75rem}

/* hizmet listesi → sol sütun görseli (boşluğu doldurur, sıkı yerleşim) */
.svc{align-items:start;row-gap:0}
.svc__idx{grid-column:1;grid-row:1}
.svc__name{grid-column:2;grid-row:1}
.svc__desc{grid-column:2;grid-row:2;margin-top:.5rem}
.svc__more{grid-column:2;grid-row:3;margin-top:1.1rem;justify-self:start}
.svc__thumb{grid-column:1;grid-row:2 / 4;align-self:stretch;justify-self:start;
  width:clamp(120px,32vw,210px);min-height:170px;margin:.6rem 0 .2rem;
  border-radius:10px;overflow:hidden;position:relative;z-index:1;
  background-color:var(--surface-1);background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid var(--line);opacity:.92;
  filter:grayscale(.28) contrast(1.05) brightness(.97);
  transition:transform .55s var(--ease-out-quart),filter .55s,opacity .55s,border-color .55s}
.svc__thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,11,13,.5) 100%)}
.svc--link:hover .svc__thumb{filter:none;opacity:1;transform:translateY(-3px) scale(1.02);border-color:var(--line-strong)}
@media (prefers-reduced-motion:reduce){.svc__thumb{transition:none}}

/* ══ GES HESAPLAMA ARACI ══ */
.ges-scenarios{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--space-m)}
.ges-scenarios button{padding:.7rem 1.1rem;border:1px solid var(--line);background:var(--surface-1);color:var(--text-dim);font:500 var(--step--1)/1 var(--font-mono);cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.ges-scenarios button:hover{border-color:var(--warm);color:var(--text)}
.ges-scenarios button.is-active{background:var(--warm);color:var(--bg);border-color:var(--warm)}
.ges-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.ges-inputs{display:flex;flex-direction:column;gap:1.1rem}
.ges-inputs label{display:flex;flex-direction:column;gap:.45rem;font:500 var(--step--1)/1 var(--font-mono);color:var(--text-mute);text-transform:uppercase;letter-spacing:.04em}
.ges-inputs input{background:var(--surface-1);border:1px solid var(--line);color:var(--text);padding:.85rem 1rem;font:500 var(--step-1)/1 var(--font-body);transition:border-color .3s}
.ges-inputs input:focus{outline:none;border-color:var(--warm)}
.ges-results{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.ges-res{background:var(--bg);padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ges-res span{font:400 var(--step--1)/1.2 var(--font-mono);color:var(--text-mute);text-transform:uppercase;letter-spacing:.04em}
.ges-res b{font:500 var(--step-2)/1 var(--font-display);color:var(--text);white-space:nowrap}
.ges-res--hi b{color:var(--warm)}
.ges-note{margin-top:var(--space-m);font:400 var(--step--1)/1.6 var(--font-body);color:var(--text-mute);max-width:72ch}
@media(max-width:720px){.ges-grid{grid-template-columns:1fr}}