/* D:\MagangHub\Web Kepegawaian\Klik_BAPAS\klik-bapas\public\css\style-custom.css */

:root {
    --navy-bapas: #0d1b44;
    --gold-bapas: #ffc107;
}

/* 1. PERBAIKAN FONT GLOBAL (Tanpa merusak ikon) */
/* Kita definisikan elemen teks secara spesifik agar tidak menabrak class ikon */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label {
    font-family: 'Inter', sans-serif !important;
}

/* Khusus untuk span, kita kecualikan yang mengandung class FontAwesome */
span:not([class*="fa-"]):not(.fa):not(.fas):not(.fab):not(.far) {
    font-family: 'Inter', sans-serif !important;
}

/* 2. PROTEKSI KHUSUS IKON (Sosmed & Kontak) */
/* Memastikan semua jenis FontAwesome (Solid, Brands, Regular) tetap pada font aslinya */
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
    font-style: normal !important;
    font-weight: 900 !important; /* Untuk Brands (Sosmed) biasanya otomatis menyesuaikan */
    display: inline-block !important;
    text-decoration: none !important;
}

/* Khusus ikon Sosmed (Brands) seperti Instagram, Facebook, WA */
.fab {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}

/* 3. LOGIKA HOVER & UI (Tetap Sama) */
.icon-wrapper {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    color: var(--gold-bapas);
}

.icon-default {
    opacity: 1 !important;
    transition: 0.3s ease;
}

.icon-hover {
    position: absolute;
    opacity: 0;
    transition: 0.3s ease;
}

.card-layanan {
    transition: all 0.3s ease;
    border: 2px solid transparent !important;
    border-radius: 15px;
}

.card-layanan:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    border: 2px solid var(--gold-bapas) !important;
}

.card-layanan:hover .icon-default { opacity: 0; }
.card-layanan:hover .icon-hover { opacity: 1; }

.title-layanan {
    color: var(--navy-bapas);
}

.btn-layanan {
    background-color: var(--navy-bapas);
    color: white !important;
    border-radius: 8px;
}