:root{
  --bg:#0c0d0d;
  --ink:#f2f1ed;
  --muted:rgba(242,241,237,.56);
  --line:rgba(242,241,237,.16);
  --glass:rgba(255,255,255,.06);
  --glass-line:rgba(255,255,255,.14);
  --pad:clamp(16px,2.4vw,36px);
  --gap:clamp(10px,1.6vw,24px);
  --slide:8s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{background:transparent;color:var(--ink);font:400 15px/1.5 "Instrument Sans",system-ui,sans-serif;
  min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
.muted{color:var(--muted)}
.glass{background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}

/* bulanık ortam ışığı: sayfanın arkasında, aktif projenin görüntüsü */
.ambient{position:fixed;inset:-10%;z-index:-1;background:center/cover no-repeat;
  filter:blur(60px) saturate(1.2) brightness(.45);transform:scale(1.1);transition:background-image 1.2s}

/* ---------- HERO (ana sayfa + proje sayfaları) ---------- */
.hero{height:100vh;height:100svh;padding:var(--gap)}
.frame{position:relative;height:100%;overflow:hidden;border:1px solid var(--glass-line);background:#000}
.slides,.slide{position:absolute;inset:0}
.slide{opacity:0;transition:opacity 1.4s ease}
.slide.on{opacity:1}
.slide video,.slide img{width:100%;height:100%;object-fit:cover}
.veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%)}

.tabs{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);padding:0 clamp(16px,2vw,28px);z-index:2}
.tab{display:block;padding:18px 0 0;font-size:13px;color:rgba(255,255,255,.62);transition:color .3s}
.tab span{display:block;padding:0 12px 14px 0;white-space:nowrap}
.tab:hover,.tab.on{color:#fff}
.tab i{display:block;height:1px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.tab i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.tab.on i::after{transform:scaleX(1)}
.home .tab.run i::after{animation:fill var(--slide) linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.crumbs{grid-template-columns:repeat(4,1fr)}

.hero-copy{position:absolute;z-index:2;top:clamp(84px,14vh,150px);right:clamp(16px,2vw,28px);width:min(50%,660px)}
.eyebrow{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:18px}
.hero-copy h1{font-size:clamp(28px,3.3vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.022em;
  text-shadow:0 1px 30px rgba(0,0,0,.25)}
.actions{display:flex;align-items:center;gap:28px;margin-top:clamp(28px,6vh,72px)}
.pill{display:inline-block;background:#fff;color:#111;border-radius:999px;padding:12px 22px;font-size:14px;transition:transform .3s,background .3s}
.pill:hover{background:#e9e8e3;transform:translateY(-1px)}
.textlink{font-size:14px;color:#fff}
.textlink:hover{opacity:.6}

.cells{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.2);
  background:rgba(12,13,13,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.cell{padding:22px clamp(16px,2vw,28px) 84px;border-left:1px solid rgba(255,255,255,.16)}
.cell:first-child{border-left:0}
.lbl{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:22px}
.val{font-size:clamp(17px,1.4vw,21px);transition:opacity .4s}
.cells.swap .val,.cells.swap #h-sub{opacity:0}
.go{transition:background .3s}
.go:hover{background:rgba(255,255,255,.06)}

/* proje sayfası hero */
.pcells{grid-template-columns:1fr 1fr}
.pcells .cell{padding-bottom:88px}
.pcells h1{font-size:clamp(36px,5.4vw,84px);font-weight:400;letter-spacing:-.03em;line-height:.95}
.ptext{font-size:clamp(15px,1.15vw,18px);max-width:46ch;line-height:1.45}

/* ---------- İŞLER ---------- */
main{position:relative}
.seg,.film,.gal{padding:clamp(56px,9vw,120px) var(--pad) 0}
.seg-head{display:grid;grid-template-columns:clamp(48px,6vw,90px) 1fr auto;align-items:baseline;
  border-top:1px solid var(--line);padding:16px 0 clamp(24px,3vw,40px)}
.seg-head h2{font-size:clamp(24px,2.8vw,40px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.grid{display:grid;gap:clamp(28px,3vw,44px) clamp(12px,1.4vw,20px)}
.grid.n1{grid-template-columns:1fr}
.grid.n2{grid-template-columns:repeat(2,1fr)}
.grid.n3{grid-template-columns:repeat(3,1fr)}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#161717}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .6s}
.card:hover .thumb img,.card:hover .thumb video{transform:scale(1.03)}
.tag{position:absolute;top:12px;left:12px;border-radius:999px;padding:5px 11px 5px 22px;font-size:12px}
.tag::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#ff5a3c}
.card p{display:flex;justify-content:space-between;gap:12px;padding-top:12px}

/* proje sayfası içerik */
.film video{width:100%;background:#000}
.gallery{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px)}
.gallery img{width:100%;height:auto;background:#161717}
.pnav{display:flex;justify-content:space-between;align-items:end;gap:16px;padding:clamp(64px,9vw,120px) var(--pad) 120px}
.pnav a:hover{opacity:.6}
.next{display:flex;flex-direction:column;text-align:right;gap:4px}
.next span:last-child{font-size:clamp(24px,2.8vw,40px);letter-spacing:-.02em;line-height:1.1}

.foot{display:flex;flex-wrap:wrap;gap:24px;padding:clamp(80px,10vw,140px) var(--pad) 110px;color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot span{margin-left:auto}

/* ---------- HAKKINDA ---------- */
.about{padding:clamp(100px,20vh,200px) var(--pad) 140px}
.lead{font-size:clamp(26px,3.2vw,48px);line-height:1.12;letter-spacing:-.022em;max-width:24ch}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap);margin-top:clamp(56px,8vw,112px)}
.box{padding:clamp(20px,2.4vw,32px)}
.list .yr{text-align:right}
.about h2{font-size:13px;font-weight:400;color:var(--muted);margin:0 0 14px}
.about h2:not(:first-child){margin-top:40px}
.list{list-style:none;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:1.1fr 1.4fr 7.5em;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.links .pill{margin-top:14px}

/* ---------- ALT MENÜ ---------- */
.dock{position:fixed;z-index:50;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:center;gap:40px;padding:6px 6px 6px 20px;border-radius:999px;
  background:rgba(20,21,21,.38);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
.dock-name{font-weight:500;letter-spacing:-.01em;font-size:15px;white-space:nowrap}
.dock-btn{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-content:center;gap:4px;
  border:1px solid rgba(255,255,255,.2);transition:background .3s}
.dock-btn:hover{background:rgba(255,255,255,.1)}
.dock-btn span{display:block;width:14px;height:1px;background:#fff;transition:transform .3s}
.dock-btn[aria-expanded=true] span:first-child{transform:translateY(2.5px) rotate(45deg)}
.dock-btn[aria-expanded=true] span:last-child{transform:translateY(-2.5px) rotate(-45deg)}
.menu{position:fixed;z-index:49;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(340px,calc(100% - 32px));border-radius:20px;padding:14px 22px;display:flex;flex-direction:column;
  background:rgba(20,21,21,.55)}
.menu[hidden]{display:none}
.menu a{padding:9px 0;border-bottom:1px solid var(--line);font-size:16px}
.menu a:last-child{border:0}
.menu a.sub{font-size:14px;color:var(--muted);padding-left:12px}
.menu a:hover{color:#fff;opacity:.7}
.menu .lang{color:var(--muted)}

@media (max-width:900px){
  .grid.n3{grid-template-columns:repeat(2,1fr)}
  .hero-copy{width:min(64%,560px)}
}
@media (max-width:640px){
  body{font-size:14px}
  .tabs{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}
  .tab span{padding-right:0}
  .hero-copy{left:16px;right:16px;width:auto;top:96px}
  .hero-copy h1{font-size:28px}
  .cells{grid-template-columns:1fr 1fr}
  .cells:not(.pcells) .cell:first-child{display:none}
  .cells:not(.pcells) .cell:nth-child(2){border-left:0}
  .cell{padding-bottom:78px}
  .pcells{grid-template-columns:1fr}
  .pcells .cell{border-left:0;padding-bottom:12px}
  .pcells .cell:first-child .lbl{margin-bottom:10px}
  .pcells .cell:last-child{padding-bottom:84px}
  .pcells .cell:last-child .lbl{display:none}
  .grid.n2,.grid.n3{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .list li{grid-template-columns:1fr 7.5em;row-gap:2px}
  .list li span:nth-child(2){grid-column:1;grid-row:2}
  .list li .yr{grid-row:1 / span 2;grid-column:2}
  .foot span{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- PROJE HİKÂYESİ ---------- */
.pbody{padding-top:clamp(24px,4vw,56px)}
.st{padding:clamp(40px,6vw,88px) var(--pad) 0}
.part{display:grid;grid-template-columns:clamp(48px,6vw,90px) 1fr auto;align-items:baseline;gap:12px;
  margin:clamp(48px,7vw,104px) var(--pad) 0;padding-top:16px;border-top:1px solid rgba(242,241,237,.4)}
.part h2{font-size:clamp(28px,3.6vw,52px);font-weight:400;letter-spacing:-.025em;line-height:1.05}
.part + .st{padding-top:clamp(24px,3vw,40px)}
.blk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px 40px;padding-bottom:clamp(24px,3vw,40px)}
.blk h3{font-size:clamp(18px,1.6vw,24px);font-weight:400;letter-spacing:-.01em;line-height:1.2}
.blk-text{max-width:62ch;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(242,241,237,.86)}
.blk-text p + p{margin-top:14px}
.blk-text .sub{display:block;color:#fff;margin-bottom:2px}
.st > * + *{margin-top:clamp(10px,1.2vw,18px)}
.filmbox video{width:100%;background:#000}

/* moodboard: küçüklü büyüklü satırlar */
.mb{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px)}
.mb-row{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-rows:100%}
.mb-row.r1{grid-template-columns:1fr;max-height:88vh}
.mb-row.r2a{grid-template-columns:7fr 5fr;aspect-ratio:2.25/1}
.mb-row.r2b{grid-template-columns:5fr 7fr;aspect-ratio:2.25/1}
.mb-row.r3{grid-template-columns:5fr 4fr 3fr;aspect-ratio:3.1/1}
.mb figure{min-height:0;overflow:hidden;background:#161717}
.mb img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.mb figure:hover img{transform:scale(1.02)}
.boards{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px)}
.boards img{width:100%;height:auto;cursor:zoom-in;background:#fff}
.credit{font-size:13px;color:var(--muted);max-width:80ch}
.credit a{color:var(--ink);border-bottom:1px solid var(--line)}
.credit a:hover{border-color:var(--ink)}

/* büyütme */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(8,9,9,.92);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.lightbox[hidden]{display:none}
.lb-stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(56px,7vw,96px) clamp(12px,7vw,110px)}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:scale(.985);
  transition:opacity .35s ease,transform .45s cubic-bezier(.3,.7,.3,1);user-select:none;-webkit-user-drag:none}
.lb-stage img.in{opacity:1;transform:none}
.lb-btn{all:unset;box-sizing:border-box;position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .3s,color .3s,border-color .3s}
.lb-btn:hover{background:#fff;color:#111;border-color:#fff}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px)}
.lb-prev,.lb-next{top:50%;margin-top:-24px}
.lb-prev{left:clamp(10px,2vw,28px)}
.lb-prev svg{transform:rotate(180deg)}
.lb-next{right:clamp(10px,2vw,28px)}
.lb-count{position:absolute;left:50%;bottom:clamp(16px,2.4vw,28px);transform:translateX(-50%);
  font-size:13px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.lightbox.single .lb-prev,.lightbox.single .lb-next,.lightbox.single .lb-count{display:none}
@media (max-width:640px){
  .lb-stage{padding:64px 0 72px}
  .lb-prev,.lb-next{top:auto;bottom:14px;margin-top:0;width:44px;height:44px}
  .lb-prev{left:16px}.lb-next{right:16px}
  .lb-count{bottom:28px}
}

@media (max-width:640px){
  .blk{grid-template-columns:1fr;gap:10px}
  .part{grid-template-columns:36px 1fr;margin-left:var(--pad);margin-right:var(--pad)}
  .part > span:last-child{grid-column:2}
  .mb-row.r2a,.mb-row.r2b,.mb-row.r3{grid-template-columns:1fr 1fr;aspect-ratio:auto;grid-template-rows:auto}
  .mb-row.r3 figure:first-child{grid-column:1 / span 2}
  .mb-row figure{aspect-ratio:4/3}
  .mb-row.r3 figure:first-child{aspect-ratio:16/10}
}

/* sekme numarası */
.tab b{font-weight:400;opacity:.55;margin-right:10px;font-variant-numeric:tabular-nums}

/* TR/EN anahtarı (dock'ta, her sayfada) */
.dock{gap:14px}
.dock-name{margin-right:6px}
.lang-switch{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.02em;padding:4px 2px}
.ls-l{color:rgba(255,255,255,.45);transition:color .3s}
.lang-switch:not(.is-en) .ls-l:first-child,.lang-switch.is-en .ls-l:last-child{color:#fff}
.ls-track{position:relative;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);transition:background .3s}
.ls-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.lang-switch.is-en .ls-knob{transform:translateX(14px)}
.lang-switch.is-en .ls-track{background:rgba(255,255,255,.34)}
.lang-switch:hover .ls-track{background:rgba(255,255,255,.3)}
@media (max-width:640px){
  .dock{gap:10px;padding-left:16px}
  .dock-name{font-size:14px;margin-right:2px}
}

/* ---------- "Projeyi aç": hücrenin tamamı buton ---------- */
.go-cell{position:relative;display:block;background:rgba(255,255,255,.07);color:#fff;
  transition:background .45s cubic-bezier(.3,.7,.3,1),color .45s}
.go-cell .lbl{transition:color .45s}
.go-val{display:flex;align-items:center;justify-content:space-between;gap:16px}
.go-ic{flex:0 0 auto;width:44px;height:44px;margin:-12px 0;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  display:grid;place-items:center;transition:background .45s,border-color .45s,color .45s}
.go-arrows{position:relative;width:16px;height:16px;overflow:hidden}
.go-arrows svg{position:absolute;inset:0;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s cubic-bezier(.6,0,.2,1)}
.go-arrows svg:last-child{transform:translateX(-22px)}
.go-cell:not(:hover) .go-arrows svg:first-child{animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,70%,100%{transform:translateX(0)}82%{transform:translateX(3px)}}
/* vitrin süresi: hücrenin üst kenarında dolan çizgi */
.go-bar{position:absolute;top:-1px;left:0;right:0;height:2px;background:#fff;transform:scaleX(0);transform-origin:left}
.go-cell.run .go-bar{animation:fill var(--slide) linear forwards}
/* hover: hücre beyaza dolar */
.go-cell:hover{background:#fff;color:#111}
.go-cell:hover .lbl{color:rgba(17,17,17,.55)}
.go-cell:hover .go-ic{background:#111;border-color:#111;color:#fff}
.go-cell:hover .go-arrows svg:first-child{transform:translateX(22px)}
.go-cell:hover .go-arrows svg:last-child{transform:translateX(0)}
.go-cell:hover .go-bar{background:#111}
.go-cell:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.go-val > span:first-child{white-space:nowrap}
@media (max-width:640px){
  .go-val{gap:8px}
  .go-ic{width:34px;height:34px}
  .go-cell .val{font-size:16px}
}