:root {
            --bg-dark: #09090b;
            --surface: #18181b;
            --surface-hover: #27272a;
            --text-main: #f4f4f5;
            --text-muted: #a1a1aa;
            
            /* Status Colors */
            --color-new: #eab308;     /* Sarı/Altın - Yeni */
            --color-prep: #3b82f6;    /* Mavi - Hazırlanıyor */
            --color-ready: #22c55e;   /* Yeşil - Hazır */
            --color-danger: #ef4444;  /* Kırmızı - Gecikmiş */
            
            --border: #3f3f46;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Tablette kaydırma sadece grid içinde olacak */
            user-select: none; /* Yanlışlıkla metin seçmeyi engelle */
        }

        /* Top Header Board */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            height: 80px;
        }

        .header-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .header-brand h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }
        .header-brand h1 span[data-brand-accent] { color: var(--color-prep, #c9a227); }
        .clock { font-size: 1.2rem; font-weight: 500; color: var(--color-new); font-variant-numeric: tabular-nums; }

        .stats {
            display: flex;
            gap: 1.5rem;
        }
        .stat-badge {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(255,255,255,0.05);
            padding: 0.5rem 1rem;
            border-radius: 12px;
            font-weight: 600;
        }
        .stat-badge .dot { width: 12px; height: 12px; border-radius: 50%; }
        .dot.new { background: var(--color-new); box-shadow: 0 0 10px var(--color-new); }
        .dot.prep { background: var(--color-prep); box-shadow: 0 0 10px var(--color-prep); }
        
        .simulate-btn {
            background: rgba(255,255,255,0.1); border: 1px solid var(--border);
            color: white; padding: 0.5rem 1rem; border-radius: 8px;
            cursor: pointer; font-weight: 600; transition: 0.2s;
        }
        .simulate-btn:active { transform: scale(0.95); }

        .mute-btn {
            display: flex; align-items: center; justify-content: center;
            width: 44px; height: 44px;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text-main);
            cursor: pointer;
            transition: 0.2s;
        }
        .mute-btn i { font-size: 1.2rem; }
        .mute-btn:hover { background: rgba(255,255,255,0.1); }
        .mute-btn.muted {
            background: rgba(239, 68, 68, 0.15);
            border-color: var(--color-danger);
            color: var(--color-danger);
        }

        /* Waiter Banner */
        .waiter-banner {
            position: sticky; top: 0;
            display: flex; flex-direction: column; gap: 8px;
            padding: 0 2rem;
            z-index: 5;
        }
        .waiter-banner:empty { display: none; }
        .waiter-banner { padding-top: 1rem; }
        .waiter-card {
            display: flex; align-items: center; justify-content: space-between;
            gap: 1rem;
            padding: 0.85rem 1.25rem;
            background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(234, 179, 8, 0.08));
            border: 1px solid var(--color-new);
            border-radius: 12px;
            animation: slideDown 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 6px 20px rgba(234, 179, 8, 0.15);
        }
        .waiter-card .waiter-info { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
        .waiter-card .waiter-info i { font-size: 1.6rem; color: var(--color-new); animation: bellShake 1.2s ease-in-out infinite; }
        @keyframes bellShake {
            0%, 50%, 100% { transform: rotate(0); }
            10% { transform: rotate(-15deg); }
            20% { transform: rotate(12deg); }
            30% { transform: rotate(-8deg); }
            40% { transform: rotate(4deg); }
        }
        .waiter-card .waiter-table { font-size: 1.05rem; }
        .waiter-card .waiter-ago { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
        .waiter-card .waiter-dismiss {
            background: var(--color-new);
            color: var(--bg-dark);
            border: none;
            padding: 0.55rem 1rem;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.15s;
        }
        .waiter-card .waiter-dismiss:hover { filter: brightness(1.1); }
        .waiter-card .waiter-dismiss:active { transform: scale(0.95); }

        /* Main KDS Grid */
        main {
            flex: 1;
            padding: 2rem;
            overflow-x: auto;
            overflow-y: hidden;
            display: flex;
            gap: 1.5rem;
            align-items: flex-start;
        }
        
        /* Yatay scroll için pseudo-element */
        main::after { content: ''; min-width: 1rem; }

        /* Order Ticket */
        .ticket {
            min-width: 340px;
            max-width: 340px;
            background: var(--surface);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            border-top: 6px solid var(--color-new);
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            transition: all 0.3s ease;
            position: relative;
            max-height: calc(100vh - 120px);
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .ticket.prep { border-top-color: var(--color-prep); }
        .ticket.delayed { border-top-color: var(--color-danger); animation: pulseDanger 2s infinite; }
        .ticket.done { transform: scale(0.9); opacity: 0; pointer-events: none; }

        @keyframes pulseDanger {
            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); }
            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

        /* Ticket Header */
        .ticket-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .order-meta { display: flex; flex-direction: column; gap: 4px; }
        .order-id { font-size: 1.5rem; font-weight: 800; }
        .table-no { font-size: 1rem; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 4px; }
        
        .timer {
            background: rgba(255,255,255,0.1);
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 1.1rem;
            font-variant-numeric: tabular-nums;
        }
        .timer.danger { background: rgba(239, 68, 68, 0.2); color: var(--color-danger); }

        /* Ticket Customer Info */
        .ticket-customer {
            padding: 1rem 1.25rem;
            background: rgba(0,0,0,0.2);
            border-bottom: 1px solid var(--border);
        }
        .customer-name { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;}
        .customer-note { font-size: 0.95rem; color: var(--color-new); font-style: italic; background: rgba(234, 179, 8, 0.1); padding: 8px; border-radius: 6px; }

        /* Ticket Items */
        .ticket-items {
            flex: 1;
            overflow-y: auto;
            padding: 1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: 1.2rem;
            font-weight: 500;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: 0.2s;
        }
        .item:active { background: var(--surface-hover); }
        .item-qty { 
            background: var(--surface-hover); 
            min-width: 32px; height: 32px; 
            display: flex; align-items: center; justify-content: center; 
            border-radius: 6px; font-weight: 700; font-size: 1rem;
        }
        .item-name { flex: 1; line-height: 1.3; transition: 0.2s; }
        .item-name .variant-label {
            display: block;
            margin-top: 3px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--color-new);
            letter-spacing: 0.02em;
        }
        
        /* Çizilmiş/Tamamlanmış ürün efekti */
        .item.completed { opacity: 0.4; }
        .item.completed .item-name { text-decoration: line-through; }

        /* Ticket Actions */
        .ticket-actions {
            padding: 1.25rem;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 10px;
        }
        .btn {
            flex: 1;
            padding: 1rem;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: transform 0.1s, filter 0.2s;
            color: var(--bg-dark);
        }
        .btn:active { transform: scale(0.96); }
        .btn-prep { background: var(--color-prep); color: white; }
        .btn-ready { background: var(--color-ready); }
        
        .hidden { display: none !important; }

        /* Scrollbar styling for tickets */
        .ticket-items::-webkit-scrollbar { width: 6px; }
        .ticket-items::-webkit-scrollbar-track { background: transparent; }
        .ticket-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

        /* Empty state */
        .empty-board {
            flex: 1;
            align-self: center;
            text-align: center;
            color: var(--text-muted);
            padding: 4rem 2rem;
            max-width: 480px;
            margin: auto;
        }
        .empty-board i { font-size: 4rem; color: var(--border); display: block; margin-bottom: 1rem; }
        .empty-board h2 { font-size: 1.5rem; color: var(--text-main); margin-bottom: 0.5rem; font-weight: 600; }
        .empty-board p { line-height: 1.6; font-size: 0.95rem; }