.sc{position:relative;width:100%;aspect-ratio:16/11;container-type:inline-size;font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased}
.sc *{box-sizing:border-box}
.sc-card{position:absolute;background:#fff;border-radius:2.2cqw;box-shadow:0 .3cqw .8cqw rgba(20,22,58,.06),0 4cqw 8cqw -4cqw rgba(20,22,58,.30);overflow:hidden}
.sc-bar{display:block;height:1.1cqw;border-radius:1cqw;background:#E5E7F4}
.sc-bar.d{background:#C9CDE6}.sc-bar.b{background:#4B3DF6}.sc-bar.v{background:#8B7CFF}.sc-bar.w{background:rgba(255,255,255,.22)}
.sc-pill{position:absolute;display:inline-flex;align-items:center;gap:.9cqw;padding:1cqw 1.8cqw;border-radius:6cqw;font-size:1.75cqw;line-height:2.4cqw;font-weight:650;white-space:nowrap;background:#fff;box-shadow:0 2cqw 5cqw -2cqw rgba(20,22,58,.35)}
.sc-ic{display:inline-flex;align-items:center;justify-content:center;width:2.6cqw;height:2.6cqw;border-radius:99cqw;flex:none}
.sc-ic svg{width:62%;height:62%}
.sc-t{display:block;font-size:2cqw;line-height:2.6cqw;font-weight:650}
.sc-s{display:block;font-size:1.45cqw;line-height:2cqw;color:var(--ink-muted)}
.sc-big{display:block;font-size:4.4cqw;line-height:5cqw;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sc-petal{position:absolute;border-radius:50% 50% 10% 10% / 60% 60% 10% 10%}
.sc-av{display:inline-flex;align-items:center;justify-content:center;border-radius:99cqw;color:#fff;font-weight:700;flex:none}
.sc-phone{position:absolute;background:#14163A;border-radius:4cqw;padding:.9cqw;box-shadow:0 4cqw 8cqw -3cqw rgba(20,22,58,.5)}
.sc-ps{background:#F8FAFF;border-radius:3.2cqw;height:100%;overflow:hidden;position:relative}
.sc-row{display:flex;align-items:center;gap:1.4cqw}
.sc-col{display:flex;flex-direction:column}
/* ---------- Sahne hareketi ----------
   Görünür olunca (.stage.is-in) kartlar sırayla belirir, çubuklar dolar, hap etiketleri hafifçe süzülür.
   Bireysel `translate`/`scale` özellikleri kullanılır: satır içi `transform: rotate()` taşıyan yaprakları bozmaz. */
.sc-card, .sc-pill, .sc-phone { transition: opacity .5s var(--ease-standard), translate .6s var(--ease-standard), scale .6s var(--ease-standard); }
.js .stage:not(.is-in) .sc-card,
.js .stage:not(.is-in) .sc-pill,
.js .stage:not(.is-in) .sc-phone { opacity: 0; translate: 0 14px; scale: .97; }
.js .stage:not(.is-in) .sc-petal { opacity: 0 !important; }
.sc-petal { transition: opacity .8s var(--ease-standard); }

.stage.is-in .sc-card:nth-child(3n+1) { transition-delay: .05s; }
.stage.is-in .sc-card:nth-child(3n+2) { transition-delay: .15s; }
.stage.is-in .sc-card:nth-child(3n) { transition-delay: .25s; }
.stage.is-in .sc-phone { transition-delay: .2s; }
.stage.is-in .sc-pill { transition-delay: .45s; }
.stage.is-in .sc-pill + .sc-pill { transition-delay: .6s; }

/* Çubuklar ve ilerleme dolguları soldan dolar; sütunlar tabandan yükselir */
.js .stage .sc-bar > span,
.js .stage [style*="left:0;top:0;bottom:0;width"],
.js .stage [style*="left: 0px; top: 0px"] { transform-origin: 0 50%; transition: transform .9s var(--ease-standard) .35s; }
.js .stage:not(.is-in) .sc-bar > span,
.js .stage:not(.is-in) [style*="left:0;top:0;bottom:0;width"] { transform: scaleX(0); }
.js .stage [style*="border-radius:.6cqw .6cqw 0 0"] { transform-origin: 50% 100%; transition: transform .7s var(--ease-standard) .4s; }
.js .stage:not(.is-in) [style*="border-radius:.6cqw .6cqw 0 0"] { transform: scaleY(0); }

/* Hafif süzülme: yalnızca giriş bittikten sonra, ekranda görünen sahnede */
@keyframes sc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.7cqw; } }
@keyframes sc-drift { 0%, 100% { translate: 0 0; } 50% { translate: .8cqw -1.2cqw; } }
.stage.is-in.is-settled .sc-pill { animation: sc-float 5.5s ease-in-out infinite; }
.stage.is-in.is-settled .sc-pill + .sc-pill { animation-duration: 6.5s; animation-delay: -2s; }
.stage.is-in.is-settled .sc-petal { animation: sc-drift 14s ease-in-out infinite; }
.stage.is-in.is-settled .sc-petal:nth-of-type(2n) { animation-duration: 18s; animation-delay: -5s; }

@media (prefers-reduced-motion: reduce) {
  .sc-card, .sc-pill, .sc-phone, .sc-petal, .sc *, .stage * { transition: none !important; animation: none !important; }
  .js .stage:not(.is-in) .sc-card, .js .stage:not(.is-in) .sc-pill, .js .stage:not(.is-in) .sc-phone { opacity: 1; translate: none; scale: none; }
  .js .stage:not(.is-in) .sc-petal { opacity: revert-layer !important; }
  .js .stage:not(.is-in) .sc-bar > span, .js .stage:not(.is-in) [style*="left:0;top:0;bottom:0;width"], .js .stage:not(.is-in) [style*="border-radius:.6cqw .6cqw 0 0"] { transform: none; }
}