html { scroll-behavior: smooth; }
        body { background-color: #f4f6f9; font-family: 'Source Sans Pro', 'Segoe UI', sans-serif; }
        
        /* CSS HERO SECTION */
        .hero-section {
            position: relative;
            /* Anda bisa mengganti URL gambar ini dengan gambar jembatan/jalan aktual milik PUPR */
            background: url('../assets/bg_dash.jpg') no-repeat center center;
            background-size: cover;
            padding: 100px 0 300px 0;
            color: white;
        }
        .hero-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(14, 30, 56, 0.63); /* Overlay Biru Gelap Transparan */
            z-index: 1;
        }
        .hero-content { position: relative; z-index: 2; }
        
        /* WIDGET CONTAINER (Ditarik sedikit ke atas agar overlap dengan Hero) */
        .widget-container {
            position: relative;
            z-index: 10;
            margin-top: -250px;
        }
        .fullscreen-card:fullscreen { padding: 20px !important; background-color: #f8fafc !important; width: 100vw !important; height: 100vh !important; overflow-y: auto !important; }
        .fullscreen-card:-webkit-full-screen { padding: 20px !important; background-color: #f8fafc !important; width: 100vw !important; height: 100vh !important; overflow-y: auto !important; }
        .fullscreen-card:fullscreen .fs-chart-adjust { height: 50vh !important; }
        .fullscreen-card:-webkit-full-screen .fs-chart-adjust { height: 50vh !important; }
        /* CSS SMALL-BOX WIDGET */
        .small-box { border-radius: 0.35rem; box-shadow: 0 4px 6px rgba(0,0,0,.1); display: block; margin-bottom: 20px; position: relative; color: #ffffff; overflow: hidden; border: 2px solid white; }
        .small-box>.inner { padding: 25px 20px; z-index: 5; position: relative; }
        .small-box h4 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0px; }
        .small-box p { font-size: 1rem; margin-bottom: 0; }
        .small-box .icon { color: rgba(0,0,0,.15); z-index: 0; }
        .small-box .icon>i { font-size: 90px; position: absolute; right: 10px; top: 15px; transition: transform .3s linear; }
        .small-box:hover .icon>i { transform: scale(1.1); }
        .small-box>.small-box-footer { background-color: rgba(0,0,0,.1); color: rgba(255,255,255,.9); display: block; padding: 8px 0; position: relative; text-align: center; text-decoration: none; z-index: 10; font-size: 0.95rem; }
        .small-box>.small-box-footer:hover { color: #fff; background-color: rgba(0,0,0,.2); }
        
        .bg-info { background-color: #17a2b8 !important; }
        .bg-success { background-color: #28a745 !important; }
        .bg-warning { background-color: #ffc107 !important; color: #1f2d3d !important; }
        .bg-warning .icon { color: rgba(0,0,0,.1) !important; }

        /* --- TIMELINE PROGRESS STEPS CODES --- */
        .timeline-horizontal {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            position: relative;
            margin: 30px 0 10px 0;
            padding: 0;
            list-style: none;
            width: 100%;
        }
        .timeline-horizontal::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 5%;
            right: 5%;
            height: 4px;
            background-color: #e2e8f0;
            z-index: 1;
        }
        .timeline-step-item {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
        }
        .timeline-icon-box {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 4px solid #cbd5e1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px auto;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }
        .timeline-step-item.active .timeline-icon-box {
            border-color: #3b82f6;
            background-color: #3b82f6;
            color: #ffffff !important;
            transform: scale(1.1);
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
        }
        .timeline-step-item.murni .timeline-icon-box { border-color: #10b981; color: #10b981; }
        .timeline-step-item.murni.active .timeline-icon-box { background-color: #10b981; border-color: #10b981; }

        .timeline-step-item.pergeseran .timeline-icon-box { border-color: #f59e0b; color: #f59e0b; }
        .timeline-step-item.pergeseran.active .timeline-icon-box { background-color: #f59e0b; border-color: #f59e0b; }

        .timeline-step-item.perubahan .timeline-icon-box { border-color: #ef4444; color: #ef4444; }
        .timeline-step-item.perubahan.active .timeline-icon-box { background-color: #ef4444; border-color: #ef4444; }

        .timeline-title {
            font-size: 0.82rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 3px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .timeline-value {
            font-size: 0.88rem;
            font-weight: 800;
            color: #475569;
        }
        .timeline-step-item.active .timeline-value {
            color: #0f172a;
        }