:root { 
            --sidebar-width: 260px; 
            --coffee-dark: #3c2a21; 
            --coffee-light: #6f4e37; 
        }
        
        body { background-color: #f8f9fa; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }
        
        /* Sidebar Styles */
        #sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            background: var(--coffee-dark);
            color: white;
            z-index: 1000;
        }
        
        .nav-link { color: rgba(255,255,255,0.7); border-radius: 8px; margin: 5px 15px; transition: 0.3s; }
        .nav-link:hover, .nav-link.active { background: var(--coffee-light); color: white; }
        
        /* Main Content */
        #main-content {
            margin-left: var(--sidebar-width);
            padding: 40px;
            min-height: 100vh;
        }

        /* Card Customization */
        .card-module {
            border: none;
            border-radius: 20px;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            height: 100%;
            display: block;
        }

        .card-module:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            background-color: #fff;
        }

        .icon-box {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 1.5rem;
        }

        .bg-light-coffee { background-color: #f5ebe0; color: #6f4e37; }
        
        @media (max-width: 768px) {
            #sidebar { display: none; }
            #main-content { margin-left: 0; padding: 20px; }
        }
        
            .transition-hover { 
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
                }
                .transition-hover:hover { 
                    transform: translateY(-8px);
                    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
                }
                .card-module svg {
                    transition: transform 0.5s ease;
                }
                .card-module:hover svg {
                    transform: scale(1.1);
                }
                
        /* Sidebar Scrollable Logic */
        #sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            background: var(--coffee-dark);
            color: white;
            z-index: 1000;
            
            /* Menambahkan Scroll */
            overflow-y: auto; 
            display: flex;
            flex-direction: column;
        }
        
        /* Custom Scrollbar agar tetap minimalis (untuk Chrome/Edge/Safari) */
        #sidebar::-webkit-scrollbar {
            width: 5px;
        }
        #sidebar::-webkit-scrollbar-thumb {
            background: var(--coffee-light);
            border-radius: 10px;
        }
        
        /* Styling Label Kategori */
        .nav-category-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: bold;
            color: rgba(255,255,255,0.4);
            margin: 20px 15px 5px 25px;
            letter-spacing: 1px;
        }
        
        /* Memastikan konten utama tidak terganggu */
        #main-content {
            margin-left: var(--sidebar-width);
            padding: 40px;
            min-height: 100vh;
        }