/* style.css */
:root {
    --bg: #0a0a0a;
    --brown: #8b5e3c;
    --gold: #d4af37;
    --white: #ffffff;
    --gray: #222;
}

body, html {
    margin: 0; padding: 0;
    background-color: var(--bg);
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    height: 100vh; width: 100vw;
}

#init-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg); z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.loading-bar {
    width: 200px; height: 4px; background: var(--gray);
    margin-top: 20px; position: relative;
}

.loading-bar::after {
    content: ''; position: absolute; left: 0; top: 0; height: 100%;
    width: 50%; background: var(--gold);
    animation: loading 1.5s infinite ease-in-out;
}

@keyframes loading {
    0% { left: 0; width: 0; }
    50% { left: 0; width: 100%; }
    100% { left: 100%; width: 0; }
}

.hidden { display: none !important; }

/* Animasi Smooth */
.fade-in { animation: fadeIn 0.8s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    color: #ff4d4d !important;
}
@keyframes blink-animation {
    to { visibility: hidden; }
}

/* CSS untuk status yang lebih hidup */
.table-card.available { 
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(0, 0, 0, 0.5));
    border-bottom: 6px solid #28a745; 
}
.table-card.in_use { 
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.2), rgba(0, 0, 0, 0.5));
    border-bottom: 6px solid #007bff; 
}
.table-card.pending_expired { 
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.2), rgba(0, 0, 0, 0.5));
    border-bottom: 6px solid #ff9900; 
}

.table-timer.blink {
    animation: blink-red 1s infinite;
}

@keyframes blink-red {
    0% { color: var(--gold); }
    50% { color: #ff4d4d; opacity: 0.5; }
    100% { color: var(--gold); }
}