:root {
    --bg-color: #121212;
    --surface: #242424;
    --primary: #E65100;
    --primary-light: #FF9800;
    --text-main: #FFFFFF;
    --text-sec: #B0B0B0;
    --danger: #F44336;
    --success: #4CAF50;
    --yellow: #FFEB3B;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--bg-color); color: var(--text-main); overscroll-behavior-y: none; padding-bottom: 100px; user-select: none; }
.hidden { display: none !important; }

/* Top App Bar */
.top-app-bar {
    background-color: var(--bg-color); padding: 15px 20px;
    position: sticky; top: 0; z-index: 100; transition: 0.3s;
}
.top-app-bar.active-mode { background-color: var(--primary); }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.app-title { font-size: 24px; font-weight: 800; color: var(--primary-light); letter-spacing: 1px; transition: 0.3s; }
.top-app-bar.active-mode .app-title { color: white; font-size: 22px; }
.kasa-status { font-size: 13px; color: var(--danger); font-weight: 600; margin-top: 4px; transition: 0.3s; }
.kasa-status.online { color: var(--success); }
.top-app-bar.active-mode .kasa-status { display: none; }
.icon-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: white; transition: 0.3s; }
.top-app-bar.active-mode .icon-btn { display: none; }
.back-btn { background: none; border: none; color: white; font-size: 18px; font-weight: 800; cursor: pointer; margin-top: 10px; display: block; }

/* Tab Row */
.tab-row {
    display: flex; background: #0F0F0F;
    position: sticky; top: 70px; z-index: 99;
}
.tab-btn {
    flex: 1; background: transparent; border: none; color: #888;
    padding: 12px 5px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    border-bottom: 4px solid transparent; cursor: pointer; transition: 0.2s;
}
.tab-btn.active { color: var(--primary-light); border-bottom-color: var(--primary-light); }
.tab-icon { font-size: 24px; }
.tab-text { font-size: 10px; font-weight: 600; }

/* Content Area */
.content-area { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Cards */
.card {
    background: var(--surface); border-radius: 16px; padding: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; height: 120px; box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    cursor: pointer; transition: transform 0.1s;
}
.card:active { transform: scale(0.95); }
.card.orange { background: var(--primary-light); color: black; }
.card.red { background: var(--danger); color: white; }
.card.yellow { background: var(--yellow); color: black; }
.card-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { font-size: 16px; font-weight: 800; color: var(--primary-light); }
.card.orange .card-price, .card.yellow .card-price { color: #333; }
.card.red .card-price { color: white; }

/* Masalar List */
.masalar-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; }
.adisyon-card {
    background: var(--surface); border-radius: 16px; padding: 16px; border: 1px solid #333;
    display: flex; flex-direction: column; gap: 12px;
}
.adisyon-header { display: flex; justify-content: space-between; border-bottom: 1px solid #444; padding-bottom: 8px; }
.adisyon-title { font-size: 20px; font-weight: 800; color: white; }
.adisyon-time { color: var(--text-sec); font-size: 14px; }
.adisyon-items { display: flex; flex-direction: column; gap: 6px; }
.a-item { display: flex; justify-content: space-between; font-size: 15px; }
.a-item-name { color: #DDD; }
.a-item-price { color: var(--success); font-weight: 800; }
.adisyon-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid #444; }
.adisyon-total { font-size: 22px; font-weight: 800; color: var(--primary-light); }
.btn-ilave { background: var(--primary); color: white; border: none; padding: 12px 16px; border-radius: 8px; font-weight: 800; cursor: pointer; }
.btn-tamam { background: var(--success); color: white; border: none; padding: 12px 16px; border-radius: 8px; font-weight: 800; cursor: pointer; }
.btn-yazdir { background: #424242; color: white; border: none; padding: 12px 16px; border-radius: 8px; font-weight: 800; cursor: pointer; }
.btn-icon-small { background: #333; color: white; border: none; border-radius: 6px; padding: 6px; font-size: 16px; cursor: pointer; }

/* Floating Action Button */
.fab-masalar {
    position: fixed; bottom: 24px; right: 24px; z-index: 90;
    background: #D84315; color: white; border: none;
    border-radius: 16px; padding: 16px 24px; font-size: 20px; font-weight: 800;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); cursor: pointer; transition: 0.2s;
}
.fab-masalar:active { transform: scale(0.95); }

/* Bottom App Bar */
.bottom-app-bar {
    position: fixed; bottom: 0; left: 0; right: 0; height: 80px; z-index: 95;
    background: var(--primary); padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
}
.bab-title { font-size: 20px; font-weight: 800; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.bab-subtitle { font-size: 16px; color: white; }
.bab-actions { display: flex; gap: 12px; align-items: center; }
.btn-text { background: none; border: none; color: white; font-size: 18px; cursor: pointer; }
.btn-contained { background: var(--success); color: white; border: none; padding: 12px 16px; border-radius: 24px; font-size: 16px; font-weight: 800; cursor: pointer; }

/* Bottom Sheet */
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1000; opacity: 0; pointer-events: none; transition: 0.3s; }
.bottom-sheet {
    position: fixed; left: 0; right: 0; bottom: -100%;
    background: #222; border-top-left-radius: 24px; border-top-right-radius: 24px;
    padding: 24px 20px; z-index: 1001; transition: bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: 90vh; overflow-y: auto;
}
.bottom-sheet.open { bottom: 0; }
.overlay.open { opacity: 1; pointer-events: auto; }

.sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.sheet-header h2 { font-size: 28px; font-weight: 900; color: white; max-width: 60%; }
.quantity-selector { display: flex; align-items: center; background: #333; border-radius: 8px; padding: 8px 16px; }
.quantity-selector button { background: none; border: none; color: white; font-size: 24px; font-weight: bold; width: 30px; cursor: pointer; }
#qtyText { color: #FF9800; font-size: 22px; font-weight: bold; margin: 0 16px; }

.section-title { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 12px; }
.chips-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.chip {
    background: transparent; color: #ccc; border: 1px solid #444;
    padding: 10px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: normal;
}
.chip.selected { background: #444; color: white; border-color: #555; }
#optionsContainer .chip.selected { background: #4CAF50; color: white; border-color: #4CAF50; font-weight: bold; }

.chip.chip-purple { border: 2px solid #9C27B0; color: #9C27B0; font-weight: bold; }
.chip.chip-purple.selected { background: #9C27B0; border-color: #9C27B0; color: white; }

.chip.chip-pink { border: 2px solid #E91E63; color: #E91E63; font-weight: bold; }
.chip.chip-pink.selected { background: #E91E63; border-color: #E91E63; color: white; }

.chip.chip-teal { border: 2px solid #00838F; color: #00838F; font-weight: bold; }
.chip.chip-teal.selected { background: #00838F; border-color: #00838F; color: white; }

.chip.chip-orange { border: 2px solid #F57C00; color: #F57C00; font-weight: bold; }
.chip.chip-orange.selected { background: #F57C00; border-color: #F57C00; color: white; }

.drinks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.drink-btn {
    background: #242424; border-radius: 8px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: normal; font-size: 14px; position: relative; cursor: pointer; border: none;
}
.drink-btn.selected { filter: brightness(1.3); border: 2px solid white; }
.drink-badge {
    position: absolute; top: -6px; right: -6px; background: #FF9800; color: black;
    width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 12px;
}

.custom-input { width: 100%; background: #222; border: 1px solid #444; color: white; padding: 16px; border-radius: 4px; font-size: 16px; margin-bottom: 16px; outline: none; }
.custom-input:focus { border-color: #FF9800; }

.btn-massive {
    width: 100%; background: #FF9800; color: black; border: none;
    padding: 16px; border-radius: 8px; font-size: 18px; font-weight: bold; margin-top: 16px; cursor: pointer;
}

/* Modal */
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -45%);
    background: #242424; padding: 24px; border-radius: 20px; width: 90%; max-width: 350px;
    z-index: 2001; opacity: 0; pointer-events: none; transition: 0.3s;
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.modal h3 { font-size: 22px; color: white; margin-bottom: 8px; }
.modal p { color: #888; font-size: 14px; margin-bottom: 20px; }
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.color-circle { width: 40px; height: 40px; border-radius: 50%; margin: auto; cursor: pointer; border: 3px solid transparent; }
.color-circle.selected { border-color: white; transform: scale(1.1); }
.modal-actions { display: flex; justify-content: flex-end; }

/* Custom Card Colors */
.card.card-purple { background: #8E24AA; color: white; }
.card.card-purple .card-price { color: white; opacity: 0.9; }

.card.card-green { background: #388E3C; color: white; }
.card.card-green .card-price { color: white; opacity: 0.9; }

.card.card-red { background: #D32F2F; color: white; }
.card.card-red .card-price { color: white; opacity: 0.9; }

.card.card-dark-yellow { background: #F9A825; color: black; }
.card.card-dark-yellow .card-price { color: black; opacity: 0.9; }

.card.card-yellow { background: #FFEB3B; color: black; }
.card.card-yellow .card-price { color: black; opacity: 0.9; }

.card.card-dark-red { background: #B71C1C; color: white; }
.card.card-dark-red .card-price { color: white; opacity: 0.9; }

/* Drink Buttons Colors */
.drink-btn.cola-red, .card.cola-red { background: #8B0000; color: white; }
.drink-btn.cola-zero, .card.cola-zero { background: #111111; color: white; }
.drink-btn.sprite-green, .card.sprite-green { background: #004D40; color: white; }
.drink-btn.fanta-yellow, .card.fanta-yellow { background: #E65100; color: white; }
.drink-btn.ayran-white, .card.ayran-white { background: #827717; color: white; }
.drink-btn.water-blue, .card.water-blue { background: #00838F; color: white; }
.drink-btn.soda-green, .card.soda-green { background: #1B5E20; color: white; }
.drink-btn.salgam-purple, .card.salgam-purple { background: #4A148C; color: white; }