/* =======================
HERO IMAGE (STATIS)
======================= */
.profile-hero {
position: relative;
width: 100vw;
height: 380px;

margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);

background-image: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqoF6Job0xkw6lMd7hScko4w-YZIHUpe-T7J6h3nokqBDIkT4uePCIFEwfkEIxrc5irSUfs9BpgEeK2NmcaaLY6niAYxebstuZHixALJW7suYmhy1x_YeV7dS_8JKQnry0r191pQkZcfYe4GqMUcpNc6vcqYlwX1Cv35XND2cX7rHM1YBvKeI0Vsxjs6g/s1600/perpus%20depan.jfif’);
background-size: cover;
background-position: center 12%;
background-repeat: no-repeat;

overflow: hidden;
}

/* OVERLAY FADE */
.profile-hero::after {
animation: overlayFade 6s ease-in-out infinite alternate;
}

.profile-hero::after {
content: “”;
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.2),
rgba(0,0,0,0.4)
);
}

======================
KONTEN UTAMA
======================= */
.profile-content {
max-width: 900px;
margin: -140px auto 70px;
background: #fff;
padding: 40px;
border-radius: 22px;
box-shadow: 0 15px 35px rgba(0,0,0,0.12);
position: relative;
z-index: 5;

/* ANIMASI */
opacity: 0;
transform: translateY(50px);
animation: fadeUp 0.9s ease forwards;
}

.profile-content h2 {
color: #002855;
margin-bottom: 15px;
}

.profile-content p {
line-height: 1.8;
color: #444;
}

/* =======================
VISI & MISI
======================= */
.visi-misi {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 40px;
}

.visi, .misi {
background: #f9f9f9;
padding: 25px;
border-radius: 18px;

/* ANIMASI */
opacity: 0;
transform: translateY(40px);
animation: fadeUp 0.9s ease forwards;
}

.visi { animation-delay: 0.2s; }
.misi { animation-delay: 0.4s; }

.visi h3,
.misi h3 {
color: #002855;
margin-bottom: 10px;
}

.misi ul {
padding-left: 18px;
}

.misi li {
margin-bottom: 8px;
}

/* =======================
ANIMASI KEYFRAMES
======================= */
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* =======================
RESPONSIVE
======================= */
@media (max-width: 768px) {
.profile-hero {
height: 260px;
background-position: center 20%;
}
}