/* ==========================================================================
   Adisyon tasarım sistemi — restoran ve bakkal programları için ortak
   Görsel dil: pembe → mor gradyan çerçeve, lavanta çalışma alanı, beyaz kartlar
   Bootstrap 5.3 üzerine tema katmanı. Sınıf öneki: sm- (reklam engelleyicilere takılmaz)
   ========================================================================== */

:root {
  --ad-primary: #e8185c;
  --ad-primary-rgb: 232, 24, 92;
  --ad-primary-dark: #c40f4b;
  --ad-primary-soft: #fde7ef;
  --ad-purple: #4a2a7a;
  --ad-purple-dark: #2b1b47;
  --ad-purple-rgb: 74, 42, 122;
  --ad-success: #3fa34d;
  --ad-success-2: #58b95e;
  --ad-danger: #e11d48;
  --ad-warning: #f39c32;
  --ad-info: #4f7be0;

  --ad-grad: linear-gradient(115deg, #ec1b5b 0%, #d01c66 22%, #9a2479 48%, #5d2a86 72%, #3b2566 100%);
  --ad-grad-side: linear-gradient(180deg, #d7195f 0%, #a8216f 38%, #6a2a85 72%, #4a2877 100%);
  --ad-grad-pink: linear-gradient(135deg, #ff4f85 0%, #e8185c 100%);
  --ad-grad-green: linear-gradient(135deg, #5cc162 0%, #3a9a45 100%);
  --ad-grad-blue: linear-gradient(135deg, #6d8ff0 0%, #4a6fd8 100%);
  --ad-grad-orange: linear-gradient(135deg, #f0b36b 0%, #d98a45 100%);

  --ad-bg: #efedf5;
  --ad-surface: #ffffff;
  --ad-surface-2: #f6f5fa;
  --ad-border: #e6e3ee;
  --ad-text: #2b2340;
  --ad-muted: #8a8599;

  --ad-side-w: 236px;
  --ad-top-h: 60px;
  --ad-rail-w: 76px;
  --ad-cats-w: 186px;

  --ad-radius: 14px;
  --ad-radius-sm: 10px;
  --ad-shadow: 0 1px 2px rgba(43, 35, 64, .04), 0 6px 18px rgba(43, 35, 64, .06);

  --bs-primary: var(--ad-primary);
  --bs-primary-rgb: var(--ad-primary-rgb);
  --bs-success: var(--ad-success);
  --bs-link-color: var(--ad-primary);
  --bs-link-color-rgb: var(--ad-primary-rgb);
  --bs-link-hover-color: var(--ad-primary-dark);
  --bs-body-font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --bs-body-bg: var(--ad-bg);
  --bs-body-color: var(--ad-text);
  --bs-border-color: var(--ad-border);
  --bs-border-radius: .65rem;
  --bs-border-radius-lg: .85rem;
}

[data-bs-theme="dark"] {
  --ad-bg: #1c1629;
  --ad-surface: #261e38;
  --ad-surface-2: #2d2442;
  --ad-border: #3a3052;
  --ad-text: #ece8f6;
  --ad-muted: #a79fbd;
  --ad-primary-soft: rgba(232, 24, 92, .18);
  --ad-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  --bs-body-bg: var(--ad-bg);
  --bs-body-color: var(--ad-text);
  --bs-border-color: var(--ad-border);
  --bs-secondary-bg: var(--ad-surface-2);
  --bs-tertiary-bg: var(--ad-surface-2);
}

html, body { height: 100%; }
body { background: var(--ad-bg); color: var(--ad-text); -webkit-font-smoothing: antialiased; font-size: .92rem; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6, .fw-bold { color: inherit; }
.text-muted, .text-secondary { color: var(--ad-muted) !important; }
.fw-600 { font-weight: 600; }
.fs-7 { font-size: .8125rem; }
.tabular { font-variant-numeric: tabular-nums; }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.text-pink { color: var(--ad-primary) !important; }
.text-purple { color: var(--ad-purple) !important; }
[data-bs-theme="dark"] .text-purple { color: #c9b6f2 !important; }

/* ---------------------------------------------------------------- butonlar */
.btn { font-weight: 600; border-radius: .65rem; letter-spacing: .01em; }
.btn-primary {
  --bs-btn-bg: var(--ad-primary); --bs-btn-border-color: var(--ad-primary);
  --bs-btn-hover-bg: var(--ad-primary-dark); --bs-btn-hover-border-color: var(--ad-primary-dark);
  --bs-btn-active-bg: var(--ad-primary-dark); --bs-btn-active-border-color: var(--ad-primary-dark);
  --bs-btn-disabled-bg: var(--ad-primary); --bs-btn-disabled-border-color: var(--ad-primary);
}
.btn-success {
  --bs-btn-bg: var(--ad-success); --bs-btn-border-color: var(--ad-success);
  --bs-btn-hover-bg: #34893f; --bs-btn-hover-border-color: #34893f;
  --bs-btn-active-bg: #34893f; --bs-btn-active-border-color: #34893f;
  background-image: var(--ad-grad-green); border: 0;
}
.btn-info { --bs-btn-bg: var(--ad-info); --bs-btn-border-color: var(--ad-info); --bs-btn-hover-bg: #3d62c8; --bs-btn-hover-border-color: #3d62c8; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; background-image: var(--ad-grad-blue); border: 0; }
.btn-outline-primary {
  --bs-btn-color: var(--ad-primary); --bs-btn-border-color: var(--ad-primary);
  --bs-btn-hover-bg: var(--ad-primary); --bs-btn-hover-border-color: var(--ad-primary);
  --bs-btn-active-bg: var(--ad-primary-dark); --bs-btn-active-border-color: var(--ad-primary-dark);
}
.btn-purple { background: var(--ad-purple); color: #fff; border: 0; }
.btn-purple:hover { background: var(--ad-purple-dark); color: #fff; }
.btn-soft { background: var(--ad-surface); border: 1px solid var(--ad-border); color: var(--ad-text); }
.btn-soft:hover { background: var(--ad-primary-soft); border-color: var(--ad-primary); color: var(--ad-primary); }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-lg { padding: .7rem 1.2rem; }
.btn-upper { text-transform: uppercase; letter-spacing: .03em; }
.form-control, .form-select { border-radius: .65rem; background-color: var(--ad-surface); border-color: var(--ad-border); }
.form-control:focus, .form-select:focus { border-color: var(--ad-primary); box-shadow: 0 0 0 .2rem rgba(var(--ad-primary-rgb), .15); }
.form-check-input:checked { background-color: var(--ad-primary); border-color: var(--ad-primary); }
.form-label { font-weight: 600; font-size: .82rem; margin-bottom: .35rem; color: var(--ad-muted); }
.input-group-text { background: var(--ad-surface-2); border-color: var(--ad-border); }
.text-primary { color: var(--ad-primary) !important; }
.bg-primary { background-color: var(--ad-primary) !important; }
.bg-primary-soft { background: var(--ad-primary-soft) !important; }

/* ---------------------------------------------------------------- uygulama çerçevesi */
body.sm-shell { background: var(--ad-grad) fixed; min-height: 100vh; }
[data-bs-theme="dark"] body.sm-shell { background: linear-gradient(115deg, #7a1038 0%, #5a1a55 45%, #2c1c4a 100%) fixed; }

.sm-top {
  height: var(--ad-top-h); display: flex; align-items: center; gap: .75rem; padding: 0 1rem; color: #fff; position: sticky; top: 0; z-index: 1020;
}
.sm-top-btn {
  width: 38px; height: 38px; border-radius: 11px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: inline-grid; place-items: center; font-size: 1.1rem; flex: 0 0 38px;
}
.sm-top-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.sm-brand { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 800; font-size: 1.12rem; letter-spacing: .02em; white-space: nowrap; }
.sm-brand:hover { color: #fff; }
.sm-brand em { font-family: "Segoe Script", "Brush Script MT", cursive; font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; opacity: .95; margin-left: .15rem; text-transform: none; }
.sm-brand-logo { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; color: #fff; font-size: 1.1rem; flex: 0 0 34px; }
.sm-top-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .25); }
.sm-top-title { font-weight: 600; font-size: .92rem; margin: 0; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.sm-top .btn-soft, .sm-top .btn-icon.btn-soft { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
.sm-top .btn-soft:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: transparent; }
.sm-top .btn-outline-danger { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .12); }
.sm-top .btn-outline-danger:hover { background: #fff; color: var(--ad-primary); }
.sm-top .btn-primary { background: #fff; color: var(--ad-primary); border-color: #fff; }
.sm-net { display: flex; align-items: center; gap: .45rem; line-height: 1.05; font-size: .78rem; font-weight: 600; }
.sm-net i { font-size: 1.05rem; color: #7cf0a1; }
.sm-net small { display: block; font-size: .62rem; opacity: .8; letter-spacing: .08em; font-weight: 600; }
.sm-net.off i { color: #ffd166; }
.sm-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: rgba(255, 255, 255, .9); }
.sm-user-chip { display: flex; align-items: center; gap: .5rem; padding: .2rem .7rem .2rem .2rem; border-radius: 999px; background: rgba(255, 255, 255, .14); cursor: pointer; color: #fff; }
.sm-user-chip:hover { background: rgba(255, 255, 255, .24); }
.sm-user-chip .u-ad { font-weight: 600; font-size: .82rem; line-height: 1.05; }
.sm-user-chip .u-alt { font-size: .6rem; letter-spacing: .1em; opacity: .8; text-transform: uppercase; }
.sm-avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ad-primary); display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: 0 0 32px; }
.sm-content .sm-avatar, .card .sm-avatar { background: var(--ad-grad-pink); color: #fff; }

/* çerçeve: yan menü + içerik */
.sm-frame {
  display: flex; margin: 0 .9rem .9rem; border-radius: 18px; overflow: hidden; height: calc(100vh - var(--ad-top-h) - .9rem); height: calc(100dvh - var(--ad-top-h) - .9rem);
  box-shadow: 0 20px 50px rgba(20, 8, 40, .25);
}
.sm-side { width: var(--ad-side-w); flex: 0 0 var(--ad-side-w); background: var(--ad-grad-side); color: #fff; display: flex; flex-direction: column; z-index: 1030; transition: width .2s, flex-basis .2s, transform .2s; }
.sm-nav { flex: 1; overflow-y: auto; padding: 1rem 0 1rem .8rem; scrollbar-width: none; }
.sm-nav::-webkit-scrollbar { display: none; }
.sm-nav-title { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .6); padding: 1rem .9rem .35rem; white-space: nowrap; font-weight: 600; }
.sm-nav a {
  display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border-radius: 14px 0 0 14px; color: rgba(255, 255, 255, .92);
  font-weight: 500; font-size: .88rem; white-space: nowrap; overflow: hidden; margin-bottom: 2px; position: relative;
}
.sm-nav a i { font-size: 1.1rem; width: 22px; text-align: center; flex: 0 0 22px; }
.sm-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sm-nav a.active { background: var(--ad-bg); color: var(--ad-primary); font-weight: 600; }
.sm-nav a.active::before, .sm-nav a.active::after { content: ""; position: absolute; right: 0; width: 18px; height: 18px; background: transparent; pointer-events: none; }
.sm-nav a.active::before { top: -18px; border-bottom-right-radius: 14px; box-shadow: 6px 6px 0 6px var(--ad-bg); }
.sm-nav a.active::after { bottom: -18px; border-top-right-radius: 14px; box-shadow: 6px -6px 0 6px var(--ad-bg); }
.sm-nav .badge { margin-left: auto; }
.sm-side-foot { padding: .8rem 1rem; font-size: .7rem; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; }
.sm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ad-bg); }
.sm-content { padding: 1.3rem 1.4rem; flex: 1; overflow-y: auto; background: var(--ad-bg); }

body.side-mini .sm-side { width: 78px; flex-basis: 78px; }
body.side-mini .sm-nav a span, body.side-mini .sm-nav-title, body.side-mini .sm-nav .badge, body.side-mini .sm-side-foot { display: none; }
body.side-mini .sm-nav a { justify-content: center; }

@media (max-width: 991.98px) {
  .sm-top { padding: 0 .6rem; gap: .5rem; }
  .sm-top-sep, .sm-net { display: none !important; }
  .sm-frame { margin: 0; border-radius: 16px 16px 0 0; height: calc(100dvh - var(--ad-top-h)); }
  .sm-side { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); width: 270px; border-radius: 0 18px 18px 0; }
  body.side-open .sm-side { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  body.side-open::after { content: ""; position: fixed; inset: 0; background: rgba(20, 8, 40, .5); z-index: 1025; }
  body.side-mini .sm-side { width: 270px; }
  body.side-mini .sm-nav a span, body.side-mini .sm-nav-title { display: initial; }
  .sm-content { padding: .9rem; }
  .sm-brand-text { display: none; }
  .sm-top-title { font-size: .8rem; letter-spacing: .03em; min-width: 0; flex: 1 1 auto; }
  .sm-top .ms-auto { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------- kartlar */
.card { border: 0; border-radius: var(--ad-radius); box-shadow: var(--ad-shadow); background: var(--ad-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--ad-border); padding: .95rem 1.15rem; font-weight: 600; color: var(--ad-primary); }
.card-body { padding: 1.15rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--ad-purple); }
[data-bs-theme="dark"] .page-head h1 { color: #e3d7ff; }
.page-head .sub { color: var(--ad-muted); font-size: .84rem; }

.stat { display: flex; gap: .9rem; align-items: center; padding: 1.05rem 1.15rem; }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 46px; }
.stat-label { font-size: .8rem; color: var(--ad-primary); font-weight: 500; }
.stat-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--ad-text); }
.bg-soft-primary { background: var(--ad-primary-soft); color: var(--ad-primary); }
.bg-soft-success { background: rgba(63, 163, 77, .13); color: var(--ad-success); }
.bg-soft-danger { background: rgba(225, 29, 72, .12); color: var(--ad-danger); }
.bg-soft-warning { background: rgba(243, 156, 50, .16); color: #c9771a; }
.bg-soft-info { background: rgba(79, 123, 224, .13); color: var(--ad-info); }
.bg-soft-secondary { background: rgba(138, 133, 153, .14); color: var(--ad-muted); }
.bg-soft-purple { background: rgba(var(--ad-purple-rgb), .12); color: var(--ad-purple); }

/* ---------------------------------------------------------------- tablolar */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem .95rem; border-color: var(--ad-border); vertical-align: middle; }
.table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ad-muted); font-weight: 600; background: var(--ad-surface-2); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--ad-primary-soft); }
.thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--ad-border); flex: 0 0 44px; }
.thumb-lg { width: 72px; height: 72px; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--ad-muted); }
.empty i { font-size: 2.6rem; display: block; margin-bottom: .6rem; opacity: .45; }

.badge { font-weight: 600; border-radius: 7px; padding: .38em .62em; }
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--ad-muted); }
.nav-pills .nav-link.active { background: var(--ad-primary); color: #fff; }
.pagination { --bs-pagination-active-bg: var(--ad-primary); --bs-pagination-active-border-color: var(--ad-primary); --bs-pagination-color: var(--ad-text); --bs-pagination-border-radius: .6rem; }
.modal-content { border-radius: 18px; border: 0; background: var(--ad-surface); }
.modal-header { border-bottom-color: var(--ad-border); }
.modal-title { color: var(--ad-purple); }
[data-bs-theme="dark"] .modal-title { color: #e3d7ff; }
.dropdown-menu { border-radius: .8rem; border: 0; box-shadow: 0 10px 30px rgba(43, 35, 64, .18); }
.alert { border: 0; border-radius: 12px; }

/* ---------------------------------------------------------------- giriş ekranı */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { background: var(--ad-grad); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 460px; height: 460px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.auth-hero::before { content: ""; position: absolute; left: -80px; top: 30%; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.auth-hero h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.2; }
.auth-hero .feat { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; position: relative; z-index: 1; }
.auth-hero .feat i { font-size: 1.25rem; background: rgba(255, 255, 255, .16); width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 42px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--ad-bg); }
.auth-box { width: 100%; max-width: 420px; background: var(--ad-surface); border-radius: 20px; padding: 2rem; box-shadow: var(--ad-shadow); }
.auth-box h3 { color: var(--ad-purple); }
[data-bs-theme="dark"] .auth-box h3 { color: #e3d7ff; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ad-surface-2); border-radius: 999px; padding: 4px; margin-bottom: 1.5rem; }
.auth-tabs a { text-align: center; padding: .6rem; border-radius: 999px; font-weight: 600; color: var(--ad-muted); }
.auth-tabs a.active { background: var(--ad-grad-pink); color: #fff; box-shadow: 0 4px 12px rgba(var(--ad-primary-rgb), .3); }

/* Merkezi hesapla giriş (telefon / e-posta / sosyal) */
.hesap-ayrac { display: flex; align-items: center; gap: .8rem; color: var(--ad-muted); font-size: .8rem; margin: 1rem 0; }
.hesap-ayrac::before, .hesap-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--ad-border); }
.hesap-sosyal { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.hesap-sosyal-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 48px; border-radius: 12px; border: 1px solid var(--ad-border); background: var(--ad-surface); font-weight: 600; font-size: .9rem; color: var(--ad-text); transition: border-color .15s, box-shadow .15s, transform .08s; }
.hesap-sosyal-btn:hover { border-color: rgba(var(--ad-primary-rgb), .45); box-shadow: 0 4px 14px rgba(43, 35, 64, .08); color: var(--ad-text); }
.hesap-sosyal-btn:active { transform: scale(.98); }
.hesap-sosyal-btn i { font-size: 1.15rem; }
.hesap-sosyal-btn.s-google i { color: #ea4335; }
.hesap-sosyal-btn.s-facebook i { color: #1877f2; }
.hesap-sosyal-btn.s-microsoft i { color: #00a4ef; }
.hesap-sosyal-btn.s-apple i { color: var(--ad-text); }
.personel-giris summary { cursor: pointer; color: var(--ad-muted); font-weight: 600; font-size: .88rem; text-align: center; list-style: none; padding: .5rem; border-radius: 10px; }
.personel-giris summary::-webkit-details-marker { display: none; }
.personel-giris summary:hover { background: var(--ad-surface-2); color: var(--ad-text); }
.personel-giris[open] summary { color: var(--ad-primary); }
.auth-box .sm-brand-logo { background: var(--ad-grad-pink); }
.auth-marka { display: flex; align-items: center; gap: .9rem; }
.auth-logo { height: 42px; width: auto; display: block; }
.auth-sistem { font-weight: 600; font-size: .95rem; opacity: .9; padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .35); line-height: 1.2; }
.auth-logo-renkli { height: 40px; width: auto; }
[data-bs-theme="dark"] .auth-logo-renkli { filter: brightness(1.15); }
@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; background: var(--ad-grad); }
  .auth-hero { display: none; }
  .auth-form { background: transparent; }
}

/* ---------------------------------------------------------------- POS ortak */
.pos-body { overflow: hidden; }
.sm-frame.pos-frame { background: var(--ad-bg); }
/* Kasa ekranlarında bilgi/hata mesajları çerçevenin yüksekliğini bozmasın: üstte yüzen kutu */
.pos-flash { position: fixed; top: calc(var(--ad-top-h) + .5rem); left: 50%; transform: translateX(-50%); z-index: 1600; width: min(620px, 92vw); padding: 0 !important; }
.pos-flash .alert { box-shadow: 0 12px 30px rgba(30, 12, 50, .25); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.numpad button { height: 56px; font-size: 1.35rem; font-weight: 600; border-radius: 12px; border: 1px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text); }
.numpad button:active { transform: scale(.97); background: var(--ad-primary-soft); }
.big-total { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ad-purple); }
[data-bs-theme="dark"] .big-total { color: #e3d7ff; }
.tile {
  border: 0; background: var(--ad-surface); border-radius: 12px; padding: .45rem .45rem .6rem; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .2rem; user-select: none; transition: transform .08s, box-shadow .15s; box-shadow: 0 1px 3px rgba(43, 35, 64, .07);
}
.tile:hover { box-shadow: 0 8px 20px rgba(var(--ad-primary-rgb), .16); }
.tile:active { transform: scale(.97); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 9px; background: #fff; }
.tile .t-name { font-size: .78rem; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; padding: 0 .2rem; }
.tile .t-price { font-weight: 700; color: var(--ad-primary); font-variant-numeric: tabular-nums; padding: 0 .2rem; font-size: .88rem; }

/* ================================================================ Menulux tarzı kasa bileşenleri (mx-)
   <div class="mx-pos">
     <nav class="mx-rail">…işlem butonları…</nav>
     <section class="mx-panel">başlık / satırlar / alt toplam</section>
     <section class="mx-center">yol + arama / kart ızgarası</section>
     <nav class="mx-cats">kategoriler</nav>
   </div> */
/* sipariş/sepet paneli geniş ekranda orantılı büyür (Menulux ≈ %28) */
:root { --ad-panel-w: clamp(300px, 26vw, 520px); }
.mx-pos { display: grid; grid-template-columns: var(--ad-rail-w) var(--ad-panel-w) minmax(0, 1fr) var(--ad-cats-w); height: 100%; min-height: 0; }
.mx-pos.no-rail { grid-template-columns: var(--ad-panel-w) minmax(0, 1fr) var(--ad-cats-w); }
.mx-pos.no-cats { grid-template-columns: var(--ad-rail-w) var(--ad-panel-w) minmax(0, 1fr); }

/* kategori rozeti: <span class="badge kat-rozet" style="--kc:#e8185c">Ad</span> — koyu temada da okunur */
.kat-rozet { background: color-mix(in srgb, var(--kc, #8a8599) 14%, transparent); color: var(--kc, #8a8599); }
[data-bs-theme="dark"] .kat-rozet { background: color-mix(in srgb, var(--kc, #8a8599) 45%, #1c1629); color: #fff; }

.mx-rail { background: var(--ad-grad-side); display: flex; flex-direction: column; padding: .5rem 0; overflow-y: auto; scrollbar-width: none; }
.mx-rail::-webkit-scrollbar { display: none; }
.mx-rail > a, .mx-rail > button {
  border: 0; background: transparent; color: #fff; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .7rem .2rem; font-size: .68rem; font-weight: 600;
  position: relative; text-align: center; line-height: 1.1; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mx-rail > a i, .mx-rail > button i { font-size: 1.25rem; }
.mx-rail > a:hover, .mx-rail > button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.mx-rail > .on { background: rgba(255, 255, 255, .22); }
.mx-rail > [disabled] { opacity: .45; }
.mx-rail .kbd { font-size: .55rem; opacity: .6; font-weight: 600; }
.mx-rail .badge { position: absolute; top: 6px; right: 10px; background: #fff !important; color: var(--ad-primary); font-size: .6rem; }

.mx-panel { background: var(--ad-surface); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ad-border); }
.mx-panel-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem .8rem; border-bottom: 2px solid var(--ad-border); }
.mx-panel-head .ttl { color: var(--ad-primary); font-weight: 600; font-size: .98rem; text-transform: none; }
.mx-panel-head .ttl.upper { text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
.mx-num { min-width: 24px; height: 24px; padding: 0 .4rem; border-radius: 999px; background: var(--ad-primary); color: #fff; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; }
.mx-pill-btn { background: var(--ad-primary); color: #fff; border: 0; border-radius: 8px; padding: .35rem .7rem; font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.mx-pill-btn:hover { background: var(--ad-primary-dark); color: #fff; }
.mx-lines { flex: 1; overflow-y: auto; padding: 0 1.1rem; }
.mx-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--ad-border); cursor: pointer; }
.mx-line .q { color: var(--ad-primary); font-weight: 700; font-size: .92rem; min-width: 1.8em; font-variant-numeric: tabular-nums; }
.mx-line .n { font-weight: 500; font-size: .92rem; line-height: 1.25; min-width: 0; }
.mx-line .n small { display: block; color: var(--ad-muted); font-size: .72rem; font-weight: 400; }
.mx-line .p { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-line.sel { background: linear-gradient(90deg, var(--ad-primary-soft), transparent); margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; box-shadow: inset 3px 0 0 var(--ad-primary); }
.mx-line-tools { grid-column: 1 / -1; display: none; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mx-line.sel .mx-line-tools { display: flex; }
.mx-line-tools button { border: 1px solid var(--ad-border); background: var(--ad-surface); border-radius: 9px; height: 34px; min-width: 34px; padding: 0 .55rem; font-weight: 600; color: var(--ad-text); font-size: .8rem; }
.mx-line-tools button:hover { border-color: var(--ad-primary); color: var(--ad-primary); }
.mx-line-tools .mx-qty-val { min-width: 52px; text-align: center; font-weight: 700; }
.mx-panel-foot { border-top: 2px solid var(--ad-border); padding: .9rem 1.1rem 1rem; }
.mx-total-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.mx-total-row .lbl { color: var(--ad-purple); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
[data-bs-theme="dark"] .mx-total-row .lbl { color: #cdbdf3; }
.mx-total { font-size: 1.85rem; font-weight: 700; color: var(--ad-purple); font-variant-numeric: tabular-nums; line-height: 1; }
[data-bs-theme="dark"] .mx-total { color: #e3d7ff; }
.mx-btn-pay { background: var(--ad-grad-green); color: #fff; border: 0; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .85rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; box-shadow: 0 6px 16px rgba(63, 163, 77, .3); }
.mx-btn-pay:hover { filter: brightness(1.05); color: #fff; }
.mx-btn-pay:disabled { opacity: .5; box-shadow: none; }
.mx-btn-pink { background: var(--ad-grad-pink); color: #fff; border: 0; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .85rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; box-shadow: 0 6px 16px rgba(var(--ad-primary-rgb), .28); }
.mx-btn-pink:hover { filter: brightness(1.05); color: #fff; }
.mx-btn-blue { background: var(--ad-grad-blue); color: #fff; border: 0; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .85rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.mx-btn-blue:hover { filter: brightness(1.05); color: #fff; }
.mx-btn-outline { background: transparent; color: var(--ad-purple); border: 2px solid var(--ad-purple); border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .7rem 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.mx-btn-outline:hover { background: var(--ad-purple); color: #fff; }
[data-bs-theme="dark"] .mx-btn-outline { color: #d7c8fa; border-color: #8c74c5; }

.mx-center { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ad-bg); }
.mx-center-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem .6rem; }
.mx-crumb { color: var(--ad-muted); font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-crumb b { color: var(--ad-purple); font-weight: 600; }
[data-bs-theme="dark"] .mx-crumb b { color: #e3d7ff; }
.mx-crumb .sep { color: var(--ad-primary); margin: 0 .4rem; font-size: .7rem; }
.mx-search { margin-left: auto; position: relative; width: min(280px, 50%); }
.mx-search input { width: 100%; height: 38px; border-radius: 999px; border: 0; background: var(--ad-purple); color: #fff; padding: 0 1rem 0 2.3rem; font-size: .85rem; outline: none; }
.mx-search input::placeholder { color: rgba(255, 255, 255, .75); }
.mx-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #fff; }
.mx-grid { flex: 1; overflow-y: auto; padding: .3rem 1.1rem 1.1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .75rem; align-content: start; }
.mx-card {
  background: var(--ad-surface); border-radius: 12px; padding: .45rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; position: relative; border: 0; text-align: left;
  box-shadow: 0 1px 3px rgba(43, 35, 64, .07); transition: transform .08s, box-shadow .15s; user-select: none; color: var(--ad-text);
}
.mx-card:hover { box-shadow: 0 8px 22px rgba(var(--ad-primary-rgb), .17); }
.mx-card:active { transform: scale(.97); }
.mx-card .img { aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.mx-card .img img { width: 100%; height: 100%; object-fit: cover; }
.mx-card .img.contain img { object-fit: contain; }
.mx-card .img .harf { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: #fff; }
.mx-card .ad { font-size: .8rem; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; padding: 0 .2rem; }
.mx-card .fy { display: flex; align-items: center; justify-content: space-between; padding: 0 .2rem .1rem; }
.mx-card .fy b { color: var(--ad-primary); font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; }
.mx-card .fy i { color: var(--ad-primary); font-size: .85rem; }
.mx-card .img { position: relative; }
.mx-card.kapali { pointer-events: none; }
.mx-card.kapali .img::after { content: "Satışa Kapalı"; position: absolute; inset: 0; background: rgba(20, 12, 30, .72); color: #fff; display: grid; place-items: center; font-weight: 600; }

.mx-cats { background: linear-gradient(180deg, #34204f 0%, #2a1a42 100%); color: #fff; overflow-y: auto; padding: 1rem 0 1rem .9rem; scrollbar-width: none; display: flex; flex-direction: column; }
.mx-cats::-webkit-scrollbar { display: none; }
.mx-cats .ttl { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); text-align: center; padding: 0 .9rem .8rem 0; font-weight: 600; }
.mx-cats button, .mx-cats a {
  border: 0; background: transparent; color: #fff; text-transform: uppercase; font-weight: 600; font-size: .78rem; letter-spacing: .03em; padding: .8rem .8rem; text-align: center;
  border-radius: 999px 0 0 999px; margin-bottom: .2rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.mx-cats button:hover, .mx-cats a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mx-cats .active { background: #fff; color: var(--ad-purple-dark); margin-left: -1.6rem; padding-left: 1.6rem; box-shadow: -6px 4px 14px rgba(0, 0, 0, .18); }
.mx-cats .active:hover { background: #fff; color: var(--ad-purple-dark); }
.mx-cats .cnt { font-size: .62rem; opacity: .7; }

/* masa kartları */
.mx-masalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .85rem; align-content: start; }
.mx-masa {
  aspect-ratio: 1.05 / 1; border-radius: 13px; background: var(--ad-surface); position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: .9rem .6rem .6rem; box-shadow: 0 1px 3px rgba(43, 35, 64, .08); transition: transform .08s, box-shadow .15s; color: var(--ad-text); user-select: none; border: 0;
}
.mx-masa::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34px; height: 5px; border-radius: 99px; background: #d9d6e2; }
.mx-masa:hover { box-shadow: 0 8px 20px rgba(var(--ad-purple-rgb), .18); }
.mx-masa:active { transform: scale(.97); }
.mx-masa .m-ad { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.mx-masa .m-durum { color: var(--ad-muted); font-size: .78rem; }
.mx-masa .m-tutar { font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.mx-masa .m-alt { position: absolute; left: .6rem; right: .6rem; bottom: .45rem; display: flex; justify-content: space-between; font-size: .64rem; opacity: .9; }
.mx-masa .m-ust { position: absolute; left: .55rem; right: .55rem; top: .5rem; display: flex; justify-content: space-between; align-items: center; font-size: .66rem; }
.mx-masa .m-etiket { background: #fff; color: var(--ad-primary); border-radius: 999px; padding: .05rem .5rem; font-weight: 600; font-size: .64rem; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-masa.dolu { background: var(--ad-grad-pink); color: #fff; }
.mx-masa.hesap { background: var(--ad-grad-blue); color: #fff; }
.mx-masa.rezerve { background: var(--ad-grad-orange); color: #fff; }
.mx-masa.dolu::before, .mx-masa.hesap::before, .mx-masa.rezerve::before { background: rgba(255, 255, 255, .45); }
.mx-masa.dolu .m-durum, .mx-masa.hesap .m-durum, .mx-masa.rezerve .m-durum { color: rgba(255, 255, 255, .9); }
.mx-masa.sec { outline: 3px solid var(--ad-purple); outline-offset: 2px; }
a.mx-masa, a.mx-masa:hover { color: var(--ad-text); }
a.mx-masa.dolu, a.mx-masa.hesap, a.mx-masa.rezerve, a.mx-masa.dolu:hover, a.mx-masa.hesap:hover, a.mx-masa.rezerve:hover { color: #fff; }
.mx-btn-pink:disabled, .mx-btn-blue:disabled, .mx-btn-outline:disabled, .mx-btn-pink.disabled, .mx-btn-blue.disabled, .mx-btn-outline.disabled { opacity: .5; box-shadow: none; pointer-events: none; filter: grayscale(.2); }
/* iki kolon: sadece orta alan + sağ şerit (ör. mutfak) */
.mx-pos.only-center { grid-template-columns: minmax(0, 1fr) var(--ad-cats-w); }

/* segment (durum) seçici */
.mx-seg { display: inline-flex; background: var(--ad-surface-2); border-radius: 999px; padding: 4px; gap: 2px; }
.mx-seg button { border: 0; background: transparent; border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .82rem; color: var(--ad-muted); display: inline-flex; align-items: center; gap: .4rem; }
.mx-seg button.active { background: linear-gradient(135deg, #7fe0f0, #3fc1d8); color: #0e4b57; box-shadow: 0 3px 10px rgba(63, 193, 216, .35); }

.mx-tabs { display: flex; }
.mx-tabs button { flex: 1; border: 0; background: var(--ad-purple); color: rgba(255, 255, 255, .85); padding: .9rem 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.mx-tabs button:first-child { border-top-left-radius: 0; }
.mx-tabs button.active { background: var(--ad-surface); color: var(--ad-text); border-radius: 14px 14px 0 0; }
.mx-tabs .mx-num { background: var(--ad-primary); }
.mx-tabs button:not(.active) .mx-num { background: rgba(255, 255, 255, .25); }

.mx-durum { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .65rem; font-size: .7rem; font-weight: 600; background: rgba(63, 193, 216, .18); color: #18798a; }
.mx-durum.gri { background: rgba(138, 133, 153, .18); color: var(--ad-muted); }
.mx-durum.yesil { background: rgba(63, 163, 77, .16); color: var(--ad-success); }
.mx-durum.pembe { background: var(--ad-primary-soft); color: var(--ad-primary); }

@media (max-width: 1199.98px) {
  :root { --ad-cats-w: 150px; --ad-rail-w: 68px; }
  :root { --ad-panel-w: clamp(270px, 30vw, 320px); }
}
@media (max-width: 991.98px) {
  .pos-body { overflow: auto; }
  .sm-frame.pos-frame { height: auto; min-height: calc(100dvh - var(--ad-top-h)); overflow: visible; }
  .mx-pos, .mx-pos.no-rail, .mx-pos.no-cats { display: flex; flex-direction: column; height: auto; }
  .mx-rail { flex-direction: row; overflow-x: auto; padding: 0; order: 0; }
  .mx-rail > a, .mx-rail > button { flex: 0 0 auto; min-width: 72px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .1); }
  .mx-cats { flex-direction: row; overflow-x: auto; padding: .5rem; order: 1; gap: .3rem; }
  .mx-cats .ttl { display: none; }
  .mx-cats button, .mx-cats a { border-radius: 999px; white-space: nowrap; flex: 0 0 auto; padding: .55rem .9rem; margin: 0; }
  .mx-cats .active { margin: 0; padding-left: .9rem; box-shadow: none; }
  .mx-center { order: 2; }
  .mx-panel { order: 3; border-right: 0; }
  .mx-grid { overflow: visible; }
  .mx-lines { max-height: none; overflow: visible; }
}

/* ---------------------------------------------------------------- PIN ile personel seçimi */
.pin-kisiler { display: grid; gap: .5rem; max-height: 50vh; overflow-y: auto; }
.pin-kisiler button { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--ad-border); background: var(--ad-surface); border-radius: 12px; padding: .6rem .75rem; color: var(--ad-text); text-align: left; }
.pin-kisiler button:hover { border-color: var(--ad-primary); background: var(--ad-primary-soft); }
.pin-kisiler button.aktif { border-color: var(--ad-primary); box-shadow: inset 3px 0 0 var(--ad-primary); }
.pin-kisiler .sm-avatar { background: var(--ad-grad-pink); color: #fff; }

/* ---------------------------------------------------------------- bildirim */
.sm-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.sm-toast { background: var(--ad-surface); border-radius: 12px; border-left: 4px solid var(--ad-primary); padding: .75rem 1rem; box-shadow: 0 10px 30px rgba(43, 35, 64, .2); display: flex; gap: .6rem; align-items: flex-start; animation: adIn .2s ease; font-weight: 500; }
.sm-toast.success { border-left-color: var(--ad-success); }
.sm-toast.danger { border-left-color: var(--ad-danger); }
.sm-toast.warning { border-left-color: var(--ad-warning); }
@keyframes adIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- yazdırma */
@media print {
  .no-print, .sm-side, .sm-top, .sm-toasts { display: none !important; }
  body, body.sm-shell, .sm-content, .sm-frame { background: #fff !important; padding: 0 !important; margin: 0 !important; height: auto !important; box-shadow: none !important; overflow: visible !important; }
  .card { box-shadow: none !important; border: 0 !important; }
}