:root {
            --bg-dark: #0a0a0a;
            --card-bg: rgba(25, 25, 25, 0.8);
            --text-gray: #a0a0a0;
            --bg-light:#f5f5f5;
            --card:#eaeaea;
            --text:#222;
        }

        body {
            background-color: var(--bg-dark);
            color: white;
            font-family: 'Segoe UI', Roboto, sans-serif;
            overflow-x: hidden;
        }

        .light-theme {
            background:var(--bg-light);
            font-family:'Segoe UI',sans-serif;
            color:#222;
        }

        .light-theme .dark-mode {
            display:none;
        }

        .light-theme .light-mode {
            display:block;
        }

        .dark-theme .dark-mode {
            display:block;
        }

        .dark-theme .light-mode {
            display:none;
        }

        /* Hero Section with Background */
        .hero-section {
            background-image: 
            linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(10, 10, 10, 0.8)), 
            url('../img/image-car.png');
        
            background-size: 100% auto;
            background-position: top center; /* Geser sedikit ke atas agar grill mobil terlihat */
            background-repeat: no-repeat;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Navbar Custom */
        .navbar-brand img { height: 35px; }
        .nav-link { color: white !important; font-size: 0.9rem; margin: 0 10px; }
        .btn-login-nav {
            border-radius: 20px;
            padding: 5px 25px;
            background: white;
            color: black !important;
            font-weight: 600;
        }

        /* Light mode styles */
        .light-theme .nav-link { color: black !important; font-size: 0.9rem; margin: 0 10px; }
        .light-theme .btn-login-nav {
            border-radius: 20px;
            padding: 5px 25px;
            background: black;
            color: white !important;
            font-weight: 600;
        }

        /* Login Card */
        .login-container {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
        }

        .login-card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 12px;
            width: 100%;
            max-width: 450px;
            border: 1px solid #333;
        }

        .username::placeholder, .password::placeholder {
            color:#ffffff;
            opacity:40%;
        }

        .dark-theme .form-control {
            background: #1a1a1a;
            border: 1px solid #333;
            color: white;
            padding: 12px;
            margin-bottom: 15px;
        }

        .dark-theme .form-control:focus {
            background: #252525;
            border-color: #555;
            color: white;
            box-shadow: none;
        }

        .btn-login-submit {
            background: white;
            color: black;
            font-weight: bold;
            width: 100%;
            padding: 12px;
            border-radius: 4px;
            border: none;
            margin-top: 20px;
        }


        /* Main Layout */

        /* Layout */

        .section-dashboard{
        padding:60px 0;
        }

        /* Accordion */

        .marketing-hub .accordion-button{
        background:#efefef;
        font-size:14px;
        font-weight:600;
        }

        .marketing-hub .accordion-button:not(.collapsed){
        background:#e5e5e5;
        box-shadow:none;
        }

        /* List */

        .hub-list{
        list-style:none;
        padding-left:0;
        margin:0;
        }

        .hub-list li{
        padding:10px 0;
        cursor:pointer;
        font-size:14px;
        color:#666;
        border-bottom:1px solid #eee;
        }

        .hub-list li:hover{
        color:#000;
        font-weight:600;
        }

        /* Content Panel */

        .hub-panel{
        display:none;
        background:#eaeaea;
        padding:30px;
        border-radius:8px;
        min-height:200px;
        }

        .hub-panel.active{
        display:block;
        }

        .asset-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
        gap:20px;
        }

        .asset-card{
        background:#eaeaea;
        border-radius:8px;
        overflow:hidden;
        transition:all .2s ease;
        }

        .asset-card:hover{
        transform:translateY(-4px);
        box-shadow:0 8px 20px rgba(0,0,0,0.1);
        }

        .asset-card img{
        width:100%;
        height:150px;
        object-fit:cover;
        }

        .asset-body{
        padding:15px;
        }

        .asset-title{
        font-size:15px;
        font-weight:600;
        margin-bottom:5px;
        }

        .asset-price{
        font-size:13px;
        color:#555;
        margin-bottom:10px;
        }

        .btn-detail{
        font-size:12px;
        padding:5px 15px;
        }

        /* Cards */

        .card-box{
            background:var(--card);
            height:140px;
            border-radius:8px;
        }

        .card-large{
            height:200px;
            border:3px solid #3b82f6;
        }

        .table-card{
            background:var(--card);
            padding:20px;
            border-radius:8px;
            overflow:hidden;
        }

        .table td, .table th{
            vertical-align:middle;
            font-size:14px;
        }


        /* Footer */
        footer {
            padding: 60px 0 20px;
            border-top: 1px solid #222;
            background: var(--bg-dark);
            color: #ffffff;
        }

        .footer-logo img { height: auto; width:106px; margin-bottom: 20px; }
        .footer-heading { font-weight: bold; margin-bottom: 20px; font-size: 1.1rem; }
        .footer-links { list-style: none; padding: 0; }
        .footer-links li { margin-bottom: 8px; color: var(--text-gray); font-size: 0.9rem; cursor: pointer; }
        .footer-links li:hover { color: white; }
        
        .social-icons i {
            font-size: 1.5rem;
            margin-right: 15px;
            color: white;
            cursor: pointer;
        }

        .copyright {
            border-top: 1px solid #222;
            margin-top: 50px;
            padding-top: 20px;
            font-size: 0.8rem;
            color: #555;
        }

        /* Toast Notification */ 
        .opus-toast-container{ 
            position:fixed; 
            top:20px; 
            right:20px; 
            z-index:9999; 
            display:flex; 
            flex-direction:column; 
            pointer-events: none;
            gap:10px; 
        } 

        .opus-toast{ 
            display:flex; 
            align-items:center; 
            background:white; 
            pointer-events: auto;
            padding:15px; 
            border-radius:8px; 
            box-shadow:0 8px 20px rgba(0,0,0,0.1); 
            min-width:280px; 
            transform:translateX(120%); 
            opacity:0; 
            transition:all .4s ease; 
        } 

        .opus-toast.show{ 
            transform:translateX(0); 
            opacity:1; 
        } 

        .toast-icon{ 
            width:35px; 
            height:35px; 
            border-radius:50%; 
            display:flex; 
            align-items:center; 
            justify-content:center; 
            color:white; 
            margin-right:10px; 
        } 

        .success .toast-icon{ 
            background:#22c55e; 
        } 

        .error .toast-icon{ 
            background:#ef4444; 
        } 

        .toast-title{ 
            font-weight:600; 
            font-size:14px; 
        } 

        .toast-message{ 
            font-size:13px; 
            color:#666; 
        } 

        .toast-close{ 
            border:none; 
            background:none; 
            font-size:18px; 
            margin-left:auto; 
            cursor:pointer; 
        }



        /* pagination */
        /* Container responsive */
        .pagination {
            overflow-x: auto; /* scroll horizontal di mobile */
            white-space: nowrap;
            padding-bottom: 5px;
        }

        /* Page link style */
        .pagination .page-item .page-link {
            border-radius: 50% !important;
            min-width: 40px;
            min-height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 4px;
            font-weight: 500;
            color: #495057;
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
        }

        /* Hover effect */
        .pagination .page-item .page-link:hover {
            background: linear-gradient(135deg, #0d6efd, #6610f2);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            transform: scale(1.1);
        }

        /* Active page */
        .pagination .page-item.active .page-link {
            background: linear-gradient(135deg, #0d6efd, #6610f2);
            color: #fff;
            border-color: transparent;
            font-weight: 600;
        }

        /* Disabled */
        .pagination .page-item.disabled .page-link {
            opacity: 0.5;
            pointer-events: none;
        }

        /* Scrollbar hide for mobile */
        .pagination::-webkit-scrollbar {
            display: none;
        }


        /* form style */

        /* Card shadow & border radius */
        .card-form {
            border-radius: 1rem;
        }

        /* Input focus modern effect */
        .form-control-opus:focus {
            border-color: #6610f2;
            box-shadow: 0 0 10px rgba(102,16,242,0.2);
            transition: all 0.3s ease;
        }

        /* Buttons modern effect */
        .btn-save-opus {
            background: linear-gradient(135deg, #0d6efd, #6610f2);
            border: none;
            transition: all 0.3s ease;
        }

        .btn-save-opus:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102,16,242,0.4);
        }

        /* Cancel button hover */
        .btn-outline-secondary:hover {
            background-color: #f8f9fa;
            color: #6610f2;
        }

        /* Responsive textarea height */
        textarea.form-control-opus {
            resize: none;
        }

        /* Label font-weight */
        .form-label-opus {
            font-weight: 600;
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .hero-section { background-attachment: scroll; }
            .login-card { padding: 25px; }
            .display-5 { font-size: 1.8rem; }
            .credit-option{
                grid-template-columns:1fr;
            }

            .credit-card{
                padding:18px;
                font-size:16px;
            }

            .title{
                font-size:20px;
            }

            .table td{
                font-size:13px;
            }

            .btn-sm{
                padding:3px 10px;
                font-size:12px;
            }

            .opus-toast-container{ 
                left:10px; 
                right:10px; 
            } 

            .opus-toast{ 
                width:100%; 
            }
        }