/* CSS KHUSUS HALAMAN HUMAS */

/* Hero Section Humas (Nuansa Oranye/Emas Hangat) */

/* Pola gelombang tipis */

.humas-icon-top {

    width: 64px;

    height: 64px;

    background: rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    color: white;

    backdrop-filter: blur(4px);

    border: 1px solid rgba(255,255,255,0.3);

}

/* Global Section */

.humas-section {

    padding: 80px 0;

    background-color: #FAFAFA;

}

.humas-section.bg-white {

    background-color: var(--white);

}

.humas-section.bg-slate {

    background-color: #f8fafc;

}

.section-header {

    text-align: center;

    margin-bottom: 48px;

}

.sec-title {

    font-size: 32px;

    font-weight: 800;

    color: var(--charcoal);

    margin-bottom: 16px;

}

.sec-desc {

    color: var(--slate);

    font-size: 16px;

    max-width: 650px;

    margin: 0 auto;

    line-height: 1.7;

}

/* Program Layanan Cards */

.layanan-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

    max-width: 1100px;

    margin: 0 auto;

}

@media (min-width: 768px) {

    .layanan-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (min-width: 1024px) {

    .layanan-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

.layanan-card {

    background: var(--white);

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    box-shadow: 0 4px 20px rgba(0,0,0,0.03);

    border: 1px solid rgba(0,0,0,0.03);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}

.layanan-card::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0; height: 4px;

    background: var(--primary-green);

    transform: scaleX(0);

    transition: transform 0.3s ease;

    transform-origin: left;

}

.layanan-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.06);

}

.layanan-card:hover::before {

    transform: scaleX(1);

}

.layanan-icon {

    width: 72px;

    height: 72px;

    background: #fff7ed; /* orange-50 */

    color: #ea580c; /* orange-600 */

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 24px;

    transition: all 0.3s;

}

.layanan-card:hover .layanan-icon {

    background: #ea580c;

    color: white;

}

.layanan-title {

    font-size: 20px;

    font-weight: 800;

    color: var(--charcoal);

    margin-bottom: 16px;

}

.layanan-text {

    font-size: 14.5px;

    color: var(--slate);

    line-height: 1.6;

}

/* Mitra/Partnership Logo Grid */

.mitra-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 30px;

    max-width: 1000px;

    margin: 0 auto;

}

.mitra-item {

    width: 140px;

    height: 140px;

    background: var(--white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 15px rgba(0,0,0,0.03);

    border: 1px solid rgba(0,0,0,0.02);

    transition: all 0.3s;

    padding: 24px;

}

.mitra-item:hover {

    transform: scale(1.05);

    box-shadow: 0 10px 25px rgba(0,0,0,0.06);

    border-color: #fdba74; /* orange-300 */

}

/* Memanfaatkan SVG Dummy untuk logo sementara */

.mitra-logo-dummy {

    width: 100%;

    height: 100%;

    color: #94a3b8;

}

/* Kotak Kontak & Informasi Publik */

.kontak-container {

    max-width: 900px;

    margin: 0 auto;

    background: var(--white);

    border-radius: 24px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    box-shadow: 0 10px 40px rgba(0,0,0,0.05);

    border: 1px solid rgba(0,0,0,0.03);

}

@media (min-width: 768px) {

    .kontak-container {

        flex-direction: row;

    }

}

.kontak-info {

    flex: 1;

    padding: 48px;

    background: #f8fafc;

}

.kontak-info-title {

    font-size: 24px;

    font-weight: 800;

    color: var(--charcoal);

    margin-bottom: 24px;

}

.kontak-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.kontak-item {

    display: flex;

    align-items: center;

    gap: 16px;

}

.k-icon {

    width: 48px;

    height: 48px;

    background: var(--white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-green);

    box-shadow: 0 2px 10px rgba(0,0,0,0.04);

}

.k-text h4 {

    font-size: 14px;

    color: var(--slate-light);

    margin-bottom: 4px;

    font-weight: 600;

}

.k-text p {

    font-size: 16px;

    color: var(--charcoal);

    font-weight: 700;

}

/* Kolom CTA */

.kontak-cta {

    flex: 1;

    padding: 48px;

    background: linear-gradient(135deg, #10b981 0%, #059669 100%);

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

}

.kontak-cta h3 {

    font-size: 28px;

    font-weight: 800;

    margin-bottom: 16px;

}

.kontak-cta p {

    font-size: 15px;

    opacity: 0.9;

    line-height: 1.6;

    margin-bottom: 32px;

}

.btn-whatsapp {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: white;

    color: #059669;

    padding: 24px;

    border-radius: 9999px;

    font-weight: 700;

    font-size: 15px;

    text-decoration: none;

    transition: transform 0.3s, box-shadow 0.3s;

}

.btn-whatsapp:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

}