/* 4R / Yüzeyden sisteme. Isolated to the design-preview route. */
.flow-page{background:#10171f;color:#f4f7fa}
.flow-page .site-header{background:rgba(16,23,31,.8)}
.flow-page .site-header .nav>a:not(.cta):not(.lang){display:none}
.flow-page .site-header .nav.open>a{display:block!important}
.flow-page .site-header .nav .lang{display:none}
.flow-page-content{--flow-blue:#84c6f5;--flow-muted:#bbcbd7;--fp:0}
.f-kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.f-link{display:inline-flex;gap:32px;align-items:center;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding:12px 0;font-size:1rem}
.f-link span{font-size:1.6rem;transition:transform .3s}.f-link:hover{color:var(--flow-blue)}.f-link:hover span{transform:translate(3px,3px)}
.f-rail{position:fixed;right:var(--gutter);top:96px;z-index:40;display:flex;gap:20px;align-items:center;background:rgba(16,23,31,.8);backdrop-filter:blur(12px);padding:12px 18px;border:1px solid #ffffff26;border-radius:30px;overflow:hidden}
.f-rail a{font-size:.8125rem;text-decoration:none;color:#c6d4df;padding:4px}.f-rail a.is-current{color:#fff}.f-rail-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--flow-blue);width:100%;transform:scaleX(var(--total,0));transform-origin:left}
.f-opening{position:relative}.f-opening-pin{height:100svh;min-height:720px;position:relative;overflow:hidden;background:#10171f}
.f-hero-photo,.f-photo-veil,.f-depth-copy,.f-blueprint{position:absolute;inset:0}
.f-hero-photo picture,.f-hero-photo img,.f-process-image picture,.f-process-image img,.f-project-photo picture,.f-project-photo img{width:100%;height:100%;display:block}.f-hero-photo img,.f-process-image img,.f-project-photo img{object-fit:cover}
.f-hero-photo img{object-position:center 55%}.f-photo-veil{background:linear-gradient(90deg,#07142199,transparent 85%),linear-gradient(0deg,#10171fc9,transparent 65%)}
.f-opening-copy{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:150px var(--gutter) 64px;z-index:2}
.f-opening h1{font-size:clamp(4rem,8.6vw,9.8rem);line-height:.94;letter-spacing:-.065em;font-weight:500;max-width:11ch}.f-opening h1 em{font-style:normal;color:#d3e8f7}.f-opening-copy>.f-kicker{margin-bottom:26px}
.f-opening-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:auto;padding-top:30px}.f-opening-bottom p{font-size:1rem;color:#d4e0e9;margin:0}.f-depth-copy{display:none;padding:170px var(--gutter) 0;z-index:3;pointer-events:none}.f-depth-copy h2{font-size:clamp(2.5rem,5.3vw,6rem);font-weight:500;line-height:1;max-width:19ch}.f-depth-copy em{color:var(--flow-blue);font-style:normal}.f-depth-copy>p:last-child{font-size:1rem;margin-top:24px;color:var(--flow-muted)}
.f-blueprint{display:none;inset:auto 8% 8%;z-index:2}.f-blueprint svg{width:100%;height:42svh;min-height:200px}.f-blueprint>span{display:block;text-align:right;color:var(--flow-muted);font-family:var(--mono);font-size:.75rem}.f-coordinate{position:absolute;right:var(--gutter);top:47%;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.75rem;writing-mode:vertical-rl;z-index:3}.f-coordinate i{height:90px;width:1px;background:#fff6}
.flow-motion .f-opening{height:250svh}.flow-motion .f-opening-pin{position:sticky;top:0;min-height:0}
.flow-motion .f-hero-photo{transform:scale(calc(1 + var(--fp)*.16));clip-path:inset(calc(var(--fp)*8%) calc(var(--fp)*12%) calc(var(--fp)*8%) calc(var(--fp)*12%));opacity:calc(1 - var(--fp)*1.35)}
.flow-motion .f-opening-copy{opacity:clamp(0,calc(1 - var(--fp)*2.8),1);transform:translateY(calc(var(--fp)*-100px));pointer-events:var(--opening-events,auto)}
.flow-motion .f-depth-copy{display:block;opacity:clamp(0,calc((var(--fp) - .32)*2.3),1);transform:translateY(calc((1 - var(--fp))*55px))}
.flow-motion .f-blueprint{display:block;opacity:clamp(0,calc((var(--fp) - .48)*2.3),1);transform:translateY(calc((1 - var(--fp))*80px))}
.f-system{background:#10171f}.flow-page .cut{background:#10171f}.flow-page .cut .sec-head p{color:#c0cdd8}
.f-interlude{padding:160px 0;background:#eef3f7;color:#1b2c3a}.f-interlude h2{font-size:clamp(2.5rem,5.5vw,6rem);font-weight:500;line-height:1.1}.f-interlude h2 span{color:#277bb8}.f-interlude>.wrap>p:last-child{max-width:40ch;margin:36px 0 0;color:#536471;font-size:1.1rem}
.f-process-pin{display:grid;grid-template-columns:1.15fr 1fr;min-height:800px;position:relative;background:#172634}
.f-process-images{position:relative;min-height:600px;overflow:hidden}.f-process-image{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .7s,transform 1.1s cubic-bezier(.16,1,.3,1)}.f-process-image.is-current{opacity:1;transform:scale(1)}.f-process-shade{position:absolute;inset:0;background:linear-gradient(0deg,#10171faa,transparent 50%)}.f-process-stamp{position:absolute;bottom:40px;left:40px;font-family:var(--mono);font-size:.8rem;color:#fff}
.f-process-copy{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:80px clamp(30px,5vw,90px)}.f-process-counter{font-size:5.5rem;letter-spacing:-.07em;line-height:1;color:var(--flow-blue)}.f-process-counter span{font-size:1.25rem;letter-spacing:0;color:var(--flow-muted)}.f-step h2{font-size:clamp(2.5rem,3.8vw,4.8rem);font-weight:500;line-height:1.02;margin:16px 0 24px}.f-step p{font-size:1.05rem;line-height:1.7;color:var(--flow-muted);max-width:38ch}.f-step{margin-bottom:36px}.f-process-controls{display:none}
.flow-motion .f-process{height:320svh}.flow-motion .f-process-pin{position:sticky;top:0;height:100svh;min-height:0}.flow-motion .f-process-steps{display:grid;min-height:280px}.flow-motion .f-step{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .5s,transform .7s,visibility .5s;margin:0}.flow-motion .f-step.is-current{opacity:1;visibility:visible;transform:none}.flow-motion .f-process-controls{display:flex;gap:14px}.f-process-controls button{border:0;background:none;color:#c6d4df;flex:1;cursor:pointer;padding:14px 0;text-align:left;font:inherit;font-size:.8rem}.f-process-controls i{display:block;height:2px;background:#ffffff38;margin-top:10px}.f-process-controls [aria-pressed=true]{color:var(--flow-blue)}.f-process-controls [aria-pressed=true] i{background:var(--flow-blue)}
.f-projects{background:#10171f}.f-projects-heading{padding-top:140px;padding-bottom:100px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.f-projects-heading>.f-kicker{grid-column:1/-1}.f-projects-heading h2{font-size:clamp(3.8rem,7.4vw,8rem);font-weight:500;line-height:.98}.f-projects-heading em{font-style:normal;color:var(--flow-blue)}.f-projects-heading>p:last-child{align-self:end;justify-self:end;color:var(--flow-muted);font-size:1.05rem}
.f-project-scene{position:relative}.f-project-pin{height:90svh;min-height:650px;position:relative;overflow:hidden;background:#172634}.f-project-photo,.f-project-veil{position:absolute;inset:0}.f-project-veil{background:linear-gradient(0deg,#08131edb,transparent 65%),linear-gradient(180deg,#08131e80,transparent 30%)}.f-project-top{position:absolute;left:var(--gutter);right:var(--gutter);top:150px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.8rem}.f-project-bottom{position:absolute;bottom:70px;left:var(--gutter);right:var(--gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:35px}.f-project-bottom h3{font-size:clamp(2.8rem,5vw,6rem);font-weight:500;max-width:13ch;line-height:1.05}
.flow-motion .f-project-scene{height:155svh}.flow-motion .f-project-pin{height:100svh;min-height:0;position:sticky;top:0}.flow-motion .f-project-photo{transform:scale(calc(1.12 - var(--fp)*.12));clip-path:inset(calc(var(--fp)*2%) calc(var(--fp)*2%) round calc(var(--fp)*22px))}.flow-motion .f-project-bottom{transform:translateY(calc((1 - var(--fp))*28px))}
.f-return{padding:150px 0;background:#e9f2f8;color:#182b3b}.f-return h2{font-size:clamp(2.8rem,5.8vw,6.5rem);font-weight:500;max-width:18ch;line-height:1.05}.f-return h2 em{font-style:normal;color:#277bb8}.f-return p:not(.f-kicker){max-width:50ch;margin:30px 0}.f-return .f-link:hover{color:#205f91}
.flow-page .contact{color:#182b3b;background:#f6f7f8}.flow-page .calc{color:#182b3b}.flow-page .site-footer{margin-top:0}
@media(max-width:820px){.f-rail{top:86px;left:20px;right:20px;justify-content:space-between;gap:4px;padding:8px 12px}.f-rail a{font-size:.75rem}.f-opening-pin{min-height:720px}.f-opening-copy{padding:166px 20px 100px}.f-opening h1{font-size:clamp(3.4rem,14vw,5.7rem);max-width:11ch}.f-opening-bottom{display:block}.f-opening-bottom .f-link{margin-top:15px}.f-opening-copy>.f-kicker{font-size:.75rem;letter-spacing:.05em}.f-coordinate{display:none}.f-depth-copy{padding:170px 20px 0}.f-depth-copy h2{font-size:clamp(2.3rem,10vw,3.6rem)}.f-blueprint{inset:auto 0 100px}.f-blueprint svg{height:30svh;min-height:0}.f-blueprint>span{font-size:.75rem;text-align:center;padding:0 20px}.f-interlude,.f-return{padding:90px 0}.f-interlude h2{font-size:2.7rem}.f-process-pin{display:block;min-height:0}.f-process-images{min-height:340px}.f-process-copy{padding:42px 24px;gap:18px}.f-process-counter{font-size:3.2rem}.f-step h2{font-size:2.25rem;margin:12px 0 18px}.f-step p{font-size:1rem}.flow-motion .f-process-pin{display:grid;grid-template-columns:1fr;grid-template-rows:34svh 1fr;padding-top:128px;padding-bottom:64px}.flow-motion .f-process-images{min-height:0}.flow-motion .f-process-copy{padding:20px 24px;gap:10px;justify-content:start}.flow-motion .f-process-copy>.f-kicker{display:none}.flow-motion .f-process-counter{font-size:2.5rem}.flow-motion .f-process-steps{min-height:185px}.flow-motion .f-step h2{font-size:1.9rem;margin:8px 0 12px}.flow-motion .f-step p{font-size:.95rem;line-height:1.5;margin:0}.flow-motion .f-process-copy>.f-link{padding:4px 0;font-size:.875rem;align-self:start}.f-process-stamp{bottom:20px;left:24px;font-size:.75rem}.f-projects-heading{padding-top:90px;padding-bottom:60px;display:block}.f-projects-heading h2{font-size:3.9rem}.f-projects-heading>p:last-child{margin:30px 0 0}.f-project-top{top:150px;font-size:.75rem;gap:30px}.f-project-bottom{bottom:100px;display:block}.f-project-bottom h3{font-size:3rem}.f-project-bottom .f-link{margin-top:20px}.f-project-pin{min-height:650px}.f-return h2{font-size:2.8rem}}
@media(prefers-reduced-motion:reduce){.f-process-image,.f-step,.f-link span{transition:none}}