:root { 
    --gold-primary: #D4AF37; 
    --gold-hover: #C5A059;
    --bg-main: #0a0a0a; 
    --bg-card: #161616;
    --text-main: #f8f9fa;
}

html { scroll-behavior: smooth; }
body { background: var(--bg-main); color: var(--text-main); font-family: 'Montserrat', sans-serif; }
h1, h2, h3, h4, h5, .brand-font { font-family: 'Playfair Display', serif; }
.text-gold { color: var(--gold-primary) !important; }

/* Layout & Header */
.sticky-header { 
    position: sticky; top: 0; z-index: 1020; 
    background: rgba(10, 10, 10, 0.95); 
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); 
    padding: 15px;
}

/* Sidebar Kiri */
.sidebar-glass { 
    position: sticky; top: 90px; height: calc(100vh - 110px); overflow-y: auto; 
    background: rgba(22, 22, 22, 0.6); backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 15px 10px; 
}
.sidebar-glass::-webkit-scrollbar { width: 3px; }
.sidebar-glass::-webkit-scrollbar-thumb { background: var(--gold-primary); border-radius: 10px; }

/* Navigasi Kategori */
.nav-pills .nav-link { 
    color: #b0b0b0; border-radius: 8px; margin-bottom: 5px; transition: all 0.3s;
    font-size: 0.85rem; padding: 10px; text-align: left; cursor: pointer;
}
.nav-pills .nav-link:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
.nav-pills .nav-link.active { 
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05)) !important; 
    color: var(--gold-primary) !important; font-weight: 700; border-left: 3px solid var(--gold-primary); 
}

/* Menu Cards */
.menu-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; transition: 0.3s; cursor: pointer; }
.menu-card:hover { border-color: var(--gold-primary); transform: translateY(-3px); }
.menu-img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }

/* STATE VISUAL MENU: Disabled & Selected */
.menu-disabled {
    opacity: 0.55;
    cursor: not-allowed !important;
    filter: grayscale(80%);
}
.menu-disabled:hover {
    border-color: rgba(255,255,255,0.05);
    transform: none;
}
.menu-selected {
    border-color: var(--gold-primary) !important;
    background-color: rgba(212, 175, 55, 0.05) !important;
}

/* Overlays */
.fullscreen-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg-main); z-index:1050; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.glass-panel { background: rgba(22, 22, 22, 0.9); backdrop-filter: blur(16px); padding: 30px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); text-align: center; width: 90%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }

/* Button */
.btn-gold { background: var(--gold-primary); color: #000; font-weight: 600; border: none; }
.btn-outline-gold { border: 2px solid var(--gold-primary); color: var(--gold-primary); font-weight: 600; }
.btn-outline-gold:hover { background: var(--gold-primary); color: #000; }

/* Input Text Colors */
.form-control-custom { background-color: #1a1a1a !important; border: 1px solid #444 !important; color: #ffffff !important; padding: 12px; border-radius: 10px; }
.form-control-custom::placeholder { color: #888 !important; }
.form-control-custom:focus { border-color: var(--gold-primary) !important; background-color: #222 !important; color: #ffffff !important; box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important; }

/* Custom Checkbox */
.custom-checkbox {
    border-color: var(--gold-primary) !important;
    background-color: transparent;
}
.custom-checkbox:checked {
    background-color: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
}
.custom-checkbox:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
}

.toast-container { z-index: 1060; }
.kategori-section { scroll-margin-top: 100px; }

/* Progress Bar / Loading Screen */
#loadingOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(5px);
    z-index: 11000; 
    display: none; flex-direction: column; align-items: center; justify-content: center;
}
.spinner-gold {
    width: 60px; height: 60px;
    border: 5px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--gold-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }