*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

body{
    background: linear-gradient(135deg, #0f172a, #1e3a8a, #2563eb);
    min-height:100vh;
    padding:30px;
    color:#1e293b;
}

/* Container */
.container{
    width:95%;
    max-width:1200px;
    margin:auto;
}

/* Judul */
.judul{
    text-align:center;
    margin-bottom:30px;
    color:white;
}

.judul h1{
    font-size:38px;
    font-weight:700;
    text-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.judul p{
    font-size:16px;
    opacity:0.9;
}

/* Navbar */
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 25px;
    border-radius:18px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(14px);
    color:white;
    box-shadow:0 8px 25px rgba(0,0,0,0.25);
    margin-bottom:30px;
}

.navbar span{
    font-size:16px;
    font-weight:500;
}

.btn-logout{
    background:linear-gradient(45deg,#ef4444,#dc2626);
    color:white;
    padding:10px 18px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    text-decoration:none;
    transition:0.3s;
    font-weight:600;
}

.btn-logout:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(220,38,38,0.4);
}

/* Card */
.card{
    background: rgba(255,255,255,0.95);
    border-radius:22px;
    padding:28px;
    margin-bottom:30px;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card h2{
    margin-bottom:20px;
    color:#1d4ed8;
    font-size:24px;
}

/* Form */
form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.full{
    grid-column:1/3;
}

label{
    font-weight:600;
    margin-bottom:6px;
    display:block;
    color:#334155;
}

input,
textarea,
select{
    width:100%;
    padding:14px;
    border:2px solid #dbeafe;
    border-radius:14px;
    outline:none;
    transition:0.3s;
    font-size:15px;
    background:#f8fafc;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#2563eb;
    box-shadow:0 0 15px rgba(37,99,235,0.2);
}

textarea{
    resize:none;
    height:110px;
}

/* Button */
button{
    background:linear-gradient(45deg,#2563eb,#1d4ed8);
    color:white;
    border:none;
    padding:14px;
    border-radius:14px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:0.3s;
}

button:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(37,99,235,0.35);
}

.btn-update{
    background:linear-gradient(45deg,#16a34a,#15803d);
}

/* Table */
table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:18px;
    background:white;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

table th{
    background:linear-gradient(45deg,#1d4ed8,#2563eb);
    color:white;
    padding:16px;
    font-size:15px;
}

table td{
    padding:14px;
    border-bottom:1px solid #e2e8f0;
    text-align:center;
}

table tr:hover{
    background:#eff6ff;
    transition:0.3s;
}

/* Action Buttons */
.btn-edit,
.btn-hapus{
    padding:8px 14px;
    border-radius:10px;
    text-decoration:none;
    color:white;
    font-size:13px;
    font-weight:600;
    transition:0.3s;
    display:inline-block;
}

.btn-edit{
    background:linear-gradient(45deg,#facc15,#eab308);
}

.btn-hapus{
    background:linear-gradient(45deg,#ef4444,#dc2626);
}

.btn-edit:hover,
.btn-hapus:hover{
    transform:scale(1.08);
}

/* Badge */
.badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.badge-menunggu{
    background:#fef3c7;
    color:#92400e;
}

.badge-diproses{
    background:#dbeafe;
    color:#1d4ed8;
}

.badge-selesai{
    background:#dcfce7;
    color:#166534;
}

/* Login Page */
body.login-page{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:linear-gradient(135deg,#1e3a8a,#3b82f6);
}

.login-box{
    width:380px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(14px);
    padding:35px;
    border-radius:22px;
    box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.login-box h2{
    text-align:center;
    color:#1d4ed8;
    margin-bottom:25px;
}

.login-box form{
    display:block;
}

.login-box input{
    margin-bottom:15px;
}

.alert-error{
    background:#fee2e2;
    color:#b91c1c;
    padding:12px;
    border-radius:12px;
    margin-bottom:15px;
    text-align:center;
}

/* Responsive */
@media(max-width:768px){
    form{
        grid-template-columns:1fr;
    }

    .full{
        grid-column:1;
    }

    .judul h1{
        font-size:28px;
    }

    .navbar{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }
}