/* KAS & ACARA STYLES */

.kas-container {
    padding: 0 5% 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Event Board Card */
.board-section {
    margin-bottom: 40px;
}
.event-card {
    background: linear-gradient(145deg, #111, #000);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(212,175,55,0.1), inset 0 0 20px rgba(212,175,55,0.05);
    position: relative;
    overflow: hidden;
}
.event-card::before {
    content: ''; position: absolute; top:0; left:50%; transform:translateX(-50%);
    width: 60%; height: 5px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 20px var(--gold);
}

.event-host {
    font-size: 2.5rem;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    margin: 15px 0;
    text-shadow: 0 0 20px rgba(212,175,55,0.4);
}
.event-meta {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: 1.1rem;
    display: flex; gap:20px; justify-content: center;
    margin-bottom: 20px;
}
.event-meta span {
    background: rgba(0,242,255,0.1);
    padding: 8px 15px; border-radius: 8px;
    border: 1px solid rgba(0,242,255,0.3);
    color: var(--neon-cyan);
}

/* Kas Summary */
.kas-summary-card {
    background: #000;
    border: 2px solid var(--neon-cyan);
    border-radius: 12px;
    text-align: center;
    padding: 30px;
    margin: 40px auto;
    box-shadow: 0 0 30px rgba(0,242,255,0.2);
}
.kas-summary-card h3 { color: #888; letter-spacing: 2px; font-size: 0.9rem; }
.kas-summary-card h1 { 
    font-size: clamp(3rem, 8vw, 5rem); 
    color: #fff; 
    margin: 10px 0; 
    text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px var(--neon-cyan);
    font-family: 'Outfit', sans-serif;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
}
.kas-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    min-width: 600px;
}
.kas-table th, .kas-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kas-table th {
    background: #111;
    color: var(--gold);
    font-family: 'Outfit', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Status Badges */
.badge-lunas {
    background: rgba(0, 255, 128, 0.1);
    color: #00ff80;
    border: 1px solid #00ff80;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 255, 128, 0.3);
    cursor: pointer;
}
.badge-belum {
    background: rgba(255, 0, 85, 0.1);
    color: #ff0055;
    border: 1px solid #ff0055;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    animation: sirene 2s infinite;
    cursor: pointer;
}

@keyframes sirene {
    0% { box-shadow: 0 0 5px rgba(255, 0, 85, 0.2); background: rgba(255, 0, 85, 0.1); }
    50% { box-shadow: 0 0 20px #ff0055; background: rgba(255, 0, 85, 0.3); }
    100% { box-shadow: 0 0 5px rgba(255, 0, 85, 0.2); background: rgba(255, 0, 85, 0.1); }
}

.ledger-in { color: #00ff80; font-weight: bold; }
.ledger-out { color: #ff0055; font-weight: bold; }

/* Admin Tabs */
.admin-tabs { display: flex; gap:10px; border-bottom: 1px solid #333; margin-bottom: 20px; }
.btn-tab { 
    background: transparent; border:none; color: #888; 
    padding: 10px 15px; cursor: pointer; font-size: 1rem; font-weight: 700;
    position: relative;
}
.btn-tab.active { color: var(--gold); }
.btn-tab.active::after {
    content:''; position: absolute; bottom:-1px; left:0; width:100%; height:2px;
    background: var(--gold); box-shadow: 0 0 10px var(--gold);
}