body{background-color:#f4f6f8;margin:0;font-family:Arial,sans-serif}.container{width:90%;margin:30px auto}h1{margin-bottom:5px}.card-wrapper{flex-wrap:wrap;gap:16px;margin-top:20px;display:flex}.karyawan-card{background-color:#fff;border:1px solid #ddd;border-radius:10px;width:260px;padding:18px;box-shadow:0 2px 8px #00000014}.karyawan-card h3{margin-top:0;margin-bottom:12px}.karyawan-card p{margin:8px 0}.status-aktif{color:#155724;background-color:#d4edda;border-radius:6px;padding:4px 8px;font-size:13px}.status-nonaktif{color:#721c24;background-color:#f8d7da;border-radius:6px;padding:4px 8px;font-size:13px}.form-karyawan{background-color:#fff;border:1px solid #ddd;border-radius:10px;flex-wrap:wrap;gap:12px;margin-top:20px;padding:18px;display:flex}.form-karyawan input,.form-karyawan select{border:1px solid #ccc;border-radius:6px;min-width:200px;padding:10px}.btn-simpan{color:#fff;cursor:pointer;background-color:#155724;border:none;border-radius:6px;padding:10px 18px}.btn-hapus{color:#fff;cursor:pointer;background-color:#dc3545;border:none;border-radius:6px;margin-top:12px;padding:8px 12px}.btn-hapus:hover{background-color:#bb2d3b}.button-group{gap:8px;margin-top:12px;display:flex}.btn-edit{color:#000;cursor:pointer;background-color:#ffc107;border:none;border-radius:6px;padding:8px 12px}.btn-edit:hover{background-color:#e0a800}.btn-batal{color:#fff;cursor:pointer;background-color:#bb2d3b;border:none;border-radius:6px;padding:10px 18px}.btn-batal:hover{background-color:#bb2d3b}.table-box{background-color:#fff;border:1px solid #ddd;border-radius:10px;margin-top:20px;padding:18px}.table-responsive{width:100%;overflow-x:auto}.table-karyawan{border-collapse:collapse;width:100%;margin-top:12px}.table-karyawan th,.table-karyawan td{text-align:left;border:1px solid #ddd;padding:10px}.table-karyawan th{color:#fff;background-color:#212529}.table-karyawan tr:nth-child(2n){background-color:#f8f9fa}.table-karyawan .btn-edit{margin-right:8px}.text-center{text-align:center}.search-box{background-color:#fff;border:1px solid #ddd;border-radius:10px;gap:12px;margin-top:20px;padding:18px;display:flex}.search-box input{border:1px solid #ccc;border-radius:6px;flex:1;padding:10px}.search-box select{border:1px solid #ccc;border-radius:6px;width:180px;padding:10px}.error-message{color:#721c24;background-color:#f8d7da;border-radius:6px;margin-top:20px;padding:12px}@media (width<=768px){.search-box{flex-direction:column}.search-box select{width:100%}}