:root { --primary: #ff5a00; --bg: #f4f6f8; --text: #333; --green: #02c076; --blue: #2980b9; --red: #e74c3c; --whatsapp: #25D366; --purple: #8e44ad; }
        body { font-family: 'Inter', sans-serif; margin: 0; background: var(--bg); color: var(--text); height: 100vh; height: 100dvh; display: flex; overflow: hidden; }
        * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }

        /* --- PRINT STYLES --- */
        @media print {
            @page { margin: 0; size: 80mm auto; }
            body, html { height: auto !important; overflow: visible !important; background: white !important; }
            .sidebar, .main, .mobile-nav, .modal, .live-panel, #loginScreen, #quickReplyPanel { display: none !important; }
            #printArea { display: block !important; position: relative !important; width: 80mm !important; height: auto !important; visibility: visible !important; margin: 0 !important; padding: 0 !important; }
            .pos-receipt { margin: 0; padding: 2mm; font-family: 'Courier New', Courier, monospace; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .pos-bold { font-weight: 900 !important; -webkit-text-stroke: 0.3px black; }
            .pos-normal { font-weight: normal; }
            .pos-header { text-align: center; margin-bottom: 6px; }
            .pos-logo { width: 55%; max-width: 130px; margin-bottom: 4px; filter: grayscale(100%) contrast(200%) brightness(0); }
            .pos-divider { border: none; border-top: 1px dashed #000; margin: 5px 0; }
            .pos-table { width: 100%; border-collapse: collapse; font-size: inherit; }
            .pos-table th { text-align: left; border-bottom: 1px solid #000; padding-bottom: 2px; font-size: 0.85em; }
            .pos-table td { vertical-align: top; padding: 2px 0; word-break: break-word; }
            .pos-right { text-align: right; }
            .pos-footer { text-align: center; margin-top: 10px; font-size: 0.85em; word-break: break-word; }
            .pos-fee-row td { font-size: 0.9em; color: #333; }
            .pos-grand-total td { font-size: 1.1em; font-weight: 900; border-top: 1px solid #000; padding-top: 4px; }
            .pos-item-row td { font-size: 0.9em; }
        }

        /* --- UI STYLES --- */
        .top-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid #ddd; margin-bottom: 20px; min-height: 60px; }
        .page-title { font-weight: 900; font-size: 24px; margin: 0; }
        .top-controls { display: flex; align-items: center; gap: 10px; }
        .wa-btn-top { background: #128C7E; color: white; padding: 10px 14px; border-radius: 8px; font-weight: bold; font-size: 14px; cursor: pointer; display: flex; text-decoration: none; align-items: center; gap: 6px; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        
        #chatAlertBtn { padding: 10px 18px; border-radius: 8px; font-weight: bold; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: 2px solid white; transition: 0.3s; }
        #chatAlertBtn.msg-clean { background: #999; color: white; box-shadow: none; opacity: 0.7; }
        #chatAlertBtn.msg-alert { background: var(--red); color: white; opacity: 1; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.6); animation: pulseRed 1s infinite; }
        @keyframes pulseRed { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
        
        #audioStatusIcon { font-size: 20px; cursor: pointer; padding: 8px; border-radius: 50%; background: #eee; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition:0.3s; }
        #audioStatusIcon.muted { background: #ffebee; color: var(--red); border: 1px solid #ffcdd2; }
        #audioStatusIcon.active { background: #e8f5e9; color: var(--green); border: 1px solid #c8e6c9; }
        #audioStatusIcon.ringing { background: var(--primary); color: white; animation: shake 0.5s infinite; }
        @keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); } }

        .sidebar { width: 260px; background: white; border-right: 1px solid #ddd; display: flex; flex-direction: column; transition: 0.3s; z-index: 2000; }
        .main { flex: 1; overflow-y: auto; padding: 20px; position: relative; scroll-behavior: smooth; padding-bottom: 90px; } 
        .live-panel { width: 400px; background: white; border-left: 1px solid #ddd; display: flex; flex-direction: column; transition: 0.3s; }
        .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: white; border-top: 1px solid #ddd; z-index: 12000; justify-content: space-around; padding: 10px 0; height: 70px; padding-bottom: env(safe-area-inset-bottom); }
        .mob-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #999; gap: 4px; cursor: pointer; flex: 1; }
        .mob-item.active { color: var(--primary); font-weight: bold; }
        .mob-item span { font-size: 24px; }

        /* QUICK REPLY */
        #quickReplyPanel { display: none; position: absolute; bottom: 70px; left: 0; width: 100%; background: #f8f9fa; border-top: 2px solid var(--primary); padding: 15px; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; z-index: 9999; box-shadow: 0 -5px 25px rgba(0,0,0,0.2); border-top-left-radius: 12px; border-top-right-radius: 12px; }
        .qr-tabs { display: flex; gap: 5px; margin-bottom: 5px; overflow-x: auto; padding-bottom: 5px; }
        .qr-tab { padding: 8px 14px; background: white; border: 1px solid #ddd; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; white-space: nowrap; }
        .qr-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
        .qr-lang-switch { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; padding-bottom:8px; border-bottom:1px solid #ddd; }
        .lang-opt { cursor: pointer; opacity: 0.6; font-weight: bold; font-size: 14px; }
        .lang-opt.active { opacity: 1; text-decoration: underline; color: var(--primary); }
        .qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .qr-btn { background: white; border: 1px solid #ccc; padding: 12px; border-radius: 8px; text-align: left; font-size: 12px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; font-weight: 500; }
        .qr-btn:active { background: #eee; transform: scale(0.98); }

        .card { background: white; padding: 20px; border-radius: 12px; border: 1px solid #eee; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
        .btn { padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.2s; display:inline-flex; align-items:center; gap:5px; justify-content:center; }
        .btn-green { background: #e8f5e9; color: var(--green); border: 1px solid #c8e6c9; }
        .btn-blue { background: #e3f2fd; color: var(--blue); border: 1px solid #bbdefb; }
        .btn-dark { background: #2c3e50; color: white; }
        .btn-red { background: #ffebee; color: var(--red); border: 1px solid #ffcdd2; }
        .btn-whatsapp { background: var(--whatsapp); color: white; border: 1px solid #128C7E; }
        .btn-orange { background: #fff0e6; color: var(--primary); border: 1px solid #ffccbc; }
        
        /* --- ARMADA BİLGİ KUTUSU (YENİ) --- */
        .armada-info { 
            background: #f0f8ff; 
            border: 1px solid #d1eaff; 
            padding: 10px; 
            border-radius: 8px; 
            margin-top: 10px; 
            font-size: 12px; 
            color: #444; 
        }
        .armada-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
        .armada-row span { color: #666; }
        .armada-row b { color: #333; }
        .btn-track { 
            background: var(--purple); 
            color: white; 
            width: 100%; 
            justify-content: center; 
            margin-top: 5px; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center; 
            padding: 8px; 
            border-radius: 6px; 
            font-weight: bold; 
            font-size: 13px; 
            gap: 5px; 
        }
        
        /* --- YENİ: GHOST/PENDING SIPARIŞ STILI --- */
        .ord-card.ghost-order {
            opacity: 0.6;
            background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
            border: 2px dashed #999 !important;
            position: relative;
            pointer-events: auto;
        }
        
        .ord-card.ghost-order::before {
            content: '⏳ AWAITING PAYMENT';
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ff9800;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: bold;
            z-index: 10;
        }
        
        .ord-card.ghost-order .btn {
            opacity: 0.5;
            pointer-events: none;
            cursor: not-allowed !important;
        }
        
        /* Chat & WhatsApp butonları ghost order'da da aktif kalır
           21.10.2026: "🧾 Paid (MF Inv)" de (btn-ghost-ok) — tam da ödeme beklerken
           MyFatoorah panelinden ödenen siparişi işaretlemek için var, kilitli kalıyordu */
        .ord-card.ghost-order .btn-comm,
        .ord-card.ghost-order .btn-ghost-ok {
            opacity: 1 !important;
            pointer-events: auto !important;
            cursor: pointer !important;
            box-shadow: 0 0 0 2px rgba(255,90,0,0.3);
        }
        
        /* --- YENİ: THUMBNAIL HOVER VE IMAGE MODAL --- */
        .prod-thumb-clickable {
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .prod-thumb-clickable:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        
        #imageModal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            align-items: center;
            justify-content: center;
        }
        
        #imageModal img {
            max-width: 90%;
            max-height: 90vh;
            border-radius: 12px;
            box-shadow: 0 10px 50px rgba(0,0,0,0.5);
        }
        
        #imageModal .close-btn {
            position: absolute;
            top: 30px;
            right: 40px;
            color: white;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            background: rgba(255,255,255,0.2);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }
        
        #imageModal .close-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        /* ORDER CARD STYLES */
        .ord-card { padding: 15px; border-bottom: 8px solid #f4f6f8; background: #fff; border-left: 4px solid transparent; font-size: 13px; position:relative; transition:0.3s; }
        .ord-card.Pending { border-left-color: orange; animation: pulse 1s infinite; }
        .ord-card.Preparing { border-left-color: var(--primary); }
        .ord-card.Ontheway { border-left-color: var(--blue); }
        .ord-card.Ready { border-left-color: var(--purple); }
        .ord-card.Delivered { border-left-color: var(--green); opacity: 0.7; }
        .ord-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
        
        .ord-total-line { border-top: 1px dashed #ddd; margin-top: 10px; padding-top: 10px; text-align: right; font-weight: 900; font-size: 16px; color: var(--primary); margin-bottom: 10px; }

        .prod-thumb { width: 50px !important; height: 50px !important; object-fit: cover; border-radius: 6px; border: 1px solid #eee; flex-shrink: 0; }
        .item-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
        .nav-item { padding: 15px 20px; cursor: pointer; border-left: 4px solid transparent; display: flex; gap: 10px; align-items: center; font-weight: 500; transition:0.2s; }
        .nav-item:hover { background: #fff5eb; color: var(--primary); }
        .nav-item.active { background: #fff0e6; border-left-color: var(--primary); font-weight: 800; color: var(--primary); }
        .hist-imgs { display: flex; align-items: center; margin-top: 8px; height: 30px; overflow: hidden; }
        .hist-thumb { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid white; margin-right: -10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background: #eee; position: relative; z-index: 1; }
        
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; }
        .modal-box { position: relative; background: white; width: 450px; max-width: 90%; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; max-height: 90vh; max-height: 90dvh; }
        /* ⚠️ 15.08.2026 FIX — .modal-content'in HİÇ CSS kuralı yoktu. .modal-box'ta
           overflow:hidden + max-height:90vh olduğu için taşan içerik kırpılıyor ve
           kaydırılamıyordu (Assign Driver'da "Self Delivery" ekranın altında kalıyordu).
           min-height:0 ŞART: flex kolonda çocuk elemanın küçülüp scroll açabilmesi için. */
        .modal-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
        .chat-head { padding: 15px; background: var(--primary); color: white; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
        .chat-msgs { flex: 1; padding: 15px; overflow-y: auto; background: #f0f2f5; display: flex; flex-direction: column; gap: 10px; min-height: 250px; }
        .chat-bubble { padding: 8px 12px; border-radius: 12px; max-width: 80%; font-size: 13px; line-height: 1.4; position: relative; }
        .chat-bubble.staff { align-self: flex-end; background: var(--primary); color: white; border-bottom-right-radius: 2px; }
        .chat-bubble.customer { align-self: flex-start; background: white; border: 1px solid #ddd; border-bottom-left-radius: 2px; }
        .view { display: none; } .view.active { display: block; }
        
        #loginScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #222; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; }
        @keyframes spin { to { transform: rotate(360deg); } }
        #loginScreen.restoring .login-box > *:not(#autoLoginNotice):not(h2):not(p) { display: none !important; }
        #loginScreen.restoring #autoLoginNotice { display: flex !important; }
        .login-box { background: white; padding: 40px; border-radius: 12px; width: 350px; text-align: center; max-width: 90%; }
        #printArea { display:none; }
        
        /* DEEP STOCK STYLES */
        .stock-tabs { display:flex; gap:10px; margin-bottom:15px; background:white; padding:10px; border-radius:12px; box-shadow:0 2px 5px rgba(0,0,0,0.05); }
        .stock-tab { flex:1; text-align:center; padding:10px; border-radius:8px; cursor:pointer; font-weight:bold; color:#666; transition:0.2s; }
        .stock-tab.active { background:var(--primary); color:white; }
        .stock-tab.alert { color:var(--red); background:#ffebee; }
        .stock-tab.alert.active { background:var(--red); color:white; }
        
        .menu-item { border-bottom: 1px solid #eee; padding: 15px 0; border-left: 4px solid transparent; transition:0.2s; }
        .menu-top { display: flex; justify-content: space-between; align-items: center; }
        
        .menu-item.stock-off { background: #fff5f5; border-left-color: var(--red); padding-left: 10px; }
        .menu-item.partial-off { background: #fffbf5; border-left-color: orange; padding-left: 10px; }
        
        /* Nested Details */
        .menu-subs { background: #fafafa; padding: 15px; border-radius: 8px; margin-top: 10px; display: none; border: 1px solid #eee; }
        .menu-subs.show { display: block; }
        
        .sub-sec-title { font-size: 11px; font-weight: 800; color: #999; text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 5px 0; }
        .sub-opt { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #555; padding: 8px 0; border-bottom: 1px dashed #eee; }

        .cat-badge { background: var(--red); color: white; padding: 4px 10px; border-radius: 12px; font-size: 11px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .cat-badge.active-filter { border: 2px solid #333; }

        /* Search box for Menu/Stock */
        .menu-search-wrap { display:flex; gap:8px; align-items:center; flex:0 0 auto; }
        .menu-search-input { width: 260px; max-width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px; font-size: 13px; font-weight: 800; background: #fff; }
        .menu-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.18); }

        .details-btn-alert { background: #ffebee !important; color: var(--red) !important; border: 1px solid #ffcdd2 !important; }
        
        .switch { position: relative; display: inline-block; width: 40px; height: 20px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
        input:checked + .slider { background-color: var(--green); }
        input:checked + .slider:before { transform: translateX(20px); }
        
        .sm-switch { width: 34px; height: 18px; margin-left:10px; }
        .sm-switch .slider:before { height: 14px; width: 14px; }
        .sm-switch input:checked + .slider:before { transform: translateX(16px); }
        
        .cat-cont.show-closed-only .menu-item:not(.has-stock-issues) { display: none; }
        
        /* YENİ: Daha belirgin kategori başlıkları */
        .cat-head {
            background: linear-gradient(135deg, var(--primary), #ff7a33);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 900;
            letter-spacing: 1px;
            margin-bottom: 15px;
            box-shadow: 0 4px 10px rgba(255, 90, 0, 0.3);
            text-transform: uppercase;
        }
        
        .cat-cont {
            background: #fafafa;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 25px;
            border: 2px solid #eee;
        }
        
        /* YENİ: Daha belirgin ürün isimleri */
        .menu-item .product-name {
            font-size: 15px;
            font-weight: 700;
            color: #333;
            margin-bottom: 4px;
        }
        
        .menu-item .stock-status-badge {
            display: inline-block;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 12px;
            font-weight: bold;
            margin-top: 4px;
        }
        
        .menu-item .stock-status-badge.closed-today {
            background: #fff3cd;
            color: #856404;
        }
        
        .menu-item .stock-status-badge.closed-manual {
            background: #ffebee;
            color: var(--red);
        }
        
        /* YENİ: Close Options Modal */
        .close-option-btn {
            background: white;
            border: 2px solid #ddd;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 600;
        }
        
        .close-option-btn:hover {
            border-color: var(--primary);
            background: #fff5eb;
        }
        
        .close-option-btn .icon {
            font-size: 28px;
        }
        
        .close-option-btn .text-content h4 {
            margin: 0 0 4px 0;
            font-size: 15px;
            color: #333;
        }
        
        .close-option-btn .text-content p {
            margin: 0;
            font-size: 12px;
            color: #666;
            font-weight: normal;
        }
        
        /* ========================================== */
        /* 📱 RESPONSIVE STYLES - MOBILE & TABLET */
        /* ========================================== */
        
        /* TABLET (iPad) - 1024px ve altı */
        @media screen and (max-width: 1024px) {
            .sidebar { width: 220px; }
            .live-panel { width: 320px; }
            .page-title { font-size: 20px; }
            .top-controls { gap: 8px; }
            .wa-btn-top { padding: 8px 12px; font-size: 13px; }
            #chatAlertBtn { padding: 8px 14px; font-size: 13px; }
        }
        
        /* MOBILE - 768px ve altı */
        @media screen and (max-width: 768px) {
            body { flex-direction: column; }
            
            /* Sidebar gizle, mobile nav göster */
            .sidebar { 
                position: fixed; 
                left: -260px; 
                top: 0; 
                height: 100%; 
                z-index: 9999; 
                transition: 0.3s; 
            }
            .sidebar.mobile-visible { left: 0; }
            
            /* Main content tam genişlik */
            .main { 
                width: 100%; 
                padding: 15px; 
                padding-bottom: 90px; 
            }
            
            /* Live panel mobilde overlay */
            .live-panel { 
                position: fixed; 
                right: -100%; 
                top: 0; 
                width: 100%; 
                height: 100%; 
                z-index: 9998; 
                transition: 0.3s; 
                box-shadow: -5px 0 15px rgba(0,0,0,0.2); 
            }
            .live-panel.mobile-visible { right: 0; }
            
            /* Mobile nav göster */
            .mobile-nav { display: flex; }
            
            /* Top bar mobilde küçült */
            .top-bar { 
                flex-wrap: wrap; 
                padding-bottom: 10px; 
                min-height: auto; 
            }
            .page-title { font-size: 18px; width: 100%; margin-bottom: 10px; }
            .top-controls { 
                width: 100%; 
                justify-content: space-between; 
                gap: 5px; 
            }
            .wa-btn-top { padding: 6px 10px; font-size: 12px; }
            #chatAlertBtn { padding: 6px 12px; font-size: 12px; }
            #audioStatusIcon { width: 35px; height: 35px; font-size: 18px; }
            
            /* Order cards mobilde optimize et */
            .ord-card { padding: 12px; font-size: 12px; }
            .ord-head span:first-child { font-size: 22px !important; }
            .item-row { padding: 6px 0; font-size: 12px; }
            .prod-thumb { width: 35px !important; height: 35px !important; }
            .btn { padding: 8px 10px; font-size: 11px; }
            
            /* Menu items mobilde */
            .menu-item { padding: 10px; font-size: 13px; }
            .cat-head { padding: 12px 15px; font-size: 16px; }
            
            /* Modal'lar mobilde */
            .modal-box { width: 95%; max-width: 95%; }
            .chat-msgs { min-height: 200px; }
        }
        
        /* SMALL MOBILE - 480px ve altı */
        @media screen and (max-width: 480px) {
            .page-title { font-size: 16px; }
            .top-controls { flex-direction: column; width: 100%; }
            .ord-head span:first-child { font-size: 20px !important; }
            .item-row { flex-direction: column; align-items: flex-start; gap: 5px; }
            .btn { padding: 6px 8px; font-size: 10px; }
        }


/* =============================== */
/* 🔒 MOBILE ONLY HELPERS */
/* =============================== */
.mobile-only { display: none !important; }
@media screen and (max-width: 768px) {
    .mobile-only { display: inline-flex !important; }
}

/* =============================== */
/* 📞 MANUAL ORDER STYLES */
/* =============================== */
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media screen and (max-width: 768px) {
    .manual-grid { grid-template-columns: 1fr; }
}
.manual-field label { font-size: 12px; font-weight: 800; color: #555; display: block; margin-bottom: 6px; }
.manual-field input, .manual-field select, .manual-field textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; background: white; }
.manual-summary { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid #eee; background: #fafafa; font-weight: 800; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.badge-red { background: #ffebee; color: var(--red); border: 1px solid #ffcdd2; }
    
    /* Mini badge (Verification pending count) */
    .mini-badge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background:#e11d48;
        color:#fff;
        border-radius:999px;
        padding:2px 8px;
        font-size:11px;
        font-weight:900;
        line-height:1;
        min-width:18px;
    }

    /* =============================== */
    /* 📞 WHATSAPP LEADS PANEL         */
    /* =============================== */
    .mob-item { position: relative; }
    .leads-tab {
        padding:7px 12px; background:#f4f6f8; border:1px solid #e0e0e0; border-radius:20px;
        font-size:12px; font-weight:bold; color:#555; cursor:pointer; transition:0.2s;
        display:inline-flex; align-items:center;
    }
    .leads-tab:hover { background:#eee; }
    .leads-tab.active { background:#25D366; color:white; border-color:#128C7E; }
    .lead-card {
        border:1px solid #e0e0e0; border-radius:12px; padding:14px; background:#fff;
        transition:0.2s; border-left:4px solid #25D366;
    }
    .lead-card.urgent { border-left-color:#e11d48; background:#fff5f5; animation: pulse-bg 2s infinite; }
    .lead-card.contacted { border-left-color:#3b82f6; opacity:0.85; }
    .lead-card.converted { border-left-color:var(--green); opacity:0.7; }
    .lead-card.dismissed { border-left-color:#999; opacity:0.5; }
    @keyframes pulse-bg {
        0%, 100% { background:#fff5f5; }
        50% { background:#ffe4e4; }
    }
    .lead-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
    .lead-info { flex:1; min-width:240px; }
    .lead-ar-original {
        font-size:12px; color:#888; margin-top:3px; padding:4px 8px;
        background:#f7f7f7; border-radius:6px; font-style:italic;
        direction:rtl; text-align:right;
    }
    .lead-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
    .lead-status-badge {
        display:inline-block; padding:3px 10px; border-radius:12px;
        font-size:11px; font-weight:bold; text-transform:uppercase;
    }
    .lead-status-badge.pending { background:#fff5eb; color:#ff5a00; }
    .lead-status-badge.contacted { background:#e3f2fd; color:var(--blue); }
    .lead-status-badge.converted { background:#e8f5e9; color:var(--green); }
    .lead-status-badge.dismissed { background:#eee; color:#666; }
    .lead-time-ago { font-size:11px; color:#999; margin-left:6px; }


/* =============================== */
/* 🛒 MANUAL ORDER - YENİ STİLLER  */
/* =============================== */
.mo-section-title { font-size:13px; font-weight:900; color:#555; text-transform:uppercase; letter-spacing:.8px; margin:18px 0 10px 0; padding-bottom:6px; border-bottom:2px solid #f0f0f0; display:flex; align-items:center; gap:8px; }
.mo-section-title span { font-size:16px; }

/* Müşteri arama */
.cust-search-wrap { position:relative; }
.cust-search-input { width:100%; padding:12px 12px 12px 40px; border:2px solid #ddd; border-radius:10px; font-size:14px; font-weight:700; transition:.2s; }
.cust-search-input:focus { border-color:var(--primary); outline:none; }
.cust-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#aaa; font-size:18px; }
.cust-saved-badge { display:inline-flex; align-items:center; gap:6px; background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; margin-top:8px; }

/* Ürün seçici */
.mp-cat-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; margin-bottom:12px; }
.mp-cat-tabs::-webkit-scrollbar { display:none; }
.mp-cat-pill { background:white; border:1px solid #ddd; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:.15s; }
.mp-cat-pill.active { background:var(--primary); color:white; border-color:var(--primary); }

.mp-prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:280px; overflow-y:auto; padding-right:4px; }
@media(max-width:600px){ .mp-prod-grid { grid-template-columns:repeat(2,1fr); } }
.mp-prod-card { background:white; border:1px solid #eee; border-radius:10px; padding:8px; cursor:pointer; text-align:center; transition:.15s; position:relative; }
.mp-prod-card:hover { border-color:var(--primary); background:#fff5eb; transform:scale(1.02); }
.mp-prod-card.out-of-stock { opacity:.4; pointer-events:none; }
.mp-prod-img { width:100%; height:70px; object-fit:cover; border-radius:7px; background:#f5f5f5; margin-bottom:5px; }
.mp-prod-name { font-size:11px; font-weight:700; line-height:1.2; margin-bottom:4px; }
.mp-prod-price { font-size:11px; color:var(--primary); font-weight:800; }
.mp-out-badge { position:absolute; top:4px; right:4px; background:#e74c3c; color:white; font-size:9px; padding:2px 5px; border-radius:4px; font-weight:900; }

/* Sepet */
.mc-empty { text-align:center; color:#bbb; padding:20px 0; font-size:13px; }
.mc-item { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f0f0f0; }
.mc-item-info { flex:1; }
.mc-item-name { font-size:12px; font-weight:700; }
.mc-item-price { font-size:11px; color:#888; }
.mc-qty-ctrl { display:flex; align-items:center; gap:6px; }
.mc-qty-btn { width:26px; height:26px; border:none; border-radius:6px; background:#f0f0f0; font-size:16px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.1s; }
.mc-qty-btn:hover { background:#ddd; }
.mc-qty-num { font-size:13px; font-weight:900; min-width:20px; text-align:center; }
.mc-del-btn { background:none; border:none; color:#ccc; font-size:18px; cursor:pointer; padding:2px; }
.mc-del-btn:hover { color:var(--red); }
.mc-subtotal { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:10px; border-top:2px dashed #eee; font-weight:800; }

/* Varyant/Addon Modal */
#manualProdModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:20000; align-items:flex-end; justify-content:center; }
@media(min-width:600px){ #manualProdModal { align-items:center; } }
.mpm-box { background:white; border-radius:16px 16px 0 0; width:100%; max-width:460px; max-height:85vh; overflow-y:auto; padding:20px; }
@media(min-width:600px){ .mpm-box { border-radius:16px; } }
.mpm-img { width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:12px; background:#f5f5f5; }
.mpm-name { font-size:17px; font-weight:900; margin-bottom:4px; }
.mpm-base-price { font-size:14px; color:var(--primary); font-weight:700; margin-bottom:14px; }
.mpm-section { margin-bottom:14px; }
.mpm-section-title { font-size:12px; font-weight:900; color:#666; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.mpm-var-btn { background:white; border:2px solid #ddd; padding:8px 14px; border-radius:8px; margin:0 6px 6px 0; cursor:pointer; font-size:13px; font-weight:700; transition:.15s; }
.mpm-var-btn.active { border-color:var(--primary); background:#fff5eb; color:var(--primary); }
.mpm-addon-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #f5f5f5; }
.mpm-addon-check { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
.mpm-addon-name { flex:1; font-size:13px; }
.mpm-addon-price { font-size:13px; font-weight:700; color:var(--primary); }
.mpm-qty-row { display:flex; align-items:center; gap:12px; margin:14px 0; }
.mpm-qty-btn { width:32px; height:32px; border:1px solid #ddd; border-radius:8px; background:#f8f8f8; font-size:18px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.mpm-add-btn { width:100%; padding:14px; background:var(--primary); color:white; border:none; border-radius:10px; font-size:15px; font-weight:900; cursor:pointer; margin-top:8px; }
.mpm-close { position:absolute; top:16px; right:16px; background:#f0f0f0; border:none; border-radius:50%; width:32px; height:32px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* Receipt iyileştirme */
.pos-item-row td { padding:5px 2px; font-size:inherit; border-bottom:1px dashed #eee; }
.pos-item-row td:first-child { width:30px; font-weight:bold; }
.pos-item-row td:last-child { text-align:right; font-weight:bold; white-space:nowrap; }
.pos-fee-row td { padding:3px 2px; font-size:0.9em; color:#555; }
.pos-grand-total td { padding:8px 2px; font-size:1.3em; font-weight:900; border-top:3px double #000; }