/* ZÈIA Creative Studio — sade, aydinlik, sik. Fildisi zemin, koyu yesil + bronz. */
:root{
  --paper:#f3eee5;--paper-2:#ebe4d7;--ink:#123f3a;--ink-2:#2d4c46;--muted:#6c7a75;--bronze:#7a5f45;
  --ivory:#f4eee2;--line:rgba(18,63,58,.16);--night:#0d1412;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:Jost,system-ui,sans-serif;
  --gut:clamp(16px,5vw,72px);--max:1360px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--ivory)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--ivory);padding:10px 14px}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{display:flex;align-items:baseline;gap:14px;font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--bronze)}
.eyebrow i{font-style:normal;color:var(--muted);letter-spacing:.2em}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,88px);line-height:1.02;letter-spacing:-.012em;color:var(--ink)}
.h2 em,.h1 em{font-style:italic}

/* ---- sahne (sabit arka plan, yalniz hero'da gorunur) ---- */
#scene{position:fixed;inset:0;width:100%;height:100vh;display:block;opacity:0;transition:opacity 1.6s ease;z-index:0}
#scene.on{opacity:1}

/* ---- ust bar ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gut);transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease),opacity 1.3s ease}
/* logo: manzarada buyuk, fildisi barda kucuk (wordmark orani ~2.55) */
.top .logo{display:block;position:relative;height:46px;width:118px;transition:height .5s var(--ease),width .5s var(--ease)}
.top.solid .logo,body.menu .top .logo{height:28px;width:72px}
.top .logo img{position:absolute;left:0;top:0;height:100%;width:auto;transition:opacity .45s ease}
.top .logo .g{opacity:0}
.top nav{display:flex;gap:clamp(18px,2.8vw,40px)}
.top nav a,.top .cta{text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory);
  text-shadow:0 1px 10px rgba(0,0,0,.4);transition:color .45s ease,opacity .3s;opacity:.9}
.top nav a:hover{opacity:1}
.top .cta{border:1px solid rgba(244,238,226,.55);padding:10px 18px;border-radius:40px;text-shadow:none;transition:color .45s,border-color .45s,background .3s}
.top .cta:hover{background:rgba(244,238,226,.14)}
.top .right{display:flex;align-items:center;gap:clamp(18px,2.8vw,40px)}
.top.solid{background:rgba(243,238,229,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);padding-top:16px;padding-bottom:16px;box-shadow:0 1px 0 var(--line)}
.top.solid .logo .g{opacity:1}.top.solid .logo .w{opacity:0}
.top.solid nav a,.top.solid .cta{color:var(--ink);text-shadow:none}
.top.solid .cta{border-color:var(--line)}
.top.solid .cta:hover{background:rgba(18,63,58,.06)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:1px;background:var(--ivory);transition:transform .45s var(--ease),background .45s,top .45s var(--ease)}
.burger span:first-child{top:16px}.burger span:last-child{top:23px}
.top.solid .burger span{background:var(--ink)}
body.menu .burger span:first-child{top:20px;transform:rotate(45deg)}
body.menu .burger span:last-child{top:20px;transform:rotate(-45deg)}
body.menu .top{background:transparent;box-shadow:none}
body.menu .top .logo .g{opacity:1}body.menu .top .logo .w{opacity:0}
body.menu .burger span{background:var(--ink)}
.mnav{position:fixed;inset:0;z-index:25;background:rgba(243,238,229,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);gap:6px;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
body.menu .mnav{opacity:1;visibility:visible}
.mnav a{font-family:var(--serif);font-size:44px;line-height:1.15;text-decoration:none;color:var(--ink)}
.mnav .mail{margin-top:28px;font-family:var(--sans);font-size:13px;letter-spacing:.14em;color:var(--bronze)}

/* ---- hero ---- */
#hero{position:relative;height:100vh;height:100svh;min-height:560px;z-index:1;color:var(--ivory);overflow:hidden}
#hero .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,14,13,.30) 0%,rgba(8,14,13,0) 22%,rgba(8,14,13,0) 68%,rgba(8,14,13,.42) 100%)}
.hero-copy{position:absolute;left:var(--gut);top:30vh;max-width:640px;text-shadow:0 1px 18px rgba(0,0,0,.35);transition:opacity 1.3s ease}
.hero-copy .kicker{font-size:11px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;opacity:.9;margin-bottom:22px}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.6vw,90px);line-height:1.02;letter-spacing:-.01em}
.time{position:absolute;left:50%;bottom:clamp(22px,5vh,48px);transform:translateX(-50%);width:min(560px,calc(100vw - 32px));user-select:none;touch-action:none;transition:opacity 1.3s ease}
.time .read{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.time .clock{font-family:var(--serif);font-size:26px;letter-spacing:.02em}
.time .phase{font-size:11px;letter-spacing:.34em;text-transform:uppercase;opacity:.88}
.time .now{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.72;padding:4px 0;color:var(--ivory)}
.time .now:hover{opacity:1}
.rail{position:relative;height:28px;margin:0 9px;cursor:pointer}
.rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(244,238,226,.45)}
.rail .fill{position:absolute;left:0;top:50%;height:1px;background:var(--ivory)}
.rail .tick{position:absolute;top:50%;width:1px;height:7px;margin-top:-3px;background:rgba(244,238,226,.6)}
.knob{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--ivory);box-shadow:0 0 0 6px rgba(244,238,226,.16),0 0 24px rgba(255,230,190,.6);outline:none}
.knob:focus-visible{box-shadow:0 0 0 6px rgba(244,238,226,.4),0 0 24px rgba(255,230,190,.8)}
.labels{display:flex;justify-content:space-between;margin-top:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.75;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.labels span{cursor:pointer}
.cue{position:absolute;right:var(--gut);bottom:clamp(26px,5vh,52px);font-size:10px;letter-spacing:.34em;text-transform:uppercase;text-decoration:none;opacity:.8;
  writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;text-shadow:0 1px 8px rgba(0,0,0,.5);transition:opacity 1.3s ease}
.cue::after{content:"";width:1px;height:46px;background:currentColor;animation:cue 2.4s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
body.pre .top,body.pre .hero-copy,body.pre .time,body.pre .cue{opacity:0}

/* ---- icerik bolumleri: sahnenin ustunden kayar ---- */
main{position:relative;z-index:2;background:var(--paper)}
.sec{padding:clamp(96px,12vw,180px) 0}
.sec + .sec{border-top:1px solid var(--line)}

/* studyo */
.studio .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.studio .h2{grid-column:1/9}
.studio .side{grid-column:9/13;align-self:end}
.studio .side p{color:var(--ink-2);font-size:17px;line-height:1.75}
.facts{margin-top:36px;display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.facts dt{letter-spacing:.2em;text-transform:uppercase;font-size:10.5px;color:var(--muted);padding-top:3px}
.facts dd{text-align:right;color:var(--ink)}

/* isler */
.works-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:clamp(28px,4vw,48px)}
.filters{display:flex;gap:8px}
.filters button{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--line);border-radius:40px;color:var(--ink-2);transition:background .3s,color .3s,border-color .3s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.filters button:hover{border-color:var(--ink)}
.proj{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px);padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--line)}
.proj:first-of-type{margin-top:clamp(40px,5vw,72px)}
.proj[hidden]{display:none}
.proj .meta{grid-column:1/5;position:relative}
.proj .meta .n{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--bronze)}
.proj .meta h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.2vw,52px);line-height:1.05;margin:10px 0 14px;overflow-wrap:anywhere}
.proj .meta .tags{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.proj .meta p{margin-top:18px;color:var(--ink-2);max-width:34ch}
.proj .meta .count{margin-top:26px;font-size:12px;color:var(--muted)}
.strip{grid-column:5/13;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.strip::-webkit-scrollbar{display:none}
.reel{position:relative;flex:0 0 calc((100% - 42px)/4);min-width:180px;aspect-ratio:9/16;overflow:hidden;background:var(--paper-2);scroll-snap-align:start;cursor:pointer;border-radius:2px;
  outline-offset:3px}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel video{opacity:0;transition:opacity .5s ease}
.reel.playing video{opacity:1}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,13,0) 60%,rgba(8,14,13,.5));pointer-events:none}
.reel .dur{position:absolute;left:12px;bottom:10px;z-index:1;font-size:11px;letter-spacing:.14em;color:var(--ivory)}
.reel .play{position:absolute;right:10px;bottom:8px;z-index:1;width:30px;height:30px;border-radius:50%;border:1px solid rgba(244,238,226,.7);display:grid;place-items:center;transition:background .3s}
.reel .play::before{content:"";margin-left:2px;border-left:8px solid var(--ivory);border-top:5px solid transparent;border-bottom:5px solid transparent}
.reel:hover .play,.reel:focus-visible .play{background:rgba(244,238,226,.2)}
/* fotograf */
.photos{grid-column:5/13;columns:3 200px;column-gap:14px}
.photos button{display:block;width:100%;margin:0 0 14px;break-inside:avoid;overflow:hidden;background:var(--paper-2);border-radius:2px}
.photos img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.photos button:hover img{transform:scale(.985)}

/* hizmetler */
.svc{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.svc li{list-style:none;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,3vw,48px);padding:clamp(28px,3.2vw,44px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.svc .n{grid-column:1/2;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--bronze)}
.svc h3{grid-column:2/7;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,46px);line-height:1.08}
.svc p{grid-column:7/12;color:var(--ink-2)}
.platforms{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.platforms b{font-weight:500;color:var(--bronze)}

/* surec */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,72px)}
.steps div{border-top:1px solid var(--ink);padding-top:22px}
.steps .n{font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:20px}
.steps h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,36px);margin:8px 0 10px}
.steps p{color:var(--ink-2)}

/* iletisim */
.contact{background:var(--ink);color:var(--ivory);padding:clamp(110px,14vw,200px) 0 40px}
.contact .eyebrow{color:#c7a987}
.contact .eyebrow i{color:rgba(244,238,226,.5)}
.contact .h2{color:var(--ivory);margin-top:clamp(28px,4vw,48px)}
.contact .mail{display:inline-block;margin-top:clamp(40px,5vw,64px);font-family:var(--serif);font-size:clamp(28px,3.4vw,54px);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:6px;transition:background-size .6s var(--ease);overflow-wrap:anywhere}
.contact .mail:hover{background-size:0 1px;background-position:100% 100%}
.contact .row{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:40px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,238,226,.7)}
.contact .row a{text-decoration:none}
.contact .row a:hover{color:var(--ivory)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(90px,12vw,160px);padding-top:26px;border-top:1px solid rgba(244,238,226,.18);font-size:12px;color:rgba(244,238,226,.6)}
.foot img{height:22px;width:auto}

/* ---- oynatici / isik kutusu ---- */
dialog.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:rgba(8,14,13,.94);color:var(--ivory);overflow:hidden}
dialog.viewer::backdrop{background:transparent}
dialog.viewer[open]{display:grid;place-items:center;animation:vin .45s var(--ease)}
@keyframes vin{from{opacity:0}to{opacity:1}}
.viewer .stage{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:64px 72px}
.viewer video,.viewer img{max-height:calc(100vh - 150px);max-width:100%;width:auto;height:auto;background:#000;border-radius:2px}
.viewer video{aspect-ratio:9/16;height:calc(100vh - 150px)}
.viewer .x{position:absolute;top:20px;right:var(--gut);font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:10px 0}
.viewer .nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(244,238,226,.35);display:grid;place-items:center;transition:background .3s}
.viewer .nav:hover{background:rgba(244,238,226,.12)}
.viewer .nav.p{left:var(--gut)}.viewer .nav.n{right:var(--gut)}
.viewer .nav::before{content:"";width:10px;height:10px;border-top:1px solid var(--ivory);border-left:1px solid var(--ivory)}
.viewer .nav.p::before{transform:rotate(-45deg);margin-left:4px}.viewer .nav.n::before{transform:rotate(135deg);margin-right:4px}
.viewer .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,238,226,.75)}
.viewer .cap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;letter-spacing:.02em;text-transform:none;color:var(--ivory);margin-right:12px}

/* ---- gorunme: maskeli satir yukselisi + perde acilisi ---- */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.in .ln>span,.ln.in>span{transform:none}
[data-curtain]{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
[data-curtain].in{clip-path:inset(0 0 0 0)}
[data-soft]{opacity:0;transition:opacity 1.2s ease;transition-delay:calc(var(--i,0)*80ms)}
[data-soft].in{opacity:1}
@media (prefers-reduced-motion:reduce){.ln>span,[data-curtain],[data-soft]{transition:none;transform:none;clip-path:none;opacity:1}}

/* ---- tablet / telefon ---- */
@media (max-width:1024px){
  .studio .h2{grid-column:1/13}.studio .side{grid-column:1/13;max-width:560px}
  .proj .meta{grid-column:1/13}.strip,.photos{grid-column:1/13}
  .reel{flex-basis:calc((100% - 28px)/3)}
  .svc h3{grid-column:2/13}.svc p{grid-column:2/13}
}
@media (max-width:700px){
  .top nav,.top .cta{display:none}.burger{display:block}
  .top{padding:18px 16px}.top.solid{padding:12px 16px}
  .top .logo{height:34px;width:87px}
  .top.solid .logo,body.menu .top .logo{height:24px;width:62px}
  .hero-copy{top:auto;bottom:196px;right:16px}
  #hero .veil{background:linear-gradient(180deg,rgba(8,14,13,.30) 0%,rgba(8,14,13,0) 20%,rgba(8,14,13,0) 42%,rgba(8,14,13,.55) 78%,rgba(8,14,13,.62) 100%)}
  .labels span:nth-child(4){display:none}
  .cue{display:none}
  .strip{margin:0 calc(var(--gut)*-1);padding:0 var(--gut);scroll-padding:0 var(--gut)}
  .reel{flex-basis:62vw;min-width:0}
  .photos{columns:2 140px;column-gap:10px}.photos button{margin-bottom:10px}
  .svc li{grid-template-columns:40px 1fr;gap:6px 14px}
  .svc .n{grid-column:1/2}.svc h3{grid-column:2/3}.svc p{grid-column:2/3}
  .steps{grid-template-columns:1fr}
  .viewer .stage{padding:56px 0 64px}
  .viewer video{width:auto;height:calc(100svh - 130px);max-width:100vw}
  .viewer .nav{top:auto;bottom:12px;transform:none;width:44px;height:44px}
  .viewer .cap{bottom:24px}
}