/* =================================
   Global & Navbar
   ================================= */
body {
    background-color: #f9fafb; /* Latar belakang abu-abu sangat muda */
    color: #333;
}

.navbar-brand {
    font-weight: 600;
}

/* Ukuran section standar */
.section-spacing {
    padding: 60px 0;
}

/* =================================
   Hero Section (Split Layout)
   ================================= */
.hero-section {
    padding: 60px 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

.hero-text h1 {
    font-size: 3.2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

.hero-text p {
    font-size: 1.15rem;
    color: #555;
    margin: 20px 0 30px 0; /* Jarak atas/bawah */
}

.hero-text .btn-lg {
    border-radius: 50px; /* Tombol bulat */
    padding: 12px 30px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2); /* Bayangan tombol */
}

.hero-image img {
    max-width: 100%;
    border-radius: 15px; /* Sudut melengkung */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Bayangan gambar */
}

/* =================================
   Steps Section (BARU)
   ================================= */
.steps-section {
    padding: 60px 0;
    text-align: center;
}

.steps-section h2 {
    color: #007bff; /* Warna primary */
}

.step-icon {
    font-size: 3rem; /* Ikon besar */
    color: #007bff;
    margin-bottom: 15px;
    display: inline-block;
    padding: 20px;
    background-color: #e6f2ff; /* Latar ikon biru muda */
    border-radius: 50%;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

/* =================================
   Procedure Card (Disempurnakan)
   ================================= */
.procedure-card-section {
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
}

.procedure-card {
    border: 1px solid #e9ecef; /* Border halus */
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Bayangan SANGAT halus */
}

.procedure-card:hover {
    transform: translateY(-8px); /* Efek terangkat sedikit */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Bayangan lebih jelas saat di-hover */
}

/* Perbaikan untuk centering ikon */
.procedure-icon-wrapper {
    height: 180px; /* Tinggi konsisten */
    display: flex; /* Aktifkan flexbox */
    justify-content: center; /* Center horizontal */
    align-items: center; /* Center vertical */
    background-color: #f8f9fa; /* Latar abu-abu muda */
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.procedure-icon-wrapper img {
    max-width: 80%; /* Batasi ukuran ikon */
    max-height: 80%;
    object-fit: contain; /* Jaga rasio aspek */
    border-radius: 8px;
}
/* Akhir Perbaikan Ikon */

.procedure-card .card-body {
    padding: 25px;
    text-align: center;
}

.procedure-card .card-title {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #004696; /* Biru tua */
}

.procedure-card .card-text {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    min-height: 70px;
}

.procedure-card .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
}

/* =================================
   Halaman Detail Prosedur (prosedur.php)
   ================================= */

/* Section untuk deskripsi utama */
.procedure-detail-section {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

/* Banner/Hero image di halaman detail */
.procedure-hero-image {
    max-height: 350px; /* Batasi tinggi banner */
    width: 100%;
    object-fit: cover; /* Pastikan gambar memenuhi area */
    border-radius: 15px; /* Sesuaikan dengan style kartu */
    margin-bottom: 2rem;
    background-color: #f8f9fa; /* Warna jika gambar rusak */
}

/* Membuat checklist lebih bersih */
.accordion-body .list-group-flush .list-group-item {
    padding-left: 0;
    padding-right: 0;
    border: 0;
}

.form-check-label {
    /* Biarkan browser mengatur display, kita hanya ubah kursor */
    cursor: pointer;
}

/* Merapikan kotak FAQ */
.faq-item {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.faq-item h5 {
    color: #007bff; /* Biru primary */
    margin-bottom: 0.5rem;
}

.faq-item p {
    margin-left: 28px; /* Sejajarkan dengan ikon */
    margin-bottom: 0;
    color: #333;
}

/* =================================
   Perbaikan Checkbox Kontras
   ================================= */
.accordion-body .form-check-input {
    width: 1.3em;
    height: 1.3em;
    border: 2px solid #007bff; /* Garis biru tebal agar kontras */
    flex-shrink: 0; /* Mencegah kotak jadi gepeng */
    margin-top: 0.1em; /* Sedikit ke bawah agar sejajar teks */
}

.accordion-body .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

/* =================================
   Footer
   ================================= */
footer {
    background-color: #ffffff;
    color: #6c757d;
}