/* Variabel Warna */
:root {
  --primary: #0066cc;
  --secondary: #004080;
  --light: #f5f5f5;
}

/* RESET */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: Arial, sans-serif; line-height:1.6;}

/* HEADER */
header {text-align:center; background:var(--secondary); color:white; padding:20px;}
.logo {font-size:24px; font-weight:bold;}
.fade-in {animation: fade 2s ease-in;}
@keyframes fade {from {opacity:0;} to {opacity:1;}}

nav ul {list-style:none; display:flex; justify-content:center; gap:20px; margin-top:10px;}
nav ul li a {color:white; text-decoration:none; padding:5px 10px; transition:0.3s;}
nav ul li a:hover {background:var(--primary); border-radius:5px;}

/* HERO */
#hero {
  background:url("hero.jpg") no-repeat center/cover;
  color:white; text-align:center; padding:100px 20px;
}
#hero h1 {font-size:48px;}
#hero .btn {background:var(--primary); color:white; padding:10px 20px; border-radius:5px; text-decoration:none;}
#hero .btn:hover {background:var(--secondary);}

/* ABOUT */
#about {padding:50px 20px; background:var(--light);}
.about-container {display:flex; gap:20px; align-items:center;}
.about-container img {width:40%; border-radius:10px; filter:grayscale(100%); transition:0.3s;}
.about-container img:hover {filter:grayscale(0);}
.about-container p {column-count:2;}

/* SERVICES */
#services {padding:50px 20px; text-align:center;}
.service-boxes {display:flex; gap:20px; justify-content:center;}
.box {background:var(--primary); color:white; padding:30px; border-radius:10px; flex:1; transition:0.3s;}
.box:hover {background:var(--secondary);}

/* ORGANISASI */
#org {padding:50px 20px; text-align:center;}
.org-container {display:flex; gap:20px; justify-content:center;}
.person {position:relative;}
.person img {width:120px; height:120px; border-radius:50%; object-fit:cover;}
.tooltip {
  visibility:hidden; background:var(--secondary); color:white; padding:5px 10px; border-radius:5px;
  position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
}
.person:hover .tooltip {visibility:visible;}

/* GALERI */
#gallery {padding:50px 20px; text-align:center; background:var(--light);}
.gallery-container {display:flex; gap:20px; justify-content:center;}
.gallery-container img {width:30%; height:200px; object-fit:cover; border-radius:15px; filter:sepia(30%);}
.gallery-container img:hover {filter:none;}

/* BERITA */
#news {padding:50px 20px;}
.news-container p {column-count:2;}
.pagination {text-align:center; margin-top:20px;}
.pagination a {margin:0 5px; text-decoration:none; color:var(--primary);}
.pagination a:hover {text-decoration:underline;}

/* CONTACT */
#contact {padding:50px 20px; background:var(--light); text-align:center;}
form {max-width:400px; margin:auto; display:flex; flex-direction:column; gap:10px;}
input, textarea {padding:10px; border:1px solid #ccc; border-radius:5px;}
button {padding:10px; background:var(--primary); color:white; border:none; border-radius:5px;}
button:hover {background:var(--secondary);}

/* FOOTER */
footer {background:var(--secondary); color:white; text-align:center; padding:20px; margin-top:20px;}

/* RESPONSIVE */
@media (max-width:768px) {
  #hero h1 {font-size:28px;}
  nav ul {flex-direction:column;}
  .about-container {flex-direction:column;}
  .about-container img {width:100%;}
  .service-boxes {flex-direction:column;}
  .gallery-container {flex-direction:column;}
  .news-container p {column-count:1;}
}