/* MUAY v3 — görsel odaklı, WebGL + GSAP "ultra" tasarım (base.css üzerine) */
.pre{background:transparent}
.pre__half{position:absolute;left:0;right:0;height:50.5%;background:var(--bg);will-change:transform}
.pre__half--t{top:0}.pre__half--b{bottom:0}
.pre__grid,.pre__in{z-index:2}
.pt{position:fixed;inset:0;z-index:390;background:var(--bg);display:grid;place-items:center;pointer-events:none;border-top:2px solid var(--gold);box-shadow:0 -40px 80px rgba(232,172,0,.2)}
.pt img{opacity:.9}

/* ============ HERO ============ */
.hx{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--bg)}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hx__vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(5,6,8,.75) 100%)}
.hx__card{position:absolute;inset:0;z-index:2;overflow:hidden;clip-path:inset(31% 37% 31% 37%);will-change:clip-path}
.hx__card img{width:100%;height:100%;object-fit:cover;transform:scale(1.4);will-change:transform;filter:saturate(1.05) contrast(1.05)}
.hx__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,8,.25),rgba(5,6,8,.6)),radial-gradient(circle at 50% 50%,transparent 30%,rgba(5,6,8,.45))}
.hx__h1{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,3vw,44px);pointer-events:none;margin:0;font:700 clamp(44px,min(10.4vw,19vh),210px)/.86 var(--ff-h);letter-spacing:-.06em}
.hx__h1 .ln{display:block;overflow:hidden;padding:.05em .02em}
.hx__h1 .ln.a{align-self:flex-start}.hx__h1 .ln.b{align-self:flex-end}
.hx__h1 .in{display:inline-block;will-change:transform;mix-blend-mode:normal}
.hx__h1 .c{display:inline-block;will-change:transform}
.hx__hud{position:absolute;z-index:5;display:flex;gap:18px;font:500 11px var(--ff-m);letter-spacing:.16em;color:var(--mute)}
.hx__hud.tl{left:clamp(20px,3vw,44px);top:92px}.hx__hud.tr{right:clamp(20px,3vw,44px);top:92px}
.hx__bl{position:absolute;z-index:5;left:clamp(20px,3vw,44px);bottom:5vh;max-width:430px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid var(--line2);font:500 10px var(--ff-m);letter-spacing:.14em;color:#C9CFDA;margin-bottom:14px;background:rgba(5,6,8,.5);backdrop-filter:blur(6px)}
.chip i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}
.hx .lead{color:#C2C9D6;font-size:clamp(14px,1.15vw,16px);margin-bottom:18px;text-shadow:0 2px 20px #000}
.hx__cta{display:flex;gap:12px;flex-wrap:wrap}
.hx__br{position:absolute;z-index:5;right:clamp(20px,3vw,44px);bottom:5vh;display:flex;gap:14px;align-items:center;font:500 11px var(--ff-m);letter-spacing:.2em;color:var(--mute)}
.hx__br i{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:dr 1.8s infinite}
@keyframes dr{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}51%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}
.hx__end{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:0;pointer-events:none}
.hx__end small{font:500 12px var(--ff-m);letter-spacing:.24em;color:var(--gold);margin-bottom:20px}
.hx__end h2{font-size:clamp(60px,min(12vw,22vh),200px);letter-spacing:-.065em;line-height:.88}
.hx__end p{margin-top:22px;color:#C9CFDA;font-size:clamp(15px,1.4vw,19px);max-width:480px}

/* marquee pills */
.mq__t u{display:inline-block;width:clamp(90px,10vw,150px);height:clamp(40px,4.6vw,66px);border-radius:60px;background-size:cover;background-position:center;filter:grayscale(.2) brightness(.85);flex:none}
.mq__t{padding-right:40px}

/* manifesto pills */
.pill{display:inline-block;width:1.7em;height:.78em;border-radius:1em;background-size:cover;background-position:center;vertical-align:-.04em;margin:0 .12em;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.mani__t .w{display:inline-block;opacity:.14;margin-right:.26em}
.mani__t .w.pw{opacity:0;transform:scale(.4)}

/* ============ SERVICES — pinned image story ============ */
.svc{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg),var(--bg2))}
.svc__pin{height:100vh;display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center;padding:78px clamp(24px,5vw,90px) 0;overflow:hidden}
.svc__h{font-size:clamp(42px,min(5.6vw,10vh),96px);letter-spacing:-.055em;line-height:.92;margin-bottom:26px}
.svc__list li{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--line);opacity:.3;transition:opacity .5s;cursor:pointer}
.svc__list li:last-child{border-bottom:1px solid var(--line)}
.svc__list li>span{font:500 12px var(--ff-m);color:var(--gold);padding-top:8px;letter-spacing:.1em}
.svc__list h3{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.04em;transition:color .4s}
.svc__list p{max-height:0;overflow:hidden;color:#AEB6C4;font-size:15px;transition:max-height .6s cubic-bezier(.2,.7,.2,1),margin .4s}
.svc__list b{display:block;max-height:0;overflow:hidden;font:700 22px var(--ff-h);color:var(--gold2);letter-spacing:-.03em;transition:max-height .6s}
.svc__list b small{font:400 12px var(--ff-m);color:var(--mute)}
.svc__list li.on{opacity:1}.svc__list li.on h3{color:var(--gold2)}.svc__list li.on p{max-height:70px;margin-top:6px}.svc__list li.on b{max-height:34px;margin-top:6px}
.svc__bar{height:2px;background:var(--line);margin-top:26px}.svc__bar i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px var(--gold)}
.svc__frame{position:relative;height:min(76vh,760px);overflow:hidden;border:1px solid var(--line2);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);background:#000;box-shadow:0 0 120px -30px rgba(232,172,0,.4)}
.si{position:absolute;inset:0;margin:0;overflow:hidden;will-change:clip-path}
.si img{width:100%;height:100%;object-fit:cover;will-change:transform;filter:saturate(1.05)}
.si::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,6,8,.85));pointer-events:none}
.si figcaption{position:absolute;left:24px;bottom:22px;z-index:2;font:500 12px var(--ff-m);letter-spacing:.16em;padding:10px 16px;border:1px solid var(--gold);background:rgba(5,6,8,.7);backdrop-filter:blur(8px);color:var(--gold2)}
.si figcaption i{font-style:normal;margin-right:10px}
.svc__no{position:absolute;right:22px;top:14px;z-index:3;font:700 clamp(60px,8vw,120px)/1 var(--ff-h);letter-spacing:-.06em;color:rgba(255,255,255,.9);mix-blend-mode:difference;display:flex;align-items:baseline;gap:8px;overflow:hidden;height:1.05em}
.svc__no span{font:500 13px var(--ff-m);letter-spacing:.1em}
.svc__corner{position:absolute;z-index:3;width:26px;height:26px;border:2px solid var(--gold);pointer-events:none}
.svc__corner.tl{left:14px;top:14px;border-right:0;border-bottom:0}.svc__corner.br{right:14px;bottom:14px;border-left:0;border-top:0}

/* ============ STATS on earth ============ */
.stx{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--line)}
.stx__bg{position:absolute;inset:-12% 0;will-change:transform}.stx__bg img{width:100%;height:100%;object-fit:cover}
.stx__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.92),rgba(5,6,8,.55) 60%,rgba(5,6,8,.8)),radial-gradient(800px 400px at 20% 50%,rgba(232,172,0,.12),transparent)}
.stx__in{position:relative;padding-block:90px}
.stx .stats__g{margin-top:60px}
.stx .st b{background:linear-gradient(180deg,#fff,#c9cfda);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ PROJECTS gallery ============ */
.gal{position:relative;height:100vh;overflow:hidden;background:var(--bg2)}
.gal__head{position:absolute;left:clamp(24px,5vw,90px);right:clamp(24px,5vw,90px);top:92px;z-index:6;display:flex;align-items:center;gap:26px}
.gal__head .tag{margin:0}.gal__bar{flex:1;height:1px;background:var(--line);position:relative}
.gal__bar i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px var(--gold)}
.gal__n{font:500 12px var(--ff-m);color:var(--mute);letter-spacing:.14em}
.gal__track{display:flex;align-items:center;gap:clamp(24px,3.2vw,56px);height:100%;width:max-content;padding:100px clamp(24px,5vw,90px) 40px;will-change:transform}
.gal__intro{flex:none;width:min(46vw,640px)}
.gal__intro .big{font-size:clamp(50px,min(8vw,15vh),140px);hyphens:manual}
.gal__intro p{margin-top:22px;color:var(--mute);font:500 12px var(--ff-m);letter-spacing:.12em}
.gc{flex:none;width:clamp(300px,31vw,520px);display:block}
.gc__img{height:min(58vh,560px);overflow:hidden;border:1px solid var(--line2);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);position:relative}
.gc__img img{position:absolute;left:-15%;top:0;width:130%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.75);transition:filter .6s,transform 1s cubic-bezier(.2,.7,.2,1);will-change:transform}
.gc:hover .gc__img img{filter:none;transform:scale(1.06)}
.gc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,6,8,.7));pointer-events:none}
.gc__t{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:end;padding-top:18px}
.gc__t span{font:500 12px var(--ff-m);color:var(--gold);letter-spacing:.1em;grid-row:span 2;padding-bottom:8px}
.gc__t h3{font-size:clamp(26px,3vw,46px);letter-spacing:-.05em;transition:color .3s}.gc:hover h3{color:var(--gold2)}
.gc__t em{font:500 11px var(--ff-m);letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.gc--all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:clamp(220px,22vw,360px);height:min(58vh,560px);border:1px dashed var(--line2);font:600 clamp(22px,2.4vw,34px) var(--ff-h);letter-spacing:-.03em}
.gc--all i{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center;font-style:normal;font-size:24px;transition:transform .4s}.gc--all:hover i{transform:translateX(10px)}

/* ============ PROCESS flow ============ */
.flow{padding:clamp(90px,12vw,180px) 0 clamp(60px,8vw,120px);border-top:1px solid var(--line)}
.flow__body{position:relative;margin-top:70px}
.flow__svg{position:absolute;left:50%;top:0;width:200px;height:100%;transform:translateX(-50%);overflow:visible}
.flow__orb{position:absolute;left:50%;top:0;width:18px;height:18px;margin:-9px;border-radius:50%;background:#FFD25E;box-shadow:0 0 0 6px rgba(232,172,0,.25),0 0 40px 10px rgba(232,172,0,.6);z-index:3}
.fs{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:230px;align-items:center;min-height:78vh}
.fs.r .fs__img{order:2}
.fs__img{aspect-ratio:4/3;max-height:56vh;width:100%;overflow:hidden;position:relative;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);border:1px solid var(--line2)}
.fs__img img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;filter:brightness(.8)}
.fs__t span{font:700 clamp(80px,10vw,150px)/.9 var(--ff-h);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(232,172,0,.5);display:block}
.fs__t h3{font-size:clamp(34px,4.2vw,64px);letter-spacing:-.05em;margin:6px 0 12px}
.fs__t p{color:#AEB6C4;max-width:400px}

/* ============ WHY ============ */
.why{padding:clamp(70px,10vw,150px) 0;background:var(--bg2);border-block:1px solid var(--line)}
.why__g{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:60px}
.wc{position:relative;grid-column:span 2;min-height:min(46vh,400px);overflow:hidden;border:1px solid var(--line2);clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);will-change:transform}
.wc--l{grid-column:span 4}
.wc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.9);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
.wc:hover>img{transform:scale(1.08);filter:brightness(.62) saturate(1.1)}
.wc>div{position:absolute;inset:auto 0 0 0;padding:28px;background:linear-gradient(0deg,rgba(5,6,8,.92),transparent)}
.wc small{font:500 11px var(--ff-m);letter-spacing:.18em;color:var(--gold)}
.wc h3{font-size:clamp(22px,2.6vw,38px);letter-spacing:-.045em;line-height:1.05;margin:8px 0 8px;max-width:520px}
.wc p{color:#B4BBC8;font-size:14.5px;max-width:460px}

/* CTA image */
.cta__img{position:absolute;inset:-10% 0;opacity:.28;pointer-events:none;will-change:transform}.cta__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.cta{background:radial-gradient(900px 500px at 50% 100%,rgba(232,172,0,.18),transparent 70%),#050608}
.cta__bg,.cta__g{z-index:2}

@media (max-width:1000px){
  .hx__h1{font-size:clamp(40px,12.5vw,100px)}
  .hx__card{clip-path:inset(26% 14% 40% 14%)}
  .hx__bl{max-width:none;right:20px;bottom:4vh}.hx__br,.hx__hud.tl{display:none}
  .svc__pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:20px;padding-top:80px;align-content:start}
  .svc__list p,.svc__list b{display:none}.svc__list li.on p,.svc__list li.on b{display:block}.svc__h{display:none}.svc__list li{padding:8px 0}.svc__list h3{font-size:22px}
  .svc__frame{height:42vh}.svc .tag{margin-bottom:8px}
  .gal__intro{width:80vw}.gc{width:76vw}
  .fs{grid-template-columns:1fr;column-gap:0;row-gap:20px;min-height:0;padding:40px 0}.fs.r .fs__img{order:0}.flow__svg,.flow__orb{display:none}
  .why__g{grid-template-columns:1fr}.wc,.wc--l{grid-column:auto}
  .stx .stats__g{grid-template-columns:1fr 1fr}
}