/* =========================================================
   224 MİMARLIK — Design System
   Palette: charcoal / bone / bronze  ·  Fraunces + Inter
   ========================================================= */

:root{
  /* --- ink & surface --- */
  --ink:        #0d0c0a;
  --ink-2:      #14130f;
  --ink-3:      #1c1a15;
  --ink-soft:   #262319;

  --bone:       #efece4;
  --bone-2:     #e2ded2;
  --bone-3:     #d6d1c2;

  /* --- brand bronze (from logo) --- */
  --bronze:     #b3894f;
  --bronze-lt:  #d0a870;
  --bronze-dk:  #8a672f;

  /* --- semantic (dark sections) --- */
  --bg:         var(--ink);
  --fg:         #eae6dc;
  --fg-mute:    rgba(234,230,220,.58);
  --fg-faint:   rgba(234,230,220,.30);
  --line:       rgba(234,230,220,.13);
  --line-soft:  rgba(234,230,220,.07);

  /* --- type --- */
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- layout --- */
  --wrap: 1320px;
  --pad: clamp(20px, 5vw, 72px);
  --rail: clamp(0px, 4vw, 64px);

  /* --- motion --- */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  font-size:16px;
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--bronze); color:#0d0c0a; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#3a352a; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--bronze-dk); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding:clamp(88px,12vw,168px) 0; }

/* =========================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================= */
.s-label{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:400;
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.s-label i{
  font-style:normal; color:var(--bronze); font-family:var(--serif);
  font-size:12px; letter-spacing:.1em;
}
.s-label::after{ content:""; flex:1; max-width:70px; height:1px; background:var(--line); }

.s-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem, 4.6vw, 4rem);
  line-height:1.06;
  letter-spacing:-.025em;
  font-optical-sizing:auto;
}
.s-title .ac{ color:var(--bronze); font-style:italic; font-weight:300; }

.lead{ font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.75; color:rgba(234,230,220,.86); }
.muted{ color:var(--fg-mute); }

.sec-head{ margin-bottom:clamp(44px,6vw,80px); max-width:900px; }
.sec-head--row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; max-width:none; flex-wrap:wrap;
}

/* =========================================================
   LOGO MARK (SVG rebuild of the bronze wireframe pyramid)
   ========================================================= */
.logo-mark{ width:40px; height:40px; color:var(--bronze); overflow:visible; }
.logo-mark .lm-tri{ stroke-width:1.6; opacity:.55; }
.logo-mark .lm-tri--o{ opacity:.38; }
.logo-mark .lm-tri--m{ opacity:.5; }
.logo-mark .lm-tri--i{ opacity:.62; }
.logo-mark .lm-spine{ stroke-width:1; opacity:.28; }
.logo-mark .lm-facet{ stroke-width:1; opacity:.3; }
.logo-mark .lm-blade{ stroke-width:1.9; opacity:1; }
.logo-mark--nav{ width:34px; height:34px; }
.logo-mark--foot{ width:52px; height:52px; }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .7s var(--e-out), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__inner{ width:min(340px,72vw); text-align:center; }
.preloader__mark{ display:grid; place-items:center; margin-bottom:26px; }
.preloader__mark .logo-mark{ width:76px; height:76px; }
.preloader__mark .lm-blade,
.preloader__mark .lm-tri{
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 2.1s var(--e-out) forwards;
}
.preloader__mark .lm-tri--m{ animation-delay:.14s; }
.preloader__mark .lm-tri--i{ animation-delay:.26s; }
.preloader__mark .lm-blade{ animation-delay:.38s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.preloader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-mute); margin-bottom:12px;
}
.preloader__count{ font-family:var(--serif); font-size:14px; letter-spacing:.06em; color:var(--bronze); }
.preloader__count i{ font-style:normal; font-size:10px; opacity:.6; margin-left:1px; }
.preloader__bar{ height:1px; background:var(--line); overflow:hidden; }
.preloader__bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--bronze-dk),var(--bronze-lt));
}

/* =========================================================
   SCROLL PROGRESS + GRAIN
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:900;
  background:transparent; pointer-events:none;
}
/* width yerine scaleX: her karede düzen hesabı yerine yalnızca derleme. */
.scroll-progress span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--bronze-dk),var(--bronze-lt));
  box-shadow:0 0 14px rgba(179,137,79,.5);
}
/* Doku sabittir: animasyonlu bir mix-blend-mode katmanı, ekranın tamamını her
   karede yeniden harmanlatır ve kaydırmayı gözle görülür biçimde ağırlaştırır.
   Duran ince bir gren aynı karakteri bedelsiz verir. */
.grain{
  position:fixed; inset:0; z-index:800; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--pad);
  transition:padding .5s var(--e-out), background .5s var(--e-out),
             backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
/* Not: burada backdrop-filter kullanmıyoruz — üst şerit hareketli WebGL
   canvas'ının üzerinde durduğu için her karede yeniden bulanıklaştırılırdı.
   Opak bir gradyan aynı ayrımı bedelsiz sağlıyor. */
.nav.is-stuck{
  padding:13px var(--pad);
  background:linear-gradient(180deg, rgba(13,12,10,.97) 0%, rgba(13,12,10,.88) 100%);
  border-bottom-color:var(--line-soft);
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__wordmark{
  font-family:var(--serif); font-size:16px; letter-spacing:.02em;
  line-height:1; display:flex; align-items:baseline; gap:6px;
}
.nav__wordmark b{
  font-family:var(--sans); font-weight:400; font-size:9.5px;
  letter-spacing:.28em; color:var(--fg-mute); text-transform:uppercase;
}
.nav__brand:hover .lm-blade{ stroke:var(--bronze-lt); }
.nav__brand .logo-mark *{ transition:stroke .4s, opacity .4s; }
.nav__brand:hover .lm-tri{ opacity:.75; }

.nav__links{ display:flex; gap:clamp(18px,2.4vw,36px); }
.nav__links a{
  position:relative; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mute);
  padding:6px 0; transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--bronze); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--fg); }
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav__burger{ display:none; width:40px; height:40px; place-items:center; position:relative; }
.nav__burger span{
  position:absolute; left:9px; width:22px; height:1.4px; background:var(--fg);
  transition:transform .45s var(--e-out), opacity .3s;
}
.nav__burger span:nth-child(1){ transform:translateY(-4px); }
.nav__burger span:nth-child(2){ transform:translateY(4px); }
.nav__burger.is-open span:nth-child(1){ transform:rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ transform:rotate(-45deg); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --btn-fg:var(--fg);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:400;
  border:1px solid var(--line); color:var(--btn-fg);
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .45s var(--e-out), border-color .45s var(--e-out), transform .3s var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,var(--bronze-dk),var(--bronze-lt));
  transform:translateY(101%); transition:transform .55s var(--e-out);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#100e0a; border-color:transparent; }
.btn svg{ transition:transform .45s var(--e-out); flex-shrink:0; }
.btn:hover svg{ transform:translateX(4px); }

.btn--solid{ background:var(--bronze); border-color:var(--bronze); color:#100e0a; }
.btn--solid::before{ background:var(--fg); }
.btn--solid:hover{ color:#0d0c0a; }
.btn--solid:hover svg{ transform:translateX(4px); }

.btn--ghost{ border-color:var(--line); }
.btn--nav{ padding:11px 20px; font-size:11.5px; }
.btn--lg{ padding:18px 34px; font-size:13px; }
.btn--block{ width:100%; justify-content:center; margin-top:6px; }

/* =========================================================
   RAIL (social)
   ========================================================= */
.rail{
  position:fixed; z-index:600; left:calc(var(--pad) / 2); bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding-bottom:0;
}
.rail a{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-faint); transition:color .35s, transform .35s;
  writing-mode:vertical-rl;
}
.rail a:hover{ color:var(--bronze); transform:translateY(-3px); }
.rail__line{ width:1px; height:74px; background:linear-gradient(var(--line),transparent); }

/* =========================================================
   MOBILE MENU
   ========================================================= */
.menu{
  position:fixed; inset:0; z-index:690;
  background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .8s var(--e-out);
  pointer-events:none;
}
.menu.is-open{ clip-path:circle(150% at calc(100% - 46px) 40px); pointer-events:auto; }
.menu__links{ display:flex; flex-direction:column; gap:6px; }
.menu__links a{
  font-family:var(--serif); font-size:clamp(2rem,9vw,3.4rem); font-weight:300;
  letter-spacing:-.02em; line-height:1.24; display:flex; align-items:baseline; gap:16px;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out), color .3s;
  border-bottom:1px solid var(--line-soft); padding-bottom:8px;
}
.menu.is-open .menu__links a{ opacity:1; transform:none; }
.menu.is-open .menu__links a:nth-child(1){ transition-delay:.16s; }
.menu.is-open .menu__links a:nth-child(2){ transition-delay:.22s; }
.menu.is-open .menu__links a:nth-child(3){ transition-delay:.28s; }
.menu.is-open .menu__links a:nth-child(4){ transition-delay:.34s; }
.menu.is-open .menu__links a:nth-child(5){ transition-delay:.40s; }
.menu__links a:hover{ color:var(--bronze); }
.menu__links i{
  font-family:var(--sans); font-style:normal; font-size:11px;
  letter-spacing:.2em; color:var(--bronze); opacity:.75;
}
.menu__foot{
  margin-top:52px; display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--fg-mute); letter-spacing:.04em;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center;
  background:radial-gradient(120% 100% at 70% 12%, #1b1913 0%, #0d0c0a 62%);
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1;
}
.hero__fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; transition:opacity 1s var(--e-out);
  filter:grayscale(.3) contrast(1.05) brightness(.55);
}
.hero__fallback.is-shown{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right, rgba(13,12,10,.92) 0%, rgba(13,12,10,.62) 42%, rgba(13,12,10,.12) 72%, rgba(13,12,10,.5) 100%),
    linear-gradient(to top, rgba(13,12,10,.95) 0%, transparent 38%);
}

.hero__inner{
  position:relative; z-index:3;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  padding-top:80px;
}
.hero__eyebrow{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:26px; overflow:hidden;
}
.hero__eyebrow span{ display:inline-block; }

.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.1rem, 11.5vw, 10.5rem);
  line-height:.92; letter-spacing:-.045em;
  margin-bottom:clamp(22px,3vw,34px);
  font-optical-sizing:auto;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .word{ display:inline-block; will-change:transform; }
.hero__title .word--accent em{
  font-style:italic; font-weight:300;
  background:linear-gradient(100deg,var(--bronze-lt) 10%,var(--bronze) 45%,var(--bronze-dk) 85%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--bronze);
}

.hero__lead{
  max-width:47ch; font-size:clamp(.98rem,1.35vw,1.16rem);
  line-height:1.72; color:rgba(234,230,220,.72); margin-bottom:38px;
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero__ticker{
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  border-top:1px solid var(--line-soft);
  /* canvas üstünde blur yok — bkz. .nav.is-stuck notu */
  background:linear-gradient(180deg, rgba(13,12,10,.55) 0%, rgba(13,12,10,.9) 100%);
  padding:14px 0; overflow:hidden;
}
.hero__ticker-track{
  display:flex; align-items:center; gap:24px; width:max-content;
  animation:tick 34s linear infinite;
}
.hero__ticker-track span{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint); white-space:nowrap;
}
.hero__ticker-track i{ color:var(--bronze); font-style:normal; font-size:10px; }
@keyframes tick{ to{ transform:translateX(-50%); } }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:78px; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-faint);
}
.hero__scroll span:first-child{ writing-mode:vertical-rl; }
.hero__scroll-line{
  width:1px; height:58px; background:var(--line); position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; top:-58px; left:0; width:100%; height:58px;
  background:linear-gradient(transparent,var(--bronze));
  animation:scrollDot 2.2s var(--e-io) infinite;
}
@keyframes scrollDot{ 0%{ top:-58px } 60%,100%{ top:58px } }

/* =========================================================
   STUDIO
   ========================================================= */
.studio{ background:linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%); }
.studio__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(34px,6vw,90px);
  align-items:start;
}
.studio__head{ position:sticky; top:120px; }
.studio__body p + p{ margin-top:20px; }
.studio__points{ list-style:none; margin-top:36px; display:grid; gap:14px; }
.studio__points li{
  display:flex; align-items:center; gap:14px;
  font-size:14.5px; color:rgba(234,230,220,.78);
  padding-bottom:14px; border-bottom:1px solid var(--line-soft);
}
.dot{
  width:5px; height:5px; border-radius:50%; background:var(--bronze);
  flex-shrink:0; box-shadow:0 0 0 4px rgba(179,137,79,.14);
}

.stats{
  margin-top:clamp(56px,8vw,110px);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{ padding:34px 10px 34px 0; border-right:1px solid var(--line-soft); }
.stat:last-child{ border-right:0; }
.stat__num{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,3.6vw,3.1rem); line-height:1; color:var(--bronze);
  letter-spacing:-.02em;
}
.stat__num--txt{ font-size:clamp(1.4rem,2.3vw,2rem); font-style:italic; }
.stat__label{
  display:block; margin-top:10px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-mute);
}

/* =========================================================
   EXPERTISE
   ========================================================= */
.expertise{ background:var(--ink-2); }
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.exp-card{
  position:relative; background:var(--ink-2); padding:clamp(28px,3vw,42px);
  min-height:266px; display:flex; flex-direction:column;
  transition:background .55s var(--e-out), transform .5s var(--e-out);
  overflow:hidden; transform-style:preserve-3d;
}
.exp-card::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--bronze),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--e-out);
}
.exp-card:hover{ background:var(--ink-3); }
.exp-card:hover::after{ transform:scaleX(1); }
.exp-card__no{
  font-family:var(--serif); font-size:12px; color:var(--bronze);
  letter-spacing:.14em; opacity:.7; margin-bottom:auto;
}
.exp-card h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.25rem,1.8vw,1.55rem);
  letter-spacing:-.015em; margin:30px 0 12px; line-height:1.2;
}
.exp-card p{ font-size:14px; color:var(--fg-mute); line-height:1.68; }
.exp-card__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.exp-card__tags span{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-faint); border:1px solid var(--line-soft);
  padding:5px 10px; border-radius:100px; transition:color .4s, border-color .4s;
}
.exp-card:hover .exp-card__tags span{ color:var(--bronze); border-color:rgba(179,137,79,.28); }

/* =========================================================
   WORK / PROJECTS
   ========================================================= */
.work{ background:linear-gradient(180deg,var(--ink-2) 0%, var(--ink) 100%); }
.work__filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 17px; border-radius:100px; border:1px solid var(--line);
  color:var(--fg-mute); transition:all .4s var(--e-out);
}
.filter:hover{ color:var(--fg); border-color:rgba(234,230,220,.28); }
.filter.is-active{ background:var(--bronze); border-color:var(--bronze); color:#100e0a; }

.work__grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.6vw,24px);
}
.proj{
  grid-column:span 3; position:relative; cursor:pointer;
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), filter .5s;
}
.proj--lg{ grid-column:span 6; }
.proj.is-hidden{
  opacity:0; transform:scale(.94); pointer-events:none;
  position:absolute; visibility:hidden;
}
.proj__media{
  position:relative; overflow:hidden; background:var(--ink-3);
  aspect-ratio:16/10;
}
.proj--lg .proj__media{ aspect-ratio:16/7.6; }
.proj__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,12,10,.72) 0%, rgba(13,12,10,.05) 55%);
  opacity:.85; transition:opacity .6s var(--e-out);
}
.proj__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
  filter:grayscale(.26) contrast(1.05) brightness(.93);
  transition:transform 1.1s var(--e-out), filter .8s var(--e-out);
}
.proj:hover .proj__media img{ transform:scale(1.09); filter:grayscale(0) contrast(1.06) brightness(1); }
.proj:hover .proj__media::after{ opacity:.55; }

.proj__bar{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; padding:18px 2px 0;
  border-top:1px solid var(--line-soft); margin-top:0;
}
.proj__cat{
  display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:8px;
}
.proj__meta h3{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(1.2rem,2vw,1.75rem); line-height:1.14;
  transition:color .4s;
}
.proj:hover .proj__meta h3{ color:var(--bronze-lt); }
.proj__loc{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint); white-space:nowrap;
}
/* hover "view" cue */
.proj__media::before{
  content:"Görüntüle"; position:absolute; z-index:2;
  left:50%; top:50%; transform:translate(-50%,-50%) scale(.82);
  width:104px; height:104px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(179,137,79,.92); color:#100e0a;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transition:opacity .5s var(--e-out), transform .6s var(--e-out);
  pointer-events:none;
}
.proj:hover .proj__media::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* =========================================================
   PROCESS
   ========================================================= */
.process{ background:var(--ink); }
.steps{ list-style:none; counter-reset:s; border-top:1px solid var(--line-soft); }
.step{
  position:relative; display:grid;
  grid-template-columns:96px 1.1fr 1.4fr; gap:clamp(16px,3vw,48px);
  align-items:baseline;
  padding:clamp(26px,3.2vw,40px) 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .55s var(--e-out);
}
.step::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,var(--bronze),transparent 70%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--e-out);
}
.step:hover{ padding-left:16px; }
.step:hover::before{ transform:scaleX(1); }
.step__no{
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.2rem);
  color:var(--bronze); opacity:.42; line-height:1; letter-spacing:-.02em;
  transition:opacity .5s;
}
.step:hover .step__no{ opacity:1; }
.step h3{
  font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.2;
}
.step p{ font-size:14.5px; color:var(--fg-mute); line-height:1.7; }

/* =========================================================
   CTA STRIP
   ========================================================= */
.cta-strip{
  background:var(--ink-3); border-block:1px solid var(--line-soft);
  padding:clamp(56px,7vw,96px) 0;
  position:relative; overflow:hidden;
}
.cta-strip::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 140% at 82% 50%, rgba(179,137,79,.14), transparent 62%);
  pointer-events:none;
}
.cta-strip__inner{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.cta-strip h2{
  font-family:var(--serif); font-weight:300; letter-spacing:-.03em;
  font-size:clamp(1.7rem,4vw,3.2rem); line-height:1.08; max-width:16ch;
}
.cta-strip .ac{ color:var(--bronze); font-style:italic; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:linear-gradient(180deg,var(--ink-3) 0%, var(--ink) 40%); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,6vw,88px); align-items:start; }
.contact__intro{ margin-top:20px; max-width:44ch; }
.contact__list{ list-style:none; margin-top:44px; display:grid; gap:0; }
.contact__list li{
  display:grid; grid-template-columns:110px 1fr; gap:20px;
  padding:20px 0; border-top:1px solid var(--line-soft); align-items:start;
}
.c-k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); padding-top:3px; }
.c-v{ font-size:14.5px; line-height:1.7; color:rgba(234,230,220,.86); transition:color .35s; }
a.c-v:hover{ color:var(--bronze); }
.c-social{ display:flex; gap:16px; flex-wrap:wrap; }
.c-social a{ font-size:13px; color:var(--fg-mute); transition:color .35s; }
.c-social a:hover{ color:var(--bronze); }

.contact__form-wrap{
  background:rgba(234,230,220,.028);
  border:1px solid var(--line-soft);
  padding:clamp(24px,3.2vw,40px);
  border-radius:2px;
}
.c-field{ position:relative; margin-bottom:18px; }
.c-field input, .c-field textarea{
  width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--line); padding:22px 0 10px;
  font-size:15px; font-weight:300; outline:none;
  transition:border-color .4s;
  resize:vertical;
}
.c-field textarea{ min-height:104px; }
.c-field label{
  position:absolute; left:0; top:20px; pointer-events:none;
  font-size:14px; color:var(--fg-faint); letter-spacing:.02em;
  transition:all .35s var(--e-out);
}
.c-field input:focus + label,
.c-field textarea:focus + label,
.c-field input:not(:placeholder-shown) + label,
.c-field textarea:not(:placeholder-shown) + label{
  top:0; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze);
}
.c-field input:focus, .c-field textarea:focus{ border-bottom-color:var(--bronze); }
.c-field.has-error input, .c-field.has-error textarea{ border-bottom-color:#c2603f; }
.c-note{
  margin-top:14px; font-size:12.5px; color:var(--bronze); min-height:18px; letter-spacing:.02em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink-2); border-top:1px solid var(--line-soft); padding-top:clamp(56px,7vw,88px); }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(40px,5vw,64px);
}
.footer__tag{
  font-family:var(--serif); font-size:1.15rem; font-weight:300; line-height:1.45;
  margin-top:20px; color:rgba(234,230,220,.78); letter-spacing:-.01em;
}
.footer__nav, .footer__col{ display:flex; flex-direction:column; gap:11px; }
.footer__nav span, .footer__col span:first-child{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-faint); margin-bottom:8px;
}
.footer__nav a, .footer__col a{ font-size:14px; color:var(--fg-mute); transition:color .35s, transform .35s; width:fit-content; }
.footer__nav a:hover, .footer__col a:hover{ color:var(--bronze); transform:translateX(4px); }
.footer__col p{ font-size:13.5px; color:var(--fg-faint); line-height:1.65; margin-top:6px; }

.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-block:24px; border-top:1px solid var(--line-soft);
  font-size:11.5px; letter-spacing:.06em; color:var(--fg-faint);
}
.footer__up{ color:var(--fg-mute); transition:color .35s; }
.footer__up:hover{ color:var(--bronze); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:950;
  background:rgba(9,8,6,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--e-out), visibility .5s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lb__close{
  position:absolute; top:22px; right:26px; z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--fg);
  transition:background .4s, color .4s, transform .4s, border-color .4s;
}
.lb__close:hover{ background:var(--bronze); color:#100e0a; border-color:var(--bronze); transform:rotate(90deg); }

.lb__stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,2vw,26px); padding:clamp(52px,7vh,80px) clamp(12px,4vw,64px) 12px;
  min-height:0;
}
.lb__figure{
  flex:1; height:100%; display:grid; place-items:center; min-width:0;
}
.lb__figure img{
  max-width:100%; max-height:100%; object-fit:contain;
  opacity:0; transform:scale(.985);
  transition:opacity .5s var(--e-out), transform .6s var(--e-out);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.lb__figure img.is-loaded{ opacity:1; transform:none; }
.lb__nav{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line); display:grid; place-items:center;
  color:var(--fg-mute); transition:all .4s var(--e-out);
}
.lb__nav:hover{ background:var(--bronze); color:#100e0a; border-color:var(--bronze); }
.lb__caption{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  padding:16px clamp(16px,4vw,64px) clamp(22px,4vh,34px);
  border-top:1px solid var(--line-soft);
}
.lb__cap-text h4{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.1rem,2vw,1.6rem);
  letter-spacing:-.02em; line-height:1.2;
}
.lb__cap-text p{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); margin-top:8px; }
.lb__counter{ font-family:var(--serif); font-size:14px; color:var(--fg-mute); white-space:nowrap; }

/* =========================================================
   REVEAL PRIMITIVES
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal-line span{ display:inline-block; }

/* Izgara hücreleri kaymamalı: .exp-grid hairline'ları gap + arka planla çizildiği
   için kartın ötelenmesi üstte açık bir bant açığa çıkarır. Bunlar yalnızca solar. */
.exp-card.reveal{ transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .studio__grid{ grid-template-columns:1fr; }
  .studio__head{ position:static; }
  .exp-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .rail{ display:none; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .btn--nav{ display:none; }
  .nav__burger{ display:grid; }
  .contact__grid{ grid-template-columns:1fr; }
  .step{ grid-template-columns:64px 1fr; }
  .step p{ grid-column:2; margin-top:8px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:26px 10px; border-bottom:1px solid var(--line-soft); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-last-child(-n+2){ border-bottom:0; }
  .hero__scroll{ display:none; }
}

@media (max-width:720px){
  .exp-grid{ grid-template-columns:1fr; }
  .work__grid{ grid-template-columns:1fr; }
  .proj, .proj--lg{ grid-column:span 1; }
  .proj__media, .proj--lg .proj__media{ aspect-ratio:4/3; }
  .footer__top{ grid-template-columns:1fr; }
  .sec-head--row{ align-items:flex-start; }
  .hero__inner{ padding-top:100px; }
  .hero__ticker{ padding:11px 0; }
  .contact__list li{ grid-template-columns:1fr; gap:6px; }
  .lb__nav{ width:42px; height:42px; }
  .footer__bottom{ justify-content:flex-start; }
}

@media (max-width:520px){
  .hero__actions .btn{ flex:1; justify-content:center; }
  .proj__bar{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
}