/* Compact native scroll section; folds complete automatically without trapping gestures. */
html, body { overflow-x: clip; }
.duo-story { position: relative; height: 180svh; width: 100vw; margin-left: calc(50% - 50vw); }
.duo-story__stage { position: sticky; top: 0; isolation: isolate; height: 100svh; min-height: 620px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 2vw; max-width: 1440px; margin: auto; padding: 5vh max(24px, 4vw); }
.duo-story__backdrop.studio-backdrop { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); background: radial-gradient(ellipse at 26% 42%, #17394d9c, transparent 62%), radial-gradient(ellipse at 86% 62%, #39244894, transparent 60%); }
.duo-story__backdrop.studio-backdrop::after { background: radial-gradient(ellipse at 72% 50%, #080b1280, transparent 62%); }
.duo-story__visual { min-width: 0; width: 100%; aspect-ratio: 1; max-height: 85svh; position: relative; }
.duo-story canvas, .duo-story__poster { display: block; width: 100%; height: 100%; object-fit: contain; }
.duo-story canvas { position: absolute; inset: 0; }
.duo-story__poster { transform: scale(1.4); }
.duo-story__copy { min-width: 0; text-align: center; }
.duo-story__panels { display: grid; }
.duo-story__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease, visibility .22s; align-self: center; }
.duo-story__panel.is-active { visibility: visible; opacity: 1; transform: none; }
.duo-story h3 { margin: 0 0 24px; font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.duo-story p { margin: 0 auto; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.65; color: #adb4c0; max-width: 39ch; }
@media (max-width: 700px) {
 .duo-story__stage { min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding: 62px 24px 24px; }
 .duo-story__visual { max-height: 47svh; height: 100%; aspect-ratio: auto; }
 .duo-story h3 { font-size: clamp(1.45rem, 6.4vw, 2rem); line-height: 1.12; margin-bottom: 14px; }
 .duo-story p { font-size: .93rem; line-height: 1.5; max-width: 44ch; }
 .duo-story__panels { min-height: 225px; }
}
@media (max-height: 650px) and (min-width: 701px) {
 .duo-story__stage { min-height: 0; padding-top: 64px; padding-bottom: 16px; }
 .duo-story h3 { font-size: 1.75rem; margin-bottom: 14px; }
 .duo-story p { font-size: .9rem; line-height: 1.5; }
}
@media (max-height: 700px) and (max-width: 700px) {
 .duo-story__stage { padding-top: 52px; padding-bottom: 12px; }
 .duo-story__panels { min-height: 210px; }
 .duo-story h3 { font-size: 1.4rem; }
 .duo-story p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
 .duo-story__panel { transition: none; transform: none; }
}
/* 2026-10-28 (Z Flip7, dikey cizgiler): telefonda elips yerine daire — elips dar/uzun kutuda uzayip seritli ciziliyordu. */
@media (pointer: coarse), (max-width: 768px) {
 .duo-story__backdrop.studio-backdrop { background: radial-gradient(circle at 26% 42%, #17394d9c, transparent 380px), radial-gradient(circle at 86% 62%, #39244894, transparent 360px); }
}