/* Layout: karanlık oda editoryali. Sayfa sahnelerden oluşur; her sahnede ekran sabit kalır, kaydırdıkça nesneler derinlikten izleyiciye doğru gelip yanından geçer. Yalnızca transform ve opacity ile çalışır, telefonda bulanıklık yok. */
:root{
  /* Lovre: Ink zemin + Lovre Red bölümler. Bone yalnızca metin rengi. .t-red bölümü kırmızıya çevirir. */
  --walnut:#111114; --bark:#1C1C21; --cork:#34343C; --drift:#A8A59E;
  --cream:#F2EFE8; --cream-2:rgba(242,239,232,.68); --cream-3:rgba(242,239,232,.26); --ember:#FF4122;
  --btn:#FF4122; --btn-t:#111114; --btn-h:#FF6347; --bar:rgba(17,17,20,.96); --bar-t:#F2EFE8; --et:#FF4122;
  --f:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h:"Syne", "Inter", system-ui, sans-serif;
  --m:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
.t-red{--walnut:#FF4122;--cream:#111114;--cream-2:rgba(17,17,20,.8);--cream-3:rgba(17,17,20,.36);--bark:rgba(17,17,20,.1);--cork:rgba(17,17,20,.5);--drift:rgba(17,17,20,.72);--ember:#F2EFE8;--btn:#111114;--btn-t:#F2EFE8;--btn-h:#2A2A30;background:var(--walnut);color:var(--cream);color-scheme:light}
/* Renk seçenekleri: html[data-theme] kök belirteçleri değiştirir. Gece varsayılan. */
html[data-theme="grafit"]{--walnut:#2A2A30;--bark:#34343C;--cork:#4A4A55;--bar:rgba(42,42,48,.96)}
html[data-theme="kum"]{--walnut:#E7E1D5;--bark:#DAD3C5;--cork:#BEB6A7;--drift:#5E5B55;--cream:#111114;--cream-2:rgba(17,17,20,.72);--cream-3:rgba(17,17,20,.26);--btn:#111114;--btn-t:#F2EFE8;--btn-h:#2A2A30;--bar:rgba(231,225,213,.96);--bar-t:#111114;--et:#B8280C;color-scheme:light}
html:not([data-lv]){--walnut:#FFFFFF;--bark:#F3F2EF;--cork:#D9D7D2;--drift:#5E5B55;--cream:#111114;--cream-2:rgba(17,17,20,.7);--cream-3:rgba(17,17,20,.24);--btn:#111114;--btn-t:#FFFFFF;--btn-h:#2A2A30;--bar:rgba(255,255,255,.96);--bar-t:#111114;--et:#C42D0E;color-scheme:light}
html:not([data-lv]) .mark,html:not([data-lv]) .shd2 h3,html:not([data-lv]) .meet h2,html:not([data-lv]) .brands h2,html:not([data-lv]) .lhead h2,html:not([data-lv]) .menu a{color:#FF4122}
html:not([data-lv]) .menu a small{color:rgba(17,17,20,.7)}
html:not([data-lv]) .soc .it,html:not([data-lv]) #logos .ref .ci{box-shadow:inset 0 0 0 1px rgba(17,17,20,.12)}
html:not([data-lv]) .soc .it::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(17,17,20,.12);pointer-events:none}
html[data-theme="kizil"]{--walnut:#FF4122;--bark:rgba(17,17,20,.1);--cork:rgba(17,17,20,.45);--drift:rgba(17,17,20,.72);--cream:#111114;--cream-2:rgba(17,17,20,.8);--cream-3:rgba(17,17,20,.36);--ember:#F2EFE8;--btn:#111114;--btn-t:#F2EFE8;--btn-h:#2A2A30;--bar:rgba(255,65,34,.97);--bar-t:#111114;--et:#111114;color-scheme:light}
html[data-theme="kizil"] .t-red{--walnut:#111114;--cream:#F2EFE8;--cream-2:rgba(242,239,232,.68);--cream-3:rgba(242,239,232,.26);--bark:#1C1C21;--cork:#34343C;--drift:#A8A59E;--ember:#FF4122;--btn:#FF4122;--btn-t:#111114;--btn-h:#FF6347;color-scheme:dark}
html[data-theme="kizil"] .tabs button[aria-selected="true"]{background:#111114;border-color:#111114;color:#F2EFE8}
html[data-theme="kizil"] .tabs button[aria-selected="true"] small{color:rgba(242,239,232,.7)}
html[data-theme="kizil"] .sc,html[data-theme="kizil"] .sg{border-top-color:#111114}
html[data-theme="kizil"] .lbtn:hover,html[data-theme="kizil"] .ghost:hover{background:#111114;border-color:#111114;color:#F2EFE8}
html{transition:background .4s}
*{box-sizing:border-box}
html{background:var(--walnut);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--walnut);color:var(--cream);font-family:var(--f);font-feature-settings:"ss01" on,"cv11" on;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:transparent}
.band{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.in{max-width:1320px;margin:0 auto}
h1,h2,h3{margin:0;font-family:var(--h);font-weight:700;text-transform:none;line-height:.95;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.u{font-family:var(--m);text-transform:uppercase;font-weight:500;letter-spacing:.08em}
.mini{font-size:11px}
.muted{color:var(--cream-2)}

/* ---------- açılış: kalem aracı çizimi ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#FF4122;color:#111114;display:grid;place-items:center;pointer-events:none;animation:ldOut .6s var(--ease) 1s forwards}
.loader svg{width:min(34vmin,240px);height:auto;overflow:visible;animation:ldZoom .6s var(--ease) 1s forwards}
.loader .ll{fill:none;stroke:#111114;stroke-width:18;stroke-dasharray:132;stroke-dashoffset:132;animation:drawi .6s var(--ease) .1s forwards}
.loader .ld{fill:#F2EFE8;transform-box:fill-box;transform-origin:center;animation:pt .35s var(--ease) .6s both}
.loader .cnt{position:absolute;left:max(18px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));font-size:11px;font-variant-numeric:tabular-nums}
.loader .nm{position:absolute;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));font-size:11px}
@keyframes gx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:420}}
@keyframes drawi{to{stroke-dashoffset:0}}
@keyframes pt{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ldZoom{to{transform:scale(1.6);opacity:0}}
@keyframes ldOut{to{opacity:0;visibility:hidden}}

/* ---------- üst bar ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.top,.top.solid{background:var(--bar);color:var(--bar-t);border-bottom-color:var(--cork)}
.top .in{height:64px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.mark{color:inherit;display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;font-family:var(--h);font-weight:700;font-size:24px;letter-spacing:.02em;line-height:1;text-transform:none}
.mark svg{flex:none}
.top .pill{white-space:nowrap}
@media (max-width:1000px) and (min-width:761px){.top .pill{display:none}}
@media (max-width:1180px) and (min-width:761px){.top nav{gap:10px;font-size:10px;letter-spacing:.04em}.mark{font-size:19px!important}}
.top nav{display:flex;gap:clamp(12px,1.6vw,24px);font-size:11px;flex-wrap:nowrap;white-space:nowrap}
.burger{display:none;align-items:center;gap:10px;height:44px;padding:0 6px 0 16px;border-radius:36px;border:1px solid currentColor;background:transparent;color:inherit;font:500 11px var(--m);cursor:pointer}
.burger i{position:relative;width:32px;height:32px;border-radius:50%;background:#FF4122}
html[data-theme="kizil"] .burger i{background:#111114}
html[data-theme="kizil"] .burger i::before,html[data-theme="kizil"] .burger i::after{background:#F2EFE8}
html[data-theme="kizil"] .prog{background:#111114}
.burger i::before,.burger i::after{content:"";position:absolute;left:9px;right:9px;height:1.5px;background:#111114;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i::before{top:12px}.burger i::after{top:18px}
.burger[aria-expanded="true"] i::before{top:15px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:15px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:35;background:var(--walnut);padding:calc(84px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.menu.open{opacity:1;visibility:visible}
.menu ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--cork)}
.menu li{border-bottom:1px solid var(--cork);transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);transition-delay:calc(var(--i)*.04s)}
.menu.open li{transform:none;opacity:1}
.menu a{display:flex;align-items:baseline;gap:14px;padding:14px 0;text-decoration:none;font-family:var(--h);font-size:clamp(1.5rem,7vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.menu a small{font:500 11px var(--m);color:var(--cream-2);min-width:22px}
.menu .mfoot{font-size:11px;color:var(--cream-2)}
.top nav a{text-decoration:none;padding-block:4px;background:linear-gradient(var(--ember),var(--ember)) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease)}
.top nav a:hover{background-size:100% 2px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 24px;border-radius:36px;background:var(--btn);color:var(--btn-t);text-decoration:none;font-size:11px;font-weight:500;border:0;cursor:pointer;transition:background .3s}
.pill:hover{background:var(--btn-h)}
.ghost{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:0 20px;border-radius:22.5px;border:1px solid var(--cream);color:var(--cream);text-decoration:none;font-size:11px;transition:background .3s,color .3s}
.ghost:hover{background:var(--ember);border-color:var(--ember);color:#111114}

/* ---------- sahne iskeleti ---------- */
.scene{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1000px;perspective-origin:50% 50%;contain:layout paint}
.glow{display:none;position:absolute;width:90vmax;height:90vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(220,80,0,.18),transparent 70%);pointer-events:none;left:-30vmax;bottom:-45vmax}
.zl{will-change:transform,opacity;transform-origin:50% 50%}
.rw .w{opacity:.18;transition:opacity .3s linear}
.rw .w.on{opacity:1}


/* ---------- ortak üst menü ---------- */
.lvh{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);color:#111114;border-bottom:1px solid #D9D7D2;padding-top:env(safe-area-inset-top,0px);font-family:"Inter",system-ui,sans-serif}
.lvh-in{position:relative;max-width:1320px;margin:0 auto;height:64px;display:flex;align-items:center;gap:20px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.lvh-logo{font-family:"Syne",sans-serif;font-weight:700;font-size:24px;letter-spacing:.02em;line-height:1;color:#FF4122;text-decoration:none;margin-right:auto;white-space:nowrap}
.lvh-nav{display:flex;align-items:stretch;gap:2px;height:64px}
.lvh-nav>a,.lvh-dd>button{display:flex;align-items:center;gap:6px;height:64px;padding:0 12px;border:0;background:none;color:inherit;cursor:pointer;text-decoration:none;font:500 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.lvh-nav>a:hover,.lvh-dd:hover>button,.lvh-dd.open>button{color:#C42D0E}
.lvh-dd>button i{font-style:normal;font-size:9px;transition:transform .3s}
.lvh-dd:hover>button i,.lvh-dd.open>button i{transform:rotate(180deg)}
.lvh-panel{display:none;position:absolute;left:18px;right:18px;top:100%;background:#fff;border:1px solid #D9D7D2;border-top:3px solid #FF4122;border-radius:0 0 16px 16px;box-shadow:0 24px 48px rgba(17,17,20,.14);padding:28px;gap:28px 32px}
.lvh-dd:hover .lvh-panel,.lvh-dd.open .lvh-panel,.lvh-dd:focus-within .lvh-panel{display:grid}
.lvh-mega{grid-template-columns:repeat(4,minmax(0,1fr))}
.lvh-two{grid-template-columns:repeat(2,minmax(0,1fr));left:auto;width:min(520px,calc(100% - 36px))}
.lvh-col{display:flex;flex-direction:column;min-width:0}
.lvh-col .h{font-family:"Syne",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1.1;color:#111114;text-decoration:none;padding:0 0 12px;margin-bottom:6px;border-bottom:1px solid #D9D7D2}
.lvh-col a.h:hover{color:#FF4122}
.lvh-col a:not(.h){font-size:14px;line-height:1.3;color:rgba(17,17,20,.78);text-decoration:none;padding:7px 0}
.lvh-col a:not(.h):hover{color:#C42D0E}
.lvh-cta{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:30px;background:#111114;color:#fff;text-decoration:none;font:500 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.lvh-cta:hover{background:#FF4122;color:#111114}
.lvh-burger{display:none;align-items:center;gap:10px;height:44px;padding:0 6px 0 16px;border-radius:30px;border:1px solid #111114;background:none;color:#111114;cursor:pointer;font:500 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.lvh-burger i{position:relative;width:32px;height:32px;border-radius:50%;background:#FF4122}
.lvh-burger i::before,.lvh-burger i::after{content:"";position:absolute;left:9px;right:9px;height:1.5px;background:#111114;transition:transform .3s,top .3s}
.lvh-burger i::before{top:12px}.lvh-burger i::after{top:18px}
.lvh-burger[aria-expanded="true"] i::before{top:15px;transform:rotate(45deg)}
.lvh-burger[aria-expanded="true"] i::after{top:15px;transform:rotate(-45deg)}
.lvm{position:fixed;inset:0;z-index:39;background:#fff;color:#111114;overflow:auto;-webkit-overflow-scrolling:touch;padding:calc(72px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;font-family:"Inter",system-ui,sans-serif}
.lvm.open{opacity:1;visibility:visible}
.lvm details{border-bottom:1px solid #D9D7D2}
.lvm summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;min-height:56px;font-family:"Syne",sans-serif;font-weight:700;font-size:26px;letter-spacing:-.03em}
.lvm summary::-webkit-details-marker{display:none}
.lvm summary::after{content:"+";font:400 24px "Inter",sans-serif;color:#FF4122}
.lvm details[open]>summary::after{content:"–"}
.lvm details details{border-bottom:0;border-top:1px solid #ECEAE5;margin-left:4px}
.lvm details details summary{font-size:17px;letter-spacing:-.02em;min-height:48px}
.lvm .sub{display:flex;flex-direction:column;padding:0 0 12px 14px;border-left:2px solid #FF4122;margin:0 0 10px 6px}
.lvm .sub a{font-size:15px;color:rgba(17,17,20,.8);text-decoration:none;padding:9px 0}
.lvm .sub a.all{font-weight:600;color:#C42D0E}
.lvm>a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid #D9D7D2;font-family:"Syne",sans-serif;font-weight:700;font-size:26px;letter-spacing:-.03em;color:#111114;text-decoration:none}
.lvm .go{justify-content:center;margin-top:22px;border:0;border-radius:30px;background:#FF4122;font:500 12px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;min-height:52px}
.lvm .mf{margin-top:18px;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,17,20,.7)}
@media (max-width:1060px){.lvh-nav,.lvh-cta{display:none}.lvh-burger{display:inline-flex}}
@media (max-width:760px){.lvh-in{height:58px}.lvh-logo{font-size:20px}}
.lvh{position:fixed;left:0;right:0}
/* sayfa kipleri: ana sayfa işleri göstermez; iş sayfaları yalnızca kendi bölümünü gösterir */
.home #sections,.home .lsec,.end{display:none}
.pg .hero,.pg .mq,.pg .works-intro,.pg .hsec,.pg .meet,.pg .brands,.pg .loader,.pg .lsec,.pg .prog{display:none}
.pg-logolar .lsec{display:block;border-top:0}
.pg .soc{border-top:0}
.pcta{display:none;padding-block:clamp(40px,6vw,80px) clamp(60px,8vw,110px);border-top:1px solid var(--cork)}
.pg .pcta{display:block}
.pcta .in{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.pcta .oc{display:flex;flex-wrap:wrap;gap:10px}
.pcta .oc a{min-height:44px}
.pcta .oc small{color:var(--cream-2);font-size:10px}
.pcta .cb{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:clamp(24px,4vw,56px);border-radius:16px}
.pcta .cb h3{font-size:clamp(2rem,5vw,3.8rem);letter-spacing:-.035em;line-height:.95}
.hsec{padding-block:clamp(70px,10vw,140px);border-top:1px solid var(--cork)}
.hsec h2{font-size:clamp(2.4rem,7vw,6rem);letter-spacing:-.03em;line-height:.9;color:#FF4122;margin:14px 0 clamp(28px,4vw,56px)}
.wgrp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;width:min(100%,900px);text-align:left;padding-inline:18px}
.wgrp h3{font:500 11px var(--m);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--cream);padding-bottom:10px;margin-bottom:4px}
.wgrp a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--cream-3);text-decoration:none;font-family:var(--h);font-weight:700;font-size:clamp(1.25rem,2.6vw,2rem);letter-spacing:-.03em;line-height:1.05}
.wgrp a small{font:500 11px var(--m);letter-spacing:.06em}
.wgrp a:hover{border-bottom-color:var(--cream)}
.wgrp a:hover small::after{content:" →"}
@media (max-width:620px){.wgrp{grid-template-columns:1fr}}

/* ---------- 1. açılış ---------- */
.hero{position:relative;padding-top:calc(64px + env(safe-area-inset-top,0px));min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero .hin{position:relative;flex:1;width:100%;max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(20px,3vh,36px);padding-block:clamp(26px,4vh,44px) clamp(22px,3vh,34px)}
.hello{display:flex;justify-content:space-between;align-items:center;gap:16px}
.hmain{flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:center}
.htext{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px);min-width:0}
.word{font-size:clamp(2.6rem,min(7.4vw,13.5vh),7.4rem);letter-spacing:-.04em;line-height:.9}
.word .ln{display:block;overflow:hidden;padding:.05em 0 .12em;margin-bottom:-.08em;white-space:nowrap}
.word .ch{display:inline-block;animation:rise 1.2s var(--ease) both;animation-delay:calc(1.15s + var(--i)*.03s)}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
.lede{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.45;font-weight:400;margin:0;max-width:34ch}
.hbtns{display:flex;flex-wrap:wrap;gap:10px}
.hbtns .ghost{min-height:46px}
.hlogo{justify-self:end;width:100%;max-width:min(420px,52vh);aspect-ratio:1/1;position:relative;background:#111114;display:grid;place-items:center;container-type:size;animation:clip 1.1s var(--ease) 1.1s both}
@keyframes clip{from{clip-path:inset(50% 50% 50% 50%)}to{clip-path:inset(0)}}
.hlogo .lock{display:flex;flex-direction:column;align-items:center;gap:7cqh}
.hlogo svg{width:auto;height:34cqh}
.hlogo .lock b{font-family:var(--h);font-weight:700;font-size:13cqh;letter-spacing:.02em;line-height:.8;color:#F2EFE8}
.hlogo .rec{position:absolute;left:16px;top:14px;display:flex;align-items:center;gap:8px;font:500 11px var(--m);letter-spacing:.12em;color:#F2EFE8}
.hlogo .rec i{width:9px;height:9px;border-radius:50%;background:#FF4122;animation:blink 1.6s steps(2,end) infinite}
.hlogo .tc{position:absolute;right:16px;bottom:14px;font:500 11px var(--m);letter-spacing:.08em;color:#A8A59E}
@keyframes blink{50%{opacity:.25}}
.hserv{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--cream);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.hserv a{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding-block:4px}
.hserv a:hover b{text-decoration:underline;text-underline-offset:5px}
.hserv small{font:500 11px var(--m);letter-spacing:.08em}
.hserv b{font-family:var(--h);font-weight:700;font-size:clamp(.95rem,1.5vw,1.3rem);letter-spacing:-.02em;line-height:1.1}
.fadein{animation:fin .9s var(--ease) both;animation-delay:calc(var(--d,2.9s) - 1.3s)}
@keyframes fin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.crn{position:absolute;width:clamp(22px,3vw,40px);height:clamp(22px,3vw,40px);border:0 solid var(--cream);pointer-events:none}
.crn.a{left:14px;top:calc(78px + env(safe-area-inset-top,0px));border-left-width:3px;border-top-width:3px}
.crn.b{right:14px;top:calc(78px + env(safe-area-inset-top,0px));border-right-width:3px;border-top-width:3px}
.crn.c{left:14px;bottom:14px;border-left-width:3px;border-bottom-width:3px}
.crn.d{right:14px;bottom:14px;border-right-width:3px;border-bottom-width:3px}
.dot{display:inline-block;width:.75em;height:.75em;border-radius:50%;background:var(--ember);margin-right:.7em;vertical-align:-.02em}
.gtitle .num,.shd2 .num,.lnum,.scap .n,.lctrl .n{color:var(--cream)!important}
.gtitle .num::before,.shd2 .num::before,.lnum::before{content:"";display:inline-block;width:.75em;height:.75em;border-radius:50%;background:var(--ember);margin-right:.7em}
.gtitle .num,.shd2 .num,.lnum,.lab,.lb-top,.lb-cap{font-family:var(--m);letter-spacing:.08em}
.end .credit b{color:var(--cream)!important}

/* ---------- 2. logo vitrini (butonlu, yalnızca iki logo aynı anda hareket eder) ---------- */
.lsec{position:relative;overflow:hidden;border-top:1px solid var(--cork);padding-block:clamp(90px,12vw,150px) clamp(40px,6vw,70px)}
.lgrid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto auto;gap:28px 48px;align-items:center}
.lhead{display:flex;flex-direction:column;gap:18px}
.lnum{color:var(--ember)}
.lh{font-size:clamp(2.2rem,5vw,4.6rem);letter-spacing:-.025em;line-height:.92}
.lp{margin:0;font-size:clamp(1.02rem,1.5vw,1.35rem);line-height:1.3;color:var(--cream-2);max-width:30ch}
.lstage{position:relative;height:clamp(240px,42vw,460px);border-radius:16px;border:1px solid var(--cork);background:var(--bark);touch-action:pan-y;cursor:grab;overflow:hidden}
.lstage .lg2{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.72);transition:opacity .6s var(--ease),transform .9s var(--ease);pointer-events:none}
.lstage .lg2.on{opacity:1;transform:none}
.lstage .lg2.out{opacity:0;transform:scale(1.28)}
.lstage .lg2.back{transform:scale(1.28)}
.lstage .lg2.back.out{transform:scale(.72)}
.lstage img{width:60%;max-height:52%;object-fit:contain}
.lsec .lstage{background:#000;border:0;border-radius:0}
.lsec .lstage{height:auto;aspect-ratio:16/9}
.lstage .lg2[data-full] img{width:100%;height:100%;max-height:none;object-fit:cover;display:block}
.lctrl.solo .lbtn,.lctrl.solo .bar,.lctrl.solo .n{display:none}
.lsec .lstage::before,.lsec .lstage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--ember),var(--ember)) 0 0/38px 3px no-repeat,linear-gradient(var(--ember),var(--ember)) 0 0/3px 38px no-repeat,linear-gradient(var(--ember),var(--ember)) 100% 100%/38px 3px no-repeat,linear-gradient(var(--ember),var(--ember)) 100% 100%/3px 38px no-repeat}
.lsec .lstage::after{transform:scaleX(-1)}
.lctrl{grid-column:2;display:flex;align-items:center;gap:14px;font-size:11px;white-space:nowrap}
.lctrl .n{color:var(--ember);font-variant-numeric:tabular-nums}
.lctrl .bar{flex:1;height:1px;background:var(--cork);position:relative;overflow:hidden;min-width:40px}
.lctrl .bar i{position:absolute;inset:0;background:var(--ember);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease)}
.lctrl .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lctrl .nm b{font-weight:500}
.lbtn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--cream);background:transparent;color:var(--cream);font-size:16px;cursor:pointer;transition:background .25s,color .25s}
.lbtn:hover{background:var(--ember);border-color:var(--ember);color:#111114}
@media (max-width:760px){.lgrid{grid-template-columns:minmax(0,1fr);gap:22px}.lctrl{grid-column:1;min-width:0}.lctrl .bar{display:none}.lctrl .nm{flex:1;text-align:center}.lstage{height:62vw}.lstage img{width:70%}}

.logos-scene{height:640vh}
.fly{position:absolute;inset:0;transform-style:preserve-3d}
.fly .lg{position:absolute;left:50%;top:50%;width:min(34vw,460px);margin-left:calc(min(34vw,460px)/-2);visibility:hidden}
.fly .lg img{display:block;width:100%;height:auto;transform:translateY(-50%)}
.shead{position:absolute;left:max(18px,calc((100% - 1320px)/2 + 18px));top:50%;transform:translateY(-50%);font-size:clamp(2rem,4.2vw,4rem);letter-spacing:-.02em;line-height:.95;max-width:9ch;z-index:2}
.sbody{position:absolute;right:max(18px,calc((100% - 1320px)/2 + 18px));top:50%;transform:translateY(-50%);font-size:clamp(1.05rem,1.8vw,1.65rem);line-height:1.26;font-weight:400;margin:0;max-width:16ch;z-index:2}
.scap{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:14px;font-size:11px;white-space:nowrap;z-index:2}
.scap .n{color:var(--ember);font-variant-numeric:tabular-nums}
.scap .bar{width:120px;height:1px;background:var(--cork);position:relative;overflow:hidden}
.scap .bar i{position:absolute;inset:0;background:var(--cream);transform-origin:left;transform:scaleX(var(--p,0))}
.scap .nm{min-width:170px}
.scap .nm b{font-weight:500}

/* ---------- 3. işler girişi ---------- */
.works-intro{height:170vh;height:170svh}
.works-intro .stage{display:grid;place-items:center;text-align:center}
.wi{display:flex;flex-direction:column;align-items:center;gap:22px}
.wi h2{font-size:clamp(4rem,19vw,17rem);letter-spacing:-.04em;line-height:.9;padding-bottom:.14em}
.wi p{margin:0}
.wi .cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;padding-inline:18px}
.wi .cats a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:22.5px;border:1px solid var(--cork);text-decoration:none;font-size:11px;transition:border-color .3s,background .3s,color .3s}
.wi .cats a:hover{background:var(--cream);color:var(--walnut);border-color:var(--cream)}
.wi .cats small{color:var(--cream-2);font-size:10px}

/* ---------- 4. kategori sahneleri ---------- */
.gscene .stage{border-top:1px solid var(--cork)}
.gtitle{z-index:3!important;position:absolute;left:max(18px,calc((100% - 1320px)/2 + 18px));bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:1;display:flex;flex-direction:column;gap:10px;max-width:46vw;pointer-events:none}
.gtitle .num{font-size:11px;color:var(--ember)}
.gtitle h3{font-size:clamp(2rem,5.6vw,5rem);letter-spacing:-.025em;line-height:.88}
.secs{display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto;position:relative;z-index:5}
.gtitle .proj{font:500 11px var(--m);text-transform:uppercase;letter-spacing:.02em;color:var(--cream);display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--cream-3);border-radius:22.5px;background:color-mix(in srgb,var(--walnut) 85%,transparent);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.gtitle .proj small{font-size:10px;color:var(--cream-2)}
.gtitle .proj:hover{border-color:var(--cream)}
.gtitle .proj.on{background:var(--ember);color:#111114;border-color:var(--ember)}
.gtitle .proj.on small{color:var(--drift)}
.gcount{position:absolute;right:max(18px,calc((100% - 1320px)/2 + 18px));bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:1;display:flex;align-items:center;gap:12px;font-size:11px;font-variant-numeric:tabular-nums}
.gcount .bar{width:90px;height:1px;background:var(--cork);position:relative;overflow:hidden}
.gcount .bar i{position:absolute;inset:0;background:var(--cream);transform-origin:left;transform:scaleX(var(--p,0))}
.gfly{position:absolute;inset:0;transform-style:preserve-3d;z-index:2;pointer-events:none}
.it{position:absolute;left:50%;top:46%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;visibility:hidden}
.it .frame{width:100%;height:100%;border-radius:12px;overflow:hidden;background:var(--bark);position:relative}
.it img,.it video{display:block;width:100%;height:100%;object-fit:cover}
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:1px solid var(--drift);border-radius:12px;color:var(--drift);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:500;background:var(--bark)}
.play{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 10px;border-radius:22.5px;background:#FF4122;color:#111114;font-size:10px;text-transform:uppercase;font-weight:500}
.play::before{content:"";border-left:8px solid #111114;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ---------- sosyal medya sekmeleri ---------- */
.soc{border-top:1px solid var(--cork);padding-bottom:clamp(50px,8vw,100px)}
.shd2{padding-block:clamp(80px,11vw,140px) 26px}
.shd2 .num{display:block;font-size:11px;color:var(--ember);margin-bottom:12px}
.shd2 h3{font-size:clamp(2.4rem,7.5vw,7rem);letter-spacing:-.03em;line-height:.88}
h3.one{white-space:nowrap;text-wrap:nowrap}
.shd2 h3.one{font-size:min(clamp(2.4rem,7.5vw,7rem),calc((100vw - 48px)/(var(--n)*.68)))}
.gtitle h3.one{font-size:min(clamp(2rem,5.6vw,5rem),calc((100vw - 340px)/(var(--n)*.68)))}
.shd2 p{margin:16px 0 0}
.tabbar{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:30;background:var(--bar);border-block:1px solid var(--cork);padding-block:10px;margin-bottom:clamp(22px,3vw,36px)}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-inline:max(18px,env(safe-area-inset-left,0px),calc((100% - 1320px)/2 + 18px))}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:22.5px;border:1px solid var(--cork);background:transparent;color:var(--cream);font:500 11px var(--m);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.tabs button small{font-size:10px;color:var(--cream-2)}
.tabs button:hover{border-color:var(--cream)}
.tabs button[aria-selected="true"]{background:var(--ember);color:#111114;border-color:var(--ember)}
.tabs button[aria-selected="true"] small{color:rgba(17,17,20,.7)}
.pgrid{columns:4 220px;column-gap:14px}
.soc .it{position:relative;left:auto;top:auto;visibility:visible;display:block;width:100%;margin:0 0 14px;break-inside:avoid;border-radius:12px;overflow:hidden;background:var(--bark);padding:0;border:0;cursor:pointer}
.soc .it img,.soc .it video{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover}
.pgrid.films{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-items:start}
#video .pgrid.films{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
.snext:empty{display:none}
@media (max-width:620px){.sc{min-height:0}}
@media (max-width:760px){.pgrid.films{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.soc .it .fcap{display:none}.pgrid.films .it[style*="16/9"] .fcap{display:block}}
.pgrid.films .it{margin:0}
.pgrid.films .it[style*="16/9"]{grid-column:1/-1}
.soc .it.film{position:relative}
.soc .it .ph{border-radius:12px}
.soc .it:has(.ph){cursor:default}
.soc .it .play{position:absolute;right:12px;bottom:12px}
.soc .it .fcap{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 120px);padding:7px 12px;border-radius:22.5px;background:rgba(17,17,20,.82);color:#F2EFE8;font-size:10px;line-height:1.3;text-align:left}
.pane.enter .it{animation:sitIn .7s var(--ease) both;animation-delay:calc(var(--k)*.05s)}
@keyframes sitIn{from{opacity:0;transform:translate3d(0,36px,0) scale(.92)}to{opacity:1;transform:none}}
.snext{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--cork)}
@media (max-width:760px){.tabbar{top:calc(58px + env(safe-area-inset-top,0px))}.pgrid{columns:2;column-gap:10px}.soc .it{margin-bottom:10px;border-radius:10px}.snext .ghost{width:100%}}
@media (prefers-reduced-motion:reduce){.pane.enter .it{animation:none}}

/* ---------- 5. derinlikten gelen bölümler ---------- */
.dzwrap{perspective:1000px}
.meet{padding-block:clamp(90px,14vw,180px);border-top:1px solid var(--cork)}
.meet .in{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;align-items:start}
@media (max-width:1100px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.mgrid{grid-template-columns:1fr;gap:32px}.sgh{min-height:0}}
.mgrid{gap:14px}
.sc{display:flex;flex-direction:column;gap:12px;min-height:210px;padding:22px;border:1px solid var(--cork);border-top:3px solid var(--ember);border-radius:0 0 14px 14px;text-decoration:none;transition:background .3s,border-color .3s}
.sc:hover{background:var(--bark);border-color:var(--ember)}
.sc small{color:var(--cream-2)}
.sc b{font-family:var(--h);font-weight:700;font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.025em;line-height:1.08}
.sc span{color:var(--cream-2);font-size:14px;line-height:1.45}
.sc i{font-style:normal;margin-top:auto;color:var(--et)}
.mcontact .contact{flex-direction:row;flex-wrap:wrap;gap:10px}
.cbox{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);padding:clamp(24px,4vw,56px);border-radius:16px}
.cl{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cl h3{font-size:clamp(2rem,4.2vw,3.6rem);letter-spacing:-.035em;line-height:.95}
.cl p{margin:0;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.5;max-width:34ch}
.cl .pill{margin-top:6px}
.cr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-content:start}
.cr li{border-top:1px solid var(--cream)}
.cr a,.cr span{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 28px 18px 0;text-decoration:none;min-height:84px}
.cr small{font-size:10px;letter-spacing:.1em}
.cr b{font-family:var(--h);font-weight:700;font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.cr i{position:absolute;right:0;top:16px;font-style:normal;font-size:14px;transition:transform .3s var(--ease)}
.cr a:hover i{transform:translate(3px,-3px)}
.cr a:hover b{text-decoration:underline;text-underline-offset:4px}
.cr .tbd b{opacity:.5}
@media (max-width:900px){.cbox{grid-template-columns:1fr}}
@media (max-width:520px){.cr{grid-template-columns:1fr}.cl .pill{width:100%}}
.meet .lab{color:var(--cream)}
.meet h2{font-size:clamp(2.4rem,7vw,6rem);letter-spacing:-.03em;line-height:.88}
.meet .col{display:flex;flex-direction:column;gap:36px;justify-content:flex-end}
.lab{font-size:11px;color:var(--cream-2);margin-bottom:12px}
.tools{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tools li{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--cork);font-size:11px}
.tools b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ember);color:#111114;font-size:10px;font-weight:500}
.contact{display:flex;flex-direction:column;gap:8px}
.brands{padding-block:clamp(70px,10vw,140px);border-top:1px solid var(--cork)}
.brands h2{font-size:clamp(1.9rem,5.4vw,4rem);letter-spacing:-.02em;margin-bottom:clamp(28px,4vw,48px)}
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.logos>div{aspect-ratio:3/2;border-radius:12px;border:1px solid var(--cork);display:flex;align-items:center;justify-content:center;color:var(--drift);font-size:10px;text-transform:uppercase;font-weight:500;letter-spacing:.08em}
.logos .ref{border-style:solid;flex-direction:column;gap:8px;padding:12px;text-align:center;color:var(--cream);background:var(--bark);transition:border-color .3s}
.logos .ref:hover{border-color:var(--cream-2)}
#logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,3vw,40px) clamp(14px,2.4vw,32px);border:0}
#logos .ref{aspect-ratio:auto;border:0;border-radius:0;background:none;padding:0;gap:12px;display:flex;flex-direction:column;align-items:center;color:var(--cream)}
#logos .ref .ci{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:1px solid var(--cork);background:var(--bark);transition:border-color .3s,transform .5s var(--ease)}
#logos .ref:hover .ci{border-color:var(--ember);transform:scale(1.04)}
#logos .ref .ci img{width:100%;height:100%;object-fit:cover;display:block}
#logos .ref .ci b{font-family:var(--h);font-size:clamp(.9rem,1.5vw,1.25rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;text-align:center;padding:0 12%}
#logos .ref small{font:500 10px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2)}
@media (max-width:1000px){#logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){#logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}}
.end{border-top:1px solid var(--cork);padding-block:clamp(90px,14vw,180px) clamp(28px,4vw,48px);position:relative;overflow:hidden}
.end .glow{left:auto;right:-30vmax;top:-45vmax;bottom:auto}
.end h2{font-size:clamp(2.6rem,11vw,11rem);letter-spacing:-.035em;line-height:.84;position:relative}
.end .row{position:relative;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-top:clamp(32px,5vw,64px);padding-top:20px;border-top:1px solid var(--cork)}
.end .credit b{color:var(--ember);font-weight:500}

.foot{background:#111114;color:#F2EFE8;padding-block:clamp(44px,6vw,80px) calc(26px + env(safe-area-inset-bottom,0px));border-top:0}
.foot .in{display:flex;flex-direction:column;gap:clamp(30px,4vw,52px);max-width:1320px;margin:0 auto}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:36px 32px;align-items:start}
.fl{display:flex;flex-direction:column;gap:14px;max-width:30ch}
.fl p{margin:0;font-size:14px;line-height:1.5;color:rgba(242,239,232,.7)}
.fcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.fcol h4{margin:0 0 12px;font:500 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#FF4122}
.fcol a,.fcol span{display:block;padding:7px 0;font-size:14px;line-height:1.3;color:rgba(242,239,232,.82);text-decoration:none;overflow-wrap:anywhere;transition:color .3s}
.fcol a:hover{color:#FF4122}
.fword{font-family:"Syne","Inter",sans-serif;font-weight:700;letter-spacing:.02em;line-height:.8;color:#FF4122;font-size:min(calc((100vw - 40px)/9.2),143px);white-space:nowrap;border-top:1px solid #34343C;padding-top:clamp(24px,3vw,40px)}
.fb{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font:500 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,232,.7)}
@media (max-width:1000px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fl{grid-column:1/-1}}

/* hareket: yalnızca transform, opacity ve clip-path; hepsi bir kez, görünür olunca çalışır */
.prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:50;background:#FF4122;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){.prog{animation:prog linear both;animation-timeline:scroll(root)}}
@keyframes prog{to{transform:scaleX(1)}}
.mq{overflow:hidden;background:#111114;color:#F2EFE8;border-block:1px solid #34343C;padding-block:14px}
.mq div{display:flex;gap:0;width:max-content;animation:mq 38s linear infinite;will-change:transform}
.mq span{display:inline-flex;align-items:center;font-family:var(--h);font-weight:700;font-size:clamp(1.05rem,2.2vw,1.6rem);letter-spacing:-.02em;white-space:nowrap}
.mq span::after{content:"";width:.5em;height:.5em;border-radius:50%;background:#FF4122;margin:0 1.1em}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}
.tl{display:block;clip-path:inset(0 0 100% 0);transform:translate3d(0,.35em,0);transition:clip-path .9s var(--ease),transform .9s var(--ease)}
.seen .tl,.tl.seen{clip-path:inset(-10% -5% -25% -5%);transform:none}
.soc .it.sit,.pgrid.films .it{transition:transform .25s var(--ease)}
.soc .it.sit:active{transform:scale(.97)}
.wipe{clip-path:inset(100% 0 0 0);transition:clip-path .75s var(--ease);transition-delay:calc(var(--c,0)*70ms)}
.wipe.seen{clip-path:inset(0)}
#logos .ref{opacity:0;transform:scale(.82);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--c,0)*45ms)}
#logos.seen .ref{opacity:1;transform:none}
.sc,.cr li{transition:background .3s,border-color .3s,opacity .6s var(--ease),transform .6s var(--ease)}
.mgrid .sc{opacity:0;transform:translate3d(0,26px,0);transition-delay:calc(var(--c,0)*80ms)}
.mgrid.seen .sc{opacity:1;transform:none}
.tabs.nudge{animation:nudge 1.1s var(--ease) .5s 1}
@keyframes nudge{35%{transform:translate3d(-26px,0,0)}}
.crn{transition:transform .9s var(--ease),opacity .6s}
.hero:not(.go) .crn{opacity:0}
.hero:not(.go) .crn.a{transform:translate(18px,18px)}.hero:not(.go) .crn.b{transform:translate(-18px,18px)}
.hero:not(.go) .crn.c{transform:translate(18px,-18px)}.hero:not(.go) .crn.d{transform:translate(-18px,-18px)}
@media (prefers-reduced-motion:reduce){.mq div,.tabs.nudge{animation:none}.tl,.wipe,#logos .ref,.mgrid .sc{clip-path:none;opacity:1;transform:none;transition:none}.prog{display:none}.hero:not(.go) .crn{opacity:1;transform:none}}
/* sade belirme: kaydırma konumuna bağlı hiçbir hareket yok */
.rw .w{opacity:1!important}
.rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.seen{opacity:1;transform:none}
.works-intro{height:auto!important}
.works-intro .stage{position:static;height:auto;overflow:visible;perspective:none;contain:none;padding:clamp(80px,12vw,150px) 0 clamp(70px,10vw,130px)}
.wi{pointer-events:auto!important}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- proje formu ---------- */
.pf{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--cork);border-radius:16px;background:#111114;color:#F2EFE8;overflow:auto}
.pf::backdrop{background:rgba(0,0,0,.72)}
.pf form{display:flex;flex-direction:column;gap:22px;padding:clamp(20px,4vw,36px)}
.pfh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pfh h3{font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.03em;margin-top:10px}
.pfx{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #F2EFE8;background:none;color:#F2EFE8;font-size:15px;cursor:pointer}
.pfx:hover{background:#FF4122;border-color:#FF4122;color:#111114}
.pfg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pfg label{display:flex;flex-direction:column;gap:8px;font:500 10px var(--m);letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,232,.7)}
.pfg .w2{grid-column:1/-1}
.pfg input,.pfg select,.pfg textarea{font:400 16px var(--f);letter-spacing:0;text-transform:none;color:#F2EFE8;background:#1C1C21;border:1px solid #34343C;border-radius:10px;padding:12px 14px;min-height:46px;width:100%}
.pfg textarea{resize:vertical;min-height:110px}
.pfg input:focus,.pfg select:focus,.pfg textarea:focus{outline:2px solid #FF4122;outline-offset:1px;border-color:#FF4122}
.pferr{margin:0;color:#FF8A75}
.pff{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
@media (max-width:560px){.pfg{grid-template-columns:1fr}.pff .pill{width:100%}}

/* ---------- izleyici ---------- */
[hidden]{display:none!important}
.lb{--cream:#F2EFE8;--cream-2:rgba(242,239,232,.66);--walnut:#111114;--bark:#2A2A30;--drift:#A8A59E;color:#F2EFE8;position:fixed;inset:0;z-index:60;background:#111114;display:flex;flex-direction:column;gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
.lb-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;text-transform:uppercase;font-weight:500;color:var(--cream-2)}
.lb button{width:44px;height:44px;border-radius:50%;border:1px solid var(--cream);background:transparent;color:var(--cream);font-size:15px;cursor:pointer;font-family:inherit}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:14px;touch-action:pan-y}
.lb-media{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.lb-media img,.lb-media video{max-width:100%;max-height:100%;border-radius:12px}
.lb-media .ph{width:auto;height:min(68vh,520px)}
.lb-cap{text-align:center;font-size:12px;text-transform:uppercase;font-weight:500}
.lb-nav{display:none;justify-content:center;gap:12px}

@media (max-width:1000px){ .logos{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){
  .top nav{display:none}
  .burger{display:inline-flex}
  .top .pill{display:none}
  .top .in{height:58px}
  .hero{padding-top:calc(58px + env(safe-area-inset-top,0px));min-height:0}
  .hero .hin{padding:34px 8px 30px;gap:22px}
  .hmain{grid-template-columns:1fr;gap:26px}
  .word{font-size:clamp(2.5rem,13.6vw,5rem)}
  .lede{max-width:none}
  .hbtns .pill,.hbtns .ghost{flex:1 1 150px}
  .hlogo{justify-self:center;max-width:min(78vw,340px)}
  .hserv{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .crn.a,.crn.b{top:calc(66px + env(safe-area-inset-top,0px))}
  .logos-scene{height:560vh}
  .fly .lg{width:68vw;margin-left:-34vw}
  .shead{left:18px;right:18px;top:calc(80px + env(safe-area-inset-top,0px));transform:none;font-size:clamp(2rem,10vw,2.8rem);max-width:none}
  .sbody{left:18px;right:18px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:none;font-size:1.02rem;max-width:none}
  .scap{left:18px;right:18px;transform:none;justify-content:space-between;gap:10px}
  .scap .bar{flex:1;width:auto}
  .scap .nm{min-width:0}
  .gtitle{top:calc(76px + env(safe-area-inset-top,0px));bottom:auto;right:18px;max-width:none}
  .gtitle h3{font-size:clamp(1.8rem,9vw,2.6rem)}
  .gtitle h3.one{font-size:min(clamp(1.8rem,9vw,2.6rem),calc((100vw - 56px)/(var(--n)*.68)))}
  .gtitle{left:0;right:0;padding-left:18px}
  .gtitle .num,.gtitle h3{padding-right:18px}
  .secs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:18px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .secs::-webkit-scrollbar{display:none}
  .gtitle .proj{flex:none;scroll-snap-align:start;white-space:nowrap}
  .gcount{left:18px;right:18px;justify-content:space-between}
  .gcount .bar{flex:1;width:auto}
  .it{top:54%}
  .mgrid{grid-template-columns:1fr}

  .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ghost{width:100%}
  .end .row .pill{width:100%}
  .lb-stage>button{display:none}
  .lb-nav{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  .word .ch,.hlogo,.fadein{animation:none!important}
}