/* Koyu salon. Serif başlıklar (Instrument Serif), küçük büyük harfli bilgi satırları (Geist).
   İş dizini: numaralı liste; ortada sabit görüntü paneli etkin satırın fotoğrafını gösterir. */
:root{
  --bg:#121212;
  --ink:#ecebe7;
  --mid:#8a8984;
  --dim:#4a4a47;
  --rule:#262625;
  --ser:"Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:"Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutL:max(24px, env(safe-area-inset-left, 0px));
  --gutR:max(24px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.25,.6,.25,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;touch-action:manipulation}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--bg)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.wrap{padding-left:var(--gutL);padding-right:var(--gutR)}
.skip{position:absolute;left:var(--gutL);top:-80px;z-index:60;background:var(--ink);color:var(--bg);padding:8px 12px}
.skip:focus{top:calc(8px + env(safe-area-inset-top,0px))}
.caps{font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.ser{font-family:var(--ser);font-weight:500;letter-spacing:-.035em}
.mid{color:var(--mid)}
[id]{scroll-margin-top:80px}
[hidden]{display:none!important}

/* üst şerit: sol künye, ortada ad, sağda menü + dil */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:40;transition:background-color .4s}
.top.solid{background:rgba(18,18,18,.94)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:18px}
.tl{opacity:.85}
.brand.gone{opacity:0;pointer-events:none}
.stage{cursor:pointer}
.brand{transition:opacity .8s var(--ease);font-family:var(--ser);font-weight:500;letter-spacing:-.02em;font-size:22px;line-height:1;white-space:nowrap}
.tr{display:flex;justify-content:flex-end;align-items:center;gap:40px}
.tr nav{display:flex;gap:24px}
.tr nav a,.lang a{opacity:.7;transition:opacity .2s}
.tr nav a:hover,.lang a:hover{opacity:1}
.lang b{font-weight:400}

/* açılış: tam ekran */
.hero{position:relative;height:100svh;min-height:520px;background:#000;overflow:hidden}
.stage{position:absolute;inset:0}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s var(--ease)}
.stage img.on{opacity:1}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:22%;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:1;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.7));z-index:1;pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-block:28px}
.cap-t a{display:flex;flex-direction:column;gap:6px}
.cap-t .ser{font-size:clamp(34px,4vw,56px);line-height:1}
.cap-t .caps{opacity:.8}
.count{opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap}
.count:hover{opacity:1}

/* iş dizini */
.works{padding-top:140px}
.whead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:56px}
.whead h2{font-size:clamp(56px,8vw,128px);line-height:.9;margin:0}
.filt{display:flex;gap:28px}
.filt button{color:var(--mid);transition:color .2s;padding:6px 0;text-transform:inherit;letter-spacing:inherit;font-size:inherit}
.filt button:hover,.filt button[aria-pressed="true"]{color:var(--ink)}
.filt button[aria-pressed="true"]::before{content:"▸ "}
.idx{position:relative}
.panel{position:sticky;top:calc(50svh - 12.5vw);height:0;z-index:2;pointer-events:none;display:flex;justify-content:center;align-items:flex-start}
.frame{position:relative;width:min(40vw,760px);aspect-ratio:16/10;background:#000;overflow:hidden;opacity:0;transition:opacity .35s}
.idx.live .frame{opacity:1}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.frame img.on,.frame video.on{opacity:1}
.frame::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.frame .ov{position:absolute;left:0;right:0;bottom:22px;z-index:1;text-align:center;display:flex;flex-direction:column;gap:6px;padding:0 20px}
.frame .ov .ser{font-size:clamp(30px,3vw,52px);line-height:1}
.rows{list-style:none;margin:0;padding-top:8px;padding-bottom:30vh;position:relative;z-index:1}
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2.2fr) minmax(0,1.2fr) 56px;gap:20px;padding:7px 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .25s;align-items:baseline}
.row .y{text-align:right;font-variant-numeric:tabular-nums}
.row .mth{display:none}
.row.on,.row:hover,.row:focus-visible{color:var(--ink)}
.row.on .t::before{content:"▸ ";margin-left:-1.1em}

/* hakkında / iletişim */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:120px;border-top:1px solid var(--rule)}
.about h2{grid-column:1/13;font-size:clamp(56px,8vw,128px);line-height:.9;margin:0 0 40px}
.about .bio{grid-column:1/8;font-size:clamp(18px,1.4vw,21px);line-height:1.6;max-width:62ch}
.about .bio p{margin:0 0 1em}
.facts{grid-column:9/13;margin:0;display:flex;flex-direction:column;gap:18px}
.facts dt{color:var(--mid)}
.facts dd{margin:0}
.contact{padding-block:120px 140px;border-top:1px solid var(--rule)}
.contact h2{margin:0 0 20px;font-weight:400;letter-spacing:.08em}
.mail{display:inline-block;font-size:clamp(24px,3vw,44px);letter-spacing:-.02em;line-height:1;overflow-wrap:anywhere;transition:opacity .2s}
.mail:hover{opacity:.7}
.more{display:flex;gap:28px;margin-top:28px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:24px 36px;border-top:1px solid var(--rule);color:var(--mid)}

/* iş sayfası */
.whero{position:relative;height:88svh;min-height:480px;background:#000;overflow:hidden}
.whero img,.whero video{width:100%;height:100%;object-fit:cover}
.whero::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.whero.none{height:60svh;background:#0b0b0b}
.wtitle{position:absolute;left:0;right:0;bottom:36px;z-index:1}
.wtitle h1{font-size:clamp(52px,8vw,140px);line-height:.9;margin:0;max-width:16ch;text-wrap:balance}
.wmeta{display:flex;flex-wrap:wrap;gap:16px 56px;padding-block:36px 72px;border-bottom:1px solid var(--rule)}
.wmeta span{display:block;color:var(--mid)}
.wmeta b{font-weight:400}
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:72px}
.plates button{display:block;background:#000;cursor:zoom-in}
.plates img{width:100%}
.plates .full{grid-column:1/-1}
.plates .vid video{width:100%;background:#000}
.plates .vid.tall{max-width:420px;margin:0 auto;width:100%}
.wdesc{padding-top:48px}
.wdesc p{margin:0;max-width:52ch;font-size:clamp(19px,1.5vw,23px);line-height:1.45;letter-spacing:-.01em}
.empty{padding-block:72px;color:var(--mid);font-size:19px}
.credits{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:96px;margin-top:96px;border-top:1px solid var(--rule)}
.credits h2{grid-column:1/4;margin:0;font-weight:400;letter-spacing:.08em}
.credits dl{grid-column:4/13;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px}
.credits dl div{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:16px}
.credits dt{color:var(--mid)}
.credits dd{margin:0}
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:end;border-top:1px solid var(--rule);padding-block:32px 64px}
.pager a{display:flex;flex-direction:column;gap:6px}
.pager b{font-size:clamp(28px,3vw,44px);line-height:1;font-weight:500}
.pager a:hover b{opacity:.7}
.pager .nx{text-align:right;align-items:flex-end}
.lb{position:fixed;inset:0;z-index:70;background:#000;display:grid;grid-template-rows:auto 1fr auto;padding:16px var(--gutR) 20px var(--gutL);overscroll-behavior:contain}
.lb .row{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink);padding:0}
.lb .row button{padding:10px 0}
.lb .nav{display:flex;gap:28px}
.lb figure{margin:0;display:flex;align-items:center;justify-content:center;min-height:0}
.lb figure img{max-height:100%;width:auto;object-fit:contain}

.mbtn{display:none;padding:8px 0}
.mnav{display:none}
@media (max-width:900px){
  .mbtn{display:block}
  .hero{height:auto;min-height:0;aspect-ratio:1/1;max-height:100svh}
  .stage img{object-position:var(--fx,50%) var(--fy,50%)}
  .cap{padding-block:18px}
  .cap-t .ser{font-size:28px}
  .works{padding-top:56px}
  .whead{margin-bottom:28px}
  .tr .lang{display:none}
  .mnav:not([hidden]){display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;padding-block:24px 36px;background:var(--bg);border-bottom:1px solid var(--rule)}
  .mnav .mlang{margin-top:18px}
  .mnav .mlang a{font-size:12px;letter-spacing:.08em;font-weight:400}
  .mnav>a{font-size:40px;font-weight:500;letter-spacing:-.035em;line-height:1.15}
  .top.open{background:var(--bg)}
  .top .wrap{grid-template-columns:1fr auto}
  .tl{display:none}
  .brand{font-size:20px}
  .tr{gap:18px}
  .tr nav{display:none}
  .panel{display:none}
  .rows{padding-block:0 40px}
  .row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"img img" "t y";gap:0 10px;padding:0 0 36px;color:var(--ink)}
  .row .t{grid-area:t}.row .y{grid-area:y;color:var(--mid)}
  .row .k,.row .c{display:none}
  .row .mth{display:block;grid-area:img;margin-bottom:12px}
  .row .mth img,.row .mth video{aspect-ratio:16/10;object-fit:cover;width:100%}
  .row.on .t::before{content:none}
  .about .bio,.facts,.credits h2,.credits dl{grid-column:1/13}
  .credits dl{grid-template-columns:minmax(0,1fr)}
  .plates{grid-template-columns:minmax(0,1fr)}
  .pager{grid-template-columns:1fr 1fr}.pager .mid-l{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}