/* ===== HAREKET KATMANI ===== */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--sage-deep);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:60}

/* sayfa geçiş perdesi */
.curtain{position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--ink);transform:translateY(0);transition:transform 1.1s var(--ease)}
.curtain b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 clamp(40px,6vw,90px)/1 var(--serif);font-style:italic;color:var(--paper);white-space:nowrap}
.loaded .curtain{transform:translateY(-101%)}
.leaving .curtain{transform:translateY(0);transition-duration:.65s}
.curtain.from-bottom{transform:translateY(101%)}

/* ===== GİRİŞ: mimari çizimle isim ===== */
.intro{position:fixed;inset:0;z-index:300;background:var(--paper);display:grid;place-items:center;transition:background-color 1s var(--ease)}
.intro::before{content:"";position:absolute;inset:0;background:url(../img/s01_x3-m.webp) center/cover;opacity:.5;transition:opacity 1s}
.intro.out{background-color:transparent;pointer-events:none}
.intro.out::before,.intro.out .grid-lines,.intro.out .i-corner,.intro.out .i-dim{opacity:0;transition:opacity .7s}
.intro-on .curtain{display:none}
.intro-on .mark{opacity:0}
.mark{transition:opacity .6s}
.intro-on body{overflow:hidden}
.grid-lines{position:absolute;inset:0;width:100%;height:100%}
.grid-lines line{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.18;stroke-dasharray:1000;stroke-dashoffset:1000}
.grid-lines .ax{stroke-dasharray:4 6;opacity:.14;stroke-dashoffset:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.6s var(--ease) .5s}
.intro.go .grid-lines line{animation:cizgi 1.6s var(--ease) forwards}
.intro.go .grid-lines line:nth-child(2){animation-delay:.12s}.intro.go .grid-lines line:nth-child(3){animation-delay:.24s}
.intro.go .grid-lines line:nth-child(4){animation-delay:.36s}
.intro.go .grid-lines .ax{animation:none;clip-path:inset(0 0 0 0)}
@keyframes cizgi{to{stroke-dashoffset:0}}
.i-corner{position:absolute;font:500 10px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);opacity:0;transition:opacity .9s var(--ease) .6s}
.intro.go .i-corner{opacity:1}
.i-corner.tl{left:var(--gut);top:32px}.i-corner.tr{right:var(--gut);top:32px;text-align:right}
.i-corner.bl{left:var(--gut);bottom:32px}.i-corner.br{right:var(--gut);bottom:28px}
.i-count{font:400 44px/1 var(--serif);letter-spacing:0;color:var(--ink)}
.i-name{position:relative;width:min(88vw,1180px);transform-origin:0 0;will-change:transform}
.i-name svg{width:100%;display:block;overflow:visible}
.i-name text{font:400 100px var(--serif);fill:var(--ink);fill-opacity:0;stroke:var(--ink);stroke-width:.8;stroke-dasharray:420;stroke-dashoffset:420}
.intro.go .i-name text{animation:harf 2.1s cubic-bezier(.6,.1,.3,1) .35s forwards,dolgu .9s ease 1.9s forwards}
@keyframes harf{to{stroke-dashoffset:0}}
@keyframes dolgu{to{fill-opacity:1;stroke-opacity:0}}
.i-dim{display:flex;align-items:center;gap:16px;margin-top:2.2vw;font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
  opacity:0;transition:opacity .8s 1.4s}
.intro.go .i-dim{opacity:1}
.i-dim i{flex:1;height:1px;background:var(--ink);opacity:.35;position:relative;transform:scaleX(0);transition:transform 1.2s var(--ease) 1.5s}
.i-dim i:first-child{transform-origin:right}.i-dim i:last-child{transform-origin:left}
.intro.go .i-dim i{transform:scaleX(1)}
.i-dim i::before{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--ink)}
.i-dim i:first-child::before{left:0}.i-dim i:last-child::before{right:0}
.i-name.fly{transition:transform 1.15s cubic-bezier(.7,0,.2,1)}
.intro.out .i-name{opacity:0;transition:opacity .35s ease .85s}

/* harf harf başlık */
.split .w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .c{display:inline-block;transform:translate3d(0,112%,0) rotate(5deg);transition:transform 1.25s var(--ease)}
.split.in .c{transform:none}

/* görsel perdesi */
.reveal{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease)}
.reveal.in{clip-path:inset(0 0 0 0)}
.par img{transform:scale(1.14);will-change:transform;transition:none!important}

/* kayan bant */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;white-space:nowrap;position:relative;z-index:1}
.marquee .tr{display:inline-flex;align-items:center;gap:48px;animation:mq 70s linear infinite;padding-right:48px}
.marquee span{font:400 clamp(34px,4.4vw,70px)/1 var(--serif)}
.marquee span:nth-of-type(even){font-style:italic;color:var(--sage-deep)}
.marquee i{font-style:normal;color:var(--bronze);font-size:20px}
.marquee{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.marquee.tut{cursor:grabbing}
.marquee .tr{will-change:transform}
.marquee span{transition:color .5s,font-style .5s}
.marquee span:hover{color:var(--bronze)}
@keyframes mq{to{transform:translateX(-50%)}}

/* süzülen suluboya */
.wash{animation:drift 18s ease-in-out infinite alternate}
.wash.peach{animation-duration:23s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,-8%,0) scale(1.15)}}

/* özel imleç */
.cur,.cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:150;border-radius:50%;transform:translate3d(-100px,-100px,0)}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ink)}
.cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--ink);display:grid;place-items:center;
  transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background .5s,border-color .5s}
.cur span{font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:0;transition:opacity .3s}
.cur.big{width:108px;height:108px;margin:-54px 0 0 -54px;background:var(--ink);border-color:var(--ink)}
.cur.big span{opacity:1}
.cur.dark{border-color:var(--paper)}.cur-dot.dark{background:var(--paper)}
.cur.dark.big{background:var(--paper)}.cur.dark.big span{color:var(--ink)}
body.has-cur,body.has-cur a,body.has-cur .cmp,body.has-cur figure,body.has-cur button{cursor:none}

/* kart ayrıntıları */
.card .n{transition:transform .8s var(--ease)}
.card:hover .n{transform:translateX(-8px)}
.card h3{transition:letter-spacing .8s var(--ease)}
.card:hover h3{letter-spacing:.012em}

/* hero kemer */
.arch .frame{transition:transform 1.4s var(--ease)}
.arch .ring{animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.arch .ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--bronze)}
.arch .frame{clip-path:inset(100% 0 0 0 round 999px 999px 0 0);transition:clip-path 1.8s var(--ease) .2s,transform 1.4s var(--ease)}
.loaded .arch .frame{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}

/* malzeme çipleri */
.sw{transition:transform 1s var(--ease)}
.sw:hover{transform:translateY(-14px) rotate(-2deg)}

/* hakkında: başlık yapışık */
.about>div:first-child{position:sticky;top:120px;align-self:start}

/* çizgi çizen ayraçlar */
.tl li{position:relative;border-top:0}
.tl li::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--line);transform:scaleX(0);transform-origin:0;transition:transform 1.4s var(--ease)}
.tl.in li::before{transform:scaleX(1)}
.tl.in li:nth-child(2)::before{transition-delay:.12s}.tl.in li:nth-child(3)::before{transition-delay:.24s}
.tl.in li:nth-child(4)::before{transition-delay:.36s}.tl.in li:nth-child(5)::before{transition-delay:.48s}

@media (max-width:980px){.about>div:first-child{position:static}}
@media (pointer:coarse){.cur,.cur-dot{display:none}}
@media (prefers-reduced-motion:reduce){
  .reveal,.arch .frame{clip-path:none}.split .c{transform:none}.curtain{display:none}.marquee .tr{animation:none}.par img{transform:none}
}