/* Sophiras ürün demoları — ortak görünüm (motor: sdemo.js). Ürüne özel arayüz <ürün>.css içinde.
   Ekran içindeki her ölçü ekranın kendisine göredir (container-type: size → cqw/cqh), böylece sahne her boyutta aynı görünür. */
.sdemo { --sd-font: "Satoshi", "Onest", "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
         container-type: inline-size; position: relative; overflow: hidden; border-radius: 8px; background: #0b0b0b; font-family: var(--sd-font); }
.sdemo, .sdemo * { box-sizing: border-box; }
.sdemo img { max-width: none; display: block; }
/* will-change yok: tarayıcı yakın planda yazıları yeni ölçekte yeniden çizsin (bulanık kalmasın) */
.sdemo__scene { position: relative; aspect-ratio: 1344 / 752; transform-origin: 0 0; }
.sdemo__plate { position: absolute; inset: 0; width: 100%; height: 100%; }
.sdemo__scr { position: absolute; overflow: hidden; container-type: size; background: #fff; color: #0f172a; line-height: 1.2; }

/* Telefon ekranı: yuvarlak köşe, üstte çentik */
.sd-phone { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 13cqw; overflow: hidden; background: #f6f7f9; }
.sd-phone::before { content: ""; position: absolute; top: 2.2cqh; left: 50%; width: 30cqw; height: 3.4cqh; translate: -50% 0; border-radius: 99px; background: #050505; z-index: 5; }
.sd-status { flex: none; height: 7.5cqh; padding: 2.4cqh 9cqw 0; display: flex; justify-content: space-between; font-size: 6.4cqw; font-weight: 700; }

/* Parmak dokunuşu */
.sdemo__tap { position: absolute; z-index: 6; width: 1.2cqw; height: 1.2cqw; margin: -.6cqw 0 0 -.6cqw; border-radius: 50%; pointer-events: none;
              background: rgba(255,255,255,.55); box-shadow: 0 0 0 .18cqw rgba(255,255,255,.9), 0 .3cqw .9cqw rgba(0,0,0,.35); transition: transform .12s, opacity .25s; }
.sdemo__tap i { position: absolute; inset: 0; border-radius: 50%; border: .2cqw solid rgba(255,255,255,.9); opacity: 0; }
.sdemo__tap.is-press { transform: scale(.78); }
.sdemo__tap.is-press i { animation: sd-ring .5s ease-out; }
@keyframes sd-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* Yeni öğenin düşüşü: ışık süpürmesi */
.sd-flash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.7) 50%, transparent 100%); transform: translateX(-130%); }