/* --------------------------------------------------- */
/* 1. TEMA WARNA UTAMA (#f0714f)
/* --------------------------------------------------- */

/* Kita mendefinisikan ulang warna "primary" Bootstrap */
:root {
    --bs-primary: #f0714f;
    --bs-primary-rgb: 240, 113, 79;
    --bs-link-color: #f0714f;
    --bs-link-hover-color: #c05a3f;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    /* Default dark Bootstrap */

    /* Warna kustom untuk Admin Sidebar */
    --admin-sidebar-bg: #212529;
    /* Darker tone for sidebar */
    --admin-sidebar-link: #adb5bd;
    /* Light gray for links */
    --admin-sidebar-link-hover: #e9ecef;
    --admin-sidebar-active-bg: rgba(240, 113, 79, 0.1);
    /* Primary color with transparency */
    --admin-sidebar-active-color: var(--bs-primary);

    /* --------------------------------------------------- */
    /* 0. IMPORT FONT OFFLINE
/* --------------------------------------------------- */

    /* poppins-regular - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        src: local(''),
            url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'),
            /* Path: ../fonts/ */
            url('../fonts/poppins-v24-latin-regular.woff') format('woff');
    }

    /* poppins-500 - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        src: local(''),
            url('../fonts/poppins-v24-latin-500.woff2') format('woff2'),
            url('../fonts/poppins-v24-latin-500.woff') format('woff');
    }

    /* poppins-600 - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        src: local(''),
            url('../fonts/poppins-v24-latin-600.woff2') format('woff2'),
            url('../fonts/poppins-v24-latin-600.woff') format('woff');
    }

    /* poppins-700 - latin */
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 700;
        src: local(''),
            url('../fonts/poppins-v24-latin-700.woff2') format('woff2'),
            url('../fonts/poppins-v24-latin-700.woff') format('woff');
    }
}

/* Meng-override tombol primary Bootstrap */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c05a3f;
    /* Versi lebih gelap */
    --bs-btn-hover-border-color: #c05a3f;
    --bs-btn-active-bg: #c05a3f;
    --bs-btn-active-border-color: #c05a3f;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Helper class untuk warna teks */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-dark {
    color: #212529 !important;
}

/* Helper class untuk background */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Sedikit style untuk background section agar tidak polos */
.bg-light-gray {
    background-color: #f8f9fa;
}

/* --------------------------------------------------- */
/* 1. TEMA WARNA & FONT
/* --------------------------------------------------- */

:root {
    --bs-primary: #f0714f;
    /* ... sisa variabel warna Anda ... */
}

/* !! 2. TAMBAHKAN FONT UTAMA DI SINI !! */
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    background-color: #f8f9fa;
    /* Ganti background linear-gradient lama */
}

/* Opsi: Buat judul sedikit lebih tebal */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    /* Poppins terlihat bagus saat tebal */
}

/* --------------------------------------------------- */
/* 2. STYLE UNTUK DESAIN BARU (Versi Bootstrap)
/* --------------------------------------------------- */

/* Hero Section */
.hero-section {
    position: relative;
    /* background-color: #fdf5f3; */
    /* Warna sangat soft dari #f0714f */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* !! TAMBAHKAN SEMUA KODE BARU INI !! */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* (Artinya: top:0, right:0, bottom:0, left:0) */
    /* Ini adalah gradien putih transparan dari Desain React */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.95),
            /* 95% putih di kiri */
            rgba(255, 255, 255, 0.5)
            /* 90% putih di kanan */
        );
    z-index: 0;
    /* Di belakang konten, di depan background */
}

/* Pastikan konten (container) berada di atas overlay */
.hero-section .container {
    position: relative;
    /* <--- Ini sudah kita tambahkan di PHP */
    z-index: 1;
    /* (Lebih tinggi dari z-index: 0) */
}

.hero-section .form-control,
.hero-section .btn {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Quick Links / Services */
.card-link {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.card-link .card-icon {
    font-size: 2.5rem;
    transition: all 0.3s ease;
    color: var(--bs-primary);
}

.card-link .card-title {
    color: var(--bs-primary);
    font-weight: 600;
}

.card-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

.card-link:hover .card-icon {
    transform: scale(1.1);
}

/* News Section */
.news-card {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.3s ease;
}

.news-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

.news-card .badge {
    font-size: 0.7rem;
}

/* CTA Section */
.cta-card {
    border: none;
    background-color: #fff;
}

/* --------------------------------------------------- */
/* 3. STYLE UNTUK NAVBAR
/* --------------------------------------------------- */

/* Atur style untuk link .active di navbar */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--bs-primary) !important;
    /* Gunakan warna brand kita */
    font-weight: 600;
    /* Buat sedikit lebih tebal */

    /* Efek garis bawah yang bagus */
    position: relative;
    background: none;
    border-bottom: 3px solid var(--bs-primary);
}

/* Style untuk link biasa */
.navbar-nav .nav-link {
    font-weight: 500;
    color: #495057;
    /* Warna abu-abu gelap */
    border-bottom: 3px solid transparent;
    /* Sediakan ruang */
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--bs-primary) !important;
}

/* =================================================== */
/* GANTI SEMUA STYLE .card-link LAMA DENGAN INI
/* =================================================== */

/* Style untuk card-link (pembungkus <a>) */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    /* Agar <a> mengisi seluruh card */
    transition: all 0.2s ease-in-out;
}

/* Style untuk card (di dalam <a>) - KONDISI DEFAULT */
.card-link .card {
    /* Sediakan ruang 2px untuk border agar tidak "lompat" saat hover */
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

/* Style untuk div pembungkus ikon (DEFAULT) */
.card-icon-wrapper {
    width: 50px;
    /* Atur ukuran dasar (Anda bisa perbesar jika mau, misal 60px) */
    height: 50px;
    /* Atur ukuran dasar (Anda bisa perbesar jika mau, misal 60px) */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

.card-link .card-icon-wrapper {
    background-color: rgba(240, 113, 79, 0.1);
    /* Latar soft oranye */
}

/* !! TAMBAHKAN CLASS BARU INI UNTUK IKON BESAR DI HALAMAN LAYANAN !! */
.card-icon-wrapper-lg {
    width: 64px;
    /* Sesuai desain (w-16) */
    height: 64px;
    /* Sesuai desain (h-16) */
    border-radius: 0.75rem;
    /* Sedikit lebih besar */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

.card-icon-wrapper-lg .card-icon,
.card-icon-wrapper-lg i {
    font-size: 2rem;
    /* 32px */
}

/* Style untuk ikon (DEFAULT) */
.card-link .card-icon {
    font-size: 1.75rem;
    color: var(--bs-primary);
    /* Ikon oranye */
    transition: all 0.2s ease-in-out;
}

/* Style untuk judul (DEFAULT) */
.card-link .card-title {
    color: #212529;
    /* Warna teks hitam/default */
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

/* =================================================== */
/* KONDISI :hover (YANG ANDA INGINKAN)
/* =================================================== */

.card-link:hover .card {
    /* 1. Efek "Zoom" (transform: scale) */
    transform: scale(1.03);

    /* 2. Border Oranye */
    border-color: var(--bs-primary);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* 3. Ganti warna ikon background on hover */
.card-link:hover .card-icon-wrapper {
    background-color: var(--bs-primary);
    /* Latar solid oranye */
}

/* 4. Ganti warna ikon on hover */
.card-link:hover .card-icon {
    color: #fff;
    /* Ikon jadi putih */
}

/* 5. Ganti warna judul on hover */
.card-link:hover .card-title {
    color: var(--bs-primary);
    /* Judul jadi oranye */
}

.bg-primary-soft {
    /* Latar belakang oranye 10% (transparan) */
    background-color: rgba(240, 113, 79, 0.1) !important;
}

/* --------------------------------------------------- */
/* 4. STYLE UNTUK HALAMAN BERITA
/* --------------------------------------------------- */

/* Badge untuk Kategori (misal: "Panduan", "Informasi") */
.category-badge {
    padding: 0.25em 0.6em;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #e9ecef;
    /* Bootstrap bg-light */
    color: #495057;
    border-radius: 0.25rem;
    text-decoration: none;
}

/* Badge untuk "URGENT" */
.badge-urgent {
    color: #fff;
    background-color: var(--bs-primary);
    /* Warna oranye kita */
}

/* Card untuk "Berita Utama" (border oranye) */
.card-featured {
    border: 2px solid var(--bs-primary) !important;
    transition: all 0.3s ease;
}

.card-featured:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(240, 113, 79, 0.2) !important;
}

/* Tombol Filter Kategori */
.btn-filter {
    text-decoration: none;
    transition: all 0.3s ease;
}


/* --------------------------------------------------- */
/* 5. STYLE UNTUK FOOTER
/* --------------------------------------------------- */

.footer-dark {
    background-color: #212529;
    /* Warna bg-dark Bootstrap */
    color: #dee2e6;
    /* Warna teks abu-abu terang */
}

.footer-dark h5 {
    color: #fff;
    /* Judul putih */
}

.footer-dark .footer-links {
    list-style: none;
    padding-left: 0;
}

.footer-dark .footer-links li {
    margin-bottom: 0.75rem;
}

/* Mengatur warna link di footer */
.footer-dark .footer-links a,
.footer-dark .footer-contact-link {
    color: #adb5bd;
    /* Teks abu-abu (muted) */
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-dark .footer-links a:hover,
.footer-dark .footer-contact-link:hover {
    color: #fff;
    /* Putih saat di-hover */
}

/* Garis pemisah di bawah */
.footer-bottom-border {
    border-top: 1px solid #495057;
    /* Garis border lebih soft */
}

/* --------------------------------------------------- */
/* 6. OVERRIDE BOOTSTRAP BUTTONS
/* --------------------------------------------------- */

/* Mengubah btn-outline-primary menjadi Oranye */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 240, 113, 79;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

/* Bonus: Mengubah btn-outline-secondary agar lebih rapi */
.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
}

/* --------------------------------------------------- */
/* 7. RESPONSIVE ADMIN SIDEBAR
/* --------------------------------------------------- */

/* KONDISI DEFAULT (MOBILE) - Perilaku Offcanvas Standar */
/* Tidak perlu CSS khusus karena kita pakai class bootstrap .offcanvas */

/* KONDISI DESKTOP (Layar Besar > 992px) */
@media (min-width: 992px) {

    /* Paksa Sidebar agar selalu tampil (bukan offcanvas) */
    #adminSidebar {
        position: sticky !important;
        top: 0;
        height: 100vh;
        transform: none !important;
        visibility: visible !important;
        width: 320px !important;
        z-index: auto !important;
        background-color: var(--admin-sidebar-bg) !important;
        display: flex !important;
        flex-direction: column;
    }

    /* Sembunyikan tombol Close di dalam sidebar saat desktop */
    #adminSidebar .offcanvas-header {
        display: none !important;
    }

    /* Sembunyikan layar hitam (backdrop) saat desktop */
    .offcanvas-backdrop {
        display: none !important;
    }

    /* Reset margin body/konten jika bootstrap menambahkannya */
    body {
        overflow: auto !important;
        padding-right: 0 !important;
    }
}

/* Tombol Hamburger di Topbar hanya muncul di Mobile */
.admin-toggler {
    display: block;
}

@media (min-width: 992px) {
    .admin-toggler {
        display: none;
    }
}

/* --------------------------------------------------- */
/* 8. FULL SCREEN LOADER (REVISI MODERN)
/* --------------------------------------------------- */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Hitam lebih pekat */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    /* Susun vertikal (Spinner atas, Teks bawah) */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}

/* Lingkaran Berputar */
.spinner-ring {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    /* Warna trek abu-abu transparan */
    border-top-color: var(--bs-primary);
    /* Warna Oranye Brand Kita */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
    /* Jarak ke teks */
}

/* Teks Loading */
.loading-text {
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    animation: pulse 1.5s infinite ease-in-out;
}

/* Animasi Putar */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Animasi Denyut Teks */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}