/* FuLoop ORTAK tasarım sistemi — Market kabuğu + bileşenleri, Su markası.
   Jeton bloğu: :root (--ml-*). Marka değişimi = yalnız bu jetonlar. Bkz TASARIM-SISTEMI.md */

/* ===== kaynak: kasapos/src/modern/tema.css (renkler Su paletine çevrildi) ===== */
/* FuLoop Market MODERN arayüz — TEMA: jetonlar + temel + bileşenler.
   RENK = FuLoop Market (turuncu degrade + #1479BD vurgu), TASARIM DİLİ = Menulux (TopBar, ModuleShell, kutucuk ana ekran).
   Kaynak jetonlar: FuLoop app.css "MENULUX ORTAK TEMA — KISA EKRAN" (--ml-*), burada koşulsuz :root'ta.
   Kılavuz: src/modern/TASARIM.md. Kabuk/ana ekran yerleşimi: kabuk.css. */

:root{
  /* ---- FuLoop Market (TURUNCU, 05-turuncu ikon paleti) --ml-* jetonları ---- */
  --ml-serit: radial-gradient(ellipse at 18% 0%, rgba(123,205,248,.18), transparent 45%), linear-gradient(90deg,#06223D 0%,#0A3A63 50%,#0C4E81 100%);
  --ml-arka: radial-gradient(ellipse at 20% 0%, rgba(123,205,248,.18), transparent 50%), linear-gradient(135deg,#0A3F6E 0%,#08304F 50%,#06223D 100%);
  --ml-ray: linear-gradient(180deg,#0A3A63 0%,#08304F 55%,#06223D 100%);
  --ml-koyu: #072038;
  --ml-koyu-2: #08304F;
  --ml-koyu-aktif: #0A3A63;
  --ml-zemin: #F1F6FA;
  --ml-zemin-2: #F7FAFC;
  --ml-kart: #ffffff;
  --ml-kart-cubuk: #C9D6E2;
  --ml-cizgi: #DCE6EF;
  --ml-metin: #0F2236;
  --ml-soluk: #4F6479;
  --ml-soluk-2: #6F8499;
  --ml-vurgu: #1479BD;          /* DOLGU vurgu (birincil düğme, aktif çip); üstünde --ml-on-vurgu (beyaz) */
  --ml-vurgu-hover: #0F6AA8;
  --ml-vurgu-metin: #0B5C9E;    /* açık zeminde vurgu METNİ (beyaz üstünde ~5.8:1) */
  --ml-vurgu-acik: rgba(20,121,189,.14);
  --ml-on-vurgu: #ffffff;
  --ml-tehlike: #c62828;
  --ml-uyari: #b26a00;
  --ml-durum-ok: #2e9d5b;
  --ml-font: "Jost", system-ui, "Segoe UI", Arial, sans-serif;
  --ml-radius: 12px;
  --ml-radius-lg: 18px;
  --ml-hap: 22px;
  --ml-bosluk: 12px;
  --ml-dokun: 44px;
  --ml-golge: 0 2px 6px rgba(9,39,68,.08);
  --ml-golge-lg: 0 12px 34px rgba(9,39,68,.22);
  --ml-tus: #08304F; --ml-tus-yazi: #fff;
  /* ---- KasaPOS ek jetonları ---- */
  --m-serit-h: 60px;
  --m-modul-w: clamp(200px, 19vw, 290px);
  --m-girdi-kenar: #C5D4E2;
  --m-ikon-degrade: linear-gradient(170deg,#EAF6FD 0%,#BDE6FB 34%,#7BCDF8 62%,#1479BD 100%);
  --m-hap-degrade: linear-gradient(132deg,#0C4E81 0%,#0A3F6E 100%);
  --m-hap-degrade-ust: linear-gradient(132deg,#115D9A 0%,#0C4A7E 100%);
}

/* ---------- TEMEL ---------- */
*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html, body{ height: 100%; margin: 0; }
body{
  font-family: var(--ml-font); font-size: 15px; line-height: 1.4; color: var(--ml-metin);
  background: var(--ml-arka); background-attachment: fixed; overflow: hidden;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
input, textarea, select, button{ font-family: inherit; }
input, textarea{ user-select: text; -webkit-user-select: text; }
button{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible{ outline: 3px solid var(--ml-vurgu-acik); outline-offset: 2px; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: #B5C4D3; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track{ background: transparent; }
.m-sayi{ font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.m-tutar{ font-weight: 600; color: var(--ml-vurgu-metin); font-variant-numeric: tabular-nums; }
.m-soluk{ color: var(--ml-soluk); }
.m-bolum{ font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-vurgu-metin); }
.m-baslik{ font-size: 20px; font-weight: 600; color: var(--ml-metin); margin: 0; }
.m-gizli{ display: none !important; }

/* Test düzeneği (gizli pencere): animasyon/geçiş kapalı — ekran görüntüsü deterministik olsun */
html.m-test *, html.m-test *::before, html.m-test *::after{ animation: none !important; transition: none !important; }

/* ---------- DÜĞME .m-btn  [ikincil|tehlike|hayalet|koyu] [kucuk|buyuk|genis|ikon] ---------- */
.m-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ml-dokun); padding: 0 18px;
  border: 0; border-radius: 10px; background: var(--ml-vurgu); color: var(--ml-on-vurgu);
  font-size: 15px; font-weight: 500; line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
}
.m-btn:hover{ background: var(--ml-vurgu-hover); }
.m-btn:active{ transform: scale(.97); }
.m-btn:disabled{ opacity: .45; cursor: not-allowed; transform: none; }
.m-btn > i{ font-size: 1.05em; }
.m-btn.ikincil{ background: var(--ml-kart); color: var(--ml-metin); border: 1px solid var(--ml-cizgi); }
.m-btn.ikincil:hover{ background: var(--ml-zemin-2); border-color: #B8C9D9; }
.m-btn.ikincil > i{ color: var(--ml-vurgu-metin); }
.m-btn.tehlike{ background: var(--ml-tehlike); color: #fff; }
.m-btn.tehlike:hover{ background: #b02121; }
.m-btn.hayalet{ background: transparent; color: var(--ml-vurgu-metin); }
.m-btn.hayalet:hover{ background: var(--ml-vurgu-acik); }
.m-btn.koyu{ background: var(--ml-koyu); color: #fff; }
.m-btn.koyu:hover{ background: var(--ml-koyu-aktif); }
.m-btn.kucuk{ min-height: 38px; padding: 0 14px; font-size: 14px; }
.m-btn.buyuk{ min-height: 56px; padding: 0 26px; font-size: 18px; border-radius: var(--ml-radius); }
.m-btn.genis{ width: 100%; }
.m-btn.ikon{ width: var(--ml-dokun); padding: 0; }
.m-btn.ikon.buyuk{ width: 56px; }

/* ---------- FORM ALANLARI ---------- */
.m-input, .m-select, .m-textarea{
  width: 100%; min-height: var(--ml-dokun); padding: 0 14px; border: 1px solid var(--m-girdi-kenar); border-radius: var(--ml-radius);
  background: #fff; color: var(--ml-metin); font-size: 15px; outline: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.m-textarea{ padding: 10px 14px; min-height: 96px; resize: vertical; line-height: 1.4; }
.m-select{ appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230B5C9E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.m-input:focus, .m-select:focus, .m-textarea:focus{ border-color: var(--ml-vurgu-metin); box-shadow: 0 0 0 3px var(--ml-vurgu-acik); }
.m-input::placeholder, .m-textarea::placeholder{ color: var(--ml-soluk-2); }
.m-input:disabled, .m-select:disabled, .m-textarea:disabled, .m-input[readonly]{ background: var(--ml-zemin-2); color: var(--ml-soluk); }
.m-input.sayi{ text-align: right; font-variant-numeric: tabular-nums; }
.m-input.buyuk{ min-height: 56px; font-size: 22px; font-weight: 500; }
.m-alan{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m-alan > label{ font-size: 13px; font-weight: 500; color: var(--ml-metin); }
.m-alan > label .zorunlu{ color: var(--ml-tehlike); margin-left: 2px; }
.m-alan .m-ipucu{ font-size: 12.5px; color: var(--ml-soluk); }
.m-alan.is-hata .m-input, .m-alan.is-hata .m-select, .m-alan.is-hata .m-textarea{ border-color: var(--ml-tehlike); box-shadow: 0 0 0 3px rgba(198,40,40,.12); }
.m-alan .m-hata{ font-size: 13px; font-weight: 500; color: var(--ml-tehlike); }
.m-form{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.m-form.iki{ grid-template-columns: 1fr 1fr; }
.m-form.uc{ grid-template-columns: 1fr 1fr 1fr; }
.m-form .tam{ grid-column: 1 / -1; }

/* Hap arama (Menulux "Stok Ara") */
.m-ara{ display: flex; align-items: center; gap: 10px; min-height: var(--ml-dokun); width: min(420px, 100%); padding: 0 16px;
  border: 1px solid var(--m-girdi-kenar); border-radius: 999px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.m-ara:focus-within{ border-color: var(--ml-vurgu-metin); box-shadow: 0 0 0 3px var(--ml-vurgu-acik); }
.m-ara > i{ color: var(--ml-vurgu-metin); font-size: 15px; }
.m-ara input{ flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ml-metin); }
.m-ara input::placeholder{ color: var(--ml-soluk-2); }
.m-ara .m-ara-temizle{ border: 0; background: none; color: var(--ml-soluk-2); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.m-ara .m-ara-temizle:hover{ background: var(--ml-zemin); color: var(--ml-metin); }

/* ---------- KART ---------- */
.m-kart{ background: var(--ml-kart); border-radius: 14px; padding: 18px 20px; }
.m-kart > .m-kart-bas{ display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.m-kart > .m-kart-bas > i{ color: var(--ml-vurgu-metin); }
/* İstatistik kartı (Menulux Raporlar: gri ikon | renkli etiket / büyük değer) */
.m-stat{ display: flex; align-items: center; gap: 18px; min-height: 100px; padding: 18px 22px; background: var(--ml-kart); border-radius: 14px; }
.m-stat > i{ font-size: 36px; color: var(--ml-kart-cubuk); width: 44px; text-align: center; }
.m-stat .m-stat-etiket{ font-size: 15px; font-weight: 500; color: var(--ml-vurgu-metin); }
.m-stat .m-stat-deger{ font-size: 24px; font-weight: 600; color: var(--ml-metin); font-variant-numeric: tabular-nums; }
/* Ayar satırı (Menulux Ayarlar: başlık + açıklama | sağda değer/kontrol) */
.m-ayar-satir{ display: flex; align-items: center; gap: 20px; min-height: 84px; padding: 14px 0; border-bottom: 1px solid var(--ml-cizgi); }
.m-ayar-satir .m-ayar-metin{ flex: 1 1 auto; min-width: 0; }
.m-ayar-satir .m-ayar-metin b{ display: block; font-size: 17px; font-weight: 500; }
.m-ayar-satir .m-ayar-metin span{ display: block; font-size: 13.5px; color: var(--ml-soluk); }
.m-ayar-satir .m-ayar-kontrol{ flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

/* ---------- TABLO .m-tablo (Menulux sütun başlığı: vurgu renkli, bantsız; yapışkan) ---------- */
.m-tablo-kap{ position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--ml-kart); border-radius: 14px; }
.m-tablo{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.m-tablo thead th{
  position: sticky; top: 0; z-index: 1; background: var(--ml-kart); padding: 14px 16px 12px; text-align: left; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--ml-vurgu-metin); border-bottom: 1px solid var(--ml-cizgi);
}
.m-tablo td{ height: 52px; padding: 6px 16px; border-bottom: 1px solid var(--ml-cizgi); vertical-align: middle; color: var(--ml-metin); }
.m-tablo tbody tr:last-child td{ border-bottom: 0; }
.m-tablo :is(th, td).sayi{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-tablo :is(th, td).orta{ text-align: center; }
.m-tablo td.eylem{ text-align: right; white-space: nowrap; }
.m-tablo.secilebilir tbody tr{ cursor: pointer; }
.m-tablo tbody tr:hover td{ background: var(--ml-zemin-2); }
.m-tablo tbody tr.is-secili td{ background: var(--ml-vurgu-acik); }
.m-tablo tbody tr.is-secili td:first-child{ box-shadow: inset 4px 0 0 var(--ml-vurgu); }
.m-tablo tfoot td{ position: sticky; bottom: 0; background: var(--ml-zemin-2); font-weight: 600; border-top: 1px solid var(--ml-cizgi); border-bottom: 0; }
.m-tablo-kap > .m-bos{ position: absolute; inset: 52px 0 0; }

/* ---------- ÇİP / SEKME / ROZET / ANAHTAR ---------- */
.m-cipler{ display: flex; flex-wrap: wrap; gap: 8px; }
.m-cip{ display: inline-flex; align-items: center; gap: 8px; min-height: var(--ml-dokun); padding: 0 18px; border: 1px solid var(--ml-cizgi);
  border-radius: 999px; background: var(--ml-kart); color: var(--ml-metin); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.m-cip:hover{ border-color: #B8C9D9; }
.m-cip.is-aktif{ background: var(--ml-vurgu); border-color: var(--ml-vurgu); color: var(--ml-on-vurgu); }
.m-cip .m-cip-sayi{ min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--ml-zemin); font-size: 12px; font-weight: 600; text-align: center; }
.m-cip.is-aktif .m-cip-sayi{ background: rgba(0,0,0,.1); }

.m-sekmeler{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--ml-kart-cubuk); }
.m-sekme{ display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ml-soluk); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.m-sekme:hover{ color: var(--ml-metin); }
.m-sekme.is-aktif{ background: var(--ml-kart); color: var(--ml-vurgu-metin); box-shadow: var(--ml-golge); }

.m-rozet{ display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap;
  background: var(--ml-zemin); color: var(--ml-soluk); }
.m-rozet.ok{ background: rgba(46,157,91,.14); color: #1d6b3d; }
.m-rozet.vurgu{ background: var(--ml-vurgu); color: var(--ml-on-vurgu); }
.m-rozet.uyari{ background: #fff3d6; color: #8a5300; }
.m-rozet.tehlike{ background: #fde4e4; color: var(--ml-tehlike); }
.m-rozet.koyu{ background: var(--ml-koyu); color: #fff; }

.m-anahtar-satir{ display: inline-flex; align-items: center; gap: 12px; min-height: var(--ml-dokun); cursor: pointer; font-size: 15px; }
input[type="checkbox"].m-anahtar{
  -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 54px; height: 28px; margin: 0;
  border: 0; border-radius: 999px; background: #BCCBDA; cursor: pointer; transition: background .15s ease;
}
input[type="checkbox"].m-anahtar::before{ content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
input[type="checkbox"].m-anahtar:checked{ background: var(--ml-vurgu); }
input[type="checkbox"].m-anahtar:checked::before{ transform: translateX(26px); }
input[type="checkbox"].m-anahtar:disabled{ opacity: .5; cursor: not-allowed; }

/* ---------- BOŞ DURUM / YÜKLENİYOR ---------- */
.m-bos{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; padding: 32px 16px; text-align: center; color: var(--ml-soluk); }
.m-bos > i{ font-size: 56px; color: var(--ml-kart-cubuk); margin-bottom: 4px; }
.m-bos > b{ font-size: 24px; font-weight: 500; letter-spacing: .04em; color: var(--ml-vurgu-metin); }
.m-bos > span{ max-width: 460px; font-size: 15px; line-height: 1.5; }
.m-bos > .m-btn{ margin-top: 8px; }

.m-yukleniyor{ display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 120px; color: var(--ml-soluk); font-size: 15px; }
.m-yukleniyor::before{ content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ml-kart-cubuk); border-top-color: var(--ml-vurgu); animation: m-don .8s linear infinite; }
@keyframes m-don{ to{ transform: rotate(360deg); } }

/* ---------- MODAL .m-modal (Menulux Modal: %50 örtü, beyaz kutu 15px, yuvarlak kapat) ---------- */
.m-ortu{ position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.5); animation: m-belir .14s ease; }
@keyframes m-belir{ from{ opacity: 0; } }
.m-modal{ display: flex; flex-direction: column; width: min(var(--m-modal-w, 460px), 100%); max-height: calc(100vh - 48px);
  background: var(--ml-kart); border-radius: 15px; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: m-yuksel .16s ease; }
@keyframes m-yuksel{ from{ transform: translateY(10px); opacity: .6; } }
.m-modal-bas{ display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px 22px; }
.m-modal-bas > i{ color: var(--ml-vurgu-metin); font-size: 18px; }
.m-modal-bas h3{ flex: 1 1 auto; margin: 0; font-size: 19px; font-weight: 600; color: var(--ml-metin); }
.m-modal-kapat{ flex: 0 0 auto; width: var(--ml-dokun); height: var(--ml-dokun); border: 0; border-radius: 50%; background: var(--ml-zemin); color: var(--ml-soluk); font-size: 17px; cursor: pointer; }
.m-modal-kapat:hover{ background: var(--ml-cizgi); color: var(--ml-metin); }
.m-modal-govde{ flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 22px 18px; font-size: 15px; }
.m-modal-govde .m-soru{ font-size: 17px; line-height: 1.45; padding: 4px 0 6px; }
.m-modal-alt{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; }
.m-modal-alt .m-btn{ min-width: 128px; }
.m-modal-alt .m-btn.sol{ margin-right: auto; }

/* ---------- TOAST ---------- */
#m-toastlar{ position: fixed; left: 0; right: 0; bottom: calc(var(--ml-bosluk) + 18px); z-index: 9500; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.m-toast{ display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 48px)); padding: 14px 20px 14px 16px; border-left: 4px solid var(--ml-durum-ok);
  border-radius: var(--ml-radius); background: var(--ml-kart); box-shadow: var(--ml-golge-lg); font-size: 15px; font-weight: 500; color: var(--ml-metin);
  pointer-events: auto; animation: m-yuksel .18s ease; }
.m-toast > i{ color: var(--ml-durum-ok); font-size: 18px; }
.m-toast.hata{ border-left-color: var(--ml-tehlike); }
.m-toast.hata > i{ color: var(--ml-tehlike); }
.m-toast.cikis{ opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }

/* ---------- NUMPAD .m-numpad (büyük dokunmatik tuşlar) ---------- */
.m-numpad{ display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); grid-auto-rows: minmax(64px, auto); gap: 8px; width: 100%; max-width: 380px; }
.m-tus{ display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ml-cizgi); border-radius: var(--ml-radius); background: var(--ml-kart);
  color: var(--ml-metin); font-size: 24px; font-weight: 500; cursor: pointer; transition: background .08s, transform .06s; font-variant-numeric: tabular-nums; }
.m-tus:hover{ background: var(--ml-zemin-2); }
.m-tus:active{ transform: scale(.96); background: var(--ml-zemin); }
.m-tus.islev{ background: var(--ml-zemin-2); color: var(--ml-soluk); font-size: 17px; }
.m-tus.islev.sil{ color: var(--ml-tehlike); }
.m-tus.tamam{ background: var(--ml-vurgu); border-color: var(--ml-vurgu); color: var(--ml-on-vurgu); font-size: 18px; font-weight: 600; }
.m-numpad .tamam{ grid-row: span 2; }
.m-numpad .sifir{ grid-column: span 2; }
.m-numpad.koyu .m-tus{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.06); color: #fff; }
.m-numpad.koyu .m-tus.islev{ background: rgba(0,0,0,.22); color: #D3E8F6; }
.m-numpad.koyu .m-tus.tamam{ background: var(--ml-vurgu); color: var(--ml-on-vurgu); }

/* ---------- EKRAN KLAVYESİ .m-klavye (Türkçe Q) ---------- */
.m-klavye{ display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 12px; border-radius: var(--ml-radius-lg); background: var(--ml-kart-cubuk); }
.m-klavye-satir{ display: flex; gap: 7px; justify-content: center; }
.m-klavye .m-tus{ flex: 1 1 0; min-width: 0; height: 54px; font-size: 20px; border-radius: 10px; border-color: transparent; box-shadow: 0 1px 0 rgba(9,39,68,.12); }
.m-klavye .m-tus.islev{ flex: 1.5 1 0; font-size: 15px; }
.m-klavye .m-tus.bosluk{ flex: 6 1 0; }
.m-klavye .m-tus.tamam{ flex: 2 1 0; grid-row: auto; }
.m-klavye .m-tus.is-aktif{ background: var(--ml-koyu); color: #fff; }

/* ===== kaynak: kasapos/src/modern/kabuk.css (renkler Su paletine çevrildi) ===== */
/* FuLoop Market MODERN — KABUK: üst şerit (TopBar), ekran katmanı, çerçeve, ModuleShell, ana ekran (launcher),
   PIN kilidi ve yazdırma önizlemesi uyarlaması. Bileşenler: tema.css. */

#m-uygulama{ display: flex; flex-direction: column; height: 100vh; }

/* ---------- ÜST ŞERİT ---------- */
.m-serit{ flex: 0 0 var(--m-serit-h); height: var(--m-serit-h); display: flex; align-items: center; gap: 14px; padding: 0 16px 0 var(--ml-bosluk);
  color: #fff; background: var(--ml-serit); position: relative; z-index: 5; }
body.m-ana-acik .m-serit{ background: transparent; padding-left: clamp(18px, 2.5vw, 48px); padding-right: clamp(16px, 2.6vw, 52px); }
.m-geri{ flex: 0 0 auto; width: var(--ml-dokun); height: var(--ml-dokun); display: grid; place-items: center; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.12); color: #fff; font-size: 17px; cursor: pointer; }
.m-geri:hover{ background: rgba(255,255,255,.2); }
body.m-ana-acik .m-geri{ display: none; }
.m-logo{ flex: 0 0 auto; font-size: 27px; font-weight: 600; letter-spacing: .01em; line-height: 1; color: #fff; white-space: nowrap; cursor: default; }
.m-logo{ display: flex; align-items: center; gap: 4px; }
.m-logo-isaret{ height: 46px; width: 46px; margin: 0 -2px 0 -6px; object-fit: contain; }
.m-logo-ad{ font-weight: 700; }
.m-logo-ad em{ margin-left: 8px; font-style: normal; font-weight: 300; color: #7BCDF8; }
.m-serit-baslik{ min-width: 0; margin-left: clamp(16px, 3vw, 56px); font-size: 16px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m-ana-acik .m-serit-baslik{ text-transform: none; letter-spacing: .03em; font-weight: 400; font-size: 17px; }
.m-serit-sag{ margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 36px); }
/* Durum göstergesi (Menulux: ikon + başlık / altında küçük BÜYÜK HARF soluk) */
.m-durum{ display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; line-height: 1.15; padding: 4px 8px;
  border: 0; border-radius: 10px; background: transparent; color: #fff; font: inherit; text-align: left; min-height: var(--ml-dokun); }
button.m-durum{ cursor: pointer; }
button.m-durum:hover{ background: rgba(255,255,255,.1); }
.m-durum > i{ grid-row: 1; color: var(--ml-vurgu); font-size: 15px; }
.m-durum > b{ grid-row: 1; font-size: 15px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.m-durum > small{ grid-column: 2; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #A9CFE8; white-space: nowrap; }
.m-durum.kilit > i{ color: #fff; }
.m-serit-ikon{ width: var(--ml-dokun); height: var(--ml-dokun); display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255,255,255,.1);
  color: #fff; font-size: 16px; cursor: pointer; }
.m-serit-ikon:hover{ background: rgba(255,255,255,.2); }

/* ---------- EKRAN KATMANI ---------- */
#m-govde{ position: relative; flex: 1 1 auto; min-height: 0; }
.m-ekran{ position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.m-ekran.is-aktif{ display: flex; }

/* Çerçeve: koyu zeminde açık içerikli yuvarlak alan (Menulux ModuleShell çerçevesi) */
.m-cerceve{ flex: 1 1 auto; min-height: 0; display: flex; margin: 0 var(--ml-bosluk) var(--ml-bosluk); border-radius: var(--ml-radius-lg); overflow: hidden; background: var(--ml-zemin); }

/* ---------- MODULE SHELL ---------- */
.m-modul-menu{ flex: 0 0 var(--m-modul-w); width: var(--m-modul-w); display: flex; flex-direction: column; gap: 6px; padding: 64px 0 0;
  background: var(--ml-ray); color: #fff; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.m-modul-menu::-webkit-scrollbar{ display: none; }
.m-modul-grup{ margin: 12px 12px 2px 34px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.m-modul-oge{ position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; min-height: 48px; margin: 0 0 0 28px; padding: 0 14px 0 18px;
  border: 0; border-radius: var(--ml-hap) 0 0 var(--ml-hap); background: transparent; color: #fff; font-size: 17px; font-weight: 500; line-height: 1.2;
  text-align: left; cursor: pointer; }
.m-modul-oge > i{ flex: 0 0 20px; width: 20px; font-size: 16px; text-align: center; }
.m-modul-oge > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-modul-oge > .m-rozet{ margin-left: auto; }
.m-modul-oge:hover{ background: rgba(255,255,255,.08); }
.m-modul-oge.is-aktif{ background: var(--ml-zemin); color: var(--ml-vurgu-metin); }
/* Seçili hapın içbükey köşeleri (içerik zeminiyle birleşir) */
.m-modul-oge.is-aktif::before, .m-modul-oge.is-aktif::after{ content: ""; position: absolute; right: 0; width: 18px; height: 18px; pointer-events: none; }
.m-modul-oge.is-aktif::before{ top: -18px; background: radial-gradient(circle at 0 0, transparent 18px, var(--ml-zemin) 18.5px); }
.m-modul-oge.is-aktif::after{ bottom: -18px; background: radial-gradient(circle at 0 100%, transparent 18px, var(--ml-zemin) 18.5px); }
.m-modul-alt{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 0 22px 0 34px;
  border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; }
.m-modul-alt:hover{ background: rgba(255,255,255,.18); }
.m-modul-icerik{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 30px 36px 24px; background: var(--ml-zemin); }
/* İçerik araç satırı: [BÖLÜM] [hap arama] … [sağ eylemler] */
.m-arac{ flex: 0 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.m-arac > .m-bolum{ min-width: 120px; }
.m-arac-sag{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* İçerik alt eylem çubuğu (sağ altta birincil eylem) */
.m-icerik-alt{ flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 16px; }
.m-icerik-alt .sol{ margin-right: auto; }

/* ---------- ANA EKRAN (launcher) ---------- */
/* Açık zemin (kullanıcı: "menü kısmı çok kırmızı"): turuncu yalnız şerit, ikonlar ve Satış kutusunda */
body.m-ana-acik{
  --m-ikon-acik: linear-gradient(160deg, #7BCDF8 0%, #1479BD 55%, #0B5C9E 100%);
  background:
    radial-gradient(ellipse 40% 45% at 18% 12%, rgba(123,205,248,.20) 0%, rgba(123,205,248,0) 100%),
    var(--ml-zemin);
}
body.m-ana-acik .m-serit{ background: var(--ml-serit); }
.m-ana{ --t: min(9.4vw, 17.5vh); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; color: var(--ml-metin);
  padding: 0 clamp(16px, 2.6vw, 52px) clamp(10px, 2.2vh, 28px) clamp(18px, 2.5vw, 48px); }
.m-ana-govde{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 64px);
  align-items: center; padding: 0 clamp(0px, 2.6vw, 56px) 0 clamp(0px, 3.4vw, 72px); }
.m-ana-sol{ min-width: 0; max-width: 440px; }
.m-ana-tarih{ font-size: clamp(15px, 1.15vw, 22px); font-weight: 400; opacity: .9; padding-left: 4px; }
.m-ana-saat{ font-size: clamp(76px, 7.6vw, 150px); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; margin: 0 0 clamp(18px, 4vh, 48px); white-space: nowrap; }
.m-ana-bolum{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px 6px; font-size: clamp(12px, .85vw, 15px); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.m-ana-bolum i{ color: var(--ml-vurgu); letter-spacing: 0; }
.m-ozet{ display: flex; flex-direction: column; gap: 10px; }
.m-ozet-kart{ display: flex; align-items: center; gap: 16px; min-height: clamp(54px, 6.4vh, 66px); padding: 8px 18px; border-radius: var(--ml-radius); background: var(--ml-kart); border: 1px solid var(--ml-cizgi); box-shadow: var(--ml-golge); }
.m-ozet-kart > i{ flex: 0 0 26px; font-size: 22px; text-align: center; background: var(--m-ikon-acik, var(--m-ikon-degrade)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.m-ozet-kart > div{ min-width: 0; line-height: 1.2; }
.m-ozet-kart small{ display: block; font-size: 13px; letter-spacing: .04em; color: var(--ml-soluk); }
.m-ozet-kart b{ display: block; font-size: clamp(17px, 1.3vw, 22px); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ozet-kart em{ margin-left: auto; font-style: normal; font-size: 13px; color: var(--ml-soluk); white-space: nowrap; }

.m-izgara{ display: grid; grid-template-columns: repeat(5, var(--t)); gap: calc(var(--t) * .2) calc(var(--t) * .2); align-content: center; }
.m-kutu{ position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--t) * .08); padding: 0; border: 0; background: none;
  color: var(--ml-metin); font: inherit; cursor: pointer; }
.m-kutu-kart{ position: relative; width: var(--t); aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: calc(var(--t) * .14);
  background: var(--ml-kart); border: 1px solid var(--ml-cizgi); box-shadow: var(--ml-golge); transition: background .15s ease, transform .1s ease, box-shadow .15s ease; }
.m-kutu-kart > i{ font-size: calc(var(--t) * .42); line-height: 1; background: var(--m-ikon-acik, var(--m-ikon-degrade)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.m-kutu:hover .m-kutu-kart{ background: var(--ml-zemin-2); box-shadow: var(--ml-golge-lg); }
.m-kutu:active .m-kutu-kart{ transform: scale(.97); }
.m-kutu-ad{ font-size: clamp(14px, calc(var(--t) * .118), 22px); font-weight: 400; letter-spacing: .05em; white-space: nowrap; }
.m-kutu-rozet{ position: absolute; top: calc(var(--t) * .08); right: calc(var(--t) * .08); min-width: calc(var(--t) * .17); padding: 2px 8px; border-radius: 999px;
  background: var(--ml-tehlike); color: #fff; font-style: normal; font-size: clamp(12px, calc(var(--t) * .095), 17px); font-weight: 600; line-height: 1.35; text-align: center;
  box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.m-kutu-rozet.uyari{ background: #e09b1a; color: #0F2236; }
.m-kutu-kilit{ position: absolute; top: calc(var(--t) * .09); left: calc(var(--t) * .1); font-size: calc(var(--t) * .09); opacity: .55; -webkit-text-fill-color: var(--ml-soluk); background: none !important; }
/* Geniş birincil kutu (Satış): 2 sütun, turuncu dolgu */
.m-kutu.genis{ grid-column: span 2; }
.m-kutu.genis .m-kutu-kart{ width: 100%; aspect-ratio: auto; height: var(--t); display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--t) * .16);
  padding: 0 calc(var(--t) * .2); background: linear-gradient(135deg, #1479BD 0%, #0F68AE 50%, #0B5C9E 100%); border: 0; color: #fff; text-align: left; }
.m-kutu.genis:hover .m-kutu-kart{ background: linear-gradient(135deg, #1A82C6 0%, #1170B5 50%, #0A5A99 100%); }
.m-kutu.genis .m-kutu-kart > i{ background: none; -webkit-text-fill-color: #fff; color: #fff; font-size: calc(var(--t) * .4); }
.m-kutu.genis .m-kutu-kart b{ display: block; font-size: calc(var(--t) * .2); font-weight: 600; line-height: 1.05; }
.m-kutu.genis .m-kutu-kart small{ display: block; margin-top: 4px; font-size: calc(var(--t) * .085); font-weight: 500; letter-spacing: .04em; opacity: .75; }
.m-kutu.genis .m-kutu-ad{ visibility: hidden; }

.m-ana-alt{ flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 52px; padding: 0 clamp(0px, 2.6vw, 56px) 0 clamp(0px, 3.4vw, 72px); }
.m-ana-ipucu{ font-size: clamp(13px, .95vw, 16px); color: var(--ml-metin); opacity: .9; }
.m-ana-ipucu i{ color: var(--ml-vurgu); margin-right: 6px; }
.m-ana-urun{ font-size: clamp(12px, .85vw, 15px); font-weight: 500; color: var(--ml-soluk); opacity: .85; }
/* Açık zeminde alt haplar: beyaz kart, koyu yazı, turuncu ikon (Kapat kırmızı kalır) */
body.m-ana-acik .m-hap:not(.tehlike){ background: var(--ml-kart); color: var(--ml-metin); border: 1px solid var(--ml-cizgi); box-shadow: var(--ml-golge); }
body.m-ana-acik .m-hap:not(.tehlike) > i{ color: var(--ml-vurgu); }
body.m-ana-acik .m-hap:not(.tehlike):hover{ background: var(--ml-zemin-2); }
.m-ana-eylem{ justify-self: end; display: flex; gap: clamp(8px, .7vw, 14px); }
.m-hap{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: max(var(--ml-dokun), 3vw); padding: 0 clamp(14px, 1.2vw, 24px);
  border: 0; border-radius: 10px; background: var(--m-hap-degrade); color: #fff; font: inherit; font-size: clamp(14px, 1vw, 17px); font-weight: 400; letter-spacing: .02em;
  white-space: nowrap; cursor: pointer; }
.m-hap > i{ order: 2; font-size: 1.3em; }
.m-hap:hover{ background: var(--m-hap-degrade-ust); }
.m-hap.tehlike{ background: linear-gradient(132deg, #b53a3a 0%, #8f2525 100%); }

/* Küçük kasa ekranı (≤1400 genişlik): kutucuk ve sol sütun sıkılaşır */
@media (max-width: 1400px){
  .m-ana{ --t: min(9.6vw, 17vh); }
  .m-ana-govde{ padding-left: 0; padding-right: 0; }
  .m-ana-alt{ padding-left: 0; padding-right: 0; }
  .m-modul-icerik{ padding: 24px 26px 20px; }
  .m-modul-oge{ font-size: 16px; margin-left: 20px; }
}

/* ---------- PIN KİLİDİ (moduller/kilit.js) — modern tema uyarlaması ---------- */
body.m-modern #kp-kilit{ background: radial-gradient(ellipse 50% 55% at 50% 30%, rgba(123,205,248,.22) 0%, rgba(123,205,248,0) 100%), var(--ml-zemin); font-family: var(--ml-font); }
body.m-modern #kp-kilit .kl-kart{ max-width: 420px; border: 0; border-radius: var(--ml-radius-lg); padding: 34px 30px 30px; box-shadow: var(--ml-golge-lg); }
body.m-modern #kp-kilit .kl-logo{ font-size: 32px; }
body.m-modern #kp-kilit .kl-noktalar span.dolu{ background: var(--ml-vurgu); border-color: var(--ml-vurgu); }
body.m-modern #kp-kilit .kl-tus button{ min-height: 60px; border-radius: var(--ml-radius); border-color: var(--ml-cizgi); font-size: 22px; font-weight: 500; }
body.m-modern #kp-kilit .kl-tus button:hover{ background: var(--ml-zemin-2); }
body.m-modern #kp-kilit .kl-giris{ min-height: 52px; border-radius: var(--ml-radius); background: var(--ml-vurgu); color: var(--ml-on-vurgu); font-size: 17px; }

/* ---------- YAZDIRMA ÖNİZLEMESİ (yazdir) ---------- */
#kp-yazdir .m-modal{ --m-modal-w: 900px; height: calc(100vh - 48px); }
#kp-yazdir .sayfa{ background: #fff; color: #000; padding: 22px; border: 1px solid var(--ml-cizgi); border-radius: 8px; font: 14px Arial, sans-serif; user-select: text; }
#kp-yazdir .sayfa h2{ margin: 0 0 12px; font-size: 20px; }
#kp-yazdir .yz-tablo{ width: 100%; border-collapse: collapse; }
#kp-yazdir .yz-tablo :is(th, td){ border: 1px solid #ccc; padding: 4px 6px; text-align: left; }
#kp-yazdir .yz-tablo .num{ text-align: right; }
@media print{
  body.yazdiriliyor{ background: #fff !important; overflow: visible; }
  body.yazdiriliyor > *:not(#kp-yazdir){ display: none !important; }
  body.yazdiriliyor #kp-yazdir{ position: static; background: #fff; padding: 0; display: block; }
  body.yazdiriliyor #kp-yazdir .m-modal{ box-shadow: none; height: auto; max-height: none; width: auto; }
  body.yazdiriliyor #kp-yazdir :is(.m-modal-bas, .m-modal-alt){ display: none; }
  body.yazdiriliyor #kp-yazdir .sayfa{ border: 0; padding: 0; }
}

/* ===== kaynak: kasapos/src/modern/ekranlar/satis.css (renkler Su paletine çevrildi) ===== */
/* KasaPOS MODERN — SATIŞ ekranı. POSSTART'ın bölge/iş akışı (sol hızlı işlemler | göstergeler + sepet + toplam | tuş takımı + ödeme | ürün kutucukları),
   FuLoop modern dili: açık nötr zemin, beyaz kartlar (ince çizgi + hafif gölge), koyu metin; turuncu yalnız vurgu (NAKİT, KAYDET, seçili satır, aktif çip, fiyat metni).
   Yalnız .m-ekran[data-ekran="satis"] altında (modal gövdeleri body altında olduğundan .sa-* modal sınıfları global). */

.m-ekran[data-ekran="satis"] .m-cerceve{ background: var(--ml-zemin); }
.m-ekran[data-ekran="satis"] .sa-kok{ flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; }

/* ortak kart yüzeyi */
.m-ekran[data-ekran="satis"] :is(.sa-ustbar, .sa-gost, .sa-tablo, .sa-islem, .sa-toplam-kap, .sa-urun, .sa-tus, .sa-sol-oge, .sa-eylem.beyaz){
  background: var(--ml-kart); border: 1px solid var(--ml-cizgi); box-shadow: var(--ml-golge); }

/* ---------- ÜST ÇUBUK: kasiyer + müşteri ---------- */
.m-ekran[data-ekran="satis"] .sa-ustbar{ flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px 4px 6px; border-radius: var(--ml-radius-lg); color: var(--ml-metin); }
.m-ekran[data-ekran="satis"] .sa-kasiyer{ display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; min-height: var(--ml-dokun); border-radius: var(--ml-radius); background: var(--ml-zemin); font-size: 16px; letter-spacing: .04em; white-space: nowrap; }
.m-ekran[data-ekran="satis"] .sa-kasiyer i{ color: var(--ml-soluk); }
.m-ekran[data-ekran="satis"] .sa-kasiyer b{ font-weight: 500; }
.m-ekran[data-ekran="satis"] .sa-musteri{ display: inline-flex; align-items: center; gap: 12px; min-height: var(--ml-dokun); max-width: 46%; padding: 0 18px; border: 1px solid var(--m-girdi-kenar); border-radius: var(--ml-radius); background: var(--ml-kart);
  color: var(--ml-metin); font-size: clamp(16px, 2.3vh, 22px); font-weight: 600; letter-spacing: .03em; cursor: pointer; }
.m-ekran[data-ekran="satis"] .sa-musteri > i{ color: var(--ml-vurgu-metin); }
.m-ekran[data-ekran="satis"] .sa-musteri span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-ekran[data-ekran="satis"] .sa-musteri:hover{ background: var(--ml-zemin-2); }
.m-ekran[data-ekran="satis"] .sa-musteri.secili{ background: var(--ml-vurgu-acik); border-color: var(--ml-vurgu); }
.m-ekran[data-ekran="satis"] .sa-musteri-bilgi{ display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; font-size: 14px; color: var(--ml-soluk); font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-musteri-bilgi.uyari{ color: var(--ml-tehlike); }
.m-ekran[data-ekran="satis"] .sa-mod{ margin-left: auto; padding: 6px 14px; border-radius: 8px; background: var(--ml-tehlike); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }

.m-ekran[data-ekran="satis"] .sa-govde{ flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }

/* ---------- 1) SOL HIZLI İŞLEM SÜTUNU ---------- */
.m-ekran[data-ekran="satis"] .sa-sol{ flex: 0 0 clamp(64px, 5%, 100px); display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.m-ekran[data-ekran="satis"] .sa-sol-oge{ position: relative; flex: 1 1 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px;
  border-radius: var(--ml-radius-lg); color: var(--ml-metin); font-size: clamp(11px, 1.45vh, 13.5px); font-weight: 500; letter-spacing: .04em; line-height: 1.1; text-align: center; cursor: pointer;
  transition: background .15s ease, transform .1s ease; }
.m-ekran[data-ekran="satis"] .sa-sol-oge > i{ font-size: clamp(20px, 3.2vh, 30px); line-height: 1; color: var(--ml-koyu-2); }
.m-ekran[data-ekran="satis"] .sa-sol-oge:hover{ background: var(--ml-zemin-2); }
.m-ekran[data-ekran="satis"] .sa-sol-oge:active{ transform: scale(.96); }
.m-ekran[data-ekran="satis"] .sa-sol-oge.is-aktif{ background: var(--ml-vurgu-acik); border-color: var(--ml-vurgu); }
.m-ekran[data-ekran="satis"] .sa-sol-oge.buyuk{ flex: 1.35 1 0; background: var(--ml-vurgu); border-color: var(--ml-vurgu); color: var(--ml-on-vurgu); font-weight: 600; }
.m-ekran[data-ekran="satis"] .sa-sol-oge.buyuk > i{ color: var(--ml-on-vurgu); }
.m-ekran[data-ekran="satis"] .sa-sol-oge.buyuk:hover{ background: var(--ml-vurgu-hover); }
.m-ekran[data-ekran="satis"] .sa-ray-rozet{ position: absolute; top: 6px; right: 8px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--ml-koyu); color: #fff; font-style: normal; font-size: 12px; font-weight: 600; text-align: center; }

/* ---------- 2) GÖSTERGELER + SEPET + TOPLAM ---------- */
.m-ekran[data-ekran="satis"] .sa-orta1{ flex: 0 0 30%; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1vh, 10px); }
.m-ekran[data-ekran="satis"] .sa-gost-izgara{ flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1vh, 10px); }
.m-ekran[data-ekran="satis"] .sa-gost{ display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 14px 6px; border-radius: var(--ml-radius-lg); }
.m-ekran[data-ekran="satis"] .sa-etiket, .m-ekran[data-ekran="satis"] .sa-dara-kutu{ display: flex; align-items: center; justify-content: space-between; min-height: 22px; padding: 0; border: 0; background: none; color: var(--ml-soluk); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.m-ekran[data-ekran="satis"] .sa-dara-kutu{ cursor: pointer; font-family: inherit; }
.m-ekran[data-ekran="satis"] .sa-dara-yaz{ padding: 1px 8px; border-radius: 6px; background: var(--ml-zemin); color: var(--ml-soluk); font-size: 12.5px; }
.m-ekran[data-ekran="satis"] .sa-dara-yaz b{ font-weight: 600; color: var(--ml-metin); font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-kutu{ display: flex; align-items: center; justify-content: flex-end; min-height: clamp(40px, 6.4vh, 70px); padding: 0; }
.m-ekran[data-ekran="satis"] .sa-kutu b{ font-size: clamp(28px, 5vh, 52px); font-weight: 500; line-height: 1; color: var(--ml-metin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-ekran[data-ekran="satis"] .sa-urunkart{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-width: 0; padding: 8px 16px; border-radius: var(--ml-radius-lg); background: var(--ml-zemin-2); border: 1px solid var(--ml-cizgi); }
.m-ekran[data-ekran="satis"] .sa-urunkart b{ font-size: clamp(15px, 2.3vh, 24px); font-weight: 600; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-ekran[data-ekran="satis"] .sa-urunkart span{ font-size: clamp(14px, 2.1vh, 21px); font-weight: 600; color: var(--ml-vurgu-metin); font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-urunkart.logo{ align-items: center; }
.m-ekran[data-ekran="satis"] .sa-logo{ font-size: clamp(20px, 3.4vh, 36px); font-weight: 700; color: var(--ml-metin); }
.m-ekran[data-ekran="satis"] .sa-logo b{ font-weight: 300; color: var(--ml-vurgu-metin); }
.m-ekran[data-ekran="satis"] .sa-urunkart .sa-logo b{ display: inline; font-size: inherit; -webkit-line-clamp: unset; overflow: visible; }
.m-ekran[data-ekran="satis"] .sa-tarih-satir{ flex: 0 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px; color: var(--ml-soluk); font-size: 13px; font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-bugun{ white-space: nowrap; font-weight: 500; color: var(--ml-metin); }
.m-ekran[data-ekran="satis"] .sa-giris{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.m-ekran[data-ekran="satis"] .sa-in{ min-width: 0; min-height: clamp(44px, 6vh, 58px); padding: 0 14px; border: 1px solid var(--m-girdi-kenar); border-radius: var(--ml-radius); background: var(--ml-kart); color: var(--ml-metin); font-size: clamp(16px, 2.3vh, 21px); outline: none; font-family: inherit; }
.m-ekran[data-ekran="satis"] .sa-in:focus{ border-color: var(--ml-vurgu-metin); box-shadow: 0 0 0 3px var(--ml-vurgu-acik); }
.m-ekran[data-ekran="satis"] .sa-miktar{ flex: 0 0 20%; text-align: right; font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-barkod{ flex: 1 1 auto; }
.m-ekran[data-ekran="satis"] .sa-carpi{ font-size: clamp(20px, 3vh, 30px); font-weight: 600; color: var(--ml-soluk-2); }
.m-ekran[data-ekran="satis"] .sa-ara-btn{ flex: 0 0 clamp(44px, 6vh, 58px); min-height: clamp(44px, 6vh, 58px); border: 0; border-radius: var(--ml-radius); background: var(--ml-koyu); color: #fff; font-size: 18px; cursor: pointer; }
.m-ekran[data-ekran="satis"] .sa-ara-btn:hover{ background: var(--ml-koyu-aktif); }
.m-ekran[data-ekran="satis"] .sa-fiyatgor{ flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-radius: var(--ml-radius); background: var(--ml-koyu); color: #fff; font-size: 16px; }
.m-ekran[data-ekran="satis"] .sa-fiyatgor b{ font-size: 26px; font-weight: 600; color: #fff; }
.m-ekran[data-ekran="satis"] .sa-fiyatgor.yok{ background: var(--ml-tehlike); }

.m-ekran[data-ekran="satis"] .sa-tablo{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: var(--ml-radius-lg); overflow: hidden; }
.m-ekran[data-ekran="satis"] .sa-liste{ position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.m-ekran[data-ekran="satis"] .sa-liste > .m-bos{ min-height: 100%; padding: 12px; }
.m-ekran[data-ekran="satis"] .sa-liste > .m-bos > i{ font-size: 44px; }
.m-ekran[data-ekran="satis"] .sa-liste > .m-bos > b{ font-size: 19px; color: var(--ml-soluk); }
.m-ekran[data-ekran="satis"] .sa-satir{ display: grid; grid-template-columns: minmax(0, 1fr) auto 24%; align-items: center; gap: 10px; min-height: 60px; padding: 4px 14px; border-bottom: 1px solid var(--ml-cizgi); cursor: pointer; }
.m-ekran[data-ekran="satis"] .sa-satir:hover{ background: var(--ml-zemin-2); }
.m-ekran[data-ekran="satis"] .sa-satir.is-secili{ background: var(--ml-vurgu-acik); box-shadow: inset 4px 0 0 var(--ml-vurgu); }
.m-ekran[data-ekran="satis"] .sayi{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-ekran[data-ekran="satis"] .sa-ad{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-ekran[data-ekran="satis"] .sa-ad b{ font-size: 15.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-ekran[data-ekran="satis"] .sa-ad small{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--ml-vurgu-metin); font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-kamp{ display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: rgba(46,157,91,.14); color: #1d6b3d; font-size: 11.5px; font-weight: 600; }
.m-ekran[data-ekran="satis"] .sa-kamp.elle{ background: #fff3d6; color: #8a5300; }
.m-ekran[data-ekran="satis"] .sa-satir .tut{ font-size: 16.5px; font-weight: 600; color: var(--ml-vurgu-metin); }
.m-ekran[data-ekran="satis"] .sa-adet{ display: inline-flex; align-items: center; gap: 4px; }
.m-ekran[data-ekran="satis"] .sa-adet > span{ min-width: 46px; text-align: center; font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-ekran[data-ekran="satis"] .sa-adim{ width: var(--ml-dokun); height: var(--ml-dokun); border: 0; border-radius: 10px; background: var(--ml-zemin); color: var(--ml-metin); font-size: 14px; cursor: pointer; }
.m-ekran[data-ekran="satis"] .sa-adim:active{ background: var(--ml-kart-cubuk); }

.m-ekran[data-ekran="satis"] .sa-islem{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: var(--ml-radius); }
.m-ekran[data-ekran="satis"] .sa-islem-adet{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ml-soluk); }
.m-ekran[data-ekran="satis"] .sa-islem .m-btn.kucuk{ min-height: var(--ml-dokun); }

.m-ekran[data-ekran="satis"] .sa-toplam-kap{ flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: clamp(8px, 1.2vh, 14px) 16px; border-radius: var(--ml-radius-lg); }
.m-ekran[data-ekran="satis"] .sa-toplam-satir{ display: flex; align-items: center; gap: 10px; }
.m-ekran[data-ekran="satis"] .sa-toplam-sol{ flex: 0 0 auto; display: flex; flex-direction: column; color: var(--ml-metin); }
.m-ekran[data-ekran="satis"] .sa-toplam-etiket{ font-size: clamp(13px, 1.9vh, 18px); font-weight: 500; letter-spacing: .08em; }
.m-ekran[data-ekran="satis"] .sa-toplam-sol small{ font-size: 12.5px; color: var(--ml-soluk); }
.m-ekran[data-ekran="satis"] .sa-toplam-satir .sa-kutu{ flex: 1 1 auto; min-width: 0; min-height: clamp(44px, 7.6vh, 80px); }
.m-ekran[data-ekran="satis"] .sa-toplam-satir .sa-kutu b{ font-size: clamp(34px, 6.8vh, 72px); font-weight: 600; color: var(--ml-metin); }
.m-ekran[data-ekran="satis"].is-iade .sa-toplam-satir .sa-kutu b{ color: var(--ml-tehlike); }
.m-ekran[data-ekran="satis"] .sa-nakitpos{ display: flex; align-items: baseline; gap: 8px; padding-top: 6px; border-top: 1px solid var(--ml-cizgi); color: var(--ml-soluk); font-size: clamp(13px, 1.8vh, 16px); font-weight: 500; letter-spacing: .04em; }
.m-ekran[data-ekran="satis"] .sa-nakitpos b{ margin-right: 14px; color: var(--ml-metin); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 3) TUŞ TAKIMI + ÖDEME ---------- */
.m-ekran[data-ekran="satis"] .sa-orta2{ flex: 0 0 16%; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.m-ekran[data-ekran="satis"] .sa-tuslar{ flex: 1.55 1 0; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 7px; }
.m-ekran[data-ekran="satis"] .sa-tus{ min-height: 44px; border-radius: var(--ml-radius); color: var(--ml-metin); font-size: clamp(24px, 4.2vh, 44px); font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-tus:hover{ background: var(--ml-zemin-2); }
.m-ekran[data-ekran="satis"] .sa-tus:active{ background: var(--ml-zemin); transform: scale(.96); }
.m-ekran[data-ekran="satis"] .sa-tus[data-k="C"]{ background: #fde4e4; border-color: #f6c9c9; color: var(--ml-tehlike); }
.m-ekran[data-ekran="satis"] .sa-odeme-kol{ flex: 1.45 1 0; min-height: 0; display: grid; grid-template-rows: 1.35fr 1fr 1fr; gap: 7px; }
.m-ekran[data-ekran="satis"] .sa-mod-kol{ flex: .8 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px; }
.m-ekran[data-ekran="satis"] .sa-eylem{ min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 6px; border: 1px solid var(--ml-cizgi); border-radius: var(--ml-radius-lg);
  background: var(--ml-kart); color: var(--ml-metin); box-shadow: var(--ml-golge); font-size: clamp(14px, 2.2vh, 22px); font-weight: 600; letter-spacing: .04em; cursor: pointer; overflow: hidden; white-space: nowrap; transition: background .15s ease, transform .1s ease; }
.m-ekran[data-ekran="satis"] .sa-eylem > i{ font-size: 1.1em; color: var(--ml-koyu-2); }
.m-ekran[data-ekran="satis"] .sa-eylem:hover{ background: var(--ml-zemin-2); }
.m-ekran[data-ekran="satis"] .sa-eylem:active{ transform: scale(.97); }
.m-ekran[data-ekran="satis"] .sa-eylem.nakit{ background: var(--ml-vurgu); border-color: var(--ml-vurgu); color: var(--ml-on-vurgu); font-size: clamp(18px, 3vh, 30px); }
.m-ekran[data-ekran="satis"] .sa-eylem.nakit > i{ color: var(--ml-on-vurgu); }
.m-ekran[data-ekran="satis"] .sa-eylem.nakit:hover{ background: var(--ml-vurgu-hover); }
.m-ekran[data-ekran="satis"] #sa-pos{ background: var(--ml-koyu); border-color: var(--ml-koyu); color: #fff; }
.m-ekran[data-ekran="satis"] #sa-pos > i{ color: #fff; }
.m-ekran[data-ekran="satis"] #sa-pos:hover{ background: var(--ml-koyu-aktif); }
.m-ekran[data-ekran="satis"] #sa-veresiye{ border: 2px solid var(--ml-koyu); }
.m-ekran[data-ekran="satis"] .sa-mod-kol .sa-eylem{ flex-direction: column; gap: 3px; font-size: clamp(11px, 1.5vh, 13.5px); font-weight: 500; }
.m-ekran[data-ekran="satis"] .sa-mod-kol .sa-eylem > i{ font-size: clamp(16px, 2.4vh, 22px); }
.m-ekran[data-ekran="satis"] .sa-eylem.is-aktif{ background: var(--ml-vurgu-acik); border-color: var(--ml-vurgu); }
.m-ekran[data-ekran="satis"] .sa-eylem:disabled{ opacity: .4; cursor: not-allowed; }

/* ---------- 4) ÜRÜN KUTUCUKLARI ---------- */
.m-ekran[data-ekran="satis"] .sa-sag{ flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; gap: 10px; }
.m-ekran[data-ekran="satis"] .sa-urun-alan{ flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.m-ekran[data-ekran="satis"] .sa-sag-ust{ flex: 0 0 auto; display: flex; }
.m-ekran[data-ekran="satis"] .sa-sag-ust .m-ara{ width: 100%; }
.m-ekran[data-ekran="satis"] .sa-grup-satir{ flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.m-ekran[data-ekran="satis"] .sa-grup-satir::-webkit-scrollbar{ display: none; }
.m-ekran[data-ekran="satis"] .sa-grup{ flex: 0 0 auto; min-height: var(--ml-dokun); padding: 0 20px; border: 1px solid var(--ml-cizgi); border-radius: 999px; background: var(--ml-kart); color: var(--ml-metin); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.m-ekran[data-ekran="satis"] .sa-grup:hover{ border-color: #B8C9D9; }
.m-ekran[data-ekran="satis"] .sa-grup.is-aktif{ background: var(--ml-vurgu); border-color: var(--ml-vurgu); color: var(--ml-on-vurgu); font-weight: 600; }
.m-ekran[data-ekran="satis"] .sa-izgara{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 9px; }
.m-ekran[data-ekran="satis"] .sa-izgara > .m-bos{ grid-column: 1 / -1; grid-row: 1 / -1; }
.m-ekran[data-ekran="satis"] .sa-urun{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 0; padding: 6px 6px 8px; border-radius: var(--ml-radius-lg);
  color: var(--ml-metin); text-align: center; cursor: pointer; overflow: hidden; transition: border-color .15s ease, transform .1s ease; }
.m-ekran[data-ekran="satis"] .sa-urun:hover{ border-color: var(--ml-vurgu); }
.m-ekran[data-ekran="satis"] .sa-urun:active{ transform: scale(.97); background: var(--ml-vurgu-acik); }
.m-ekran[data-ekran="satis"] .sa-urun-simge{ flex: 0 0 auto; width: clamp(26px, 4.6vh, 48px); height: clamp(26px, 4.6vh, 48px); display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden;
  background: var(--ml-vurgu-acik); color: var(--ml-vurgu-metin); font-size: clamp(14px, 2.4vh, 24px); font-weight: 600; line-height: 1; }
.m-ekran[data-ekran="satis"] .sa-urun-simge img{ width: 100%; height: 100%; object-fit: cover; }
/* ürün görseli: kutucuğun üst kısmı, oran korunur (contain), beyaz zemin */
.m-ekran[data-ekran="satis"] .sa-urun.resimli{ justify-content: flex-start; }
.m-ekran[data-ekran="satis"] .sa-urun-resim{ flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--ml-radius); background: var(--ml-kart); }
.m-ekran[data-ekran="satis"] .sa-urun-resim img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.m-ekran[data-ekran="satis"] .sa-urunkart.resimli{ display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-content: center; align-items: center; justify-items: start; }
.m-ekran[data-ekran="satis"] .sa-urunkart-resim{ grid-row: 1 / 3; width: clamp(40px, 6vh, 64px); height: clamp(40px, 6vh, 64px); object-fit: contain; border-radius: var(--ml-radius); background: var(--ml-kart); }
.m-ekran[data-ekran="satis"] .sa-urun-ad{ flex: 0 0 auto; width: 100%; font-size: clamp(12.5px, 1.8vh, 16px); font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-ekran[data-ekran="satis"] .sa-urun-fiyat{ flex: 0 0 auto; font-size: clamp(12px, 1.7vh, 15px); font-weight: 600; color: var(--ml-vurgu-metin); font-variant-numeric: tabular-nums; }
.m-ekran[data-ekran="satis"] .sa-urun-fiyat small{ margin-left: 2px; font-size: 11px; font-weight: 500; color: var(--ml-soluk); }
.m-ekran[data-ekran="satis"] .sa-ayak{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; }
.m-ekran[data-ekran="satis"] .sa-sayfa{ font-size: 14px; color: var(--ml-soluk); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- MODALLAR (gövde body altında) ---------- */
.sa-sayisor{ display: flex; flex-direction: column; gap: 14px; align-items: center; }
.sa-sayisor .m-alan{ width: 100%; }
.sa-nakit-kap{ display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.sa-nakit-sol{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sa-nakit-top{ display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; color: var(--ml-soluk); }
.sa-nakit-top b{ font-size: 32px; font-weight: 600; color: var(--ml-metin); font-variant-numeric: tabular-nums; }
.sa-hizli-tutar{ display: flex; flex-wrap: wrap; gap: 8px; }
.sa-ust-kutu{ display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: var(--ml-radius); background: var(--ml-zemin-2); border: 1px solid var(--ml-cizgi); color: var(--ml-soluk); font-size: 17px; }
.sa-ust-kutu b{ font-size: 34px; font-weight: 600; color: var(--ml-vurgu-metin); font-variant-numeric: tabular-nums; }
.sa-ust-kutu.eksik b{ color: var(--ml-tehlike); }
.sa-nakit-kap .m-numpad{ max-width: 300px; }
.sa-m-govde{ display: flex; flex-direction: column; gap: 12px; }
.sa-m-arac{ display: flex; gap: 10px; align-items: center; }
.sa-m-arac .m-ara{ flex: 1 1 auto; width: auto; }
.sa-m-arac .m-input{ flex: 0 1 230px; }
.sa-m-tablo{ flex: none !important; max-height: 300px; border: 1px solid var(--ml-cizgi); }
.sa-m-tablo .m-tablo td{ height: 48px; }

@media (max-height: 800px){
  .sa-nakit-kap{ grid-template-columns: 1fr 280px; }
  .m-ekran[data-ekran="satis"] .sa-izgara{ grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .m-ekran[data-ekran="satis"] .sa-urun{ gap: 2px; padding: 4px 4px 6px; }
  .m-ekran[data-ekran="satis"] .sa-urun-simge{ width: 20px; height: 20px; font-size: 12px; }
  .m-ekran[data-ekran="satis"] .sa-urun-ad{ font-size: 12px; line-height: 1.15; }
}
/* görselli kutucukta ad tek satır: görsel alanı büyüsün */
.m-ekran[data-ekran="satis"] .sa-urun.resimli{ gap: 3px; padding-top: 5px; }
.m-ekran[data-ekran="satis"] .sa-urun.resimli .sa-urun-ad{ -webkit-line-clamp: 2; }
/* KATEGORİ KENAR ÇUBUĞU: ekranın en sağında dikey liste (ikon üstte, ad altta), dikey kaydırmalı */
.m-ekran[data-ekran="satis"] .sa-grup-satir,
.m-ekran[data-ekran="satis"] .sa-grup-satir.cok{ flex: 0 0 clamp(150px, 11.5vw, 220px); width: clamp(150px, 11.5vw, 220px); display: flex; flex-direction: column; gap: 7px;
  overflow-x: hidden; overflow-y: auto; padding: 8px; border-radius: var(--ml-radius-lg); background: var(--ml-kart); border: 1px solid var(--ml-cizgi);
  box-shadow: var(--ml-golge); scrollbar-width: none; touch-action: pan-y; }
.m-ekran[data-ekran="satis"] .sa-grup{ flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: clamp(62px, 8.4vh, 84px); padding: 6px 4px; border-radius: var(--ml-radius); border: 1px solid transparent; background: var(--ml-zemin-2);
  font-size: clamp(12px, 1.5vh, 14px); font-weight: 600; line-height: 1.15; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.m-ekran[data-ekran="satis"] .sa-grup > i{ font-size: clamp(18px, 2.6vh, 26px); color: var(--ml-vurgu-metin); }
.m-ekran[data-ekran="satis"] .sa-grup:hover{ border-color: var(--ml-vurgu); }
.m-ekran[data-ekran="satis"] .sa-grup.is-aktif{ background: var(--ml-vurgu); border-color: var(--ml-vurgu); color: var(--ml-on-vurgu); }
.m-ekran[data-ekran="satis"] .sa-grup.is-aktif > i{ color: var(--ml-on-vurgu); }
.m-ekran[data-ekran="satis"] .sa-urun-simge{ width: clamp(26px, 3.8vh, 40px); height: clamp(26px, 3.8vh, 40px); }

/* ===== kaynak: kasapos/src/modern/../moduller/kilit.css (renkler Su paletine çevrildi) ===== */
/* Açılış PIN kilidi — FuLoop "Vardiya Kilidi" ekranıyla aynı sade düzen */
#kp-kilit{position:fixed;inset:0;z-index:9000;background:#f5f6f8;display:none;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;font-family:system-ui,'Segoe UI',Arial,sans-serif;color:#111827}
#kp-kilit.acik{display:flex}
#kp-kilit .kl-kart{width:100%;max-width:400px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:32px 28px 28px;box-sizing:border-box}
#kp-kilit .kl-logo{text-align:center;font-size:28px;font-weight:600;letter-spacing:-.5px;margin-bottom:22px;color:#111827}
#kp-kilit .kl-logo{display:flex;align-items:center;justify-content:center;gap:2px;font-weight:700}
#kp-kilit .kl-logo em{margin-left:7px;font-style:normal;font-weight:300;color:#0B5C9E}
#kp-kilit .kl-isaret{width:46px;height:46px;margin:-6px 0 -6px -8px;object-fit:contain}
#kp-kilit .kl-baslik{text-align:center;font-size:1.15rem;font-weight:600;margin-bottom:6px}
#kp-kilit .kl-alt{text-align:center;color:#6b7280;font-size:.84rem;line-height:1.5;margin-bottom:22px}
#kp-kilit .kl-uyari{background:#fef3f2;color:#b42318;border:1px solid #fecdca;border-radius:6px;padding:.6rem .85rem;font-size:.84rem;margin-bottom:16px;text-align:center}
#kp-kilit .kl-noktalar{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
#kp-kilit .kl-noktalar span{width:12px;height:12px;border-radius:50%;border:1.5px solid #c9ccd2;box-sizing:border-box}
#kp-kilit .kl-noktalar span.dolu{background:#1479BD;border-color:#1479BD}
#kp-kilit .kl-tus{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#kp-kilit .kl-tus button{padding:14px 0;font-size:1.15rem;font-weight:600;border-radius:6px;border:1px solid #d9dbe0;background:#fff;color:#111827;cursor:pointer;font-family:inherit;touch-action:manipulation}
#kp-kilit .kl-tus button:hover{background:#f9fafb}
#kp-kilit .kl-tus button:active{background:#f3f4f6}
#kp-kilit .kl-tus .kl-temizle{color:#b42318;font-size:.82rem;font-weight:500}
#kp-kilit .kl-giris{margin-top:14px;width:100%;min-height:40px;border:0;border-radius:6px;background:#1479BD;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit}
#kp-kilit .kl-giris:disabled{opacity:.45;cursor:not-allowed}