
/* Continuous opening, readable scenes and accessible controls. */
.js .journey{height:930svh}
.story-anchor{top:74%}
.journey-media{background:#171412 url('/assets/fx3-desk.webp') center/cover no-repeat}
.journey-media.video-unavailable video{opacity:0}
.journey-dots{position:absolute;right:24px;top:50%;transform:translateY(-50%);z-index:12;display:flex;flex-direction:column;gap:15px}
.journey-dots a{display:block;width:9px;height:9px;border:1px solid #fff0dc90;border-radius:50%;background:#17141255;transition:background .2s,transform .2s}
.journey-dots a[aria-current=true]{background:#fff0dc;transform:scale(1.3)}
.journey-dots a:before{content:'';position:absolute;inset:-7px}
.journey-dots a{position:relative}
.journey-rail{display:none}
.edge-light{box-shadow:inset 5px 0 38px #de714c,inset -5px 0 38px #5bb8c0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,40%),#fda27b0b,transparent 65%)}
.journey-scene:hover .edge-light{opacity:.38}
.studio-phase{max-width:40%;color:#171412;text-shadow:0 1px 20px #ffffff55}
.studio-phase h2{font-size:clamp(60px,7vw,125px)}
.studio-phase p:not(.eyebrow){font-weight:600}
.studio-visible .journey-bottom{color:#28201b}
.studio-visible .journey-dots a{border-color:#17141280;background:#fff5}
.studio-visible .journey-dots a[aria-current=true]{background:#171412}
.portrait-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,#d9c4b440,transparent 70%)}
.portrait-orbit{z-index:1}.portrait-foot,.portrait-number{z-index:3}
.photo-a{top:24%;width:26vw}.photo-b{top:17%;width:28vw}.photo-c{top:29%;width:24vw}
.orbit-photo{border:9px solid #fff8ee;border-bottom-width:35px;background:#fff8ee}
.orbit-photo:after{content:attr(data-label);position:absolute;bottom:-24px;left:2px;right:2px;font-size:8px;font-weight:650;letter-spacing:.12em;color:#4c4038}
.portrait-foot{font-size:clamp(13px,1.15vw,18px)}
.js .space-story{height:210svh}
.space-title h2{line-height:1}
.space-title h2>span{color:#c0ceb1}
.space-description .text-link{border-color:#ffffff60}
.service-photo{width:100%;height:250px;object-fit:cover;margin:0 0 28px;filter:saturate(.83)}
#panel-photo .service-photo{object-position:center 54%}
#panel-film .service-photo{object-position:center 40%}
#panel-space .service-photo{object-position:center 55%}
.service-panels{max-width:none;min-height:680px}
.service-panels article>p{max-width:460px}
.service-selector{align-self:start;position:sticky;top:120px}
.service-selector:after{content:'BİR FİKİRLE GEL.\A BİRLİKTE ŞEKİLLENDİRELİM.';white-space:pre-line;margin-top:45px;font-size:10px;line-height:1.8;letter-spacing:.08em;color:#746255}
.services-section .section-top>span{font-size:9px;letter-spacing:.1em}
.faq-heading{align-self:start;position:sticky;top:125px}
.gallery-item figcaption a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.gallery-end>a:hover,.footer-info a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-top>a{transition:letter-spacing .45s}
.footer-top>a:hover{letter-spacing:-.055em}
body.menu-open,body.photo-opened{overflow:hidden}
html:has(body.reduced){scroll-behavior:auto}
body.reduced .journey-dots{display:none}
body.reduced .journey-media video{opacity:0}
body.reduced .space-story .scene{min-height:820px}
body.reduced .orbit-photo{top:32%}
@media(max-width:1100px) and (min-width:701px){
 .hero-note{width:200px}
 .space-title h2{font-size:5.7vw}
 .space-title h2>span{font-size:26vw}
 .space-description{max-width:43%}
 .studio-film{left:67%;height:68%;top:18%}
}
@media(max-width:700px){
 .js .journey{height:740svh}
 .story-anchor{top:72%}
 .journey-dots{right:12px;gap:16px}
 .journey-dots a{width:6px;height:6px}
 .journey-media{background-size:cover}
 .intro-phase h1{font-size:20.5vw}
 .hero-line{top:18%;font-size:30px!important}
 .hero-note{bottom:5px}
 .studio-phase{max-width:none;color:#fff0dc;text-shadow:0 2px 14px #0009}
 .studio-phase h2{font-size:15vw}
 .studio-phase>p:last-child{font-size:11px;font-weight:500;top:59svh;padding:9px 13px;background:#1714129e;backdrop-filter:blur(12px);max-width:78vw}
 .studio-visible .journey-bottom{color:#fff0dc}
 .studio-visible .journey-dots a{border-color:#fff8}
 .studio-visible .journey-dots a[aria-current=true]{background:#fff0dc}
 .orbit-phase>p:last-child,.hand-phase>p:last-child{top:59svh}
 .portrait-heading{top:14%}
 .photo-a,.photo-b,.photo-c{width:55vw;border:5px solid #fff8ee;border-bottom-width:25px}
 .photo-a{top:33%}.photo-b{top:29%}.photo-c{top:36%}
 .orbit-photo:after{bottom:-18px;font-size:6px}
 .portrait-foot{bottom:40px}
 .portrait-number{bottom:40px;max-width:85px;text-align:right;line-height:1.5}
 .js .space-story{height:190svh}
 .space-title h2{font-size:32px}
 .space-title h2>span{font-size:145px}
 .space-description{bottom:15%}
 .studio-film{top:37%;left:54%;height:43%}
 .service-selector,.faq-heading{position:static}
 .service-selector:after{display:none}
 .service-photo{height:230px}
 .service-panels{min-height:650px}
 .service-panels h3{font-size:39px}
 .gallery-item figcaption a{font-size:8px}
 body.reduced .space-story .scene{min-height:690px}
}
@media(max-height:650px) and (min-width:701px){
 .intro-phase{top:19%;bottom:75px}
 .intro-phase h1{font-size:14vw}
 .hero-note{width:190px;padding:14px}
 .hero-note b{font-size:20px;margin-top:10px}
 .hero-line{font-size:34px!important}
 .journey-phase h2{font-size:68px;margin-bottom:15px}
 .journey-phase .eyebrow{margin-bottom:10px}
 .journey-phase p:not(.eyebrow){font-size:12px}
 .space-title{top:19%}.space-title h2{font-size:46px}
 .space-title h2>span{font-size:200px}
 .space-description{bottom:14%;max-width:45%}
 .space-description p{font-size:12px}
}


.studio-phase{max-width:33%}.studio-phase h2{font-size:clamp(58px,6vw,100px)}
.studio-phase p:not(.eyebrow){max-width:285px;font-size:14px}
.studio-visible .journey-bottom{color:#fff0dc;text-shadow:0 1px 8px #0008}
.space-title h2{display:flex;align-items:flex-start;gap:24px;max-width:none}
.space-title h2>.space-number{float:none;margin:0;line-height:.8}
.space-title h2>.space-words{float:none;margin:0;font-size:clamp(34px,4.5vw,76px);line-height:1.05;letter-spacing:-.055em;color:#fff0dc}
.space-description{bottom:15%;max-width:43%}
.studio-film{top:16%;height:73%}
.portrait-heading h2{font-size:clamp(90px,19vw,300px)}
@media(max-width:700px){
 .studio-phase{max-width:none}.studio-phase h2{font-size:15vw}
 .studio-phase p:not(.eyebrow){font-size:11px}
 .space-title h2{gap:14px}.space-title h2>.space-words{font-size:28px}
 .space-title h2>.space-number{font-size:145px}
 .studio-film{top:37%;height:43%}
 .portrait-heading h2{font-size:29vw}
}
@media(max-height:650px) and (min-width:701px){
 .space-title h2>.space-number{font-size:210px}
 .space-title h2>.space-words{font-size:39px}
}

@media(min-width:701px){
 .gallery-head{grid-template-columns:1.8fr 1fr;margin-bottom:75px}
 .gallery-head h2{font-size:clamp(68px,8.3vw,148px)}
}

@media(max-width:700px){
 .photo-a,.photo-b,.photo-c{width:48vw}
 .photo-a{left:-3%;top:40%}
 .photo-b{left:26%;top:30%}
 .photo-c{right:-3%;top:49%}
}

/* V5: readable studio copy, continuous gallery motion, charcoal closing. */
.studio-phase{left:auto;right:var(--gutter);top:17%;bottom:auto;width:370px;max-width:36%;padding:26px 28px 28px;background:#10161cec;border-left:1px solid #ffffff55;color:#f6f3eb;text-shadow:none;backdrop-filter:blur(14px);box-shadow:0 20px 65px #0002}
.studio-phase .eyebrow{font-size:8px;line-height:1.6;margin:0 0 15px;letter-spacing:.08em;color:#deded5}
.studio-phase h2{font-size:clamp(48px,5.2vw,78px);line-height:.98;margin:0 0 20px}
.studio-phase p:not(.eyebrow){position:static;top:auto;padding:0;margin:0;width:auto;max-width:none;background:none;backdrop-filter:none;font-size:13px;font-weight:450;line-height:1.65;text-shadow:none}
footer{background:#111618;color:#f1ede5}
.footer-top>a span{color:#c4d1cd}.footer-info>div>span{color:#b1bcb8}.footer-info a:hover{color:#dce6e1}
.footer-brand{color:#f1ede5}.footer-bottom{border-color:#e9efe52b;color:#c3c7c2}
.gallery-stage{position:relative}.gallery-controls{display:none}
.js body:not(.reduced) .gallery-section{height:600svh;padding:0;overflow:clip;background:#dfd5c7;--photo-h:44svh}
.js body:not(.reduced) .gallery-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.js body:not(.reduced) .gallery-head{position:absolute;top:14%;left:var(--gutter);right:var(--gutter);display:block;margin:0;z-index:2;pointer-events:none}
.js body:not(.reduced) .gallery-head .eyebrow{font-size:8px;margin:0 0 12px}
.js body:not(.reduced) .gallery-head h2{font-size:clamp(40px,5.1vw,88px);line-height:1;white-space:nowrap}
.js body:not(.reduced) .gallery-head>p:last-child{font-size:12px;line-height:1.4;margin:12px 0 0;max-width:none}
.js body:not(.reduced) .gallery-head>p:last-child br{display:none}
.js body:not(.reduced) .gallery-grid{position:absolute;left:0;top:36%;display:flex;align-items:flex-start;width:max-content;gap:7vw;padding:0 calc(50vw - var(--photo-h)*.4);will-change:transform}
.js body:not(.reduced) .gallery-item:nth-child(n){grid-column:auto;margin:0;padding:0;flex:0 0 calc(var(--photo-h)*.8);width:calc(var(--photo-h)*.8);min-width:0;opacity:1;transition:none;transform-origin:50% 50%}
.js body:not(.reduced) .gallery-item.wide{flex-basis:var(--photo-h);width:var(--photo-h)}
.js body:not(.reduced) .photo-open{height:var(--photo-h);box-shadow:0 16px 40px #372e2014}
.js body:not(.reduced) .photo-open img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;transition:none;will-change:transform}
.js body:not(.reduced) .gallery-item figcaption{padding-top:14px;gap:5px}
.js body:not(.reduced) .gallery-item h3{font-size:clamp(20px,1.8vw,30px)}
.js body:not(.reduced) .gallery-item figcaption>span{font-size:7px}
.js body:not(.reduced) .gallery-item figcaption a{font-size:7px;max-width:95px}
.js body:not(.reduced) .gallery-controls{position:absolute;left:var(--gutter);right:var(--gutter);bottom:25px;display:flex;align-items:center;gap:18px;font-size:9px;letter-spacing:.05em}
.gallery-cue{display:flex;gap:15px;align-items:center;white-space:nowrap}.gallery-cue i{font-size:20px;font-style:normal}
.gallery-progress{height:1px;flex:1;background:#28231e30;overflow:hidden}
.gallery-progress i{display:block;width:100%;height:100%;background:#28231e;transform-origin:left;transform:scaleX(0)}
#gallery-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.gallery-controls button{width:38px;height:38px;border:1px solid #28231e50;border-radius:50%;font-size:20px}
.gallery-controls button:disabled{opacity:.25;cursor:default}
.js body:not(.reduced) .gallery-end{display:none}
@media(max-width:700px){
 .studio-phase{left:23px;right:23px;top:13%;width:auto;max-width:none;padding:19px 21px 21px;background:#10161cf2}
 .studio-phase .eyebrow{font-size:7px;margin-bottom:10px}
 .studio-phase h2{font-size:45px;margin-bottom:13px;line-height:1}
 .studio-phase p:not(.eyebrow){font-size:12px;line-height:1.5}
 .studio-phase p:not(.eyebrow) br{display:none}
 .js body:not(.reduced) .gallery-section{height:640svh;--photo-h:42svh}
 .js body:not(.reduced) .gallery-head{top:13%;left:23px;right:23px}
 .js body:not(.reduced) .gallery-head h2{font-size:12vw;white-space:normal;max-width:310px}
 .js body:not(.reduced) .gallery-head h2 em{display:block}
 .js body:not(.reduced) .gallery-head>p:last-child{font-size:10px;margin-top:12px;max-width:290px}
 .js body:not(.reduced) .gallery-grid{top:38%;gap:17vw;padding-left:calc(50vw - var(--photo-h)*.4);padding-right:calc(50vw - var(--photo-h)*.4)}
 .js body:not(.reduced) .gallery-item figcaption{display:block;padding-top:12px}
 .js body:not(.reduced) .gallery-item h3{font-size:24px;margin:5px 0}
 .js body:not(.reduced) .gallery-item figcaption a{font-size:7px;max-width:none}
 .js body:not(.reduced) .gallery-controls{left:23px;right:23px;bottom:27px;gap:10px;font-size:7px}
 .gallery-cue{max-width:100px;white-space:normal;gap:5px;line-height:1.5}.gallery-cue i{display:none}
 .gallery-controls button{width:32px;height:32px;flex:0 0 32px;font-size:18px}
}
@media(max-height:650px) and (min-width:701px){
 .studio-phase{top:18%;padding:18px 22px;width:330px}
 .studio-phase h2{font-size:46px;margin-bottom:14px}
 .studio-phase p:not(.eyebrow){font-size:12px}
 .js body:not(.reduced) .gallery-head{top:18%}
 .js body:not(.reduced) .gallery-head h2{font-size:40px}
 .js body:not(.reduced) .gallery-head>p:last-child{display:none}
 .js body:not(.reduced) .gallery-grid{top:39%}
 .js body:not(.reduced) .gallery-section{--photo-h:38svh}
 .js body:not(.reduced) .gallery-controls{bottom:12px}
}
body.reduced .gallery-item{transform:none!important}body.reduced .gallery-item img{transform:none!important}

.story-anchor{top:calc(90% - 90svh + 75px)}
.js body:not(.reduced) .gallery-section{scroll-margin-top:-75px}
.js body:not(.reduced) .gallery-item figcaption{display:block}
.js body:not(.reduced) .gallery-item h3{margin:5px 0}
.js body:not(.reduced) .gallery-item figcaption a{display:inline-block;max-width:none}
.js body:not(.reduced) .gallery-controls{right:calc(var(--gutter) + 40px)}

.hero-studio{display:block;font-size:clamp(28px,4.3vw,68px);letter-spacing:.4em;line-height:1.2;font-weight:500;margin:22px 0 0 .08em}
@media(max-width:700px){.hero-studio{font-size:22px;letter-spacing:.36em;margin-top:14px}.intro-phase .hero-line{top:calc(20vw + 78px)}}
