:root{
    --primary: #4ea1ff;
    --dark: #1b1b1b;
    --text: #666;
    --light: #f4f7fb;
    --white: #fff;
    --card: #e9eef2;
    --icon-bg:#f3f6f9;

}


.tabel-dpt{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 20px;
    background: #ffffff;
}

.tabel-dpt h1{
    font-weight: bold;
    font-size: 25px;
}

.tabel-dpt h2
{
    color: var(--dark);
    margin-top: 30px;
}

.table-wrapper {
        overflow-x: auto;
        width: 100%;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    thead {
        background: linear-gradient(90deg, #6a11cb, #2575fc);
        color: #fff !important;
    }

    thead th {
        padding: 12px;
        text-align: center;

        vertical-align:middle;
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
    }

    tbody td {
        padding: 10px;
        text-align: center;
        font-size: 13px;
        color: #555;
        transition: background 0.3s, color 0.3s;
    }

    tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tbody tr:hover {
        background-color: #e1eaff;
        color: #000;
        cursor: pointer;
    }

    /* Scroll horizontal untuk layar kecil */