/* Mağazabulut demosu: telefonda mağaza vitrini, laptopta sipariş paneli. */
.sdemo--magazabulut { --mg: #7c3aed; --mg-l: #ede9fe; }

/* Telefon: mağaza ürün sayfası */
.mg-phone { font-size: 5.4cqw; background: #faf8f5; }
.mg-head { flex: none; height: 7cqh; display: flex; align-items: center; justify-content: space-between; padding: 0 6cqw; }
.mg-head b { font-size: 6.6cqw; letter-spacing: .02em; font-weight: 800; }
.mg-bag { position: relative; font-size: 6.4cqw; }
.mg-bag i { position: absolute; top: -1cqh; inset-inline-end: -2.6cqw; display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: var(--mg); color: #fff; font-style: normal; font-size: 3.6cqw; font-weight: 800;
            transform: scale(0); transition: transform .35s cubic-bezier(.2,.9,.3,1.6); }
.s-cart .mg-bag i { transform: none; }
.mg-pic { flex: none; height: 37cqh; margin: 0 4cqw; border-radius: 5cqw; overflow: hidden; }
.mg-pic img { width: 100%; height: 100%; object-fit: cover; }
.mg-info { flex: none; padding: 1.6cqh 6cqw 0; display: flex; flex-direction: column; gap: .6cqh; }
.mg-info b { font-size: 6.4cqw; line-height: 1.15; }
.mg-info span { display: flex; align-items: baseline; gap: 2.4cqw; }
.mg-info em { font-style: normal; font-weight: 800; font-size: 7.4cqw; color: var(--mg); } .mg-info s { color: #a8a29e; font-size: 4.8cqw; } .mg-info small { margin-inline-start: auto; color: #b45309; font-weight: 700; font-size: 4.6cqw; }
.mg-vars { flex: none; display: flex; gap: 2cqw; padding: 1.6cqh 6cqw 0; }
.mg-vars span { display: flex; align-items: center; gap: 1.6cqw; padding: .8cqh 2.6cqw; border-radius: 99px; border: .4cqw solid #e7e5e4; font-size: 4.4cqw; font-weight: 600; background: #fff; }
.mg-vars i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; }
.mg-vars .is-on { border-color: #1c1917; }
.mg-btn { position: absolute; left: 5cqw; right: 5cqw; top: 74.5cqh; height: 9cqh; display: grid; border-radius: 4cqw; background: #1c1917; color: #fff; font-weight: 800; font-size: 6cqw; transition: background .3s; }
.mg-btn i { grid-area: 1 / 1; display: grid; place-items: center; font-style: normal; transition: opacity .25s; }
.mg-b2, .mg-b3 { opacity: 0; }
.s-cart .mg-btn { background: var(--mg); } .s-cart .mg-b1 { opacity: 0; } .s-cart .mg-b2 { opacity: 1; }
.s-pay .mg-b2 { opacity: 0; } .s-pay .mg-b3 { opacity: 1; }
.mg-done { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqh; background: #faf8f5; opacity: 0; transition: opacity .4s; text-align: center; padding: 0 6cqw; }
.mg-done b { font-size: 7.6cqw; } .mg-done small { color: #57534e; font-size: 5.2cqw; }
.mg-ok { display: grid; place-items: center; width: 18cqw; height: 18cqw; border-radius: 50%; background: #16a34a; color: #fff; font-size: 10cqw; font-weight: 800; transform: scale(.5); transition: transform .45s cubic-bezier(.2,.9,.3,1.5) .1s; }
.s-paid .mg-done { opacity: 1; } .s-paid .mg-ok { transform: none; }

/* Laptop: Mağazabulut sipariş paneli */
.mp { position: absolute; inset: 0; display: flex; background: #f6f5fb; color: #1e1b2e; font-size: 2.1cqw; }
.mp-side { flex: none; width: 18cqw; display: flex; flex-direction: column; gap: 1.6cqh; padding: 4cqh 1.4cqw; background: #1e1b2e; color: #a5a1c2; }
.mp-side span { padding: 1.2cqh 1.2cqw; border-radius: .9cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-side .is-on { background: rgba(124,58,237,.3); color: #fff; }
.mp-logo { display: flex; align-items: center; gap: .8cqw; color: #fff; font-weight: 800; font-size: 1.75cqw; margin-bottom: 2cqh; padding: 0 !important; }
.mp-logo i { display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 1cqw; background: var(--mg); font-style: normal; font-size: 2.2cqw; flex: none; }
.mp-main { flex: 1; min-width: 0; padding: 4cqh 2.6cqw; display: flex; flex-direction: column; }
.mp-top { flex: none; height: 31cqh; display: flex; align-items: flex-start; gap: 1.6cqw; }
.mp-top > b { flex: 1; font-size: 3.6cqw; letter-spacing: -.02em; }
.mp-kpi { display: flex; flex-direction: column; gap: .6cqh; padding: 1.8cqh 1.8cqw; border-radius: 1.2cqw; background: #fff; border: .15cqw solid #e6e3f1; min-width: 15cqw; }
.mp-kpi small { color: #6b6785; font-weight: 600; font-size: 1.8cqw; white-space: nowrap; }
.mp-kpi strong { position: relative; font-size: 3.2cqw; font-variant-numeric: tabular-nums; }
.mp-kpi i { font-style: normal; transition: opacity .35s; } .mp-v2 { position: absolute; inset-inline-start: 0; opacity: 0; }
.s-kpi .mp-v1 { opacity: 0; } .s-kpi .mp-v2 { opacity: 1; color: var(--mg); }
.mp-table { position: relative; flex: 1; }
.mp-row { position: absolute; left: 0; right: 0; height: 10.6cqh; overflow: hidden; display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.4cqw; border-radius: 1cqw; background: #fff; border: .15cqw solid #e6e3f1;
          transition: transform .6s cubic-bezier(.3,.8,.3,1), opacity .4s, border-color .4s, background .4s; }
.mp-row--new { top: 0; } .mp-row--a { top: 12.4cqh; } .mp-row--b { top: 24.8cqh; } .mp-row--c { top: 37.2cqh; } .mp-row--d { top: 49.6cqh; }
.mp-row > b { flex: none; width: 6cqw; font-variant-numeric: tabular-nums; }
.mp-item { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3b3753; }
.mp-row > em { flex: none; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.mp-ch { flex: none; padding: .7cqh 1cqw; border-radius: .7cqw; font-weight: 800; font-size: 1.6cqw; white-space: nowrap; }
.mp-ch--web { background: var(--mg-l); color: var(--mg); } .mp-ch--ty { background: #fff1e6; color: #f27a1a; } .mp-ch--hb { background: #fff3e8; color: #ff6000; } .mp-ch--n11 { background: #f3e8ff; color: #7e22ce; }
.mp-st { flex: none; padding: .7cqh 1cqw; border-radius: 99px; background: #fef3c7; color: #b45309; font-weight: 700; font-size: 1.7cqw; white-space: nowrap; }
.mp-st--ok { background: #dcfce7; color: #15803d; }
.mp-stock { flex: none; position: relative; color: #6b6785; font-weight: 600; font-size: 1.7cqw; white-space: nowrap; }
.mp-stock i { font-style: normal; font-weight: 800; color: #1e1b2e; transition: opacity .3s; } .mp-s2 { position: absolute; inset-inline-end: 0; opacity: 0; }
.s-kpi .mp-s1 { opacity: 0; } .s-kpi .mp-s2 { opacity: 1; color: #dc2626; }
.mp-act { flex: none; position: relative; display: grid; padding: .9cqh 1.2cqw; border-radius: .8cqw; background: var(--mg); color: #fff; font-weight: 800; font-size: 1.7cqw; white-space: nowrap; transition: background .3s; }
.mp-act i { grid-area: 1 / 1; font-style: normal; text-align: center; transition: opacity .25s; } .mp-a2 { opacity: 0; }
.s-ship .mp-act { background: #16a34a; } .s-ship .mp-a1 { opacity: 0; } .s-ship .mp-a2 { opacity: 1; }
.mp-row--new { border-color: var(--mg); box-shadow: 0 0 0 .4cqw rgba(124,58,237,.15); opacity: 0; transform: translateY(-4cqh) scale(.97); }
.mp-row--a, .mp-row--b, .mp-row--c, .mp-row--d { transform: translateY(-12.4cqh); }
.s-new .mp-row--new { opacity: 1; transform: none; }
.s-new .mp-row--a, .s-new .mp-row--b, .s-new .mp-row--c, .s-new .mp-row--d { transform: none; }
.s-new .mp-row--new .sd-flash { transition: transform .9s .25s ease-out; transform: translateX(130%); }
.s-ship .mp-row--new { box-shadow: none; border-color: #bbf7d0; background: #f0fdf4; }