/* assets/css/sambutan.css */

/* Container Utama */
.sambutan-section {
    padding: 60px 20px;
    background-color: #fff;
    min-height: 80vh; /* Biar footer gak naik */
}

.sambutan-header {
    text-align: center;
    margin-bottom: 50px;
}

.sambutan-header h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
}

.sambutan-header .sub-title {
    color: #007bff; /* Biru tema */
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Layout Kiri (Foto) & Kanan (Teks) */
.sambutan-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Rata atas */
    justify-content: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Style Foto Kepsek */
.kepsek-area {
    flex: 1;
    min-width: 300px; /* Lebar minimal foto */
    text-align: center;
}

.foto-bingkai {
    position: relative;
    display: inline-block;
    padding: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Efek bayangan elegan */
    border-radius: 12px;
    transform: rotate(-2deg); /* Miring dikit biar artistik */
    transition: transform 0.3s ease;
}

.foto-bingkai:hover {
    transform: rotate(0deg);
}

.foto-bingkai img {
    width: 100%;
    max-width: 320px; /* Batas lebar foto */
    height: auto;
    border-radius: 8px;
    display: block;
}

.nama-kepsek {
    margin-top: 25px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

.jabatan {
    font-size: 0.9rem;
    color: #777;
}

/* Style Teks Sambutan */
.teks-sambutan {
    flex: 1.5; /* Area teks lebih lebar dari foto */
    min-width: 300px;
    color: #444;
    line-height: 1.8;
    font-size: 1rem;
}

.teks-sambutan p {
    margin-bottom: 20px;
    text-align: justify; /* Rata kanan kiri */
}

.quote-box {
    background: #f0f8ff; /* Biru muda banget */
    border-left: 5px solid #007bff;
    padding: 20px;
    margin: 30px 0;
    font-style: italic;
    color: #555;
    border-radius: 0 8px 8px 0;
}

/* Responsif untuk HP */
@media (max-width: 768px) {
    .sambutan-wrapper {
        flex-direction: column; /* Tumpuk ke bawah */
        gap: 30px;
    }
    
    .kepsek-area, .teks-sambutan {
        width: 100%;
        text-align: center;
    }
    
    .teks-sambutan p {
        text-align: left; /* Di HP lebih enak rata kiri */
    }

    .foto-bingkai {
        transform: rotate(0deg); /* Di HP lurus aja */
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    .sambutan-wrapper { flex-direction: column; }
    .foto-bingkai { max-width: 280px; }
}