/* Menübulut demosu: telefonda QR menü, duvarda mutfak ekranı. Ölçüler ekranın kendisine göre (cqw/cqh). */
.sdemo--menubulut { --mb: #e11d48; }

/* Telefon: QR menü */
.mb-phone { font-size: 6cqw; }
.mb-head { flex: none; height: 7.5cqh; display: flex; align-items: center; justify-content: space-between; padding: 0 6cqw; }
.mb-head b { font-size: 8.4cqw; letter-spacing: -.02em; }
.mb-table { padding: .5cqh 3.2cqw; border-radius: 99px; background: #ffe4e6; color: var(--mb); font-weight: 700; font-size: 5.6cqw; }
.mb-cats { flex: none; height: 6cqh; display: flex; gap: 2.4cqw; padding: .6cqh 6cqw 0; }
.mb-cats span { display: grid; place-items: center; height: 4.2cqh; padding: 0 3.6cqw; border-radius: 99px; background: #eceef2; color: #475569; font-weight: 600; font-size: 5.4cqw; }
.mb-cats .is-on { background: #0f172a; color: #fff; }
.mb-row { position: absolute; left: 4cqw; right: 4cqw; height: 15.5cqh; display: flex; align-items: center; gap: 3.5cqw; padding: 0 3cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 .4cqh 1.6cqh rgba(15,23,42,.07); }
.mb-row--1 { top: 22.5cqh; } .mb-row--2 { top: 39.3cqh; } .mb-row--3 { top: 56.1cqh; }
.mb-row img { width: 22cqw; height: 11.5cqh; border-radius: 3.5cqw; object-fit: cover; flex: none; }
.mb-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3cqh; }
.mb-row-t b { font-size: 6.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row-t small { font-size: 4.6cqw; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row-t em { font-style: normal; font-weight: 800; font-size: 6cqw; color: var(--mb); }
.mb-add { position: relative; flex: none; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--mb); color: #fff; font-weight: 800; font-size: 7.5cqw; transition: background .3s, transform .3s; }
.mb-add i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; transition: opacity .25s, transform .25s; }
.mb-add i + i, .mb-row.is-in .mb-add i:first-child { opacity: 0; transform: scale(.5); }
.mb-row.is-in .mb-add, .s-add .mb-row--2 .mb-add { background: #16a34a; }
.mb-row.is-in .mb-add i + i, .s-add .mb-row--2 .mb-add i + i { opacity: 1; transform: none; }
.s-add .mb-row--2 .mb-add i:first-child { opacity: 0; transform: scale(.5); }
.s-add .mb-row--2 .mb-add { animation: mb-pop .45s; }
@keyframes mb-pop { 40% { transform: scale(1.25); } }
.mb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 22cqh; padding: 2cqh 5cqw 3.4cqh; background: #fff; border-radius: 7cqw 7cqw 0 0; box-shadow: 0 -.6cqh 2.4cqh rgba(15,23,42,.08);
          display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 1.2cqh 2cqw; align-items: center; }
.mb-cart { position: relative; display: flex; align-items: center; gap: 2cqw; font-weight: 700; font-size: 5.6cqw; color: #334155; }
.mb-cart i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: #0f172a; color: #fff; font-style: normal; font-size: 4.6cqw; transition: opacity .25s, transform .3s; }
.mb-cart .mb-n2 { position: absolute; left: 0; opacity: 0; transform: scale(.4); }
[dir="rtl"] .mb-cart .mb-n2 { left: auto; right: 0; }
.s-add .mb-cart .mb-n1 { opacity: 0; } .s-add .mb-cart .mb-n2 { opacity: 1; transform: none; background: var(--mb); }
.mb-sum { position: relative; font-weight: 800; font-size: 6cqw; }
.mb-sum i { font-style: normal; transition: opacity .25s; }
.mb-sum .mb-s2 { position: absolute; inset-inline-end: 0; opacity: 0; }
.s-add .mb-sum .mb-s1 { opacity: 0; } .s-add .mb-sum .mb-s2 { opacity: 1; }
.mb-send { grid-column: 1 / -1; position: relative; display: grid; height: 100%; border-radius: 4cqw; background: #0f172a; color: #fff; font-weight: 700; font-size: 6cqw; transition: background .3s; }
.mb-send i { grid-area: 1 / 1; display: grid; place-items: center; font-style: normal; transition: opacity .2s; }
.mb-send-b { opacity: 0; }
.s-send .mb-send { background: var(--mb); } .s-send .mb-send-a { opacity: 0; } .s-send .mb-send-b { opacity: 1; }
.mb-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 30cqh; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqh;
            background: #fff; border-radius: 7cqw 7cqw 0 0; box-shadow: 0 -1cqh 4cqh rgba(15,23,42,.18); transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.9,.3,1.1); text-align: center; padding: 0 6cqw; }
.mb-sheet b { font-size: 6.6cqw; } .mb-sheet small { font-size: 5cqw; color: #64748b; }
.mb-ok { display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 50%; background: #16a34a; color: #fff; font-weight: 800; font-size: 8cqw; }
.s-sent .mb-sheet { transform: none; }

/* Duvar: mutfak ekranı */
.mk { position: absolute; inset: 0; background: #0f141c; color: #e2e8f0; padding: 3cqh 2.6cqw; display: flex; flex-direction: column; gap: 3cqh; }
.mk-top { flex: none; display: flex; align-items: center; justify-content: space-between; font-size: 2.6cqw; font-weight: 600; color: #94a3b8; }
.mk-logo { display: flex; align-items: center; gap: 1cqw; color: #fff; font-weight: 800; font-size: 3cqw; }
.mk-logo i { display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border-radius: 1cqw; background: var(--mb); font-style: normal; font-size: 2.6cqw; }
.mk-count { position: relative; }
.mk-count b { color: #fff; transition: opacity .3s; } .mk-c2 { position: absolute; inset-inline-start: 0; opacity: 0; }
.s-new .mk-c1 { opacity: 0; } .s-new .mk-c2 { opacity: 1; color: #fb7185; }
.mk-clock { font-variant-numeric: tabular-nums; }
.mk-grid { flex: 1; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; min-height: 0; }
.mk-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.6cqh; padding: 2.4cqh 1.6cqw; border-radius: 1.4cqw; background: #1b2330; border: .25cqw solid #263142;
           transition: transform .6s cubic-bezier(.3,.8,.3,1), opacity .4s; }
.mk-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; }
.mk-card-h b { flex: 1; min-width: 0; font-size: 2.7cqw; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card-h span { flex: none; position: relative; font-size: 1.7cqw; color: #94a3b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.2cqh; font-size: 2.2cqw; }
.mk-card li { display: flex; gap: .8cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card li i { font-style: normal; font-weight: 800; color: #fbbf24; }
.mk-note { margin: 0; font-size: 1.9cqw; color: #fda4af; font-style: italic; }
.mk-st { margin-top: auto; position: relative; display: grid; height: 7cqh; border-radius: .8cqw; background: rgba(251,191,36,.14); color: #fbbf24; font-weight: 700; font-size: 2cqw; place-items: center; }
.mk-card--c .mk-st { background: rgba(34,197,94,.15); color: #4ade80; }
.mk-st > span { grid-area: 1 / 1; transition: opacity .35s; }
.mk-card--new { border-color: var(--mb); box-shadow: 0 0 2.4cqw rgba(225,29,72,.45); opacity: 0; transform: translateY(-14cqh) scale(.92); }
.mk-card--new .mk-st { background: rgba(225,29,72,.18); color: #fb7185; }
.mk-st-prep, .mk-t2 { opacity: 0; }
.mk-card-h span { display: grid; } .mk-t1, .mk-t2 { grid-area: 1 / 1; transition: opacity .35s; }
.mk-card--a, .mk-card--b, .mk-card--c { transform: translateX(calc(-100% - 1.8cqw)); }
[dir="rtl"] .mk-card--a, [dir="rtl"] .mk-card--b, [dir="rtl"] .mk-card--c { transform: translateX(calc(100% + 1.8cqw)); }
.s-new .mk-card--a, .s-new .mk-card--b, .s-new .mk-card--c { transform: none; }
.s-new .mk-card--new { opacity: 1; transform: none; }
.s-new .mk-card--new .sd-flash { transition: transform .9s .25s ease-out; transform: translateX(130%); }
.s-prep .mk-card--new { box-shadow: none; border-color: #263142; }
.s-prep .mk-card--new .mk-st { background: rgba(251,191,36,.14); color: #fbbf24; }
.s-prep .mk-st-new, .s-prep .mk-t1 { opacity: 0; } .s-prep .mk-st-prep, .s-prep .mk-t2 { opacity: 1; }