@import url('https://fonts.googleapis.com/css2?family=Grandstander:wght@700&family=Montserrat:wght@400;600;700&display=swap');

/* ================= POP OUT ANIMATION ================= */
.pop {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.pop.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}


/* ================= HEADING UMUM ================= */
.section-heading{
  background: #372f6e;
  width: 100%;
  text-align: center;
  margin-bottom: 0px;
    margin-top: -1px;
}

.section-heading h2{
  font-family: 'Grandstander', cursive; /* bisa diganti */
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ================= GARIS DOUBLE UMUM ================= */
.line-double{
  width: 770px;
  height: 10px;
  margin: 0 auto;              /* TENGAH */
  position: relative;
}

.line-double::before,
.line-double::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;

  /* WARNA DEFAULT (aman) */
  background-color: #ffffff;
  opacity: 0.85;
}

.line-double::before{
  top: 0;
}

.line-double::after{
  bottom: 0;
}


/* ================= RESPONSIVE ================= */
@media (max-width: 768px){
  .section-heading h2{
    font-size: 32px;
  }

  .line-double{
    width: 80px;
    height: 8px;
  }
}


/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* SMOOTH SCROLL */
html {
  scroll-behavior: smooth;
}

/* NAVBAR */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* NAV CONTAINER */
.nav-container {
  max-width: 1200px;
  margin: auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO (4:2 LANDSCAPE) */
.logo img {
  width: 110px;       /* rasio 4:2 */
  height: auto;
  object-fit: contain;
}

/* MENU */
.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-menu li a {
  text-decoration: none;
  color: #2c2c2c;
  padding: 6px 0;
  position: relative;
  transition: color 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  letter-spacing: 0.5px;
  font-size: 14px;
  text-transform: uppercase;
}

/* HOVER EFFECT */
.nav-menu li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  left: 0;
  bottom: -4px;
  background-color: #3e9e44;
  transition: width 0.3s ease;
}

.nav-menu li a:hover {
  color: #3e9e44;
}

.nav-menu li a:hover::after {
  width: 100%;
}

/* SECTION STYLE (DEMO) */
.section {
  min-height: 100vh;
  padding: 120px 24px;
  font-size: 32px;
  font-weight: bold;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
}

/* BERANDA - HERO SECTION */
#beranda {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #d98a36; /* WARNA PALING BELAKANG */

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* GAMBAR DI DEPAN WARNA */
#beranda::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("Home_welcome.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.85;      /* transparansi gambar */
  z-index: 1;
}

/* TEKS PALING DEPAN */
.beranda-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
}

.beranda-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;          /* Bold / Extra Bold */
  font-size: 56px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.beranda-content p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;          /* Bold */
  font-size: 20px;
}

/* ================= MOBILE BERANDA ================= */
/* ================= BERANDA MOBILE 3:4 ================= */
@media (max-width: 768px) {

  #beranda {
    min-height: auto;          /* MATIKAN 100vh */
    aspect-ratio: 3 / 4;       /* RASIO HP */
    padding: 0;
    align-items: center;
  }

  #beranda::before {
    background-size: cover;    /* penuh mengikuti box */
    background-position: top center; /* NEMPEL ATAS */
    background-repeat: no-repeat;
    opacity: 0.9;
  }

  .beranda-content {
    padding: 20px;
  }

  .beranda-content h1 {
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 1.5px;
  }

  .beranda-content p {
    font-size: 15px;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
  }
}



/* PROFIL SECTION */
#profil {
  min-height: 100vh;
  background-color: #d98a36; /* sambungan dari beranda */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px;
}



/* CONTAINER */
.profil-container {
  max-width: 900px;
  width: 100%;
}

/* JUDUL PROFIL */
.profil-title {
  position: relative;
  text-align: center;
  font-family: 'Grandstander', cursive;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;

  margin-top: 20px;
  margin-bottom: 48px;
}

/* GARIS DEKORATIF */
.profil-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 420px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 10px;
}


/* TEKS PROFIL */
.profil-text {
   margin-top: 40px;
  font-family: 'Montserrat', sans-serif;
  font-size: 23px;
  line-height: 1.8;
  color: #ffffff;
  text-align:justify;          /* rata kiri */
}


/* ================= VISI & MISI ================= */
/* ================= VISI BACKGROUND PATTERN ================= */
#visi {
  background-color: #ffffff; /* tetap putih */
  background-image: url("BG_PATTERN.png");
  background-repeat: repeat;          /* ⬅️ berulang */
  background-size: 200px 200px;        /* ⬅️ rapat (atur sesuai motif) */
  background-position: top left;

  scroll-margin-top: 81px;
  position: relative;
  overflow: hidden;
}


/* WRAPPER */
.visi-wrapper {
  width: 100%;
  display: flex;
  align-items: stretch;                /* ⬅️ gambar full tinggi */
}

/* ================= GAMBAR FULL BLEED ================= */
.visi-image {
  position: relative;
  width: 40vw;                         /* ⬅️ setengah layar */
  min-height: 100%;
  margin-left: calc(-50vw + 50%);      /* ⬅️ TRIK FULL BLEED */
  overflow: hidden;
}

.visi-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* ⬅️ BOLEH TERPOTONG */
  display: block;
}

/* ================= BOX VISI MISI ================= */
.visi-box {
  flex: 1;
  background-color: #d98a36;
  color: #ffffff;

  /* GAP INTERNAL */
  padding: 60px 56px;

  /* GAP DARI GAMBAR & ATAS-BAWAH */
  margin: 60px 0 60px 60px;   /* ⬅️ KUNCI UTAMA */

  box-shadow: 0 10px 22px rgba(0,0,0,0.28);

  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}


/* JUDUL */
.visi-title {
  font-family: 'Grandstander', cursive;
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* TEKS */
.visi-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 8px;
    text-align:justify;  
}

/* BULLET MISI */
.visi-title + .visi-text ~ .visi-text {
  position: relative;
  padding-left: 26px;
}

.visi-title + .visi-text ~ .visi-text::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 22px;
}

/* ================= TABLET ================= */
@media (max-width: 1024px) {

  .visi-image {
    width: 45vw;
  }

  .visi-box {
    margin: 40px 0 40px 28px;
    padding: 48px 36px;
  }
}

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

  .visi-wrapper {
    flex-direction: column;
  }

  /* GAMBAR FULL BLEED ATAS */
  .visi-image {
    width: 100vw;
    height: 260px;
    margin-left: calc(-50vw + 50%);
  }

  .visi-box {
    padding: 32px 20px;
    border-radius: 12px;
  }

  .visi-title {
    font-size: 24px;
  }

  .visi-text {
    font-size: 14px;
  }
}


/* ================= FASILITAS (FINAL) ================= */
/* ================= FASILITAS (CAROUSEL BIASA) ================= */
#fasilitas{
  padding: 130px 0 1px;
  background: #372f6e;
  overflow: hidden;
  padding-bottom: 1px;
}

/* ---------- JUDUL ---------- */
.fasilitas-heading {
  text-align: center;
  margin-bottom: 34px;
}
.fasilitas-heading h2 {
  font: 700 42px 'Grandstander', cursive;
  color: #ffffff;
}

/* ================= OWL CORE (STABIL) ================= */
#fasilitas .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#fasilitas .owl-carousel { display: block; }

/* cegah kepotong atas (karena shadow) */
#fasilitas .owl-stage-outer{
  padding: 20px 0 10px;
  overflow: visible;
}

#fasilitas .owl-stage{
  display: flex;
  align-items: stretch;
    gap: 0 !important; /* jaga-jaga kalau browser modern */
}

#fasilitas .owl-item{
  display: flex;
  justify-content: center;
}

/* ================= OWL GAP FIX ================= */
#fasilitas .loop .item {
  padding: 0 !important;
}


/* ================= CARD (SAMA SEMUA) ================= */
.fasilitas-item{
  position: relative;
  width: 100%;
  max-width: 420px;           /* ukuran card */
  aspect-ratio: 6 / 5;
  border-radius: 22px;
  overflow: hidden;

  box-shadow: 0 12px 28px rgba(0,0,0,0.38);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* hover halus */
.fasilitas-item:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* ================= IMAGE ================= */
.fasilitas-item .thumb,
.fasilitas-item img{
  width: 100%;
  height: 100%;
}
.fasilitas-item img{
  object-fit: cover;
  display: block;
}

/* ================= OVERLAY TEXT ================= */
.fasilitas-item .down-content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.70), rgba(0,0,0,0));
}

.fasilitas-item h4{
  margin: 0;
  font: 600 18px 'Montserrat', sans-serif;
  color: #fff;
  text-align: center;
}

/* ================= NAV (KIRI KANAN) ================= */
#fasilitas .loop{ position: relative; }

#fasilitas .loop .owl-nav{
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex !important;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 30;
  pointer-events: none;
}

#fasilitas .loop .owl-nav button{
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(6px);

  transition: transform 0.25s ease, background 0.25s ease;
}

#fasilitas .loop .owl-nav button:hover{
  background: rgba(255,255,255,0.33) !important;
  transform: scale(1.08);
}

#fasilitas .loop .owl-nav button span{
  font-size: 24px;
  color: #fff;
  line-height: 1;
}

/* ================= RESPONSIVE ================= */
/* RAPATKAN JARAK FASILITAS -> KEGIATAN (MOBILE) */
@media (max-width: 768px){

  /* benerin padding fasilitas */
  #fasilitas{
    padding: 90px 0 0;     /* atas 90, kiri-kanan 0, bawah 0 */
    padding-bottom: 0;     /* rapetin ke section berikutnya */
    margin-bottom: 0;
  }

  /* rapetin kegiatan dari atas */
  #kegiatan{
    margin-top: 0;
    padding-top: 50px;     /* atur sesuai selera, 40–60 enak */
  }
}


@media (max-width: 480px){
  .fasilitas-item{ max-width: 300px; }
  #fasilitas .loop .owl-nav button{
    width: 44px;
    height: 44px;
  }
}


/* ===================================
   SECTION KEGIATAN
=================================== */
#kegiatan{
  padding: 70px 0px;

  background: #372f6e;
  text-align: center;
  margin-top: -1px;
}

/* JUDUL */
.kegiatan-title{
  font-family: 'Grandstander', cursive;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
  color: #ffffff;
  letter-spacing: 0.1px;
}

/* WRAPPER CARD */
.kegiatan-wrapper{
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* CARD */
.kegiatan-card{
  width: 280px;
  border-radius: 18px;
  overflow: hidden;
  background: #f9f9f9;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}

.kegiatan-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

/* IMAGE (portrait) */
.kegiatan-image{
  width: 100%;
  aspect-ratio: 4 / 5; /* portrait: lebih tinggi */
  overflow: hidden;
}

.kegiatan-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CONTENT */
.kegiatan-content{
  padding: 18px 16px;
  background: #ffffff;
}

.kegiatan-content h4{
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  color: #1f1f1f;
  margin: 0;
}

/* ===================================
   MODAL (Judul + Gambar saja)
   Sesuai HTML:
   <div id="kegiatanModal" class="modal-overlay">
=================================== */

/* lock scroll saat modal open */
body.modal-open{
  overflow: hidden;
}

/* overlay */
#kegiatanModal.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;                 /* dibuka via JS: flex */
  align-items: flex-start;
  justify-content: center;

  /* modal "di bawah navbar" */
  padding-top: 90px;             /* tinggi navbar desktop */
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;

  z-index: 1500;
}

/* box */
#kegiatanModal .modal-box{
  width: 100%;
  max-width: 980px;
  height: calc(100vh - 114px);   /* 90 + 24 */
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: modalSmoothIn .45s ease;
  overflow: hidden;
}

/* tombol close */
#kegiatanModal .modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* judul modal */
#kegiatanModal .modal-title{
  margin: 0 54px 14px 6px; /* kasih ruang untuk tombol close */
  font-family: 'Grandstander', cursive;
  font-size: 26px;
  font-weight: 700;
  color: #2e2e2e;
  text-align: left;
}

/* area swiper */
#kegiatanModal .modal-swiper{
  width: 100%;
  flex: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f3f3;
}

/* slide center */
#kegiatanModal .modal-swiper .swiper-slide{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* gambar fit */
#kegiatanModal .modal-swiper img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .15s ease;
}

/* zoom */
#kegiatanModal .modal-swiper img.zoomed{
  transform: scale(2);
  cursor: zoom-out;
}

/* nav + pagination */
#kegiatanModal .swiper-button-next,
#kegiatanModal .swiper-button-prev{
  color: #ffffff;
}

#kegiatanModal .swiper-pagination-bullet{
  background: rgba(255,255,255,0.7);
}

/* ===================================
   RESPONSIVE
=================================== */

/* TABLET */
@media (max-width: 1024px){
  #kegiatan{
    padding: 90px 24px;
  }

  #kegiatanModal.modal-overlay{
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
  }

  #kegiatanModal .modal-box{
    height: calc(100vh - 100px); /* 80 + 20 */
    padding: 18px;
  }

  #kegiatanModal .modal-title{
    font-size: 22px;
  }
}

/* MOBILE */
@media (max-width: 768px){
  #kegiatan{
    padding: 0px 0px;
  }

  .kegiatan-title{
    font-size: 34px;
    margin-bottom: 36px;
  }

  .kegiatan-card{
    width: min(340px, 100%);
  }

  #kegiatanModal.modal-overlay{
    padding-top: 72px;  /* navbar mobile */
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
  }

  #kegiatanModal .modal-box{
    height: calc(100vh - 84px); /* 72 + 12 */
    padding: 14px;
    border-radius: 14px;
  }

  #kegiatanModal .modal-title{
    font-size: 18px;
    text-align: center;
    margin: 0 44px 10px 44px;
  }

  #kegiatanModal .modal-close{
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}

/* =====================================================
   KEGIATAN – MOBILE VERTIKAL (MAX WIDTH 768px)
   ===================================================== */
@media (max-width: 768px) {

  #kegiatan{
    padding-top: 40px;     /* jarak dari fasilitas */
    padding-bottom: 40px;
    margin-top: 0;
  }

  .kegiatan-title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  /* WRAPPER: SUSUN KE BAWAH */
  .kegiatan-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* CARD */
  .kegiatan-card {
    width: 100%;
    max-width: 300px;     /* pas layar HP */
    border-radius: 14px;
  }

  /* IMAGE */
  .kegiatan-image {
    aspect-ratio: 10 / 5; /* portrait lebih pendek */
  }

  /* CONTENT */
  .kegiatan-content {
    padding: 14px 16px;
  }

  .kegiatan-content h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }

}

  .modal-close {
    position: sticky;           /* tetap terlihat saat scroll */
    top: 10px;
    right: 0;

    align-self: flex-end;

    width: 36px;
    height: 36px;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;

    font-size: 22px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;

    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  }

  /* ================= LOKASI ================= */
@media (max-width: 768px) {
  #lokasi {
    padding: 80px 20px;
  }

  .lokasi-title {
    font-size: 32px;
  }

  .lokasi-wrapper {
    gap: 20px;
  }

  .lokasi-card {
    width: 100%;
    max-width: 320px;     /* diperkecil */
    aspect-ratio: 16 / 11;
    border-radius: 14px;
  }

  .caption-content {
    font-size: 14px;
    gap: 6px;
  }

  .caption-content i {
    font-size: 13px;
  }

}

/* ANIMASI */
@keyframes modalSmoothIn{
  from{ opacity: 0; transform: scale(0.96); }
  to{ opacity: 1; transform: scale(1); }
}


/* SECTION LOKASI================================================*/
#lokasi {
  padding: 80px 0px;
  background: #372f6e; /* BIRU */
  text-align: center;
  margin-top: -1px;
}

/* JUDUL */
.lokasi-title {
  font-family: 'Grandstander', cursive;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  color: #ffffff;

  /* PERBAIKAN DI SINI */
  letter-spacing: 0.1px;   /* sebelumnya 2px */
}

.lokasi-titl1 {
  font-family: 'Montserrat', cursive;
  font-size: 12px;
  font-weight: 100;
  text-align: center;
  margin-top: 30px;
  color: #d4d4d4;

  /* PERBAIKAN DI SINI */
  letter-spacing: 1.1px;   /* sebelumnya 2px */
}

/* WRAPPER CARD */
.lokasi-wrapper {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  max-width: 1200px;     /* biar ada batas rapi */
  margin: 0 auto;
}

/* CARD (DESKTOP RESPONSIVE) */
.lokasi-card {
  position: relative;
  flex: 1 1 320px;       /* minimal 320px, boleh mengecil/membesar */
  max-width: 360px;      /* tetap cap ukuran max */
  aspect-ratio: 6 / 5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}



/* IMAGE */
.lokasi-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* HOVER EFFECT */
.lokasi-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

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


/* CAPTION */
/* CAPTION */
.lokasi-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 18px;
  overflow: hidden;
}

/* GRAFIS TRANSPARAN (di belakang teks) */
.caption-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    #372f6e,
    rgba(255, 255, 255, 0)
  );
  backdrop-filter: blur(1px);
  z-index: 1;
}

/* ISI CAPTION */
.caption-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

/* ICON PINPOINT */
.caption-content i {
  font-size: 15px;
  color: #ffffff;
}

section {
  margin: 0;
}

/* =========================INFORMASI+++++++ ================= */
#informasi {
  background-color: #ffffff;
  padding: 0;

  scroll-margin-top: 81px;
  position: relative;
  
}

#informasi.section {
  min-height: auto;
  padding: 0;
  background: #ffffff;
    background-image: url("BG_PATTERN_INFO.png");
  background-repeat: repeat;          /* ⬅️ berulang */
  background-size: 350px 350px;        /* ⬅️ rapat (atur sesuai motif) */
  background-position: top left;

  border: none;
}

/* ================= WRAPPER ================= */

.informasi-wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;                  /* menempel */
  flex-wrap: nowrap;
}


/* ================= KOTAK ================= */
.informasi-box {
  background-color: #3fa043;
  padding: 35px 56px 35px 56px;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  margin: 0;
  flex: 1 1 auto;
  max-width: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ================= GAMBAR ================= */
.informasi-image {
  flex: 0 0 330px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* dorong ke kanan */
}

.informasi-image img {
  height: auto;
  display: block;
}

/* ================= JUDUL ================= */
.informasi-title {
  font-family: 'Grandstander', cursive;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
  
}

/* ================= DESKRIPSI ================= */
.informasi-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 8px;
  word-wrap: break-word;
}

.informasi-text:last-child {
  margin-bottom: 0;
}

/* ================= BUTTON INFORMASI ================= */
.informasi-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}

/* ================= BUTTON INFORMASI (VERTIKAL) ================= */
.informasi-buttons {
  display: flex;
  flex-direction: column;      /* berjajar ke bawah */
  gap: 14px;
  margin-top: 28px;
  padding: 0 20px;             /* jarak kiri-kanan di dalam kotak */
}

/* BUTTON FULL WIDTH */
.info-btn {
  width: 100%;
  padding: 16px 20px;          /* padding dalam button */
  background: #d98a36;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;

  border-radius: 12px;
  text-align: center;

  transition: 
    background 0.3s ease,
    color 0.3s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;

  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* HOVER EFFECT */
.info-btn:hover {
  background: #1f3b5b;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28);
}

/* =========================
   INFORMASI - GRID 2 KOLOM
   ========================= */
.informasi-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 46px;            /* rapih: row-gap 24, col-gap 46 */
  margin-top: 18px;
}

/* kolom biar rapi dan stabil */
.informasi-col{
  min-width: 0;
}

/* teks bawah di tengah dan melebar 2 kolom */
.informasi-bottom{
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 6px;
}

/* =========================
   SAMAKAN PADDING KIRI-KANAN
   ========================= */

/* box sudah 56px kiri-kanan, kita samakan area tombol */
.informasi-buttons{
  padding: 0;               /* hilangkan padding 0 20 yang bikin beda */
  margin-top: 24px;
}

/* biar button mengikuti padding kotak */
.info-btn{
  width: 100%;
}
/* ===============================
   FIX FINAL: BOX & GAMBAR SEJAJAR
   =============================== */
@media (min-width: 769px){

  .informasi-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;          /* ⬅️ PENTING: cegah turun */
  }

  /* BATASI LEBAR BOX */
  .informasi-box{
    flex: 0 0 69%;              /* ⬅️ JANGAN 100% */
    max-width: 70%;
    margin: 0;
  }

  /* GAMBAR KANAN */
  .informasi-image{
    flex: 0 0 27%;
    max-width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .informasi-image img{
    max-width: 100%;
    height: auto;
}
}
/* ---------- Desktop (>= 1025px) ---------- */
@media (min-width: 1025px){
  .informasi-box{
    padding: 35px 56px;
    width: 72%;
  }
  .informasi-image{
    width: 28%;
  }
  .informasi-image img{
    max-width: 100%;
  }
}

/* ---------- Tablet (601px - 1024px) ---------- */
@media (min-width: 801px) and (max-width: 1024px){

  .informasi-box{
    width: 70%;
    padding: 28px 28px;
  }

  .informasi-image{
    overflow: hidden;                 /* WAJIB agar radius bekerja */
    border-top-left-radius: 28px;     /* lengkung kiri atas */
    border-bottom-left-radius: 28px;  /* lengkung kiri bawah */
  }
  
  .informasi-image img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .informasi-title{
    font-size: 32px;
    line-height: 1.15;
  }

  .informasi-grid{
    gap: 16px 20px;
  }
}

/* ---------- TABLET KECIL + HP (<= 801px) ---------- */
@media (max-width: 801px){

  /* SECTION FULL BLEED */
  #informasi{
    padding: 0;
    margin: 0;
  }

  /* WRAPPER JANGAN FLEX SEJAJAR */
  .informasi-wrapper{
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    display: block;              /* ⬅️ PENTING */
  }

  /* SEMBUNYIKAN GAMBAR */
  .informasi-image{
    display: none !important;
  }

  /* BOX FULL KIRI-KANAN */
  .informasi-box{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 22px 18px;

    border-radius: 0;            /* benar-benar menempel */
  }

  /* GRID JADI 1 KOLOM */
  .informasi-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .informasi-title{
    font-size: 26px;
    line-height: 1.15;
  }

  .informasi-text{
    font-size: 14px;
  }
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ================= KONTAK ================= */
#kontak {
  padding: 0;
  background: linear-gradient(
    to right,
    #d98a36 0%,
    #3fa043 23.33%,
    #3fa043 100%
  );
}

/* WRAPPER */
.kontak-wrapper {
  padding: 60px 0;
  width: 100%;
  display: grid;

  /* LOGO | DIVIDER | INFO (LEBAR) */
  grid-template-columns:
    0.9fr
    1px
    2fr;        /* ⬅️ INFO LEBIH LEBAR */

  align-items: center;
}

/* ================= LOGO ================= */
.kontak-logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  background: #ffffff;
  padding: 35px 56px 35px 60px;

  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  overflow: visible;
}

/* EXTEND LOGO KE KIRI (FULL BLEED) */
.kontak-logo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  width: 100vw;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* LOGO IMAGE */
.kontak-logo img {
  width: 220px;
  padding: 18px;
  background: #ffffff;
  border-radius: 20px;
}

/* ================= DIVIDER ================= */
.divider {
  height: 60%;
  background: rgba(255,255,255,0.6);
  align-self: center;
}

/* ================= INFO KONTAK ================= */
.kontak-info {
  display: flex;
  flex-direction: column;
  color: #ffffff;

  max-width: 560px;   /* ⬅️ lebih lega */
  margin: 0 auto;
}

.kontak-info h3 {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 20px;
}

.kontak-info p {
  font-size: 14px;
  margin-bottom: 4px;
}

/* ================= SOSMED (IKON BULAT + WARNA PLATFORM + TOOLTIP) ================= */
.sosmed{
  margin-top: 10px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* tombol ikon */
.sosmed a.social{
  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  position: relative;

  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);

  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* ikon selalu center */
.sosmed a.social i,
.sosmed a.social::before{
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

/* hover pop */
.sosmed a.social:hover{
  transform: translateY(-2px) scale(1.12);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

/* ---------------- EMAIL (pakai ::before) ---------------- */
.sosmed a.social.email{
  font-size: 0;
}
.sosmed a.social.email::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0e0"; /* envelope */
}

/* ---------------- WARNA PLATFORM ---------------- */
.sosmed a.social.whatsapp{
  background: #25D366;
  border-color: rgba(255,255,255,0.25);
}
.sosmed a.social.instagram{
  background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
  border-color: rgba(255,255,255,0.18);
}
.sosmed a.social.tiktok{
  background: #111;
  border-color: rgba(255,255,255,0.18);
}
.sosmed a.social.email{
  background: #2f80ed;
  border-color: rgba(255,255,255,0.22);
}

/* ---------------- TOOLTIP (ambil dari aria-label) ---------------- */
.sosmed a.social::after{
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  background: rgba(0,0,0,0.78);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* panah tooltip */
.sosmed a.social::before{
  /* default untuk email akan ditimpa di bawah, jadi aman */
}
.sosmed a.social:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* RESPONSIVE */
@media (max-width: 768px){
  .sosmed{ gap: 12px; }
  .sosmed a.social{
    width: 38px;
    height: 38px;
  }
  .sosmed a.social i,
  .sosmed a.social::before{
    font-size: 18px;
  }
  .sosmed a.social::after{
    font-size: 11px;
  }
}



/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {

  .kontak-wrapper {
    grid-template-columns: 1fr;   /* stack */
    gap: 40px;
  }

  .divider {
    display: none;
  }

  .kontak-logo {
    border-radius: 0;
  }

  .kontak-logo::before {
    display: none;
  }

  .kontak-info {
    max-width: 100%;
    padding: 0 24px;
  }
}

@media (max-width: 480px) {

  .kontak-wrapper {
    padding: 40px 0;
  }

  .kontak-logo img {
    width: 180px;
  }

  .kontak-info h3 {
    font-size: 18px;
  }

  .kontak-info p {
    font-size: 13px;
  }
}


/* ================= FOOTER ================= */
footer {
  background-color: #1f3b5b;
  color: #fff;
  text-align: center;
  padding: 12px;
  margin-top: auto;
  font-size: 13px;
}

/* ================= TEXT SHADOW GLOBAL ================= */
body, 
p, 
span, 
a, 
li, 
h1, h2, h3, h4, h5, h6 {
  text-shadow: 3px 2px 1px rgba(0,0,0,0.3);
}

/* ================= MATIKAN TEXT SHADOW AREA TERTENTU ================= */

/* NAVBAR */
.navbar,
.navbar * {
  text-shadow: none !important;
}

/* CARD KEGIATAN */
.kegiatan-card,
.kegiatan-card * {
  text-shadow: none !important;
}

/* POP UP / MODAL KEGIATAN */
.modal,
.modal * {
  text-shadow: none !important;
}

/* ================= SCROLL TO TOP ================= */
#scrollTopBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  background: #3fa043;
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;

  border: none;
  outline: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 8px 20px rgba(0,0,0,0.3);

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;

  z-index: 9999;
}

/* MUNCUL */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* HOVER */
#scrollTopBtn:hover {
  background: #2e7d32;
  transform: translateY(-4px);
}

/*====================================================================================================================*/
/* =====================================================
   NAVBAR FINAL FIX – ANTI IKON NYELIP
   ===================================================== */

/* =====================================================
   NAVBAR RESPONSIVE FINAL
   ===================================================== */

/* ========== DESKTOP ========== */
@media (min-width: 1025px) {

  .nav-toggle {
    display: none !important;
  }

  .nav-menu {
    display: flex !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ========== TABLET & MOBILE ========== */
@media (max-width: 1024px) {

  /* ===== CONTAINER STABIL ===== */
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

/* ===== HAMBURGER ICON ===== */
/* =====================================================
   HAMBURGER → X (SIMETRIS & TENGAH)
   ===================================================== */

.nav-toggle {
  width: 28px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* GARIS */
.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: #2c2c2c;
  border-radius: 3px;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
  transform-origin: center center;   /* ⬅️ KUNCI */
}

/* ANIMASI → X */
.nav-toggle.active span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
}


/* ===== MENU DROPDOWN ===== */
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  width: 100%;
  max-height: calc(100vh - 70px); /* ⬅️ KUNCI */
  overflow-y: auto;               /* ⬅️ WAJIB */

  flex-direction: column;
  background: #ffffff;
  z-index: 999;
}

/* sembunyikan scrollbar (opsional) */
.nav-menu::-webkit-scrollbar {
  width: 0;
}

.nav-menu.active {
  display: flex;
}


  /* ===== ITEM MENU ===== */
  .nav-menu li {
    width: 100%;
    text-align: center;
  }

  .nav-menu li a {
    display: block;
    padding: 14px;
    border-top: 1px solid #eee;
    font-size: 13px;
  }

  /* ===== ACTIVE LINK ===== */
  .nav-menu a.active {
    color: #3fa043;
  }

  .nav-menu a.active::after {
    width: 100%;
  }

/* =====================================================
   STAGGER ANIMATION – DROPDOWN NAVBAR
   ===================================================== */

/* HANYA TABLET & MOBILE */
@media (max-width: 1024px) {

  /* state awal item */
  .nav-menu li {
    opacity: 0;
    transform: translateY(-8px);
  }

  /* saat menu aktif */
  .nav-menu.active li {
    animation: navStaggerIn 0.4s cubic-bezier(.25,.8,.25,1) forwards;
  }

  /* delay per item (stagger) */
  .nav-menu.active li:nth-child(1) { animation-delay: 0.05s; }
  .nav-menu.active li:nth-child(2) { animation-delay: 0.10s; }
  .nav-menu.active li:nth-child(3) { animation-delay: 0.15s; }
  .nav-menu.active li:nth-child(4) { animation-delay: 0.20s; }
  .nav-menu.active li:nth-child(5) { animation-delay: 0.25s; }
  .nav-menu.active li:nth-child(6) { animation-delay: 0.30s; }
  .nav-menu.active li:nth-child(7) { animation-delay: 0.35s; }
  .nav-menu.active li:nth-child(8) { animation-delay: 0.40s; }
}

/* KEYFRAMES */
@keyframes navStaggerIn {
  from {
    opacity: 0;
    transform: translateY(-8px);}
  to {
    opacity: 1;
    transform: translateY(0);}
}
  /* ================= PROFIL ================= */
  #profil {
    padding: 80px 20px;
  }

  .profil-container {
    max-width: 100%;
  }

  .profil-title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  .profil-title::after {
    width: 180px;
    bottom: -18px;
  }

  .profil-text {
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    margin-top: 24px;
  }

}