/* =========================================================
   Yapı — Kolon Mimarlık & İnşaat
   İsviçre ızgarası · teknik çizim detayları · mühendislik kesinliği
   ========================================================= */

:root{
  /* Palet: Beton (varsayılan) */
  --c-bg:#e4e3df;
  --c-bg-alt:#d8d7d1;
  --c-surface:#efeeea;
  --c-text:#141414;
  --c-text-soft:#55544f;
  --c-line:#bcbab3;
  --c-primary:#ff5b1a;
  --c-on-primary:#141414;
  --c-accent:#1f43c4;
  --c-ink:#171717;
  --c-on-ink:#e4e3df;
  --c-signal:#ff5b1a;

  /* Yazı tipleri */
  --f-display:'Space Grotesk', system-ui, sans-serif;
  --f-body:'Space Grotesk', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --display-weight:500;
  --display-track:-0.045em;
  --display-stretch:100%;

  /* Köşeler (Keskin) */
  --r-sm:0px;
  --r-md:2px;
  --r-lg:4px;
  --r-btn:0px;

  /* Ölçü sistemi */
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px, 3.2vw, 48px);
  --gap:clamp(12px, 1.6vw, 24px);
  --maxw:1560px;
  --head-h:76px;
  --chip-inset:calc(var(--r-lg) * .35);
  --guide:color-mix(in oklab, var(--c-line) 70%, transparent);
  --soft-ink:color-mix(in oklab, var(--c-on-ink) 64%, var(--c-ink));
}

/* Yazı tipi çiftine göre ince ayar (script.js html[data-fontset] atar) */
html[data-fontset="zarif"]{
  --f-mono:'DM Mono', ui-monospace, Menlo, monospace;
  --display-weight:600;
  --display-track:-0.035em;
}
html[data-fontset="endustri"]{
  --f-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --display-weight:650;
  --display-track:-0.035em;
  --display-stretch:84%;
}

/* ---------- Temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3{
  margin:0;
  font-family:var(--f-display);
  font-weight:var(--display-weight);
  font-stretch:var(--display-stretch);
  letter-spacing:var(--display-track);
  line-height:1;
}
::selection{background:var(--c-primary);color:var(--c-on-primary)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.ink :focus-visible{outline-color:var(--c-signal)}

.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--c-text);color:var(--c-bg);text-decoration:none;border-radius:var(--r-sm)}
.skip:focus{top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

.nocase,.proj-kunye dd,.pm-kunye dd,.og-meta dd,.antet-rows dd,.ofis-facts dd,.stat-num sup,.qf-unit .mono,.proj-loc{text-transform:none}
.mono{
  font-family:var(--f-mono);
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.45;
  font-variant-numeric:tabular-nums;
}

/* ---------- Sütun kılavuzları ---------- */
.guides{position:fixed;inset:0;z-index:0;pointer-events:none}
.guides .wrap{height:100%}
.guides-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);height:100%}
.guides-grid i{border-left:1px solid var(--guide)}
.guides-grid i:last-child{border-right:1px solid var(--guide)}
.guides--local{position:absolute;--guide:color-mix(in oklab, var(--c-on-ink) 9%, transparent)}
main,.site-footer{position:relative;z-index:1}

/* ---------- Teknik çizim öğeleri ---------- */
.reg{position:absolute;width:15px;height:15px;pointer-events:none;z-index:2}
.reg::before,.reg::after{content:"";position:absolute;background:var(--c-text)}
.reg::before{left:0;right:0;top:7px;height:1px}
.reg::after{top:0;bottom:0;left:7px;width:1px}
.reg--tl{top:-8px;left:-8px}
.reg--tr{top:-8px;right:-8px}
.reg--bl{bottom:-8px;left:-8px}
.reg--br{bottom:-8px;right:-8px}

.dim{pointer-events:none;color:var(--c-text)}
.dim--h{position:relative;height:11px;border-left:1px solid currentColor;border-right:1px solid currentColor;display:flex;align-items:center;justify-content:center}
.dim--h::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:currentColor}
.dim--h span{position:relative;background:var(--c-bg);padding:0 10px;font-size:.68rem;text-transform:none}
.dim--v{position:absolute;width:11px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.dim--v::before{content:"";position:absolute;top:0;bottom:0;left:5px;width:1px;background:currentColor}
.dim--v span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;background:var(--c-bg);padding:0 8px;font-size:.66rem;text-transform:none}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:0 22px;
  border:1px solid transparent;border-radius:var(--r-btn);
  font-family:var(--f-body);font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .6s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--c-primary);color:var(--c-on-primary)}
.btn-primary:hover{background:color-mix(in oklab, var(--c-primary) 84%, var(--c-text))}
.btn-line{border-color:var(--c-text);color:var(--c-text);background:transparent}
.btn-line:hover{background:var(--c-text);color:var(--c-bg)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-lg{min-height:58px;padding:0 28px;font-size:16px}

.icon-btn{
  width:44px;height:44px;display:inline-grid;place-items:center;flex:none;
  border:1px solid var(--c-line);border-radius:var(--r-btn);background:transparent;color:var(--c-text);cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.icon-btn:hover{border-color:var(--c-text);background:var(--c-surface)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.icon-btn--solid{background:var(--c-surface);border-color:transparent}

.link-arrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:1.15rem;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.link-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .5s var(--ease)}
.link-arrow:hover svg{transform:translate(3px,-3px)}

/* ---------- Bölüm düzeni ---------- */
.section{position:relative;padding:clamp(80px, 9.5vw, 144px) 0;overflow-x:clip}
.section--tight{padding:clamp(64px, 8vw, 120px) 0}

.sec-index{display:flex;align-items:center;gap:10px;color:var(--c-text-soft);grid-column:1 / span 4;align-self:start;padding-top:.5em}
.sec-index::before{content:"";width:9px;height:9px;background:var(--c-primary);flex:none}
.sec-index span{color:var(--c-text)}
.ink .sec-index{color:var(--soft-ink)}
.ink .sec-index span{color:var(--c-on-ink)}
.ink .sec-index::before{background:var(--c-signal)}

.sec-head{border-top:1px solid var(--c-text);padding-top:20px;margin-bottom:clamp(48px, 6vw, 96px);row-gap:28px}
.sec-title{grid-column:5 / span 8;font-size:clamp(2.4rem, 5.4vw, 5.9rem);line-height:.95;max-width:15ch}
.sec-lead{grid-column:5 / span 5;color:var(--c-text-soft);font-size:1.05rem;max-width:52ch}

/* [data-reveal="mask"] — fotoğraflarda aşağıdan açılan maske */
[data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease);transition-delay:var(--reveal-delay,0ms)}
[data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}
[data-reveal="mask"] img{transform:scale(1.14);transition:transform 1.9s var(--ease)}
[data-reveal="mask"].is-in img{transform:none}
html.kmg-static [data-reveal="mask"]{clip-path:none!important}
html.kmg-static [data-reveal="mask"] img{transform:none!important}

/* =========================================================
   ÜST MENÜ
   ========================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .5s var(--ease),border-color .5s var(--ease);border-bottom:1px solid transparent}
.site-header.is-scrolled{background:color-mix(in oklab, var(--c-bg) 88%, transparent);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:var(--c-line)}
.header-in{position:relative;z-index:2;display:flex;align-items:center;gap:28px;height:var(--head-h);transition:height .5s var(--ease)}
.site-header.is-scrolled .header-in{height:62px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--c-text);min-height:44px}
.brand-mark{width:30px;height:30px;flex:none;transition:transform .8s var(--ease)}
.brand:hover .brand-mark{transform:rotate(90deg)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-display);font-weight:600;font-stretch:var(--display-stretch);font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase}
.brand-sub{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-soft);margin-top:4px}

.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(16px, 2vw, 30px);list-style:none;margin:0;padding:0}
.nav a{position:relative;display:inline-flex;align-items:flex-start;gap:5px;padding:12px 0;font-size:15px;font-weight:500;text-decoration:none}
.nav a .mono{font-size:.58rem;color:var(--c-text-soft);margin-top:-2px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--c-text);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1);transform-origin:left}

.header-right{display:flex;align-items:center;gap:16px}
.header-clock{color:var(--c-text-soft);padding-left:16px;border-left:1px solid var(--c-line);white-space:nowrap}
.header-clock b{font-weight:500;color:var(--c-text)}

.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--c-text);border-radius:var(--r-btn);background:transparent;cursor:pointer;position:relative;flex:none}
.menu-toggle span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--c-text);transition:transform .6s var(--ease),top .6s var(--ease)}
.menu-toggle span:first-child{top:18px}
.menu-toggle span:last-child{top:26px}
.menu-open .menu-toggle span:first-child{top:22px;transform:rotate(45deg)}
.menu-open .menu-toggle span:last-child{top:22px;transform:rotate(-45deg)}

.scroll-rule{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;z-index:3}
.scroll-rule i{position:absolute;inset:0;background:var(--c-primary);transform-origin:left;transform:scaleX(var(--sp,0))}

.mobile-menu{
  position:fixed;inset:0;z-index:1;background:var(--c-bg);
  padding-top:calc(var(--head-h) + 12px);
  visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease),visibility 0s linear .8s;
  overflow-y:auto;
}
.menu-open .mobile-menu{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease),visibility 0s}
.mobile-menu-in{display:flex;flex-direction:column;min-height:100%;padding-bottom:28px}
.mm-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-text)}
.mm-links li{border-bottom:1px solid var(--c-line);overflow:hidden}
.mm-links a{display:flex;align-items:baseline;gap:14px;padding:12px 0;font-family:var(--f-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:var(--display-track);font-size:clamp(2rem, 8.4vw, 3.4rem);line-height:1.05;text-decoration:none;transform:translateY(105%);transition:transform .8s var(--ease)}
.mm-links a .mono{font-size:.7rem;letter-spacing:.06em;color:var(--c-text-soft);transform:translateY(-.9em)}
.menu-open .mm-links a{transform:none}
.menu-open .mm-links li:nth-child(1) a{transition-delay:.12s}
.menu-open .mm-links li:nth-child(2) a{transition-delay:.17s}
.menu-open .mm-links li:nth-child(3) a{transition-delay:.22s}
.menu-open .mm-links li:nth-child(4) a{transition-delay:.27s}
.menu-open .mm-links li:nth-child(5) a{transition-delay:.32s}
.menu-open .mm-links li:nth-child(6) a{transition-delay:.37s}
.menu-open .mm-links li:nth-child(7) a{transition-delay:.42s}
.menu-open .mm-links li:nth-child(8) a{transition-delay:.47s}
.mm-foot{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:32px;color:var(--c-text-soft)}
.mm-foot a{text-decoration:none;color:var(--c-text);min-height:32px;display:inline-flex;align-items:center;text-transform:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:calc(var(--head-h) + clamp(20px, 3vw, 44px)) 0 clamp(24px, 2.4vw, 36px);overflow-x:clip}
.hero-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  grid-template-rows:auto auto 1fr auto;
  min-height:calc(100svh - var(--head-h) - clamp(20px, 3vw, 44px) - clamp(24px, 2.4vw, 36px));
}
.hero-meta{grid-column:1 / span 8;grid-row:1;display:flex;align-items:center;gap:16px;color:var(--c-text-soft)}
.hero-meta-sep{flex:0 1 120px;height:1px;background:var(--c-text-soft)}

.hero-title{
  grid-column:1 / span 8;grid-row:2;position:relative;z-index:2;
  font-size:clamp(3.6rem, min(11vw, 17.5vh), 12.8rem);line-height:.86;letter-spacing:calc(var(--display-track) - .012em);
  margin:clamp(20px, 2.6vw, 40px) 0 0 -.04em;
}
.hero-title .line{display:block;overflow:hidden;padding:0 .04em .09em;margin-bottom:-.09em}
.hero-title .line--tag{padding-left:1.15em}
.line-in{display:inline-block;animation:rise 1.3s var(--ease) both;animation-delay:calc(.12s + var(--i) * .09s)}
.line-in.tag{position:relative;z-index:0;color:var(--c-on-primary);padding:0 .1em 0 .08em}
.line-in.tag::before{content:"";position:absolute;inset:.1em -.02em .02em;background:var(--c-primary);z-index:-1;transform-origin:left;animation:grow 1.1s var(--ease) .55s both}
@keyframes rise{from{transform:translate3d(0,108%,0)}to{transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}


.hero-copy{grid-column:1 / span 5;grid-row:3;align-self:end;padding-top:clamp(28px, 3.4vw, 52px)}
.hero-lead{font-size:clamp(1.05rem, 1.25vw, 1.25rem);line-height:1.55;max-width:36ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

.hero-media{grid-column:8 / span 5;grid-row:1 / span 3;position:relative;margin:0;min-height:clamp(360px, 62vh, 760px)}
.hero-mask{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-lg);background:var(--c-bg-alt);animation:mask 1.6s var(--ease) .15s both}
.hero-mask img{width:100%;height:100%;object-fit:cover;object-position:30% 100%;animation:zoomOut 2.4s var(--ease) .15s both}
@keyframes mask{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoomOut{from{transform:scale(1.28)}to{transform:none}}
.hero-coord{position:absolute;left:var(--chip-inset);bottom:var(--chip-inset);z-index:2;display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--c-surface);color:var(--c-text);border-radius:var(--r-sm);animation:fadeUp 1s var(--ease) 1.1s both}
.hero-coord svg{width:16px;height:16px;fill:none;stroke:var(--c-accent);stroke-width:1.5}
@keyframes fadeUp{from{transform:translateY(100%)}to{transform:none}}
.hero-dim-v{left:-22px;top:0;bottom:0}
.hero-dim-v span{background:var(--c-bg)}

.hero-foot{grid-column:1 / -1;grid-row:4;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(28px, 3.4vw, 48px);padding-top:14px;border-top:1px solid var(--c-text);color:var(--c-text-soft)}
.hero-foot b{font-weight:500;color:var(--c-text)}
.hero-scroll{display:inline-flex;align-items:center;gap:6px}
.hero-scroll svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateY(4px)}}

/* imleç kılavuzu */
.hero-cross{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
.hero.is-tracking .hero-cross{opacity:1}
.hero-cross .hx,.hero-cross .hy{position:absolute;background:color-mix(in oklab, var(--c-accent) 55%, transparent)}
.hero-cross .hx{left:0;right:0;top:0;height:1px;transform:translateY(var(--y,0))}
.hero-cross .hy{top:0;bottom:0;left:0;width:1px;transform:translateX(var(--x,0))}
.hero-cross .hc{position:absolute;left:0;top:0;transform:translate(calc(var(--x,0px) + 12px), calc(var(--y,0px) + 10px));color:var(--c-accent);background:color-mix(in oklab, var(--c-bg) 80%, transparent);padding:2px 6px;font-size:.64rem;white-space:nowrap}

/* =========================================================
   OFİS
   ========================================================= */
.ofis .grid{row-gap:0}
.ofis .sec-index{grid-row:1}
.ofis-text{grid-column:5 / span 8;grid-row:1}
.ofis-title{font-size:clamp(1.8rem, 3.5vw, 3.6rem);line-height:1.06;letter-spacing:calc(var(--display-track) + .015em);max-width:24ch}
.ofis-lead{margin-top:clamp(24px, 3vw, 40px);max-width:56ch;color:var(--c-text-soft);font-size:1.08rem;margin-left:auto;margin-right:clamp(0px, 8vw, 140px)}
.ofis-media{grid-column:1 / span 8;grid-row:2;margin:clamp(56px, 7vw, 110px) 0 0;aspect-ratio:16/9;overflow:hidden;position:relative;border-radius:var(--r-lg)}
.ofis-media img{width:100%;height:100%;object-fit:cover}
.ofis-media figcaption{position:absolute;right:var(--chip-inset);bottom:var(--chip-inset);background:var(--c-surface);padding:8px 12px;border-radius:var(--r-sm)}
.ofis-dim{grid-column:1 / span 8;grid-row:3;margin-top:18px}
.ofis-facts{grid-column:10 / span 3;grid-row:2;align-self:end;margin:0;border-top:1px solid var(--c-text)}
.ofis-facts div{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--c-line)}
.ofis-facts dt{color:var(--c-text-soft)}
.ofis-facts dd{margin:0;color:var(--c-text)}

/* =========================================================
   RAKAMLAR
   ========================================================= */
.stats{padding-top:0}
.stats-grid{align-items:start}
.stats-grid{--step:clamp(16px, 3.6vw, 60px)}
.stat{position:relative;grid-column:span 3;border-top:1px solid var(--c-text);padding-top:14px;margin-top:calc(var(--i) * var(--step))}
.stat + .stat::before{content:"";position:absolute;left:calc(var(--gap) * -1);top:calc(var(--step) * -1 - 1px);width:1px;height:calc(var(--step) + 1px);background:var(--c-text)}
.stat + .stat::after{content:"";position:absolute;left:calc(var(--gap) * -1);top:-1px;width:var(--gap);height:1px;background:var(--c-text)}
.stat-idx{color:var(--c-text-soft)}
.stat-num{
  display:flex;align-items:flex-start;margin:clamp(20px, 2.4vw, 36px) 0 14px;
  font-family:var(--f-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  font-size:clamp(3.6rem, 7.6vw, 8.6rem);line-height:.84;letter-spacing:-.055em;font-variant-numeric:tabular-nums;
}
.stat-num sup{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  margin:.55em 0 0 .7em;padding:4px 6px;background:var(--c-primary);color:var(--c-on-primary);border-radius:var(--r-sm);white-space:nowrap;
}
.stat-label{color:var(--c-text-soft);max-width:22ch}

/* =========================================================
   PROJELER
   ========================================================= */
.filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding-bottom:18px;margin-bottom:clamp(40px, 5.4vw, 80px);border-bottom:1px solid var(--c-line)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;cursor:pointer;
  border:1px solid var(--c-line);border-radius:var(--r-btn);background:transparent;color:var(--c-text);
  font-size:15px;font-weight:500;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.filter sup{font-size:.62rem;margin-left:6px;color:var(--c-text-soft);transition:color .4s var(--ease)}
.filter:hover{border-color:var(--c-text)}
.filter.is-active{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.filter.is-active sup{color:color-mix(in oklab, var(--c-bg) 70%, var(--c-text))}
.filter-read{color:var(--c-text-soft)}
.filter-read span{color:var(--c-text)}

.proj-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(48px, 6vw, 104px);align-items:start}
.proj{position:relative;grid-column:span 6}
.proj[hidden]{display:none}
.proj.s0{grid-column:1 / span 7}
.proj.s1{grid-column:9 / span 4;margin-top:clamp(40px, 10vw, 180px)}
.proj.s2{grid-column:3 / span 4}
.proj.s3{grid-column:7 / span 6;margin-top:clamp(32px, 7vw, 120px)}
.proj.s4{grid-column:1 / span 5}
.proj.s5{grid-column:9 / span 4;margin-top:clamp(40px, 9vw, 160px)}
.proj-frame{position:relative}
.proj-fig{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--c-bg-alt);aspect-ratio:4/5}
.s0 .proj-fig,.s3 .proj-fig{aspect-ratio:4/3}
.s4 .proj-fig{aspect-ratio:1/1}
.proj-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.proj:hover .proj-fig img{transform:scale(1.045)}
.proj-code{position:absolute;left:var(--chip-inset);top:var(--chip-inset);z-index:2;background:var(--c-surface);padding:6px 10px;border-radius:var(--r-sm)}

/* künye kaydırmalı katman */
.proj-kunye{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;
  padding:14px 16px 12px;background:var(--c-surface);color:var(--c-text);
  transform:translateY(101%);transition:transform .75s var(--ease);
}
.proj-kunye div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--c-line);min-width:0}
.proj-kunye div:nth-last-child(-n+2){border-bottom:0}
.proj-kunye dt{color:var(--c-text-soft)}
.proj-kunye dd{margin:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj:hover .proj-kunye,.proj:focus-within .proj-kunye{transform:none}

/* hover'da uzayan kılavuz çizgileri */
.proj-frame::before,.proj-frame::after,.proj-frame .gl{content:"";position:absolute;z-index:3;pointer-events:none;background:var(--c-accent);transition:transform .9s var(--ease)}
.proj-frame::before{top:0;left:-100vw;right:-100vw;height:1px;transform:scaleX(0)}
.proj-frame::after{left:0;top:-40vh;bottom:-40vh;width:1px;transform:scaleY(0)}
.proj-frame .gl--r{right:0;top:-40vh;bottom:-40vh;width:1px;transform:scaleY(0)}
.proj-frame .gl--b{bottom:0;left:-100vw;right:-100vw;height:1px;transform:scaleX(0)}
.proj:hover .proj-frame::before,.proj:hover .proj-frame .gl--b{transform:scaleX(1)}
.proj:hover .proj-frame::after,.proj:hover .proj-frame .gl--r{transform:scaleY(1)}
.proj:hover{z-index:4}
.proj-frame .gl{opacity:.8}

.proj-meta{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:16px;margin-top:14px}
.proj-year{color:var(--c-text-soft)}
.proj-title{font-size:clamp(1.25rem, 1.7vw, 1.7rem);line-height:1.1;letter-spacing:-.02em}
.proj-link{all:unset;cursor:pointer}
.proj-link::after{content:"";position:absolute;inset:0;z-index:5}
.proj-link:focus-visible::after{outline:2px solid var(--c-accent);outline-offset:6px}
.proj-cat{color:var(--c-text-soft);text-align:right}
.proj-loc{grid-column:2 / -1;color:var(--c-text-soft);font-size:.95rem;margin-top:2px}

/* filtre geçişleri */
.proj.is-out{opacity:0;transform:translateY(18px);transition:opacity .28s ease,transform .38s var(--ease)}
.proj.is-enter{animation:projIn 1s var(--ease) both;animation-delay:var(--d,0ms)}
.proj.is-enter .proj-fig{animation:figIn 1.2s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes projIn{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes figIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* =========================================================
   HİZMETLER
   ========================================================= */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-text)}
.svc{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;
  padding:clamp(22px, 2.6vw, 38px) 0;border-bottom:1px solid var(--c-line);
  transition:color .5s var(--ease);
}
.svc::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);z-index:-1;background:var(--c-primary);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.svc-no{grid-column:1 / span 2;color:var(--c-text-soft);transition:color .5s var(--ease)}
.svc-title{grid-column:3 / span 4;font-size:clamp(1.6rem, 3.2vw, 3.2rem);line-height:1;transition:transform .7s var(--ease)}
.svc-desc{grid-column:7 / span 4;color:var(--c-text-soft);font-size:1rem;max-width:44ch;transition:color .5s var(--ease)}
.svc-tags{grid-column:11 / span 2;text-align:right;color:var(--c-text-soft);transition:color .5s var(--ease)}
.svc-thumb{position:absolute;top:50%;left:0;z-index:3;width:clamp(140px, 13vw, 200px);aspect-ratio:4/5;overflow:hidden;pointer-events:none;border-radius:var(--r-md);
  transform:translate(calc(var(--mx, 50vw) - 50%), -50%) rotate(-3deg);clip-path:inset(50% 0 50% 0);transition:clip-path .6s var(--ease)}
.svc-thumb img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){
  .svc:hover{color:var(--c-on-primary)}
  .svc:hover::before{transform:scaleY(1)}
  .svc:hover .svc-no,.svc:hover .svc-desc,.svc:hover .svc-tags{color:var(--c-on-primary)}
  .svc:hover .svc-title{transform:translateX(14px)}
  .svc:hover .svc-thumb{clip-path:inset(0 0 0 0)}
}

/* =========================================================
   SÜREÇ (koyu bant)
   ========================================================= */
.ink{background:var(--c-ink);color:var(--c-on-ink)}
.process{overflow:clip}
.process .grid{position:relative}
.process-aside{grid-column:1 / span 5;position:sticky;top:120px;align-self:start;display:grid;row-gap:28px}
.process-aside .sec-index{grid-column:auto}
.process-aside .sec-title{grid-column:auto;font-size:clamp(2.4rem, 4.8vw, 5.2rem)}
.process-big{display:flex;align-items:flex-start;gap:8px;margin-top:clamp(12px, 3vw, 48px);font-family:var(--f-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);font-size:clamp(6rem, 15vw, 17rem);line-height:.8;letter-spacing:-.06em;color:var(--c-signal);text-transform:none}
.process-big small{font-family:var(--f-mono);font-size:.9rem;letter-spacing:.04em;color:var(--soft-ink);margin-top:.5em}
.steps{grid-column:7 / span 6;list-style:none;margin:0;padding:0 0 0 56px;position:relative}
.steps-track{position:absolute;left:10px;top:12px;bottom:12px;width:1px;background:color-mix(in oklab, var(--c-on-ink) 20%, transparent)}
.steps-track i{position:absolute;inset:0;background:var(--c-signal);transform-origin:top;transform:scaleY(var(--fill,0))}
.step{position:relative;padding-bottom:clamp(52px, 6.4vw, 96px);opacity:.5;transition:opacity .6s var(--ease)}
.step:last-child{padding-bottom:0}
.step.is-on{opacity:1}
.step-node{position:absolute;left:-52px;top:.55em;width:15px;height:15px;border:1px solid var(--soft-ink);background:var(--c-ink);transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.step.is-on .step-node{background:var(--c-signal);border-color:var(--c-signal)}
.step-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.step-head h3{font-size:clamp(2rem, 3.6vw, 3.4rem)}
.step-no{color:var(--soft-ink)}
.step-time{margin-left:auto;color:var(--soft-ink);border:1px solid color-mix(in oklab, var(--c-on-ink) 22%, transparent);padding:3px 8px;border-radius:var(--r-sm)}
.step p{margin:16px 0 14px;max-width:48ch;color:var(--soft-ink);font-size:1.02rem}
.step-out{color:var(--c-signal)}

/* =========================================================
   DEVAM EDEN PROJELER
   ========================================================= */
.sec-lead.ongoing-date{font-size:.74rem;color:var(--c-text-soft);align-self:end}
.og-list{border-top:1px solid var(--c-text)}
.og{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(24px, 3vw, 44px) 0;border-bottom:1px solid var(--c-line)}
.og-media{grid-column:1 / span 4;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);background:var(--c-bg-alt)}
.og-media img{width:100%;height:100%;object-fit:cover}
.og-body{grid-column:5 / span 8;display:flex;flex-direction:column;min-width:0;padding-left:clamp(0px, 2vw, 32px)}
.og-top{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--c-text-soft)}
.og-top span:first-child{color:var(--c-text)}
.og h3{font-size:clamp(1.6rem, 2.9vw, 2.8rem);margin:14px 0 10px;line-height:1.02}
.og-phase{color:var(--c-text-soft);max-width:60ch}
.og-bar{position:relative;height:30px;margin-top:auto;padding-top:0;border-bottom:1px solid var(--c-text)}
.og-body > .og-bar{margin-top:clamp(24px, 3vw, 40px)}
.og-bar i{position:absolute;left:0;bottom:0;height:12px;width:100%;background:var(--c-primary);transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease) .25s}
.og.is-in .og-bar i{transform:scaleX(var(--p))}
.og-bar::after{content:"";position:absolute;bottom:0;left:calc(var(--p) * 100%);height:30px;width:1px;background:var(--c-text)}
.og-ticks{position:absolute;left:0;right:0;bottom:0;height:7px;background-image:repeating-linear-gradient(90deg, var(--c-text) 0 1px, transparent 1px 10%);opacity:.55}
.og-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 0}
.og-meta div{min-width:0}
.og-meta dt{color:var(--c-text-soft)}
.og-meta dd{margin:2px 0 0;color:var(--c-text);font-size:.8rem}

/* =========================================================
   EKİP
   ========================================================= */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.member{margin:0}
.member:nth-child(even){margin-top:clamp(32px, 7vw, 120px)}
.member-media{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-lg);background:var(--c-bg-alt)}
.member-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .9s var(--ease),transform 1.4s var(--ease)}
.member:hover .member-media img{filter:grayscale(0);transform:scale(1.035)}
.member figcaption{display:grid;gap:2px;margin-top:14px;padding-top:12px;border-top:1px solid var(--c-text)}
.member-no{color:var(--c-text-soft)}
.member strong{font-family:var(--f-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);font-size:1.3rem;letter-spacing:-.02em;margin-top:6px}
.member figcaption > span:last-child{color:var(--c-text-soft);font-size:.95rem;line-height:1.4}
.team-note{margin-top:clamp(40px, 5vw, 72px);padding-top:14px;border-top:1px solid var(--c-line);color:var(--c-text-soft)}

/* =========================================================
   SERTİFİKALAR & REFERANSLAR
   ========================================================= */
.refs-grid{row-gap:0}
.refs-h{color:var(--c-text-soft);margin:0 0 14px;font-weight:400}
.certs{grid-column:1 / span 6}
.clients{grid-column:8 / span 5}
.certs ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-text)}
.certs li{display:grid;grid-template-columns:9.2rem 1fr auto;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--c-line)}
.certs li span:nth-child(2){font-size:1.02rem}
.certs li span:last-child{color:var(--c-text-soft)}
.client-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--c-text);border-left:1px solid var(--c-line)}
.cw{display:grid;place-items:center;min-height:clamp(84px, 8vw, 112px);padding:12px;text-align:center;border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);color:var(--c-text-soft);font-family:var(--f-display);font-size:1.15rem;line-height:1.1;transition:color .4s var(--ease),background-color .4s var(--ease)}
.cw:hover{color:var(--c-text);background:var(--c-surface)}
.cw--1{font-weight:600;letter-spacing:-.03em;font-size:1.3rem}
.cw--2{font-size:.82rem;letter-spacing:.24em;font-weight:600}
.cw--3{font-family:var(--f-mono);font-size:1rem}
.cw--4{font-weight:300;font-size:1.35rem;letter-spacing:-.02em}
.cw--5{font-weight:700;letter-spacing:-.04em;text-transform:lowercase;font-size:1.4rem}
.cw--6{font-size:.72rem;letter-spacing:.32em;line-height:1.5}
.cw--7{font-family:var(--f-mono);font-weight:500;letter-spacing:-.02em}
.cw--8{font-weight:500;font-size:1.05rem;border-top:0}
.quote{grid-column:3 / span 9;margin:clamp(64px, 8vw, 128px) 0 0;position:relative}
.quote-mark{display:block;height:.42em;font-family:var(--f-display);font-size:clamp(5rem, 9vw, 8rem);line-height:1;color:var(--c-accent);margin-bottom:10px}
.quote p{font-family:var(--f-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);font-size:clamp(1.5rem, 3vw, 2.8rem);line-height:1.14;letter-spacing:calc(var(--display-track) + .02em);max-width:32ch}
.quote footer{margin-top:24px;color:var(--c-text-soft)}

/* =========================================================
   KARİYER
   ========================================================= */
.career{background:color-mix(in oklab, var(--c-bg-alt) 60%, transparent)}
.career .grid{row-gap:0}
.career .sec-index{grid-row:1}
.career-copy{grid-column:5 / span 5;grid-row:1 / span 2}
.career-title{font-size:clamp(2rem, 4vw, 4rem);max-width:17ch}
.career-text{margin-top:24px;color:var(--c-text-soft);max-width:48ch}
.jobs{list-style:none;margin:32px 0 28px;padding:0;border-top:1px solid var(--c-text)}
.jobs li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--c-line)}
.jobs li span:first-child{font-family:var(--f-display);font-size:1.2rem;letter-spacing:-.015em}
.jobs li .mono{color:var(--c-text-soft)}
.career-media{grid-column:1 / span 3;grid-row:2;margin:clamp(24px, 3vw, 40px) 0 0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-lg);align-self:start}
.career-media img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   TEKLİF FORMU
   ========================================================= */
.qf-aside{grid-column:1 / span 4;position:sticky;top:96px;align-self:start;display:grid;row-gap:24px}
.qf-aside .sec-index,.qf-aside .sec-title{grid-column:auto}
.qf-aside .sec-title{font-size:clamp(2.4rem, 4.4vw, 4.6rem)}
.qf-lead{color:var(--c-text-soft);max-width:44ch}
.qf-wrap{grid-column:6 / span 7;min-width:0}

.antet{display:grid;grid-template-columns:132px minmax(0,1fr);border:1px solid var(--c-text);border-radius:var(--r-sm);margin-top:16px;background:color-mix(in oklab, var(--c-surface) 60%, transparent)}
.antet-plot{position:relative;border-right:1px solid var(--c-text);padding:10px}
.plot-svg{display:block;width:100%;height:auto;overflow:visible}
.plot-grid{fill:none;stroke:var(--c-line);stroke-width:1}
.plot-rect{fill:color-mix(in oklab, var(--c-primary) 28%, transparent);stroke:var(--c-text);stroke-width:1.5;transition:all .7s var(--ease)}
.plot-dim{fill:none;stroke:var(--c-text);stroke-width:1;transition:all .7s var(--ease)}
.plot-label{position:absolute;left:10px;right:6px;bottom:6px;font-size:.6rem;color:var(--c-text-soft)}
.antet-rows{margin:0;font-size:.66rem}
.antet-rows div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;padding:6px 10px;border-bottom:1px solid var(--c-line)}
.antet-rows div:last-child{border-bottom:0}
.antet-rows dt{color:var(--c-text-soft)}
.antet-rows dd{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.qf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px, 2.4vw, 36px);border-top:1px solid var(--c-text)}
.qf-row{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:20px 0 6px;border:0;border-bottom:1px solid var(--c-line)}
.qf-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c-primary);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.qf-row:focus-within::after,.qf-row.has-error::after{transform:scaleX(1)}
.qf-row--full{grid-column:1 / -1}
.qf-label{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 4px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-soft)}
.qf-label .mono{color:var(--c-text)}
.qf-label em{font-style:normal;text-transform:none;letter-spacing:0}
.qf input[type="text"],.qf input[type="number"],.qf input[type="tel"],.qf input[type="email"],.qf textarea,.qf select{
  width:100%;min-height:46px;padding:8px 0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-text);
  font-family:var(--f-body);font-size:1.15rem;line-height:1.4;outline:none;-webkit-appearance:none;appearance:none;
}
.qf textarea{resize:vertical;min-height:110px}
.qf input::placeholder,.qf textarea::placeholder{color:color-mix(in oklab, var(--c-text-soft) 75%, var(--c-bg))}
.qf input[type="number"]::-webkit-outer-spin-button,.qf input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qf input[type="number"]{-moz-appearance:textfield}
.qf-unit{display:flex;align-items:center;gap:10px}
.qf-unit .mono{color:var(--c-text-soft)}
.qf-select{position:relative}
.qf-select::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--c-text);border-bottom:1.5px solid var(--c-text);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.qf select{padding-right:28px;cursor:pointer}
.qf select option{background:var(--c-surface);color:var(--c-text)}
.qf-err{margin:2px 0 0;min-height:1.3em;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em;color:var(--c-text)}
.qf-err:not(:empty)::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;background:var(--c-primary);vertical-align:1px}
.qf-count{align-self:flex-end;color:var(--c-text-soft);margin-top:-2px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{position:relative}
.chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--c-line);border-radius:var(--r-btn);cursor:pointer;font-size:15px;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.chip span::before{content:"";width:8px;height:8px;border:1px solid currentColor;transition:background-color .35s var(--ease)}
.chip:hover span{border-color:var(--c-text)}
.chip input:checked + span{background:var(--c-text);color:var(--c-bg);border-color:var(--c-text)}
.chip input:checked + span::before{background:var(--c-primary);border-color:var(--c-primary)}
.chip input:focus-visible + span{outline:2px solid var(--c-accent);outline-offset:2px}

.qf-end{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-top:28px;border-bottom:0}
.qf-end::after{display:none}
.qf-end .check{order:1}
.qf-end .btn{order:2}
.qf-end .qf-err{order:3;flex-basis:100%;margin-top:-8px}
.check{display:flex;align-items:flex-start;gap:12px;max-width:420px;cursor:pointer;font-size:.9rem;line-height:1.45;color:var(--c-text-soft)}
.check input{position:absolute;width:1px;height:1px;opacity:0}
.check-box{position:relative;flex:none;width:20px;height:20px;margin-top:1px;border:1px solid var(--c-text);border-radius:var(--r-sm);transition:background-color .3s var(--ease)}
.check-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border-right:2px solid var(--c-on-primary);border-bottom:2px solid var(--c-on-primary);transform:rotate(45deg) scale(0);transition:transform .35s var(--ease)}
.check input:checked + .check-box{background:var(--c-primary);border-color:var(--c-primary)}
.check input:checked + .check-box::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible + .check-box{outline:2px solid var(--c-accent);outline-offset:2px}

.qf-done{border-top:1px solid var(--c-text);padding:clamp(32px, 4vw, 56px) 0;outline:none}
.qf-done:not([hidden]){animation:figIn 1s var(--ease) both}
.qf-ticket{display:inline-flex;align-items:center;gap:10px;color:var(--c-text-soft)}
.qf-ticket::before{content:"";width:9px;height:9px;background:var(--c-primary)}
.qf-ticket b{color:var(--c-text);font-weight:500}
.qf-done h3{font-size:clamp(2.2rem, 4.4vw, 4rem);margin:22px 0 18px}
.qf-done p{color:var(--c-text-soft);max-width:54ch;margin-bottom:28px}

/* =========================================================
   İLETİŞİM
   ========================================================= */
.contact{padding-top:0}
.contact-info{grid-column:1 / span 5;display:grid;row-gap:24px;align-content:start;border-top:1px solid var(--c-text);padding-top:20px}
.contact-info .sec-index{grid-column:auto}
.contact-info .sec-title{grid-column:auto}
.contact-list{margin:12px 0 0}
.contact-list div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--c-line)}
.contact-list dt{color:var(--c-text-soft);padding-top:4px}
.contact-list dd{margin:0;font-size:1.08rem;line-height:1.45}
.contact-list a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:background-size .6s var(--ease)}
.contact-list a:hover{background-size:100% 1px}
.map{grid-column:7 / span 6;position:relative;min-height:clamp(340px, 38vw, 540px);border-radius:var(--r-lg);background:var(--c-bg-alt);align-self:stretch;margin-top:20px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--r-lg);filter:grayscale(1) contrast(1.04)}
html[data-tone="dark"] .map iframe{filter:grayscale(1) invert(.9) contrast(.92)}
.map-tag{position:absolute;left:var(--chip-inset);bottom:var(--chip-inset);background:var(--c-surface);padding:8px 12px;border-radius:var(--r-sm)}

/* =========================================================
   ALTBİLGİ
   ========================================================= */
.site-footer{padding:clamp(72px, 9vw, 132px) 0 28px;overflow:hidden}
.site-footer a{text-decoration:none}
.footer-top{row-gap:40px}
.footer-claim{grid-column:1 / span 5;font-family:var(--f-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);font-size:clamp(1.8rem, 3.4vw, 3.3rem);line-height:1.04;letter-spacing:var(--display-track);max-width:14ch}
.footer-col{grid-column:span 2}
.footer-col:nth-child(2){grid-column:7 / span 2}
.footer-col h3{font-family:var(--f-mono);font-weight:400;letter-spacing:.06em;color:var(--soft-ink);margin-bottom:14px;font-size:.72rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.98rem}
.footer-col a{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:background-size .6s var(--ease)}
.footer-col a:hover{background-size:100% 1px}
.footer-word{
  margin:clamp(56px, 8vw, 120px) 0 18px;white-space:nowrap;overflow:hidden;
  font-family:var(--f-display);font-weight:600;font-stretch:var(--display-stretch);
  font-size:min(27vw, 26rem);line-height:.78;letter-spacing:-.06em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px color-mix(in oklab, var(--c-on-ink) 55%, transparent);
  padding-bottom:.04em;
}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:16px;border-top:1px solid color-mix(in oklab, var(--c-on-ink) 22%, transparent);color:var(--soft-ink)}
.footer-bottom span{text-transform:inherit}
.to-top{color:var(--c-on-ink)}

/* =========================================================
   PROJE DETAY PANELİ
   ========================================================= */
.pm{position:fixed;inset:0;z-index:120}
.pm[hidden]{display:none}
.pm-backdrop{position:absolute;inset:0;background:color-mix(in oklab, var(--c-ink) 58%, transparent);opacity:0;transition:opacity .5s var(--ease)}
.pm-panel{position:absolute;top:0;right:0;bottom:0;width:min(1260px, 94vw);display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-text);transform:translateX(100%);transition:transform .8s var(--ease);box-shadow:-30px 0 80px -30px rgba(0,0,0,.35)}
.pm.is-open .pm-backdrop{opacity:1}
.pm.is-open .pm-panel{transform:none}
.pm-bar{display:flex;align-items:center;gap:18px;flex:none;padding:12px var(--gut);border-bottom:1px solid var(--c-line)}
.pm-code{display:inline-flex;align-items:center;gap:10px}
.pm-code::before{content:"";width:9px;height:9px;background:var(--c-primary)}
.pm-count{color:var(--c-text-soft)}
.pm-nav{margin-left:auto;display:flex;gap:8px}
.pm-close{margin-left:8px}
.pm-body{flex:1;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px, 3.4vw, 56px);padding:clamp(20px, 2.4vw, 36px) var(--gut) 48px}
.pm-stage{position:relative;aspect-ratio:5/4;background:var(--c-bg-alt);border-radius:var(--r-lg)}
.pm-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.pm-stage img.is-swap{animation:swap 1s var(--ease) both}
@keyframes swap{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.pm-stage-nav{position:absolute;left:var(--chip-inset);bottom:var(--chip-inset);z-index:2;display:flex;align-items:center;gap:6px;padding:6px;background:var(--c-surface);border-radius:var(--r-md)}
.pm-stage-nav .mono{padding:0 6px;min-width:64px;text-align:center}
.pm-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.pm-thumb{position:relative;padding:0;border:0;background:var(--c-bg-alt);aspect-ratio:4/3;overflow:hidden;cursor:pointer;border-radius:var(--r-md);opacity:.5;transition:opacity .4s var(--ease)}
.pm-thumb::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;transition:border-color .4s var(--ease)}
.pm-thumb img{width:100%;height:100%;object-fit:cover}
.pm-thumb:hover{opacity:.85}
.pm-thumb.is-active{opacity:1}
.pm-thumb.is-active::after{border:2px solid var(--c-text)}
.pm-info{min-width:0}
.pm-info.is-swap{animation:infoIn .8s var(--ease) both}
@keyframes infoIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pm-cat{display:inline-flex;align-items:center;gap:10px;color:var(--c-text-soft)}
.pm-title{font-size:clamp(2rem, 3.6vw, 3.6rem);line-height:.98;margin:12px 0 28px}
.pm-kunye{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin:0 0 26px;border-top:1px solid var(--c-text)}
.pm-kunye div{padding:11px 0;border-bottom:1px solid var(--c-line);min-width:0}
.pm-kunye dt{color:var(--c-text-soft);font-size:.64rem}
.pm-kunye dd{margin:3px 0 0;font-size:.8rem;color:var(--c-text)}
.pm-text p{color:var(--c-text-soft);margin-bottom:14px}
.pm-text p:first-child{color:var(--c-text);font-size:1.1rem;line-height:1.5}
.pm-info .btn{margin-top:14px}
body.is-locked{overflow:hidden}

/* =========================================================
   DUYARLI DÜZEN
   ========================================================= */
@media (max-width: 1280px){
  .header-clock{display:none}
}
@media (max-width: 1100px){
  .nav{display:none}
  .header-right{margin-left:auto}
  .menu-toggle{display:block}

  .hero-grid{grid-template-rows:auto auto auto auto}
  .hero-title{grid-column:1 / -1;font-size:clamp(3.6rem, 14vw, 10rem)}
  .hero-dim{display:none}
  .hero-copy{grid-column:1 / span 6;grid-row:3;align-self:start}
  .hero-media{grid-column:8 / span 5;grid-row:3;min-height:0;aspect-ratio:4/5;margin-top:clamp(28px, 3.4vw, 52px)}

  .sec-index{grid-column:1 / -1}
  .sec-title{grid-column:1 / span 10}
  .sec-lead{grid-column:1 / span 8}

  .ofis-text{grid-column:1 / -1;grid-row:2;margin-top:28px}
  .ofis-lead{margin-right:0}
  .ofis-media,.ofis-dim{grid-column:1 / span 10;grid-row:auto}
  .ofis-facts{grid-column:1 / span 8;grid-row:auto;margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}

  .stat{grid-column:span 6;margin-top:0}
  .stat + .stat::before,.stat + .stat::after{display:none}
  .stat:nth-child(2){margin-top:40px}
  .stat:nth-child(3){margin-top:48px}
  .stat:nth-child(4){margin-top:88px}

  .proj.s0,.proj.s1,.proj.s2,.proj.s3,.proj.s4,.proj.s5{grid-column:span 6;margin-top:0}
  .proj.s1,.proj.s3,.proj.s5{margin-top:clamp(40px, 8vw, 96px)}
  .proj .proj-fig{aspect-ratio:4/5}

  .svc-no{grid-column:1 / span 1}
  .svc-title{grid-column:2 / span 5}
  .svc-desc{grid-column:7 / span 6}
  .svc-tags{grid-column:7 / span 6;text-align:left;margin-top:10px}

  .process-aside{grid-column:1 / -1;position:relative;top:0;margin-bottom:56px}
  .process-big{display:none}
  .steps{grid-column:1 / -1}

  .og-media{grid-column:1 / span 5}
  .og-body{grid-column:6 / span 7;padding-left:0}
  .og-meta{grid-template-columns:repeat(2,minmax(0,1fr))}

  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .member:nth-child(even){margin-top:56px}
  .member:nth-child(3){margin-top:-16px}

  .certs,.clients{grid-column:1 / -1}
  .clients{margin-top:56px}
  .quote{grid-column:1 / -1}

  .career-copy{grid-column:1 / -1;grid-row:2;margin-top:28px}
  .career-media{grid-column:1 / span 6;grid-row:3;margin-top:48px}

  .qf-aside{grid-column:1 / -1;position:relative;top:0;margin-bottom:48px}
  .antet{max-width:520px}
  .qf-wrap{grid-column:1 / -1}

  .contact-info{grid-column:1 / -1}
  .map{grid-column:1 / -1;margin-top:40px}

  .footer-claim{grid-column:1 / -1}
  .footer-col,.footer-col:nth-child(2){grid-column:span 4}

  .pm-body{grid-template-columns:1fr}
}

@media (max-width: 760px){
  :root{--head-h:64px}
  body{font-size:16px}
  .grid,.hero-grid,.proj-grid,.svc,.og{grid-template-columns:repeat(4,minmax(0,1fr))}
  .guides-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .guides-grid i:nth-child(n+5){display:none}
  .guides-grid i:nth-child(4){border-right:1px solid var(--guide)}

  .header-cta{display:none}
  .brand-name{font-size:1.15rem}

  .hero-meta{grid-column:1 / -1}
  .hero-meta-sep{flex-basis:40px}
  .hero-title{font-size:clamp(3rem, 19vw, 7rem);margin-top:24px}
  .hero-title .line--tag{padding-left:.6em}
  .hero-media{grid-column:1 / -1;grid-row:3;aspect-ratio:4/5;margin:34px 10px 0 10px}
  .hero-dim-v{left:-18px}
  .hero-copy{grid-column:1 / -1;grid-row:4;padding-top:30px}
  .hero-actions .btn{flex:1 1 auto}
  .hero-foot{grid-row:5}
  .hero-foot .hero-scroll{display:none}

  .sec-title,.sec-lead{grid-column:1 / -1}
  .sec-title{font-size:clamp(2.3rem, 11vw, 3.6rem)}

  .ofis-media,.ofis-dim,.ofis-facts{grid-column:1 / -1}
  .ofis-media{aspect-ratio:4/3}

  .stat{grid-column:span 2}
  .stat:nth-child(2){margin-top:28px}
  .stat:nth-child(3){margin-top:40px}
  .stat:nth-child(4){margin-top:68px}
  .stat-num{font-size:clamp(2.9rem, 15vw, 4.6rem)}
  .stat-num sup{font-size:.62rem;margin-left:.4em;padding:3px 5px}

  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px;scrollbar-width:none;width:calc(100% + var(--gut) * 2)}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none}
  .proj.s0,.proj.s1,.proj.s2,.proj.s3,.proj.s4,.proj.s5{grid-column:1 / -1;margin-top:0}
  .proj.s1,.proj.s3,.proj.s5{margin-top:0}
  .proj:nth-child(3n+2) .proj-fig{aspect-ratio:1/1}
  .proj-kunye{transform:none;position:static;border-top:0;padding:10px 0 0;background:transparent;display:none}

  .svc{row-gap:10px}
  .svc-no{grid-column:1 / -1}
  .svc-title,.svc-desc,.svc-tags{grid-column:1 / -1}
  .svc-tags{margin-top:0}
  .svc-thumb{display:none}

  .steps{padding-left:40px}
  .step-node{left:-38px}
  .steps-track{left:7px}
  .step-time{margin-left:0}

  .og-media,.og-body{grid-column:1 / -1}
  .og-body{margin-top:18px}
  .og-meta{grid-template-columns:repeat(2,minmax(0,1fr))}

  .team-grid{column-gap:12px}
  .member:nth-child(even){margin-top:40px}
  .member:nth-child(3){margin-top:-24px}
  .member strong{font-size:1.1rem}

  .certs li{grid-template-columns:1fr auto;row-gap:4px}
  .certs li span:nth-child(2){grid-column:1 / -1;grid-row:2}
  .cw{min-height:76px;font-size:1rem}

  .career-media{grid-column:1 / -1;aspect-ratio:4/3}

  .antet{grid-template-columns:104px minmax(0,1fr)}
  .qf{grid-template-columns:1fr}
  .qf-end .btn{width:100%}

  .contact-list div{grid-template-columns:1fr;gap:4px}
  .map{aspect-ratio:4/5;min-height:0}

  .footer-col,.footer-col:nth-child(2){grid-column:1 / -1}
  .footer-bottom{flex-direction:column}

  .pm-panel{width:100%}
  .pm-bar{gap:10px}
  .pm-count{display:none}
  .pm-kunye{grid-template-columns:1fr 1fr}
}

@media (hover:none){
  .hero-cross{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}