/* Yayın sahneleri (ys): daha önce hazırlanan salon ekranı hareketli tasarımlarından uyarlandı. 16:9, Poppins, yalnızca CSS animasyonu.
   .oyna sınıfı eklenince sahne baştan oynar; animasyonsuz durumda son kare görünür. */
.ys{position:absolute;inset:0;container-type:inline-size;overflow:hidden;font-family:var(--font);display:grid;place-items:center;text-align:center;color:#fff;line-height:1.1}
.ys-orta{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.6cqw;width:100%}
.ys .h{display:inline-block;white-space:pre}
.ys [data-bol]{white-space:nowrap}
.ys-ust{font-size:1.8cqw;font-weight:600;letter-spacing:.5em;text-transform:uppercase;padding-left:.5em}
.ys-alt{font-size:2.6cqw;font-weight:400;opacity:.92}
.ys-dev{font-size:11.5cqw;font-weight:600;letter-spacing:-.02em;line-height:1}
.ys-orta-dev{font-size:6.6cqw;font-weight:600;letter-spacing:-.02em}
.ys-altin .h,.ys-altin-yazi{background:linear-gradient(180deg,#f6e3a8 8%,#d8b05a 50%,#a87b2f 96%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.12em;margin-block:-.12em}
.ys-cizgi{height:.25cqw;width:16cqw;background:#d8b05a;border-radius:1cqw}
.ys-toz{position:absolute;inset:-8%;pointer-events:none;opacity:.8;background-image:
  radial-gradient(circle at 8% 22%,#f6e3a8 0 .14cqw,transparent .32cqw),radial-gradient(circle at 21% 74%,#f6e3a8 0 .1cqw,transparent .26cqw),
  radial-gradient(circle at 36% 12%,#f6e3a8 0 .12cqw,transparent .3cqw),radial-gradient(circle at 57% 86%,#f6e3a8 0 .14cqw,transparent .32cqw),
  radial-gradient(circle at 72% 18%,#f6e3a8 0 .1cqw,transparent .26cqw),radial-gradient(circle at 88% 62%,#f6e3a8 0 .14cqw,transparent .32cqw),
  radial-gradient(circle at 94% 30%,#f6e3a8 0 .1cqw,transparent .26cqw),radial-gradient(circle at 46% 52%,#f6e3a8 0 .08cqw,transparent .22cqw);
  animation:ysToz 14s linear infinite alternate}
@keyframes ysToz{to{transform:translate(2%,-5%)}}

/* ortak giriş hareketleri */
.ys.oyna .h{animation:ysHarf .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--g,0ms) + var(--i,0) * 45ms)}
@keyframes ysHarf{from{opacity:0;transform:translateY(55%);filter:blur(6px)}}
.ys.oyna .ys-gel{animation:ysGel .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--g,0ms)}
@keyframes ysGel{from{opacity:0;transform:translateY(35%)}}
.ys.oyna .ys-cizgi{animation:ysCiz 1s cubic-bezier(.65,0,.35,1) both;animation-delay:var(--g,900ms)}
@keyframes ysCiz{from{transform:scaleX(0)}}

/* 1 · Medikal estetik (lacivert, altın) */
.ys-medikal{background:radial-gradient(120% 90% at 50% 40%,#0a3477 0%,#041e4a 100%)}
.ys-medikal .ys-ust{color:#7fd3d8}
.ys-medikal .ys-dev:first-of-type{color:#fff}

/* 2 · Uygulama listesi (lacivert, turkuaz) */
.ys-liste{background:#062b66;background-image:radial-gradient(60% 80% at 86% 8%,rgba(3,163,174,.5),transparent 70%)}
.ys-liste .ys-ust{color:#7fd3d8}
.ys-yuva{height:1.3em;overflow:hidden;font-size:7.4cqw;font-weight:600;width:92cqw;letter-spacing:-.01em}
.ys-seri span{display:block;height:1.3em;line-height:1.3em;white-space:nowrap}
.ys.oyna .ys-seri{animation:ysSeri 7.2s cubic-bezier(.7,0,.3,1) both}
@keyframes ysSeri{0%,15%{transform:translateY(0)}20%,35%{transform:translateY(-1.3em)}40%,55%{transform:translateY(-2.6em)}60%,75%{transform:translateY(-3.9em)}80%,100%{transform:translateY(-5.2em)}}
.ys-ilerleme{position:absolute;left:0;bottom:0;height:.5cqw;width:100%;background:#03a3ae;transform-origin:left}
.ys.oyna .ys-ilerleme{animation:ysIler 7.2s linear both}
@keyframes ysIler{from{transform:scaleX(0)}}

/* 3 · Kampanya kartları (lacivert, altın) */
.ys-kampanya{background:radial-gradient(120% 90% at 50% 40%,#062b66 0%,#041e4a 100%)}
.ys-kampanya .ys-orta{gap:1.4cqw}
.ys-karolar{display:flex;gap:1.8cqw;margin-block:1.4cqw .6cqw}
.ys-karo{position:relative;width:11.5cqw;height:11.5cqw;perspective:60cqw}
.ys-yuz{position:absolute;inset:0;border-radius:1cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ys-on{border:.16cqw solid rgba(246,227,168,.55)}
.ys-yuz b{font-size:4.4cqw;font-weight:600;line-height:1}
.ys-yuz small{font-size:1.15cqw;font-weight:600;letter-spacing:.32em;text-transform:uppercase;padding-left:.32em}
.ys-arka{background:linear-gradient(160deg,#f6e3a8,#d8b05a 55%,#a87b2f);color:#041e4a}
.ys-arka b{font-size:2.5cqw}
.ys-hediye .ys-on{transform:rotateY(180deg)}
.ys-hediye .ys-arka{transform:none;box-shadow:0 0 3cqw rgba(246,227,168,.45)}
.ys-karo:not(.ys-hediye) .ys-arka{display:none}
.ys.oyna .ys-hediye .ys-on{animation:ysOnDon .9s cubic-bezier(.6,0,.3,1) 2.5s both}
.ys.oyna .ys-hediye .ys-arka{animation:ysArkaDon .9s cubic-bezier(.6,0,.3,1) 2.5s both}
@keyframes ysOnDon{from{transform:rotateY(0)}}
@keyframes ysArkaDon{from{transform:rotateY(-180deg);box-shadow:none}}
.ys-not{font-size:1.5cqw;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#7fd3d8}

/* 4 · Marka filmi (açık zemin, turkuaz) */
.ys-tobe{background:#fff;background-image:radial-gradient(70% 70% at 0% 100%,#e3f1f3,transparent 70%);color:#062b66}
.ys-tobe .ys-ust{color:#03a3ae}
.ys-tobe .ys-orta{gap:.6cqw}
.ys-tobe .ys-orta-dev{font-size:8.2cqw}
.ys-turkuaz{color:#03a3ae}
.ys-cubuk{margin-top:1.8cqw;height:.6cqw;width:24cqw;background:#03a3ae;border-radius:1cqw}
.ys.oyna .ys-cubuk{animation:ysCiz 1.1s cubic-bezier(.65,0,.35,1) 1.5s both}
.ys-yaprak{position:absolute;width:12cqw;opacity:.2;color:#03a3ae;animation:ysYaprak 9s ease-in-out infinite}
@keyframes ysYaprak{50%{transform:translate(2cqw,-3cqw) rotate(18deg)}}

/* 5 · Süreç (lacivert) */
.ys-surec{background:#041e4a;background-image:radial-gradient(70% 90% at 50% 0%,#0a3477,transparent 70%)}
.ys-surec .ys-orta-dev{font-size:5.4cqw}
.ys-adimlar{position:relative;display:grid;grid-template-columns:repeat(4,1fr);width:78cqw;margin-top:4cqw}
.ys-adimlar::before{content:"";position:absolute;left:12.5%;right:12.5%;top:1.1cqw;height:.22cqw;background:rgba(127,211,216,.25)}
.ys-adimlar::after{content:"";position:absolute;left:12.5%;right:12.5%;top:1.1cqw;height:.22cqw;background:#d8b05a;transform-origin:left}
.ys.oyna .ys-adimlar::after{animation:ysCiz 2.6s cubic-bezier(.65,0,.35,1) 1.4s both}
.ys-adim{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4cqw;font-size:2.2cqw;font-weight:500}
.ys-adim i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#d8b05a;box-shadow:0 0 0 .6cqw rgba(216,176,90,.18)}

/* 6 · Sosyal medya (Biyuti mor) */
.ys-sosyal{background:#3b2140;background-image:radial-gradient(60% 80% at 85% 10%,rgba(229,112,159,.55),transparent 70%)}
.ys-sosyal .ys-orta{gap:2cqw}
.ys-ikon{width:10cqw;height:10cqw;border-radius:2.8cqw;border:.7cqw solid #fff;position:relative}
.ys-ikon::before{content:"";position:absolute;inset:22%;border-radius:50%;border:.7cqw solid #fff}
.ys-ikon::after{content:"";position:absolute;top:12%;right:12%;width:1.3cqw;height:1.3cqw;border-radius:50%;background:#fff}
.ys.oyna .ys-ikon{animation:ysIkon .9s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ysIkon{from{opacity:0;transform:scale(.5) rotate(-12deg)}}
.ys-tutamak{font-size:3cqw;font-weight:600;color:#f4a3c4;overflow:hidden;white-space:nowrap;border-right:.25cqw solid #f4a3c4;padding-right:.3cqw}
.ys.oyna .ys-tutamak{animation:ysYaz 1.4s steps(11) 1.6s both}
@keyframes ysYaz{from{max-width:0}to{max-width:40cqw}}

/* galerideki küçük ekranlar */
.mini-ekran{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#0e090f;box-shadow:0 0 0 6px #0e090f,0 24px 48px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){.ys-toz,.ys-yaprak{animation:none!important}}