/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html, body{
  height: 100%;
  margin: 0;
}

.page-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.content{
  flex:1;
}

body{
  font-family:'Poppins', sans-serif;
  line-height:1.6;
  color:#333; 
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* ================= VARIABEL WARNA ================= */
/*:root{
  --primary: #0097b2;
  --dark:#0f97b2;
  --light:#f7f7f7;
}*/

:root {
  --primary: #0A6AA6;      /* biru logo */
  --primary-dark: #084E7A;
  --accent: #D9B45A;       /* emas logo */
  --bg-soft: #F5F9FC;
  --text-dark: #1f2937;
}

/* ================= HEADER ================= */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  z-index:999;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100px;
  max-width:1800px;
  margin:auto;
  width: 100%;
}

.logo-img{
  height:80px;
  aspect-ratio: 1:1;
  width: 80px;
}

.nama{
  display: flex;
  font-weight: 600;
  font-size: 24px;
  width: 50%;
}

@media (max-width:900px){

  .nama{
    display: none !important ;
    font-size: 0px;
  }

  .logo{
    width: 100%;
  }

  }

.nama:hover{
  color: #0097b2;
}

/* MENU */
.menu{
  display:flex;
  align-items:center;
  gap:25px;
  font-weight: 500;
}

.menu a{
  font-weight:500;
  position:relative;
}

.menu a.active,
.menu a:hover{
  color:var(--primary);
  color: #0056b3; /* biru lebih gelap */
/*  border-bottom: 2px solid #0056b3;*/
}

.menu a.active::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  width:100%;
  height:2px;
  background:var(--primary);
  
}


/* DROPDOWN */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

.dropdown-toggle i {
  font-size: 12px;
  transition: transform .25s ease;
}

/* Menu */
.dropdown-menu {
  position: absolute;
  top: 120%;
  left: 0;
  background: #fff;
  min-width: 180px;
  padding: 6px 0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all .25s ease;
  z-index: 999;
}

/* Item */
.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: #f3f4f6;
}

/* AKTIF */
.dropdown.active .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown.active .dropdown-toggle i {
  transform: rotate(180deg);
}


/*.dropdown{
  position:relative;
  cursor:pointer;
}

.dropdown-menu{
  position:absolute;
  top:35px;
  left:0;
  background:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,.1);
  border-radius:6px;
  display:none;
  min-width:180px;
}

.dropdown-menu a{
  display:block;
  padding:10px 15px;
}

.dropdown-menu a:hover{
  background:var(--light);
}

.dropdown:hover .dropdown-menu{
  display:block;
}
*/
.btn-login{
  padding:8px 18px;
  border:1px solid var(--primary);
  border-radius:30px;
  color:var(--primary);
}

.btn-login:hover{
  background:#e6f8fc;
  color:#fff;
}

/* Tombol hamburger */
.menu-toggle{
  display:none;
  font-size:28px;
  background:none;
  border:none;
  cursor:pointer;
}

/* MOBILE */
@media (max-width:900px){


  .menu{
    display:none;
    flex-direction:column;
    width:100%;
    background:#fff;
  }

  .menu.active{
    display:flex;
  }

  .menu-toggle{
    display:block;
    font-size:26px;
    background:none;
    border:none;
    cursor:pointer;
  }

  .dropdown-menu{
    display:none;
  }

  .dropdown.active .dropdown-menu{
    display:block;
  }
}





/* ================= TOP LINE / HERO ================= */
.topline{
  margin-top:80px;
  height:260px;
  background-size:cover;
  background-position:center;
  position:relative;
}

.topline-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.topline-overlay h1{
  font-size:36px;
}


/* ================= HERO TEXT ANIMATION ================= */
.hero-anim .anim-item{
  opacity:0;
  transform:translateY(30px);
  transition:all .7s ease;
}

.hero-anim .anim-item.show{
  opacity:1;
  transform:translateY(0);
}

.hero-anim h1.anim-item{
  transform:translateX(-40px);
}

.hero-anim h1.anim-item.show{
  transform:translateX(0);
}

/* ================= HERO SLIDER ================= */
.hero{
/*  margin-top:80px;*/
  height:100vh;
}

.heroSwiper .swiper-wrapper{
  height:100%;
}



.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide{
  height:100%;
}


.heroSwiper,
.hero-slide{
  height:100%;
}

.hero-slide{
  background-size:cover;
  background-position:center;
  position:relative;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.65),
    rgba(0,0,0,.35),
    rgba(0,0,0,.15)
  );
  display:flex;
  align-items:center;
}

.hero-subtitle{
  color:#1ccfc9;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:15px;
  display:block;
}

.hero-overlay h1{
  color:#fff;
  font-size:48px;
  line-height:1.2;
  margin-bottom:20px;
  max-width:700px;
}

.hero-overlay p{
  color:#eee;
  max-width:600px;
  margin-bottom:30px;
}

.hero-btn{
  display:inline-block;
  background:#1ccfc9;
  color:#fff;
  padding:14px 32px;
  border-radius:30px;
  font-weight:600;
}

/* NAVIGATION */
.hero-nav{
  position:absolute;
  right:30px;
  width:48px;
  height:48px;
  background:rgba(255,255,255,.25);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:50%;
  z-index:10;
}

.hero-prev{ top:45%; }
.hero-next{ top:52%; }

.hero-nav:hover{
  background:#1ccfc9;
}

/* RESPONSIVE */
@media(max-width:768px){
  .hero-overlay h1{
    font-size:32px;
  }
}


/* ================= SECTION UMUM ================= */
section{
  padding:70px 0;
}

.section-title{
  text-align:center;
  margin-bottom:50px;
}

.spasi {
  background:linear-gradient(180deg,#f8fafc,#eef3f7);
}


/* ================= BERITA PAGE ================= */
.berita-page{
  padding:60px 0;
}

.berita-page h2{
  margin-top: 50px;
  text-align:center;
  margin-bottom:40px;
  color:var(--primary);
  font-weight:700;
}


/* GRID */
.berita-grid-page{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

/* CARD */
.berita-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(10,106,166,.12);
  transition:.35s;
  display:flex;
  flex-direction:column;
}

.berita-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(10,106,166,.22);
}

/* IMAGE */
.berita-thumb{
  height:220px;
  overflow:hidden;
  background:#eef5fa;
}

.berita-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s;
}

.berita-card:hover img{
  transform:scale(1.08);
}

/* BODY */
.berita-body{
  padding:22px;
  display:flex;
  flex-direction:column;
  height:100%;
  background-color: floralwhite;
}

.berita-body h3{
  font-size:18px;
  margin-bottom:10px;
  line-height:1.4;
  color:var(--primary-dark);
  font-weight:600;
}


.berita-body p{
  font-size:14px;
  color:#555;
  flex-grow:1;
}


/* BUTTON */
.btn-berita{
  margin-top:18px;
  align-self:flex-start;
  padding:9px 24px;
  border-radius:30px;
  border:1.5px solid var(--primary);
  color:var(--primary);
  font-size:14px;
  font-weight:600;
  transition:.3s;
  background:#fff;
}

.btn-berita:hover{
  background:var(--primary);
  color:#fff;
}


/* ================= RESPONSIVE ================= */
@media(max-width:992px){
  .berita-grid-page{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:576px){
  .berita-grid-page{
    grid-template-columns:1fr;
  }

  .berita-thumb{
    height:200px;
  }
}


/* ================= BERITA DETAIL ================= */

/* ================= BERITA DETAIL TEMPO STYLE ================= */
.berita-detail{
  max-width:860px;
  margin:auto;
  padding:60px 0;
}

/* JUDUL */
.detail-title{
  font-size:34px;
  line-height:1.25;
  margin-bottom:12px;
  color:#123c6b; /* biru editorial */
  font-weight:700;
}

/* META */
.detail-meta{
  font-size:14px;
  color:#6b7c93;
  margin-bottom:35px;
}

/* GAMBAR */
.detail-thumb{
  float:left;
  width:320px;
  margin:-10px 30px 18px 0;
  border-radius:6px;
  box-shadow:0 14px 38px rgba(0,0,0,.12);
  background:#fff;
  padding:6px;
}

/* ISI */
.detail-isi{
  font-size:17px;
  line-height:1.85;
  color:#2f3e4e;
}

.detail-isi p{
  margin-bottom:22px;
}

/* DROP CAP ala majalah */
.detail-isi p:first-child::first-letter{
  float:left;
  font-size:64px;
  line-height:1;
  padding-right:10px;
  font-weight:700;
  color:#123c6b;
}

/* RESPONSIVE */
@media(max-width:768px){
  .detail-thumb{
    float:none;
    width:100%;
    margin:0 0 20px 0;
  }

  .detail-title{
    font-size:26px;
  }
}


/* ================= BERITA DETAIL STYLE ================= */

.detail-content{
  display:block;
}

.detail-thumb{
  float:left;
  width:240px;
  margin:5px 25px 15px 0;
  border-radius:16px;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/* Paragraf */
.detail-isi{
  font-size:16px;
  line-height:1.9;
  color:#334155;
}

/* Bersihin float */
.detail-content::after{
  content:"";
  display:block;
  clear:both;
}

/* MOBILE */
@media(max-width:768px){
  .detail-thumb{
    float:none;
    width:100%;
    margin:0 0 20px 0;
  }
}

/*.berita-detail{
  margin:50px auto;
}

.detail-title{
  max-width:900px;
  font-size:30px;
  line-height:1.4;
  color:var(--primary);
  margin-bottom:10px;
}

.detail-meta{
  font-size:14px;
  color:#64748b;
  margin-bottom:20px;
}

.detail-img{
  width:100%;
  border-radius:18px;
  margin:25px 0;
}

.detail-isi{
  font-size:16px;
  line-height:1.9;
  color:#334155;
}
*/



/* ================= BERITA ================= */

.berita-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap:30px;
}

.berita-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:#000;
  min-height:280px;
  animation:beritaFadeUp .9s ease forwards;
}


/* KARTU BESAR (KIRI) */
.berita-card.besar{
  grid-row: span 2;
  min-height:620px;
}

/* BACKGROUND IMAGE */
.berita-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .5s ease;
}

.berita-card:hover .berita-bg{
  transform:scale(1.08);
}

/* OVERLAY CONTENT */
.berita-content{
  position:absolute;
  inset:0;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.2),
    transparent
  );
  color:#fff;
}

.berita-content h3{
  font-size:28px;
  margin-bottom:8px;
}

.berita-card.kecil .berita-content h3{
  font-size:20px;
}

.berita-content p{
  font-size:14px;
  line-height:1.6;
  max-width:90%;
}

/* VIEW MORE */
.view-more{
  margin-top:15px;
  font-size:12px;
  letter-spacing:1px;
  color:#fff;
  text-decoration:none;
  align-self:flex-start;
  position:relative;
}

.view-more::after{
  content:'';
  display:block;
  width:40px;
  height:2px;
  background:#fff;
  margin-top:5px;
  transition:width .3s;
}

.view-more:hover::after{
  width:70px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .berita-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .berita-card.besar{
    min-height:420px;
  }
}

.lihat-lainnya-wrap{
  text-align:center;
  margin-top:30px;
}

.btn-lihat-lainnya{
  display:inline-block;
  padding:12px 28px;
  border:2px solid var(--primary);
  color:var(--primary);
  border-radius:30px;
  font-weight:500;
  transition:.3s;
}

.btn-lihat-lainnya:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-3px);
}

.lihat-lainnya-wrap{
  animation: fadeUp .8s ease;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* ================= ANIMASI BERITA BERANDA ================= */

/* awal tersembunyi */
.berita-card{
  opacity:0;
  transform:translateY(40px);
}

/* trigger animasi saat load */
.berita-card{
  animation: beritaReveal .9s ease forwards;
}

/* delay bertahap */
.berita-card:nth-child(1){ animation-delay:.1s }
.berita-card:nth-child(2){ animation-delay:.35s }
.berita-card:nth-child(3){ animation-delay:.6s }

/* keyframes */
@keyframes beritaReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* hover overlay lebih hidup (tanpa ubah warna) */
.berita-card:hover .berita-content{
  background:linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.35),
    transparent
  );
}

/*.berita-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}

.berita-big,
.berita-small{
  position:relative;
  border-radius:15px;
  overflow:hidden;
}

.berita-big img,
.berita-small img{
  height:100%;
  object-fit:cover;
}

.berita-caption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:20px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  color:#fff;
}
*/
/* ================= PROGRAM RINGKAS ================= */
.program-ringkas{
  background:linear-gradient(180deg,#f8fafc,#eef3f7);
  padding:70px 0;
}

.program-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:25px;
}

.program-box{
  background:#e6f8fc;
  padding:30px;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  transition:.35s ease;
  position:relative;
  overflow:hidden;
  text-align: center;
}
.program-box p{
  font-size: 18px;
}

.program-box i {
  font-size: 2.5rem;
  color: #0097b2;
  margin-bottom: 10px;
  display: block;
  transition: color 0.3s ease;
}

.program-box:hover i {
  color: white;
}

/* AKSEN GARIS WARNA */
.program-box::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:var(--primary);
}

/* HOVER */
.program-box:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,0,0,.1);
  background: #0097b2;
  color: white;
}

/* JUDUL */
.program-box h3{
  color:var(--primary);
  margin-bottom:12px;
  font-size:20px;
}

/* DESKRIPSI */
.program-box p{
  color:#555;
  font-size:16px;
  line-height:1.7;
}
.program-box:hover p{
  color: white;
}

/* ================= PROGRAM ANIMASI SCROLL ================= */

.program-box{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}

/* aktif saat discroll */
.program-box.show{
  opacity:1;
  transform:translateY(0);
}

/* STAGGER DELAY */
.program-box:nth-child(1){ transition-delay:.1s; }
.program-box:nth-child(2){ transition-delay:.25s; }
.program-box:nth-child(3){ transition-delay:.4s; }
.program-box:nth-child(4){ transition-delay:.55s; }


@keyframes fadeUpStagger{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ================= TENTANG KAMI ================= */
.tentang{
  /*display:grid;
  grid-template-columns:1fr 1fr;*/
  gap:40px;
  align-items:center;
  font-size:17px;
  line-height:1.85;
  color:#2f3e4e;
}

.t-line-wrapper {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 15px; /* Jarak antara garis dan teks */
  margin-bottom: 5px;
}
.t-line-wrapper h6 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 2px;
  color: #00a8cc; /* Warna biru muda */
  text-transform: uppercase;
}

.line-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* Jarak antara garis dan teks */
  margin-bottom: 5px;
}
.line-wrapper h6 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 2px;
  color: #00a8cc; /* Warna biru muda */
  text-transform: uppercase;
}

/* Membuat Garis di Samping */
.line {
  height: 2px;
  width: 50px;
  background-color: #00a8cc;
  display: inline-block;
  position: relative;
}

/* Opsional: Membuat efek garis ganda tipis seperti di gambar */
.line::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 10px;
  right: 10px;
  height: 1px;
  background-color: #00a8cc;
}

.tentang-isi p{
font-size: 20px;
text-align: justify;
}

.tentang p{
  margin-bottom:22px;
}

/* GAMBAR */
.tentang-thumb{
  float:left;
  width:500px;
  height:500px;
  margin:0px 30px 18px 0;
  border-radius:6px;
  box-shadow:0 14px 38px rgba(0,0,0,.12);
  background:#fff;
  padding:6px;
}
.tentang-thumb img{
  object-fit: cover;
  height:500px;
  border-radius:6px;
}

.tentang-thumb:hover img{
  transform:scale(1.08);
  transition: 0.5s;
}

.bg-light{
  margin-top: 10px;
  background:linear-gradient(180deg,#f8fafc,#eef3f7);
  padding:50px 0;
}

.visi-misi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.visi-card {
  background: rgba(0, 151, 178, 0.1); /* biru transparan */
  border: 1px solid rgba(0, 151, 178, 0.3);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: all 0.3s ease;
}

.visi-card:hover {
  background: #0097b2;
  color: white;
  transform: translateY(-5px);
}

.visi-card h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: #0097b2;
  transition: color 0.3s ease;
}

.visi-card:hover h3 {
  color: white;
}

.visi-card p {
  font-size: 1rem;
  line-height: 1.6;
}


.grid-3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.prog-card {
  background: rgba(0, 151, 178, 0.1); /* biru transparan */
  padding: 20px;
  border: 1px solid rgba(0, 151, 178, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.prog-card h4 {
  color: #0097b2; /* biru judul */
  margin-bottom: 10px;
}

.prog-card p {
  color: #333;
  line-height: 1.6;
}

.prog-card:hover {
  background: rgba(0, 151, 178, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* ================= ANIMATION BASE ================= */
/* ================= SCROLL ANIMATION TENTANG ================= */

/* target semua elemen penting di tentang */
#tentang .tentang-thumb,
#tentang .line-wrapper,
#tentang h1,
#tentang p{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

/* saat aktif */
#tentang.show .tentang-thumb,
#tentang.show .line-wrapper,
#tentang.show h1,
#tentang.show p{
  opacity:1;
  transform:none;
}

/* STAGGER (urutan masuk) */
#tentang.show .tentang-thumb{ transition-delay:.1s }
#tentang.show .line-wrapper{ transition-delay:.25s }
#tentang.show h1{ transition-delay:.4s }
#tentang.show p:nth-of-type(1){ transition-delay:.55s }
#tentang.show p:nth-of-type(2){ transition-delay:.7s }


/* ================= SCROLL ANIMATION VISI MISI ================= */

#visi .visi-card{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

#visi.show .visi-card{
  opacity:1;
  transform:none;
}

/* stagger */
#visi.show .visi-card:nth-child(1){ transition-delay:.15s }
#visi.show .visi-card:nth-child(2){ transition-delay:.3s }
#visi.show .visi-card:nth-child(3){ transition-delay:.45s }


/* ================= PROGRAM COLLASE ================= */
/*.program-collase{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}

.program-item{
  position:relative;
  overflow:hidden;
  border-radius:15px;
}

.program-item img{
  height:100%;
  object-fit:cover;
}

.program-caption{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  display:flex;
  align-items:end;
  padding:20px;
}*/

.program-title{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* ================= PROGRAM UNGGULAN ================= */
.program-unggulan{
  padding:70px 0;
}

/* GRID KHUSUS */
.p-program-grid{
  /*display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(2, 1fr);
  gap:30px;*/
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px 120px;
  gap:25px;
}

/* ITEM DASAR */
.program-item{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
  transition:.35s ease;
  background:#000;
}

/* GAMBAR */
.program-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* JUDUL */
.program-overlay{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  padding:24px;
  font-size:20px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.05)
  );
}

/* ================= LAYOUT KHUSUS ================= */

/* BESAR – KANAN */
.program-item:nth-child(1){
  grid-column:2 / 3;
  grid-row:1 / 3;
}

/* KIRI ATAS */
.program-item:nth-child(2){
  grid-column:1 / 2;
  grid-row:1 / 2;
}

/* KIRI BAWAH – KOTAK KIRI */
.program-item:nth-child(3){
  grid-column:1 / 2;
  grid-row:2 / 3;
  width:calc(50% - 12px);
  justify-self:start;
}

/* KIRI BAWAH – KOTAK KANAN */
.program-item:nth-child(4){
  grid-column:1 / 2;
  grid-row:2 / 3;
  width:calc(50% - 12px);
  justify-self:end;
}



/* ITEM BESAR (KANAN) */
/*.program-item:nth-child(1){
  grid-column:2 / 3;
  grid-row:1 / 3;
}*/

/* ITEM KECIL */
/*.program-item:nth-child(2)
{
  height:240px;
}*/

/*.program-item:nth-child(3),
.program-item:nth-child(4){

}*/

/* ITEM BESAR TINGGI */
.program-item:nth-child(1) img{
  height:100%;
}

/* HOVER */
.program-item:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(0,0,0,.18);
}
.program-item:hover img{
  transform:scale(1.2);
  transition: 0.5s;
}


@media (max-width:768px){
  .program-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .program-item{
    grid-column:auto !important;
    grid-row:auto !important;
    height:240px;
  }



  /*.program-item:nth-child(1){
    grid-column:auto;
    grid-row:auto;
    height:300px;
  }

  .program-item:nth-child(2),
  .program-item:nth-child(3){
    height:220px;
  }*/
}


/* ================= ANIMASI SCROLL PROGRAM ================= */

.program-item{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity .8s ease,
    transform .8s ease,
    box-shadow .35s ease,
    background .35s ease;
}

/* AKTIF SAAT MUNCUL */
.program-item.show{
  opacity:1;
  transform:translateY(0);
}

/* STAGGER (HANYA SAAT SCROLL, BUKAN HOVER) */
.program-item:nth-child(1){ transition-delay:.15s; }
.program-item:nth-child(2){ transition-delay:.3s; }
.program-item:nth-child(3){ transition-delay:.45s; }
.program-item:nth-child(4){ transition-delay:.6s; }


/* ================= CABANG ================= */
/* ================= CABANG ================= */

.cabang-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

/* CARD */
.cabang-item{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.4s ease;
}

/* MAP */
.cabang-item .map iframe{
  width:100%;
  height:260px;
  border:0;
  display:block;
  filter:grayscale(100%);
  transition:filter .5s ease, transform .5s ease;
}

/* HOVER MAP */
.cabang-item:hover .map iframe{
  filter:grayscale(0%);
  transform:scale(1.03);
}

/* BODY */
.cabang-body{
  padding:22px;
}

.cabang-body h4{
  color:var(--primary);
  margin-bottom:8px;
  font-size:18px;
}

.cabang-body p{
  font-size:14px;
  line-height:1.6;
  color:#555;
}

/* ================= ANIMASI SCROLL ================= */

.anim-cabang{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}

.anim-cabang.show{
  opacity:1;
  transform:translateY(0);
}

/* STAGGER */
.anim-cabang:nth-child(1){ transition-delay:.1s; }
.anim-cabang:nth-child(2){ transition-delay:.25s; }
.anim-cabang:nth-child(3){ transition-delay:.4s; }
.anim-cabang:nth-child(4){ transition-delay:.55s; }

/* ================= MOBILE ================= */

@media(max-width:576px){
  .cabang-item .map iframe{
    height:220px;
  }

  .cabang-body{
    padding:18px;
  }
}




/* ================= TESTIMONI ================= */
/*.testimoni-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.testimoni-item{
  background:#fff;
  padding:25px;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}*/

/* ================= TESTIMONI ================= */
/* ================= TESTIMONI ================= */

.testiSwiper{
  padding:40px 0;
  margin-top: 10px;
  background:linear-gradient(180deg,#f8fafc,#eef3f7);
  padding:50px 0;
  justify-content: center;
  max-width: 1200px;
}

/* KARTU */
.testi-card{
  background:lightblue;
  border-radius:18px;
  padding:25px 22px;
  width:150px; /* ⬅️ TINGGI TETAP */
  box-shadow:0 12px 30px rgba(0,0,0,.08);

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:center;

  transition:.3s ease;
}

.testi-card:hover{
  transform:translateY(-6px);
}

/* USER */
.testi-user{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:10px;
}

.testi-user img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:8px;
  border:3px solid #0097b2;
}

.testi-user strong{
  font-size:15px;
  color:#222;
}

.testi-label{
  font-size:12px;
  color:darkblue;
}

/* ISI TESTIMONI */
.testi-isi{
  height: 100px;
}

.testi-isi p{
  font-size:14px;
  line-height:1.6;
  color:#555;

  display:-webkit-box;
  -webkit-line-clamp:4; /* ⬅️ max 4 baris */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* RESPONSIVE */
@media(max-width:768px){
  .testi-card{
    height:300px;
  }
}


/* ================= GALERI ================= */
/* Wrapper */
.galeri-filter {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

/* Dropdown */
.filter-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 12px 44px 12px 16px;
  min-width: 240px;

  font-size: 15px;
  font-family: inherit;
  font-weight: 500;

  border-radius: 12px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transition: all .3s ease;
}

/* Icon panah custom */
.galeri-filter::after {
  content: "▾";
  position: absolute;
  margin-left: 210px;
  margin-top: 14px;
  pointer-events: none;
  font-size: 14px;
  color: #666;
}

/* Hover */
.filter-dropdown:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,.1);
}

/* Focus */
.filter-dropdown:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,123,255,.15);
}

.galeri-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform .4s ease, box-shadow .4s ease;
}

.galeri-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform .6s ease;
}

/* Hover image */
.galeri-item:hover img {
  transform: scale(1.1);
}

/* Overlay */
.galeri-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.15)
  );
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity .4s ease;
}

/* Show overlay */
.galeri-item:hover .galeri-overlay {
  opacity: 1;
}

/* Title */
.galeri-overlay h4 {
  color: #fff;
  font-size: 16px;
  transform: translateY(20px);
  transition: transform .4s ease;
}

/* Title animation */
.galeri-item:hover h4 {
  transform: translateY(0);
}


.filter{
  padding:8px 16px;
  border:1px solid var(--primary);
  border-radius:20px;
  color:var(--primary);
}

.filter:hover,
.filter.active{
  background:var(--primary);
  color:#fff;
}

.galeri-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:20px;
}

.galeri-item{
  position:relative;
  overflow:hidden;
  border-radius:15px;
}

.galeri-item img{
  height:260px;
  object-fit:cover;
  transition:.4s;
}

.galeri-item:hover img{
  transform:scale(1.1);
}

.galeri-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:.3s;
}

.galeri-item:hover .galeri-overlay{
  opacity:1;
}

/* Fade in base */
.galeri-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .6s ease forwards;
}

/* Delay bertahap */
.galeri-item:nth-child(1)  { animation-delay: .05s; }
.galeri-item:nth-child(2)  { animation-delay: .1s; }
.galeri-item:nth-child(3)  { animation-delay: .15s; }
.galeri-item:nth-child(4)  { animation-delay: .2s; }
.galeri-item:nth-child(5)  { animation-delay: .25s; }
.galeri-item:nth-child(6)  { animation-delay: .3s; }
.galeri-item:nth-child(7)  { animation-delay: .35s; }
.galeri-item:nth-child(8)  { animation-delay: .4s; }

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

/* Lightbox background */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 9999;
}

/* Aktif */
.lightbox.show {
  opacity: 1;
  pointer-events: auto;
}

/* Image */
.lightbox-img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 14px;
  transform: scale(.8);
  transition: transform .4s ease;
}

/* Zoom animation */
.lightbox.show .lightbox-img {
  transform: scale(1);
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 25px;
  right: 30px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}

.galeri-item {
  cursor: zoom-in;
}



/* ================= KONTAK ================= */
.kontak-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.kontak-info ul{
  list-style:none;
}

.kontak-info li{
  margin-bottom:15px;
}

.btn-wa{
  display:inline-block;
  background:#25D366;
  color:#fff;
  padding:12px 25px;
  border-radius:30px;
  margin-top:20px;
}

/* SOSIAL */
.kontak-social{
  display:flex;
  gap:10px;
  margin-top:15px;
}
.kontak-social a{
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:darkblue;
  transition:.3s;
}
.kontak-social a:hover{
  background:#00c2ff;
  border-color:#00c2ff;
}


/* ================= FOOTER ================= */
.footer{
  background:linear-gradient(180deg,#0d1430,#111a3c);
  color:#fff;
  padding:70px 0 0;
  font-size:14px;
  margin-top: auto;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:40px;
}

.footer-col h4{
  font-size:18px;
  margin-bottom:20px;
  position:relative;
}

.footer-col h4::after{
  content:'';
  width:40px;
  height:2px;
  background:#00c2ff;
  position:absolute;
  left:0;
  bottom:-8px;
}

/* QUICK LINK */
.footer-col ul{
  list-style:none;
  padding:0;
}
.footer-col ul li{
  margin-bottom:10px;
}
.footer-col ul li a{
  color:#fff;
  text-decoration:none;
  opacity:.85;
  transition:.3s;
}
.footer-col ul li a:hover{
  opacity:1;
  padding-left:5px;
}

/* SOSIAL */
.footer-social{
  display:flex;
  gap:10px;
  margin-top:15px;
}
.footer-social a{
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:.3s;
}
.footer-social a:hover{
  background:#00c2ff;
  border-color:#00c2ff;
}

/* GALLERY */
.footer-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.footer-gallery img{
  width:100%;
  height:70px;
  object-fit:cover;
  border-radius:6px;
}

.footer-gallery img{
  transition:.3s;
}
.footer-gallery img:hover{
  transform:scale(1.08);
}

/* NEWSLETTER */
.footer-newsletter{
  display:flex;
  margin-top:15px;
}
.footer-newsletter input{
  flex:1;
  padding:10px;
  border:none;
  outline:none;
}
.footer-newsletter button{
  background:#00c2ff;
  border:none;
  color:#fff;
  padding:0 18px;
  cursor:pointer;
}

/* BOTTOM */
.footer-bottom{
  margin-top:50px;
  padding:20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:13px;
  opacity:.8;
}

/* ================= RESPONSIVE ================= */
@media(max-width:992px){
  .tentang,
  .kontak-grid{
    grid-template-columns:1fr;
  }

  .berita-grid{
    grid-template-columns:1fr;
  }

  .testimoni-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:768px){
  .menu{
    display:none;
  }

  .hero-text h1{
    font-size:32px;
  }

  .testimoni-grid{
    grid-template-columns:1fr;
  }
}