/* Actual product movement from original footage; no decorative photo transforms.
   Kaydırmaya bağlı kare dizisi mantığı assets/js/applications.js içinde; buradaki
   değerler yalnız yerleşim ve tipografi. Renkler main.css token'larından gelir. */
.mechanism-scroll { --motion-height:calc(100svh - var(--header-h,88px)); --motion-travel:0px; position:relative; background:var(--surface-2); color:var(--ink); overflow-anchor:none; scroll-margin-top:var(--header-h,88px); }
.mechanism-scroll.is-scroll { height:calc(var(--motion-height) + var(--motion-travel)); }
.mechanism-scroll__stage { height:var(--motion-height); min-height:560px; display:flex; flex-direction:column; padding:30px max(25px,5vw) 24px; overflow:clip; }
.mechanism-scroll.is-scroll .mechanism-scroll__stage { position:sticky; top:var(--header-h,88px); }
.mechanism-scroll__head { display:flex; justify-content:space-between; align-items:center; gap:50px; max-width:1280px; width:100%; margin:0 auto 20px; flex-shrink:0; }
.applications-page .mechanism-scroll__head h2 { font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:1.1; letter-spacing:-.028em; max-width:20ch; }
.mechanism-scroll__summary { max-width:36ch; display:grid; justify-items:start; gap:14px; }
.mechanism-scroll__summary p { font-size:.95rem; line-height:1.6; color:var(--ink-2); }
.mechanism-scroll__visual { position:relative; flex:1; min-height:0; width:100%; max-width:1280px; margin:0 auto; }
.mechanism-scroll__poster,.mechanism-scroll__visual canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.mechanism-scroll__poster img { display:block; width:100%; height:100%; object-fit:contain; }
.mechanism-scroll__visual canvas { opacity:0; object-fit:contain; }
.mechanism-scroll.has-frame canvas { opacity:1; }
.mechanism-scroll.has-frame .mechanism-scroll__poster { opacity:0; }
/* The hinge footage keeps its original portrait framing beside the editorial copy. */
.mechanism-scroll--portrait .mechanism-scroll__stage { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,6vw,95px); max-width:1340px; margin:auto; padding:35px max(25px,5vw); }
.mechanism-scroll--portrait .mechanism-scroll__head { grid-column:2; grid-row:1; display:block; align-self:center; margin:0; }
.applications-page .mechanism-scroll--portrait .mechanism-scroll__head h2 { font-size:clamp(1.8rem,3vw,2.6rem); }
.mechanism-scroll--portrait .mechanism-scroll__summary { margin-top:28px; max-width:36ch; }
.mechanism-scroll--portrait .mechanism-scroll__visual { grid-column:1; grid-row:1; height:100%; max-width:470px; }
@media(max-width:980px) {
    .mechanism-scroll__stage { padding:25px 25px 20px; }
    .mechanism-scroll__head { gap:25px; }
    .mechanism-scroll__summary { max-width:29ch; }
}
@media(max-width:720px) {
    .mechanism-scroll { --motion-height:530px; }
    .mechanism-scroll__stage { min-height:440px; padding:26px 20px 20px; }
    .mechanism-scroll__head { display:block; margin-bottom:18px; }
    .applications-page .mechanism-scroll__head h2 { font-size:1.6rem; max-width:none; }
    .mechanism-scroll__summary { max-width:none; margin-top:15px; }
    .mechanism-scroll__summary p { font-size:.9rem; line-height:1.55; }
    .mechanism-scroll__summary .link-arrow { min-height:44px; }
    .mechanism-scroll--portrait .mechanism-scroll__stage { display:flex; flex-direction:column; gap:20px; min-height:530px; padding:24px 20px; }
    .mechanism-scroll--portrait .mechanism-scroll__head { align-self:stretch; }
    .applications-page .mechanism-scroll--portrait .mechanism-scroll__head h2 { font-size:1.6rem; }
    .mechanism-scroll--portrait .mechanism-scroll__summary { margin-top:8px; max-width:none; }
    .mechanism-scroll--portrait .mechanism-scroll__summary p { display:none; }
    .mechanism-scroll--portrait .mechanism-scroll__visual { height:auto; flex:1; min-height:290px; }
}
@media(max-height:620px) and (min-width:721px) { .mechanism-scroll__stage { height:620px; } }
@media(max-height:660px) and (max-width:720px) {
    .mechanism-scroll__stage { padding-top:18px; min-height:420px; }
    .mechanism-scroll__summary p { display:none; }
    .applications-page .mechanism-scroll__head h2 { font-size:1.45rem; }
    .mechanism-scroll__summary { margin-top:5px; }
}