/* --- Styling Tambahan Modern & Smooth --- */

/* Background halaman yang lembut */
body {
    background-color: #f4f7f6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Card dengan efek halus dan melayang */
.card-custom {
    background: #ffffff;
    border: none;
    transition: all 0.3s ease-in-out;
}

.card-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08) !important;
}

/* Kotak Ikon Utama dengan Efek Gradasi Lembut */
.icon-box {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.icon-box:hover {
    transform: scale(1.05) rotate(3deg);
}

/* Kustomisasi Input Group agar interaktif */
.shadow-input {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    transition: all 0.25s ease-in-out;
}

.shadow-input:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    background-color: #fff;
}

.input-group-text {
    background-color: #f8f9fa;
    border: none;
}

.form-control {
    border: none;
    box-shadow: none !important;
}

.form-control:focus {
    background-color: transparent;
}

/* Tombol dengan Efek Transisi Mengalir */
.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    border: none;
    border-radius: 12px !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0b5ed7, #0a58ca);
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.25) !important;
}

/* Animasi Halus untuk Alert */
.alert {
    border-radius: 12px !important;
}