/* ═══════════════════════════════════════════════════════════════
   POS MODERN v3.0 — Clean design layer
   app.css'den SONRA yüklenir

   YAPI:
   1. Design tokens
   2. Desktop component polish
   3. Mobile layout (tek @media bloğu — TÜM sayfalar)
   4. PWA / iOS fixes
   5. Dark mode
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
    --pm-brand: linear-gradient(135deg, #ec4899, #8b5cf6);
    --pm-brand-dark: linear-gradient(180deg, #4c1d95, #2e1065);
    --pm-success: linear-gradient(135deg, #10b981, #059669);
    --pm-danger: #ef4444;
    --pm-card: var(--bg-card, #ffffff);
    --pm-surface: var(--bg-primary, #f5f7fa);
    --pm-hover: rgba(0,0,0,0.04);
    --pm-border: var(--border-color, #e5e7eb);
    --pm-text: var(--text-primary, #111827);
    --pm-secondary: var(--text-secondary, #4b5563);
    --pm-muted: var(--text-muted, #9ca3af);
    --pm-radius: 12px;
    --pm-radius-lg: 16px;
    --pm-radius-pill: 999px;
    --pm-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --pm-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --pm-shadow-lg: 0 10px 24px rgba(0,0,0,0.12);
}
[data-theme="dark"] {
    --pm-hover: rgba(255,255,255,0.06);
    --pm-shadow: 0 1px 3px rgba(0,0,0,0.4);
    --pm-shadow-md: 0 4px 12px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════
   2. DESKTOP COMPONENT POLISH
   ═══════════════════════════════════════════════════════════════ */

/* --- Panel radius + shadow --- */
.ml-cart, .ml-products, .ml-categories, .ml-actions,
.pos-products, .qs-categories, .qs-actions,
.pos-right-panel > .cart-section, .pos-right-panel > .payment-section,
.tbl-adisyons, .tbl-grid-area, .tbl-sections,
.payment-left, .payment-right, .payment-selected, .payment-types,
.split-left, .split-right {
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow) !important;
}

/* --- Header bantları --- */
.ml-products-header, .qs-products-header, .tbl-breadcrumb {
    background: var(--pm-card) !important;
    color: var(--pm-text) !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid var(--pm-border) !important;
    flex-shrink: 0;
}

/* --- Adisyon/Cart başlığı — pembe-mor --- */
.ml-cart-header, .order-header-info, .order-header {
    background: var(--pm-brand) !important;
    color: #fff !important;
    border-bottom: none !important;
}
.ml-cart-header *, .order-header-info *, .order-header * { color: inherit; }

/* --- Adisyon listesi başlığı --- */
.tbl-adisyons-head {
    border-bottom: 2px solid rgba(236,72,153,0.15) !important;
}
.tbl-adisyons-title { font-size: 0.95rem !important; letter-spacing: 0.06em !important; }

/* --- Kategori sidebar — koyu mor --- */
.ml-categories, .qs-categories, .tbl-sections {
    background: var(--pm-brand-dark) !important;
    color: #fff !important;
    overflow: hidden;
}
.ml-cat-title, .qs-cat-title, .tbl-sec-title {
    padding: 14px 16px 10px !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
.ml-cat-list, .qs-cat-list {
    padding: 0 10px 14px !important;
    gap: 4px !important;
}
.ml-cat-btn, .qs-cat-btn, .tbl-sec-btn {
    color: rgba(255,255,255,0.85) !important;
    border-radius: var(--pm-radius) !important;
    font-weight: 600 !important;
    transition: all 0.18s !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent;
}
.ml-cat-btn:hover:not(.active),
.qs-cat-btn:hover:not(.active),
.tbl-sec-btn:hover:not(.active) {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
.ml-cat-btn.active, .qs-cat-btn.active, .tbl-sec-btn.active {
    background: #fff !important;
    color: #2e1065 !important;
    font-weight: 800 !important;
    box-shadow: var(--pm-shadow-md) !important;
}

/* --- Aksiyon sidebar (sol koyu mor) --- */
.ml-actions, .qs-actions {
    background: var(--pm-brand-dark) !important;
    color: #fff !important;
}
.ml-act {
    color: rgba(255,255,255,0.82) !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 4px !important;
    border-radius: var(--pm-radius) !important;
    transition: background 0.15s, color 0.15s;
}
.ml-act:hover:not(:disabled):not(.disabled) {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

/* --- Cart Row (cr3) --- */
.cr3 {
    background: var(--pm-card) !important;
    border-bottom: 1px solid var(--pm-border) !important;
    border-left: 3px solid transparent !important;
    padding: 12px 16px !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.cr3:hover { background: var(--pm-hover) !important; }
.cr3.selected {
    background: rgba(236,72,153,0.05) !important;
    border-left-color: #ec4899 !important;
}
.cr3-name { font-weight: 600 !important; color: var(--pm-text) !important; font-size: 0.95rem !important; }
.cr3-price { color: #ec4899 !important; font-weight: 800 !important; font-size: 1rem !important; }
.cr3-qty-prefix { color: var(--pm-muted) !important; font-weight: 700 !important; }
.cr3-desc { color: var(--pm-muted) !important; font-size: 0.82rem !important; }
.cr3-q {
    background: #ec4899 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(236,72,153,0.3) !important;
}
.cr3-q:hover:not(:disabled) { filter: brightness(1.08); }
.cr3-q:active:not(:disabled) { transform: scale(0.9); }

/* --- Adisyon listesi — Tables --- */
.tbl-adisyon-item { transition: background 0.15s !important; }
.tbl-adisyon-item:hover { background: rgba(236,72,153,0.04) !important; }
.tbl-adisyon-num { background: #ec4899 !important; color: #fff !important; font-weight: 800 !important; }
.tbl-adisyon-name { font-weight: 700 !important; color: var(--pm-text) !important; }
.tbl-adisyon-amount { color: var(--pm-text) !important; font-weight: 800 !important; }
.tbl-total-amount { color: var(--pm-text) !important; }
.tbl-total-label { color: #ec4899 !important; font-size: 0.75rem !important; }

/* --- Ürün kartları --- */
.prod-card {
    background: var(--pm-card) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow) !important;
    transition: transform 0.15s, box-shadow 0.18s, border-color 0.15s !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
}
.prod-card:hover {
    transform: translateY(-2px);
    border-color: #ec4899 !important;
    box-shadow: var(--pm-shadow-md) !important;
}
.prod-card:active { transform: scale(0.97); }
.prod-card-img {
    background: var(--bg-secondary, #f1f5f9) !important;
    flex: 1 1 auto !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.prod-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.prod-card-body { flex: 0 0 auto !important; padding: 8px 10px 10px !important; }
.prod-card-name { color: var(--pm-text) !important; font-weight: 600 !important; }
.prod-card-price { color: #ec4899 !important; font-weight: 800 !important; }

/* --- Masa kartları — wait-time renkler --- */
.table-card {
    background: var(--pm-card) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow) !important;
    transition: transform 0.15s, box-shadow 0.18s !important;
}
.table-card:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-md) !important; }
.table-card .table-name { color: var(--pm-text) !important; font-weight: 800 !important; }
.table-card.occupied {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.3) !important;
}
.table-card.occupied .table-name,
.table-card.occupied .table-customer { color: #fff !important; }
.table-card.occupied .table-amount {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: var(--pm-radius) !important;
    font-weight: 800 !important;
}
.table-card.occupied .table-time { color: rgba(255,255,255,0.95) !important; font-weight: 600 !important; }
.table-card.reserved {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.table-card.reserved * { color: #fff !important; }

/* Wait-time colors */
.table-card.occupied.wait-green { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 4px 12px rgba(16,185,129,0.3) !important; }
.table-card.occupied.wait-yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important; }
.table-card.occupied.wait-orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; box-shadow: 0 4px 12px rgba(249,115,22,0.3) !important; }
.table-card.occupied.wait-red { background: linear-gradient(135deg, #ef4444, #dc2626) !important; box-shadow: 0 4px 16px rgba(239,68,68,0.45) !important; animation: wait-pulse 2s ease-in-out infinite; }
@keyframes wait-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(239,68,68,0.45); }
    50% { box-shadow: 0 4px 22px rgba(239,68,68,0.7); }
}
.wait-icon {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.3); color: #fff;
    font-size: 0.72rem; flex-shrink: 0;
}

/* --- ÖDEME AL / SİPARİŞ butonları --- */
.ml-pay-cta, .action-row.primary-row .pay-cta {
    background: var(--pm-success) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--pm-radius) !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 6px 18px rgba(16,185,129,0.4) !important;
    transition: transform 0.1s, box-shadow 0.18s, filter 0.15s !important;
}
.ml-pay-cta:hover:not(:disabled), .action-row.primary-row .pay-cta:hover:not(:disabled) {
    filter: brightness(1.05); box-shadow: 0 8px 22px rgba(16,185,129,0.55) !important;
}
.ml-pay-cta:active:not(:disabled), .action-row.primary-row .pay-cta:active:not(:disabled) { transform: scale(0.98); }
.ml-pay-cta:disabled, .action-row.primary-row .pay-cta:disabled {
    opacity: 0.4 !important; cursor: not-allowed !important; box-shadow: none !important;
}

/* --- Ödeme tipi butonları --- */
.pay-btn, .pt-btn {
    border: none !important; border-radius: var(--pm-radius) !important;
    color: #fff !important; font-weight: 700 !important;
    transition: transform 0.1s, filter 0.15s !important;
    -webkit-tap-highlight-color: transparent;
}
.pay-btn:active:not(:disabled), .pt-btn:active:not(:disabled) { transform: scale(0.97); }
.pay-btn:disabled, .pt-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pay-btn.cash, .pt-btn.cash { background: linear-gradient(135deg, #10b981, #059669) !important; }
.pay-btn.card, .pt-btn.card { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; }
.pay-btn.debit, .pt-btn.debit { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; }
.pay-btn.meal, .pt-btn.meal { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }

/* --- Filter butonlar (Tables) --- */
.filter-buttons {
    background: var(--pm-brand) !important;
    color: #fff !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-md) !important;
}

/* --- Tipografi --- */
.ml-cart-title, .order-title { font-size: 1.1rem !important; font-weight: 700 !important; }
.order-ticket { font-family: ui-monospace, monospace; font-size: 0.78rem; opacity: 0.85; }

/* --- Toplam alanı --- */
.ml-total-line { padding: 0 !important; }
.ml-total-label { color: #ec4899 !important; font-size: 0.75rem !important; font-weight: 800 !important; letter-spacing: 0.1em !important; }
.ml-total-amount { color: var(--pm-text) !important; font-weight: 800 !important; }

/* --- Scrollbar — ince, modern --- */
.cart-items::-webkit-scrollbar, .products-grid::-webkit-scrollbar,
.tbl-grid-scroll::-webkit-scrollbar, .tbl-adisyons-list::-webkit-scrollbar,
.qs-pay-middle::-webkit-scrollbar, .payment-middle::-webkit-scrollbar,
.payment-selected::-webkit-scrollbar { width: 6px; height: 6px; }
.cart-items::-webkit-scrollbar-thumb, .products-grid::-webkit-scrollbar-thumb,
.tbl-grid-scroll::-webkit-scrollbar-thumb, .tbl-adisyons-list::-webkit-scrollbar-thumb,
.qs-pay-middle::-webkit-scrollbar-thumb, .payment-middle::-webkit-scrollbar-thumb,
.payment-selected::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
[data-theme="dark"] .cart-items::-webkit-scrollbar-thumb,
[data-theme="dark"] .products-grid::-webkit-scrollbar-thumb,
[data-theme="dark"] .tbl-grid-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* --- Animasyonlar --- */
.cr3, .prod-card, .table-card, .mt-tab, .ml-cat-btn, .qs-cat-btn,
.tbl-sec-btn, .ml-pay-cta, .pay-btn, .pt-btn, .cr3-q, .fab-cart,
.tbl-adisyon-item { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* --- Desktop: Payment selected items full height --- */
.payment-selected { max-height: none !important; height: auto !important; overflow-y: auto !important; }
.payment-selected .selected-card { max-height: none !important; height: auto !important; overflow: visible !important; }
.payment-selected .selected-items { max-height: none !important; height: auto !important; overflow: visible !important; flex: none !important; }
.payment-selected .selected-item { display: flex !important; visibility: visible !important; opacity: 1 !important; height: auto !important; }

/* --- Desktop: Payment-layout containers height --- */
@media (min-width: 992px) {
    .tbl-shell, .ml-shell, .pos-container, .payment-layout {
        height: calc(100vh - 70px) !important;
        max-height: calc(100vh - 70px) !important;
        overflow: hidden !important;
    }

    /* Payment-left scroll + sticky summary */
    .payment-left {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .payment-left .order-card {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .payment-left .order-header,
    .payment-left .select-hint,
    .payment-left .manual-mode-notice,
    .payment-left .items-table-header,
    .payment-left .order-summary { flex-shrink: 0 !important; }
    .payment-left .order-items {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    .payment-left .order-summary {
        position: sticky !important;
        bottom: 0 !important;
        background: var(--bg-card, #fff) !important;
        z-index: 5 !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        border-top: 2px solid var(--pm-border) !important;
        padding: 12px 16px !important;
    }

    /* Payment-types: flex column */
    .payment-types {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .payment-types .pt-buttons { flex: 0 0 auto !important; overflow-y: auto !important; }
    .payment-types .pt-actions { flex-shrink: 0 !important; margin-top: auto !important; }

    /* Payment-right (numpad area) */
    .payment-right {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Payment-selected */
    .payment-selected {
        max-height: 100% !important;
        overflow-y: auto !important;
    }
}

/* KALAN satırı vurgulu */
.payment-left .order-summary .summary-line.remaining {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--primary, #ec4899) !important;
    border-top: 1px solid var(--pm-border) !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. MOBILE LAYOUT — TEK BLOK, TÜM SAYFALAR
   Breakpoint: max-width 991px
   ═══════════════════════════════════════════════════════════════ */

/* Mobilde tab bar gizliyi göster */
.mobile-tab-bar { display: none; }

@media (max-width: 991px) {

    /* ─────────────────────────────────────────
       MOBILE TAB BAR — her sayfada ortak
       ───────────────────────────────────────── */
    .mobile-tab-bar {
        display: flex !important;
        background: var(--pm-card) !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        box-shadow: var(--pm-shadow) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        flex-shrink: 0 !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        align-items: center !important;
        z-index: 50 !important;
        position: relative !important;
        order: 0 !important;
    }
    .mt-tab {
        border: 2px solid var(--pm-border) !important;
        border-radius: var(--pm-radius-pill) !important;
        padding: 8px 10px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        background: var(--pm-card) !important;
        color: var(--pm-secondary) !important;
        font-weight: 700 !important;
        font-size: 0.82rem !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    .mt-tab.active {
        background: var(--pm-brand) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(236,72,153,0.4) !important;
    }
    .mt-tab.active::after { display: none !important; }
    .mt-badge { background: #ec4899 !important; color: #fff !important; }
    .mt-tab.active .mt-badge { background: rgba(255,255,255,0.3) !important; }

    /* FAB cart button */
    .fab-cart {
        background: var(--pm-brand) !important;
        box-shadow: 0 6px 22px rgba(139,92,246,0.45) !important;
        border-radius: var(--pm-radius-lg) !important;
    }
    .fab-cart-count { background: rgba(255,255,255,0.3) !important; }
    /* Sepet görünümünde FAB gizli */
    .ml-shell[data-mobile-view="cart"] .fab-cart,
    .pos-container[data-mobile-view="cart"] .fab-cart,
    .pos-container[data-mobile-view="payment"] .fab-cart {
        display: none !important;
    }

    /* ─────────────────────────────────────────
       ANA KONTEYNERLER — flex column
       ───────────────────────────────────────── */
    .ml-shell, .pos-container, .payment-layout {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100dvh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;
        overflow: hidden !important;
        padding: 0 !important;
        gap: 0 !important;
        /* Grid override */
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }
    /* 100dvh fallback */
    @supports not (height: 100dvh) {
        .ml-shell, .pos-container, .payment-layout {
            height: calc(100vh - 70px) !important;
            max-height: calc(100vh - 70px) !important;
        }
    }

    /* Header'ları static yap (sticky/fixed kaldır) */
    .ml-cart-header, .order-header-info, .order-header, .tbl-adisyons-head {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        flex-shrink: 0 !important;
    }

    /* ─────────────────────────────────────────
       ORDER PAGE (ml-shell) — Products view
       ───────────────────────────────────────── */
    .ml-shell[data-mobile-view="products"] .ml-actions,
    .ml-shell[data-mobile-view="products"] .ml-cart {
        display: none !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-categories {
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 52px !important;
        height: 52px !important;
        order: 1 !important;
        padding: 6px 10px !important;
        background: var(--pm-card) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-cat-title { display: none !important; }
    .ml-shell[data-mobile-view="products"] .ml-cat-list {
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding: 0 !important;
        height: 100% !important;
        align-items: center !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-cat-btn {
        flex-shrink: 0 !important;
        background: var(--bg-secondary, #f3f4f6) !important;
        color: var(--pm-text) !important;
        border: 1px solid var(--pm-border) !important;
        padding: 7px 14px !important;
        height: 36px !important;
        border-radius: var(--pm-radius-pill) !important;
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-cat-btn.active {
        background: var(--pm-brand) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 3px 10px rgba(236,72,153,0.35) !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-products {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-products-header {
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
    }
    .ml-shell[data-mobile-view="products"] .products-grid {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ORDER PAGE — Cart view */
    .ml-shell[data-mobile-view="cart"] .ml-products,
    .ml-shell[data-mobile-view="cart"] .ml-categories {
        display: none !important;
    }
    .ml-shell[data-mobile-view="cart"]::before { display: none !important; }
    .ml-shell[data-mobile-view="cart"] .ml-actions {
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 56px !important;
        height: 56px !important;
        order: 1 !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: var(--pm-card) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: relative !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-act {
        flex-shrink: 0 !important;
        min-width: 52px !important;
        min-height: 42px !important;
        font-size: 0.65rem !important;
        background: rgba(139,92,246,0.08) !important;
        color: #6d28d9 !important;
        border-radius: 10px !important;
        padding: 4px 6px !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-act i { font-size: 1rem !important; }
    .ml-shell[data-mobile-view="cart"] .ml-act.iade { background: rgba(245,158,11,0.1) !important; color: #d97706 !important; }
    .ml-shell[data-mobile-view="cart"] .ml-act.iskonto { background: rgba(220,38,38,0.1) !important; color: #dc2626 !important; }
    .ml-shell[data-mobile-view="cart"] .ml-act.yazdir { background: rgba(59,130,246,0.1) !important; color: #1d4ed8 !important; }
    .ml-shell[data-mobile-view="cart"] .ml-cart {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: none !important;
        width: 100% !important;
        position: relative !important;
        background: var(--pm-card) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: none !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-cart .cart-items {
        flex: 1 1 0 !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-cart .ml-cart-footer {
        flex-shrink: 0 !important;
        position: relative !important;
        bottom: auto !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08) !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-grand-total {
        font-size: 1.5rem !important;
        text-align: center !important;
    }

    /* ─────────────────────────────────────────
       QUICKSALE (pos-container) — Products view
       ───────────────────────────────────────── */
    .pos-container[data-mobile-view="products"] .qs-actions,
    .pos-container[data-mobile-view="products"] .pos-right-panel {
        display: none !important;
    }
    .pos-container[data-mobile-view="products"] .qs-categories {
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 52px !important;
        height: 52px !important;
        order: 1 !important;
        padding: 6px 10px !important;
        background: var(--pm-card) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }
    .pos-container[data-mobile-view="products"] .qs-cat-title { display: none !important; }
    .pos-container[data-mobile-view="products"] .qs-cat-list {
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding: 0 !important;
        height: 100% !important;
        align-items: center !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }
    .pos-container[data-mobile-view="products"] .qs-cat-btn {
        flex-shrink: 0 !important;
        background: var(--bg-secondary, #f3f4f6) !important;
        color: var(--pm-text) !important;
        border: 1px solid var(--pm-border) !important;
        padding: 7px 14px !important;
        height: 36px !important;
        border-radius: var(--pm-radius-pill) !important;
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }
    .pos-container[data-mobile-view="products"] .qs-cat-btn.active {
        background: var(--pm-brand) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 3px 10px rgba(236,72,153,0.35) !important;
    }
    .pos-container[data-mobile-view="products"] .pos-products {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .pos-container[data-mobile-view="products"] .qs-products-header {
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
    }
    .pos-container[data-mobile-view="products"] .products-grid {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* QUICKSALE — Cart view */
    .pos-container[data-mobile-view="cart"] .pos-products,
    .pos-container[data-mobile-view="cart"] .qs-categories,
    .pos-container[data-mobile-view="cart"] .qs-actions {
        display: none !important;
    }
    .pos-container[data-mobile-view="cart"]::before { display: none !important; }
    .pos-container[data-mobile-view="cart"] .pos-right-panel {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: none !important;
        width: 100% !important;
        position: relative !important;
        background: var(--bg-secondary, #f3f4f6) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: none !important;
        overflow: hidden !important;
    }
    /* Section 3 cart/payment — nükleer fix'teki tanım ezer */
    .pos-container[data-mobile-view="cart"] .qs-pay-top { flex-shrink: 0 !important; }
    .pos-container[data-mobile-view="cart"] .qs-pay-middle {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .pos-container[data-mobile-view="cart"] .qs-pay-bottom {
        flex-shrink: 0 !important;
        background: var(--pm-card) !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.06) !important;
    }

    /* ─────────────────────────────────────────
       PAYMENT PAGE — Products view (sipariş listesi)
       ───────────────────────────────────────── */
    .payment-layout[data-mobile-view="products"] .payment-right,
    .payment-layout[data-mobile-view="products"] .payment-types,
    .payment-layout .payment-selected {
        display: none !important;
    }
    .payment-layout[data-mobile-view="products"] .payment-left {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--pm-card) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .payment-layout[data-mobile-view="products"] .payment-left .order-card {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .payment-layout[data-mobile-view="products"] .payment-left .order-items {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
    }
    .payment-layout[data-mobile-view="products"] .payment-left .order-summary {
        flex-shrink: 0 !important;
    }

    /* PAYMENT PAGE — Cart view (ödeme paneli) */
    .payment-layout[data-mobile-view="cart"] .payment-left {
        display: none !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-right {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--pm-card) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-types {
        flex: 0 0 auto !important;
        order: 2 !important;
        max-height: 240px !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--pm-card) !important;
        border-radius: 0 !important;
        border-top: 4px solid var(--bg-secondary, #f3f4f6) !important;
        padding: 12px !important;
        gap: 8px !important;
        overflow-y: auto !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-types .pt-header { display: none !important; }
    .payment-layout[data-mobile-view="cart"] .payment-types .pt-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-types .pt-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .payment-layout[data-mobile-view="cart"] .pt-btn { min-height: 56px !important; }

    /* Mobilde items-table-header gizle — kart formatı */
    .payment-layout .items-table-header { display: none !important; }
    .payment-layout .order-items > .order-item {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "name  total"
            "meta  status" !important;
        gap: 4px 12px !important;
        padding: 12px 14px !important;
    }
    .payment-layout .order-items > .order-item .col-name { grid-area: name !important; }
    .payment-layout .order-items > .order-item .col-total { grid-area: total !important; font-size: 1.1rem !important; text-align: right !important; }
    .payment-layout .order-items > .order-item .col-qty,
    .payment-layout .order-items > .order-item .col-price {
        grid-area: meta !important; display: inline !important; font-size: 0.82rem !important; color: var(--pm-muted) !important;
    }
    .payment-layout .order-items > .order-item .col-qty::after { content: " × " !important; }
    .payment-layout .order-items > .order-item .col-status { grid-area: status !important; text-align: right !important; }

    /* ─────────────────────────────────────────
       TABLES (tbl-shell) — <768px'te mobil
       ───────────────────────────────────────── */
    /* Tables breakpoint 767px'te kalır — app.css'deki tanımla uyumlu */

} /* END @media max-width: 991px */

/* Tables mobil layout — 768px altında */
@media (max-width: 767px) {
    .tbl-shell {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .tbl-sections {
        order: -1 !important;
        flex-direction: row !important;
        flex-shrink: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px !important;
        gap: 6px !important;
        border-radius: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tbl-sections .tbl-sec-title { display: none !important; }
    .tbl-sections .tbl-sec-divider { display: none !important; }
    .tbl-sections .tbl-sec-btn {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }
    .tbl-grid-area {
        flex: 1 !important;
        min-height: 0 !important;
        order: 0 !important;
        border-radius: 0 !important;
    }
    .tbl-grid-scroll {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px !important;
    }
    .tbl-adisyons {
        order: 1 !important;
        max-height: 40vh !important;
        min-height: 100px !important;
        border-right: none !important;
        border-top: 1px solid var(--pm-border) !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .tbl-adisyons .tbl-adisyons-total {
        flex-shrink: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PWA FIX: Ürün grid'i tam ekranı doldursun
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Ürün grid'i — products-grid: tüm sayfalar */
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        align-content: start !important;
    }

    /* Ürün kartları daha kompakt */
    .prod-card {
        min-height: 0 !important;
    }
    .prod-card-img {
        min-height: 60px !important;
        max-height: 90px !important;
    }
    .prod-card-body {
        padding: 6px 8px 8px !important;
    }
    .prod-card-name {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .prod-card-price {
        font-size: 0.85rem !important;
    }

    /* ─── PAYMENT PAGE MOBİL DÜZELTMELERİ ─── */
    /* Sipariş listesi — ödeme sayfasında 5 sütunlu grid taşıyor, flex'e çevir */
    .payment-layout .order-items > .order-item {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--pm-border) !important;
        align-items: center !important;
        grid-template-columns: unset !important;
    }
    .payment-layout .order-items > .order-item .col-name {
        flex: 1 1 auto !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .payment-layout .order-items > .order-item .col-qty {
        flex: 0 0 auto !important;
        font-size: 0.82rem !important;
        color: var(--pm-muted) !important;
    }
    .payment-layout .order-items > .order-item .col-price {
        display: none !important;
    }
    .payment-layout .order-items > .order-item .col-total {
        flex: 0 0 auto !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #ec4899 !important;
    }
    .payment-layout .order-items > .order-item .col-status {
        flex: 0 0 auto !important;
        font-size: 0.75rem !important;
    }

    /* Payment summary mobilde okunabilir */
    .payment-layout .order-summary {
        padding: 10px 12px !important;
        background: var(--bg-secondary, #f3f4f6) !important;
    }
    .payment-layout .order-summary .summary-line {
        font-size: 0.88rem !important;
    }
    .payment-layout .order-summary .summary-line.remaining {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
    }

    /* Payment ödeme paneli — numpad ve tutar alanı */
    .payment-layout[data-mobile-view="cart"] .payment-top {
        flex-shrink: 0 !important;
        padding: 12px !important;
    }
    .payment-layout[data-mobile-view="cart"] .amount-display {
        text-align: center !important;
    }
    .payment-layout[data-mobile-view="cart"] .amount-value {
        font-size: 1.8rem !important;
        font-weight: 800 !important;
        color: var(--primary, #ec4899) !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-middle {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 0 12px !important;
    }

    /* Numpad mobilde büyük */
    .payment-layout .numpad {
        gap: 6px !important;
    }
    .payment-layout .num-btn {
        min-height: 48px !important;
        font-size: 1.1rem !important;
        border-radius: 10px !important;
    }

    /* Quick butonlar */
    .payment-layout .quick-btns {
        gap: 6px !important;
    }
    .payment-layout .quick-btns button {
        min-height: 42px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }

    /* Ödeme tipi butonları büyük dokunmatik */
    .payment-layout[data-mobile-view="cart"] .pt-btn {
        min-height: 52px !important;
        font-size: 0.88rem !important;
        border-radius: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    .payment-layout[data-mobile-view="cart"] .pt-btn i {
        font-size: 1.2rem !important;
    }

    /* Geri ve aksiyonlar */
    .payment-layout[data-mobile-view="cart"] .pt-action {
        min-height: 44px !important;
        border-radius: 8px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
    }
}

/* Küçük telefon (<480px) — ürün grid 2 sütun */
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Çok küçük telefon (<375px) */
@media (max-width: 374px) {
    .mobile-tab-bar { padding: 6px 8px !important; gap: 6px !important; }
    .mt-tab { padding: 8px 12px !important; font-size: 0.82rem !important; }
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   4. PWA / iOS FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Touch scroll — tüm scroll alanları */
.cart-items, .products-grid, .qs-pay-middle, .payment-middle,
.tbl-grid-scroll, .tbl-adisyons-list, .ml-cat-list, .qs-cat-list,
.tbl-sections, .filter-buttons, .section-filters,
.category-bar, .cart-tabs, .action-chips,
.payment-selected, .selected-items, .payments-list,
.ml-cart, .pos-right-panel, .payment-right, .payment-left {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: auto !important;
}

/* Yatay scroll alanları */
.filter-buttons, .section-filters, .category-bar,
.cart-tabs, .action-chips {
    touch-action: pan-x !important;
}

/* Kategori listeleri DİKEY scroll — pan-y zorunlu
   SADECE masaüstü/tablet (≥992px). Mobilde bu listeler YATAY olur,
   pan-y yatay swipe'ı engellediği için mobilde uygulanmamalı. */
@media (min-width: 992px) {
    .ml-cat-list, .qs-cat-list {
        touch-action: pan-y !important;
        overflow-y: auto !important;
    }
}

/* Filter buttons — yatay scroll garanti */
.filter-buttons {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.filter-buttons .filter-btn { flex-shrink: 0 !important; }
.section-filters {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.section-filters .section-btn { flex-shrink: 0 !important; }

/* iOS Safari sürükleme — GPU hızlandırma */
.cart-items, .products-grid, .qs-pay-middle, .payment-middle,
.tbl-grid-scroll, .tbl-adisyons-list {
    transform: translateZ(0);
}

/* iOS buton tap highlight */
.cart-items button, .products-grid button, .tbl-sections button,
.filter-buttons button, .section-filters button {
    -webkit-tap-highlight-color: rgba(236,72,153,0.15);
    touch-action: manipulation;
}

/* iOS safe-area — body'de zaten padding var (app.css), burada ek düzeltmeler */
/* body { padding: env(safe-area-inset-*) } → .page { height: 100% } → güvenli alan otomatik */

/* FAB butonunu safe-area ile konumla */
@supports (padding: env(safe-area-inset-bottom)) {
    .fab-cart {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   5. DARK MODE
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .prod-card-img { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .ml-cart-footer { background: var(--bg-tertiary, #334155) !important; }
[data-theme="dark"] .ml-total-amount { color: #f8fafc !important; }
[data-theme="dark"] .cr3 { background: var(--bg-card, #1e293b) !important; }
[data-theme="dark"] .cr3-name { color: #f8fafc !important; }
[data-theme="dark"] .tbl-adisyon-name,
[data-theme="dark"] .tbl-adisyon-amount,
[data-theme="dark"] .tbl-total-amount { color: #f8fafc !important; }

/* Dark mode — mobil action butonları okunabilir */
[data-theme="dark"] .ml-act {
    color: rgba(255,255,255,0.85) !important;
}
[data-theme="dark"] .ml-shell[data-mobile-view="cart"] .ml-act {
    background: rgba(139,92,246,0.2) !important;
    color: #c4b5fd !important;
}
[data-theme="dark"] .ml-shell[data-mobile-view="cart"] .ml-act.iade {
    background: rgba(245,158,11,0.2) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .ml-shell[data-mobile-view="cart"] .ml-act.iskonto {
    background: rgba(220,38,38,0.2) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] .ml-shell[data-mobile-view="cart"] .ml-act.yazdir {
    background: rgba(59,130,246,0.2) !important;
    color: #93c5fd !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. MOBİL NÜKLEER FIX — EN SONDA, HER ŞEYİ EZER
   Bu blok tüm app.css çakışmalarını kesin olarak geçersiz kılar.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ── MAIN: POS sayfalarında scroll yapmasın, çocuklarda yönetilir ── */
    main:has(.ml-shell),
    main:has(.pos-container),
    main:has(.payment-layout),
    main:has(.payment-container),
    main:has(.tbl-shell),
    main:has(.split-container) {
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* Dashboard gibi genel sayfalar scroll edebilsin */
    main:has(.dash),
    main:has(.dash-lock),
    main:has(.settings-container) {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── ANA KONTEYNERLER: flex column, tam ekran yükseklik ── */
    .ml-shell,
    .pos-container,
    .payment-layout,
    .tbl-shell {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        gap: 0 !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }
    /* ══════════════════════════════════════════
       ORDER PAGE (ml-shell) — Products view
       ══════════════════════════════════════════ */
    .ml-shell[data-mobile-view="products"] .ml-actions,
    .ml-shell[data-mobile-view="products"] .ml-cart { display: none !important; }

    .ml-shell[data-mobile-view="products"] .ml-categories {
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 auto !important;
        height: 48px !important;
        order: 1 !important;
        padding: 0 !important;
        background: var(--pm-card) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        overflow: visible !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        align-items: stretch !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-cat-title { display: none !important; }
    .ml-shell[data-mobile-view="products"] .ml-cat-list {
        display: flex !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        width: 100% !important;
        align-items: center !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-cat-btn {
        flex-shrink: 0 !important;
        padding: 7px 14px !important;
        height: 34px !important;
        border-radius: 999px !important;
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .ml-shell[data-mobile-view="products"] .ml-products {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .ml-shell[data-mobile-view="products"] .ml-products-header {
        flex-shrink: 0 !important;
    }
    .ml-shell[data-mobile-view="products"] .products-grid {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        padding-bottom: 90px !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        align-content: start !important;
    }

    /* ORDER PAGE — Cart view */
    .ml-shell[data-mobile-view="cart"] .ml-products,
    .ml-shell[data-mobile-view="cart"] .ml-categories { display: none !important; }
    .ml-shell[data-mobile-view="cart"]::before { display: none !important; }

    .ml-shell[data-mobile-view="cart"] .ml-actions {
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 auto !important;
        height: auto !important;
        order: 1 !important;
        padding: 6px 8px !important;
        gap: 4px !important;
        overflow: hidden !important;
        flex-wrap: wrap !important;
        background: var(--pm-card) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-act {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 36px !important;
        width: auto !important;
        font-size: 0.65rem !important;
        border-radius: 8px !important;
        padding: 4px 6px !important;
        background: rgba(139,92,246,0.1) !important;
        color: #7c3aed !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-act i { font-size: 0.9rem !important; }
    .ml-shell[data-mobile-view="cart"] .ml-act.iade { background: rgba(245,158,11,0.12) !important; color: #d97706 !important; }
    .ml-shell[data-mobile-view="cart"] .ml-act.iskonto { background: rgba(220,38,38,0.12) !important; color: #dc2626 !important; }
    .ml-shell[data-mobile-view="cart"] .ml-act.yazdir { background: rgba(59,130,246,0.12) !important; color: #2563eb !important; }

    .ml-shell[data-mobile-view="cart"] .ml-cart {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: none !important;
        width: 100% !important;
        background: var(--pm-card) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-cart .cart-items {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ml-shell[data-mobile-view="cart"] .ml-cart-footer {
        flex-shrink: 0 !important;
        position: relative !important;
        bottom: auto !important;
    }

    /* ══════════════════════════════════════════
       QUICKSALE (pos-container) — Products view
       ══════════════════════════════════════════ */
    .pos-container[data-mobile-view="products"] .qs-actions,
    .pos-container[data-mobile-view="products"] .pos-right-panel { display: none !important; }

    .pos-container[data-mobile-view="products"] .qs-categories {
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 auto !important;
        height: 48px !important;
        order: 1 !important;
        padding: 0 !important;
        background: var(--pm-card) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        overflow: visible !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        align-items: stretch !important;
    }
    .pos-container[data-mobile-view="products"] .qs-cat-title { display: none !important; }
    .pos-container[data-mobile-view="products"] .qs-cat-list {
        display: flex !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        width: 100% !important;
        align-items: center !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }
    .pos-container[data-mobile-view="products"] .qs-cat-btn {
        flex-shrink: 0 !important;
        padding: 7px 14px !important;
        height: 34px !important;
        border-radius: 999px !important;
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .pos-container[data-mobile-view="products"] .pos-products {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .pos-container[data-mobile-view="products"] .qs-products-header {
        flex-shrink: 0 !important;
    }
    .pos-container[data-mobile-view="products"] .products-grid {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
        padding-bottom: 90px !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        align-content: start !important;
    }

    /* QUICKSALE — Cart view */
    .pos-container[data-mobile-view="cart"] .pos-products,
    .pos-container[data-mobile-view="cart"] .qs-categories { display: none !important; }
    .pos-container[data-mobile-view="cart"]::before { display: none !important; }
    .pos-container[data-mobile-view="cart"] .qs-actions { display: none !important; }

    .pos-container[data-mobile-view="cart"] .pos-right-panel {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: none !important;
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* ── QUICKSALE CART VIEW: sadece sepet (ödeme gizli) ── */
    .pos-container[data-mobile-view="cart"] .pos-right-panel {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .pos-container[data-mobile-view="cart"] .cart-section {
        flex: 0 0 auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .pos-container[data-mobile-view="cart"] .cart-section .cart-tabs,
    .pos-container[data-mobile-view="cart"] .cart-section .cart-header,
    .pos-container[data-mobile-view="cart"] .cart-section .cart-summary,
    .pos-container[data-mobile-view="cart"] .cart-section .pending-payments {
        flex-shrink: 0 !important;
    }
    .pos-container[data-mobile-view="cart"] .cart-section .cart-items {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .pos-container[data-mobile-view="cart"] .payment-section {
        display: none !important;
    }

    /* ── QUICKSALE PAYMENT VIEW: sadece ödeme (sepet gizli) ── */
    .pos-container[data-mobile-view="payment"] .ml-actions,
    .pos-container[data-mobile-view="payment"] .pos-products,
    .pos-container[data-mobile-view="payment"] .qs-categories,
    .pos-container[data-mobile-view="payment"] .qs-actions {
        display: none !important;
    }
    .pos-container[data-mobile-view="payment"]::before { display: none !important; }
    .pos-container[data-mobile-view="payment"] .pos-right-panel {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: none !important;
        width: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .pos-container[data-mobile-view="payment"] .cart-section {
        display: none !important;
    }
    .pos-container[data-mobile-view="payment"] .payment-section {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .pos-container[data-mobile-view="payment"] .qs-pay-top { flex-shrink: 0 !important; }
    .pos-container[data-mobile-view="payment"] .qs-pay-middle {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    .pos-container[data-mobile-view="payment"] .qs-pay-bottom {
        flex-shrink: 0 !important;
    }

    /* ══════════════════════════════════════════
       PAYMENT PAGE — Sipariş (products) view
       ══════════════════════════════════════════ */
    .payment-layout[data-mobile-view="products"] .payment-right,
    .payment-layout[data-mobile-view="products"] .payment-types,
    .payment-layout .payment-selected { display: none !important; }

    .payment-layout[data-mobile-view="products"] .payment-left {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .payment-layout[data-mobile-view="products"] .order-card {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .payment-layout[data-mobile-view="products"] .order-items {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .payment-layout[data-mobile-view="products"] .order-summary {
        flex-shrink: 0 !important;
    }

    /* Payment: sipariş satırları — 5 sütunlu grid yerine mobil kart */
    .payment-layout .items-table-header { display: none !important; }
    .payment-layout .order-items > .order-item {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px 8px !important;
        padding: 12px 14px !important;
        grid-template-columns: unset !important;
        align-items: center !important;
    }
    .payment-layout .order-items > .order-item .col-name {
        flex: 1 1 60% !important;
        font-weight: 600 !important;
        font-size: 0.92rem !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .payment-layout .order-items > .order-item .col-total {
        flex: 0 0 auto !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--primary, #4a90e2) !important;
        text-align: right !important;
    }
    .payment-layout .order-items > .order-item .col-qty {
        flex: 0 0 auto !important;
        font-size: 0.8rem !important;
        color: var(--pm-muted) !important;
        order: 3 !important;
    }
    .payment-layout .order-items > .order-item .col-price {
        display: none !important;
    }
    .payment-layout .order-items > .order-item .col-status {
        flex: 0 0 auto !important;
        font-size: 0.75rem !important;
        order: 4 !important;
        margin-left: auto !important;
    }

    /* PAYMENT PAGE — Ödeme (cart) view */
    .payment-layout[data-mobile-view="cart"] .payment-left { display: none !important; }

    .payment-layout[data-mobile-view="cart"] .payment-right {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-top {
        flex-shrink: 0 !important;
        padding: 12px !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-middle {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 0 12px !important;
    }
    .payment-layout[data-mobile-view="cart"] .amount-value {
        font-size: 2rem !important;
        font-weight: 800 !important;
    }

    .payment-layout[data-mobile-view="cart"] .payment-types {
        flex: 0 0 auto !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        border-top: 2px solid var(--pm-border) !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        overflow-y: auto !important;
        max-height: 240px !important;
    }
    .payment-layout[data-mobile-view="cart"] .payment-types .pt-header { display: none !important; }
    .payment-layout[data-mobile-view="cart"] .pt-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .payment-layout[data-mobile-view="cart"] .pt-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .payment-layout[data-mobile-view="cart"] .pt-btn {
        min-height: 52px !important;
        border-radius: 10px !important;
        font-size: 0.88rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    .payment-layout[data-mobile-view="cart"] .pt-action {
        min-height: 44px !important;
        border-radius: 8px !important;
        font-size: 0.82rem !important;
    }

    /* Numpad mobilde büyük */
    .payment-layout .num-btn {
        min-height: 48px !important;
        font-size: 1.1rem !important;
        border-radius: 10px !important;
    }
    .payment-layout .quick-btns button {
        min-height: 42px !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
    }

    /* ══════════════════════════════════════════
       TABLES (tbl-shell) — mobil düzen
       ══════════════════════════════════════════ */
    .tbl-sections {
        order: -1 !important;
        flex-direction: row !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px !important;
        gap: 6px !important;
        border-radius: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tbl-sec-title { display: none !important; }
    .tbl-sec-divider { display: none !important; }
    .tbl-sec-btn {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }
    .tbl-grid-area {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        order: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
    }
    .tbl-breadcrumb {
        flex-shrink: 0 !important;
    }
    .tbl-grid-scroll {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px !important;
    }
    .tbl-adisyons {
        order: 1 !important;
        max-height: 35vh !important;
        min-height: 80px !important;
        border-right: none !important;
        border-top: 1px solid var(--pm-border) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .tbl-adisyons-head { flex-shrink: 0 !important; }
    .tbl-adisyons-list {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tbl-adisyons-total { flex-shrink: 0 !important; }

    /* ── Ürün kartları kompakt ── */
    .prod-card {
        min-height: 0 !important;
        border-radius: 10px !important;
    }
    .prod-card-img {
        min-height: 50px !important;
        max-height: 80px !important;
    }
    .prod-card-body {
        padding: 6px 8px 8px !important;
    }
    .prod-card-name {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .prod-card-price {
        font-size: 0.85rem !important;
    }

    /* ── Headers static ── */
    .ml-cart-header, .order-header-info, .order-header, .tbl-adisyons-head {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        flex-shrink: 0 !important;
    }

    /* ── Panel radius kaldır — tam ekran hissi ── */
    .ml-cart, .ml-products, .ml-categories, .ml-actions,
    .pos-products, .qs-categories, .qs-actions,
    .pos-right-panel, .pos-right-panel > .cart-section, .pos-right-panel > .payment-section,
    .payment-left, .payment-right, .payment-selected, .payment-types,
    .order-card {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* ── Küçük telefon (<480px) — 2 sütun ürün ── */
@media (max-width: 480px) {
    .ml-shell[data-mobile-view="products"] .products-grid,
    .pos-container[data-mobile-view="products"] .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}