.navbar {
            position: absolute;
            width: 100%;
            z-index: 10;
            background: white; /* tetap putih */
            overflow: hidden;
        }

        /* Overlay gradient biru */
        .navbar::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                60deg,
                rgba(13,110,253,0.1),
                rgba(13,110,253,0.3),
                rgba(13,110,253,0.1),
                rgba(13,110,253,0.3)
            );
            background-size: 200% 200%;
            filter: blur(15px);
            animation: smoothBlue 12s ease-in-out infinite;
            pointer-events: none;
        }

        /* Animasi gradient halus */
        @keyframes smoothBlue {
            0% {
                transform: translate(0%, 0%) rotate(0deg);
            }
            25% {
                transform: translate(20%, 10%) rotate(10deg);
            }
            50% {
                transform: translate(0%, 20%) rotate(-10deg);
            }
            75% {
                transform: translate(-20%, 10%) rotate(5deg);
            }
            100% {
                transform: translate(0%, 0%) rotate(0deg);
            }
        }

        /* Nav-link tetap jelas di atas overlay */
        .navbar .nav-link {
            color: #0d6efd;
            font-weight: 700;
            position: relative;
            z-index: 2;
        }

        /* Nav-link tetap jelas */
        .navbar .nav-link {
            color: #0d6efd; /* teks biru supaya kontras */
            font-weight: 700;
        }
        .navbar-brand-text div, 
        .navbar-brand-text small {
            color: #053b8d;
        }

        .btn-login {
            background: linear-gradient(45deg, #0d6efd, #3da5ff);
            color: #fff !important;
            box-shadow: 0 0 10px rgba(13,110,253,0.6);
        }
        /* full screen slider */
        /* Tinggi carousel tetap, gambar pas tanpa gap */
        #carouselLanding .carousel-item {
            height: 750px; /* bisa disesuaikan */
        }

        #carouselLanding .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;   /* crop tapi pas di container */
            object-position: center;
            transition: transform 0.5s ease; /* efek zoom ringan */
        }

        #carouselLanding .carousel-item:hover img {
            transform: scale(1.05); /* zoom ringan saat hover */
        }

        /* Caption tetap terbaca */
        .carousel-caption h5, .carousel-caption p {
            color: white;
            text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
        }/* Responsif untuk HP */
        @media (max-width: 768px) {
            #carouselLanding .carousel-item {
                height: 300px;
            }
            .carousel-caption h5 {
                font-size: 1.2rem;
            }
            .carousel-caption p {
                font-size: 0.9rem;
            }
        }
        .carousel,
        .carousel-inner,
        .carousel-item {
            height: 100vh;
        }

        .slider-img {
            width: 100%;
            height: 500px; /* tinggi tetap, bisa disesuaikan */
            object-fit: cover;  /* crop tapi tetap pas di container */
            object-position: center; /* fokus di tengah gambar */
            transition: transform 0.5s ease; /* efek ringan saat hover */
        }

        .slider-item:hover .slider-img {
            transform: scale(1.05); /* zoom sedikit saat hover */
        }

        /* overlay gelap */
        
        .carousel-caption {
            bottom: 20%;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
        }

        /* text di atas */
        .carousel-caption {
            bottom: 30%;
            z-index: 2;
        }

        /* biar teks kiri */
        .carousel-caption.text-start {
            left: 10%;
            right: auto;
            text-align: left;
        }

        /* teks lebih jelas */
        .carousel-caption h1,
        .carousel-caption p {
            text-shadow: 0 2px 10px rgba(0,0,0,0.7);
        }

        .carousel-caption {
            animation: fadeUp 1s ease;
        }

        /* ===== CONTENT ===== */
        .content {
            position: relative;
            min-height: 100vh;
        }

        /* PARTICLES BACKGROUND */
        #particles-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* Overlay biar teks kebaca */
        .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to right,
                rgba(255,255,255,0.85) 30%,
                rgba(13,110,253,0.7)
            );
            z-index: 1;
        }

        .content .container {
            position: relative;
            z-index: 2;
        }

        .desc {
            padding: 50px 0;
        }

        .desc h1 {
            font-weight: 700;
            font-size: 42px;
        }

        

        /* ================= HEADER ================= */
        .table {
            border: 2px solid rgba(13, 110, 253, 0.25);
            backdrop-filter: blur(12px);
            border-radius: 16px;
            padding:20px;
            overflow: visible !important; 
            box-shadow: 0 10px 30px rgba(13, 110, 253, 0.25);
             --bs-table-bg: transparent !important;
            background: transparent !important;
        }

        .table th {
            font-size: 12px;
        }

        .table td {
            font-size: 13px;
        }
        .table thead th {
            font-weight: 700;
            color: #074db6;
            font-size: 14px;
            border-bottom: 2px solid rgba(13, 110, 253, 0.25);
            text-align: center;
            padding: 14px;
        }

        /* ================= BODY ================= */
        .table tbody td {
            padding: 14px;
            vertical-align: middle;
        }
        /* biar kolom tidak turun ke bawah */

        #table-opd th,
        #table-opd td {
            white-space: nowrap;
        }

        /* lebar kolom stabil */
        #table-opd {
            width: 100% !important;
        }
        .dtfc-fixed-left {
            background: #fff !important;
            z-index: 6 !important;
            position: relative;
            box-shadow: 4px 0 10px rgba(0,0,0,0.08);
        }

        #table-opd tbody tr {
            transition: background 0.2s ease;
        }

       /* ===== HOVER HANYA UNTUK MAIN TABLE (KANAN) ===== */
        #table-opd.dataTable tbody tr:hover td:not(.dtfc-fixed-left) {
            background: rgba(13,110,253,0.08) !important;
        }
        .DTFC_LeftBodyWrapper tbody tr:hover td {
            background: #fff !important;
        }
        .DTFC_LeftBodyWrapper td {
            background: #fff;
        }
        .DTFC_LeftBodyWrapper {
            z-index: 5;
        }

        .DTFC_RightBodyWrapper {
            z-index: 1;
        }

        table.dataTable {
            border-collapse: separate !important;
            border-spacing: 0;
            width: 100% !important;
        }
        
        /* optional biar semua layer sinkron */
        table.dataTable tbody tr {
            transition: background 0.2s ease;
        }
        /* ================= DATATABLE FIX ================= */
       
        table.dataTable th,
        table.dataTable td {
            white-space: nowrap;
        }
        .table.dataTable.no-footer {
            border-bottom: 2px solid rgba(13, 110, 253, 0.25);
        }

        .dataTables_wrapper {
            color: #074db6;
            width: 100%;
        }
        
        .dataTables_wrapper .top,
        .dataTables_wrapper .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        /* SEARCH */
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid rgba(13, 110, 253, 0.25);
            border-radius: 8px;
            padding: 5px 10px;
            outline: none;
        }
        
        .dataTables_scroll {
            border: 1px solid rgba(13,110,253,0.25);
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
        }

        .dataTables_scrollBody {
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }

        /* LENGTH */
        .dataTables_filter{
            background:  #2564eb00 !important;
        }
        
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid rgba(13, 110, 253, 0.25);
            border-radius: 8px;
            padding: 5px;
        }

        /* PAGINATION */
        .dataTables_paginate{
            /* background: transparent !important; */
            font-size: 12px;
            padding: 0 !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            background: #F1F5F9 !important; /* soft gray */
            border: 1px solid rgba(13, 110, 253, 0.25) !important;
             color: #64748B !important;
            border-radius: 6px;
            font-size: 12px;
            margin: 2px;
            padding: 2px 6px !important;
            line-height: 1.2 !important;
            box-shadow: none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #E2E8F0 !important;
            color: #1E293B !important;
            border-color: #2563EB !important;
        }
        /* active */
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #3B82F6 !important; /* softer blue */
            color: #fff !important;
            border-color: transparent !important;
            font-weight: 500;
        }

        /* disabled */
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            background: #F8FAFC !important;
            color: #CBD5F5 !important;
            border-color: transparent !important;
            cursor: not-allowed;
        }
        .dataTables_wrapper .dataTables_length select {
            font-size: 12px;
            padding: 2px 6px;
        }

        .dataTables_wrapper .dataTables_info {
            font-size: 12px;
        }
        .dataTables_wrapper .dataTables_length label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 0;
        }

        .dataTables_wrapper .dataTables_length select {
            width: auto !important;
            display: inline-block;
            padding: 2px 6px;
            font-size: 12px;
        }

        /* ================= ICON DOKUMEN ================= */
        .icon-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 6px; /* 🔥 solusi jarak rapi */
            justify-content: center;
        }

        .icon-doc {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* WARNA */
        .bg-green {
            background: linear-gradient(135deg, #22c55e, #16a34a);
        }

        .bg-red {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }

        /* HOVER ICON */
        .icon-doc:hover {
            transform: scale(1.15);
            box-shadow: 0 6px 14px rgba(0,0,0,0.2);
        }

        /* ================= TEXT ================= */
        .text {
            color: #074db6;
        }

        .badge-check {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: white;
            font-size: 13px;
            box-shadow: 0 3px 8px rgba(34,197,94,0.4);
            transition: 0.2s ease;
        }

        .badge-check:hover {
            transform: scale(1.2);
        }

        /* silang */
        .badge-cross {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
            font-size: 13px;
            box-shadow: 0 3px 8px rgba(239,68,68,0.4);
        }


        /* ================= RESPONSIVE ================= */
        @media (max-width: 768px) {
            .icon-doc {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }

            .table tbody td {
                padding: 10px;
            }
        }

        .bg-green { background: #28a745; }
        .bg-red { background: #dc3545; }
        .bg-blue { background: #0d6efd; }
        .bg-gray { background: #6c757d; }

        /* ===== FOOTER ===== */
        /* Footer animated background */
        footer {
            position: relative;
            background: #f8f9fa; /* dasar footer */
            overflow: hidden;
            padding: 20px;
            color: #043e95;
        }

        /* Gradient biru overlay seperti navbar */
        footer::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 150%;
            background: linear-gradient(
                 to right,
                 rgba(255,255,255,0.85),
                rgba(13,110,253,0.5),
                 rgba(255,255,255,0.85),
                rgba(13,110,253,0.5)
            );
            background-size: 200% 200%;
            filter: blur(15px);
            animation: smoothFooter 12s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        /* Animasi gradient halus footer */
        @keyframes smoothFooter {
            0% {
                transform: translate(0%, 0%) rotate(0deg);
            }
            25% {
                transform: translate(20%, 10%) rotate(10deg);
            }
            50% {
                transform: translate(0%, 20%) rotate(-10deg);
            }
            75% {
                transform: translate(-20%, 10%) rotate(5deg);
            }
            100% {
                transform: translate(0%, 0%) rotate(0deg);
            }
        }

        /* Konten footer tetap di atas overlay */
        footer .container {
            position: relative;
            z-index: 1;
        }
        @keyframes glowMove {
            0% {
                left: -20%;
            }
            100% {
                left: 100%;
            }
        }
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @media (max-width: 768px) {
            .slider-img {
                height: 300px;
            }
            .carousel-caption h5 {
                font-size: 1.2rem;
            }
            .carousel-caption p {
                font-size: 0.9rem;
            }
        }