*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins',sans-serif;
      scroll-behavior:smooth;
    }

    body{
      background-image: url('body.png');
      color:#333;
    }

    /* NAVBAR */
    header{
      width:100%;
      position:fixed;
      top:0;
      left:0;
      z-index:1000;
      background: linear-gradient(35deg,rgb(0, 181, 252), rgb(3, 60, 248));
      backdrop-filter:blur(10px);
      box-shadow:0 2px 10px rgba(0,0,0,0.08);
    }

    .navbar{
      width:90%;
      margin:auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:15px 0;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .logo i{
      font-size:32px;
      color:#ffffff;
    }

    .logo h1{
      font-size:22px;
      color:#fdfdff;
    }

    .menu{
      display:flex;
      gap:25px;
    }

    .menu a{
      text-decoration:none;
      color:#ffffff;
      font-weight:500;
      transition:0.3s;
    }

    .menu a:hover{
      color:#ff7b00;
    
    }

    .sidebar, .toggle-btn {
  display: none;
}


/* ==========================================================================
   2. SIDEBAR STYLE (UNTUK TAMPILAN HP)
   ========================================================================== */
.sidebar {
  width: 200px;
  height: 100vh;/*
  background-color: #0d47a1;  Biru Tua Elegant */
  background: linear-gradient(35deg, #0400ff, rgb(0, 204, 255));
  color: #ffffff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2000;
  transition: all 0.3s ease;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar-logo {
  padding: 10px 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-color:transparent;
  color: #ffffff;
  border-bottom: 2px solid #ff7b00; /* Garis Pembatas Jingga */
  
}

.menu-sidebar {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.menu-sidebar a {
  padding: 15px 25px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.menu-sidebar a:hover {
  background-color: #145994;
  padding-left: 50px;
  color: #ff7b00;
  border-left: 10px solid #ff7b00;
}

/* Tombol Hamburger HP */
.toggle-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 20px;
  background: #ff7b00;
  color: #ffffff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 2500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* ==========================================================================
   3. MEDIA QUERY RESPONSIVE (AKSI SAAT LAYAR HP < 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  
  /* Bikin header atas tetap tampil di HP tapi disesuaikan */
  header {
    display: block !important;
    height: 60px;
    
  }

  /* Sembunyikan menu teks horizontal desktop saja */
  header .menu {
    display: none !important;
  }

  /* Atur ulang posisi logo di dalam header HP agar bergeser ke kanan tombol */
  header .navbar {
    width: 100%;
    padding: 15px 20px 15px 70px; /* Memberi ruang di kiri untuk tombol jingga */
    justify-content: flex-start;
  }

  header .logo h1 {
    font-size: 16px; /* Perkecil tulisan judul di HP agar muat */
  }

  header .logo img {
    height: 25px; /* Perkecil logo gambar sedikit */
    width: auto;
  }

  /* Aktifkan komponen sidebar samping */
  .sidebar {
    display: block;
    left: -250px; /* Berada di luar layar kiri sebelum di-klik */
    top: 0;
  }

  /* Sesuaikan posisi tombol hamburger agar pas di dalam header */
  .toggle-btn {
    display: block;
    top: 10px;
    left: 15px;
    padding: 8px 12px;
    font-size: 18px;
    z-index: 2500; /* Pastikan tombol di atas header */
  }

  /* Ketika tombol di-klik, sidebar geser masuk */
  .sidebar.active {
    left: 0;
  }

  /* Beri ruang di atas konten utama (hero section) agar tidak tertutup header */
  .hero, section:first-of-type {
    padding-top: 60px !important;
  }
}

    /* HERO */
    .hero{
      margin-top:80px;
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
      margin: 0;
      padding: 0;
    }

    .slide{
      position:absolute;
      width:100%;
      height:100%;
      opacity:0;
      transition:1s ease;
    }

    .slide.active{
      opacity:1;
    }

    .slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:brightness(0.5);
    }

    .hero-content{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      text-align:center;
      color:white;
      z-index:10;
      width:80%;
    }

    .hero-content h2{
      font-size:55px;
      margin-bottom:20px;
    }

    .hero-content p{
      font-size:20px;
      margin-bottom:30px;
    }

    .btn{
      display:inline-block;
      padding:14px 35px;
      background: linear-gradient(45deg,rgb(255, 60, 0), rgb(252, 143, 0));
      color:rgb(255, 255, 255);
      text-decoration:none;
      border-radius:40px;
      transition:0.3s;
      font-weight:600;
    }

    .btn:hover{
      background: linear-gradient(45deg, rgb(252, 101, 0),rgb(255, 60, 0));
      transform:translateY(-3px);
    }

    /* SECTION */
    section{
      padding:50px 10%;
    }

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

    .title h2{
      font-size:38px;
      color:#000308;
      margin-bottom:10px;
    }

    .title p{
      color:#0f0f0f;
    }

    /* ABOUT */
    .about-container{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:40px;
      align-items:center;
    }

    .about-img img{
      width:100%;
      height: 450px;
      border-radius:10px;
      box-shadow: 0 0 15px rgba(0, 102, 255, 0.6);
    }

    .about-text h3{
      font-size:30px;
      margin-bottom:15px;
      color:#000711;
    }

    .about-text p{
      line-height:1.8;
      color:#0c0c0c;
    }

    /* VISI MISI */
    .visi-misi{
      background:rgb(231, 241, 255);
    }

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

    .card{
      background:#cbd7ff;
      padding:35px;
      border-radius:20px;
      box-shadow:0 5px 20px rgba(0,0,0,0.08);
      transition:0.3s;
    }

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

    .card i{
      font-size:45px;
      color:#0d6efd;
      margin-bottom:20px;
    }

    .card h3{
      margin-bottom:15px;
      color:#0d47a1;
    }

    .card p{
      color:#0c0c0c;
      line-height:1.7;
    }

    /* MOTTO */
    .booklet{
      color:white;
      text-align:center;
    }

    /* GALLERY */
    .gallery-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:20px;
    }

    .gallery-item{
      overflow:hidden;
      border-radius:10px;
      position:relative;
      cursor:pointer;
      box-shadow: 0 0 25px rgba(0, 101, 253, 0.6);
    }

    .gallery-item img{
      width:100%;
      height:260px;
      object-fit:cover;
      transition:0.5s;
    }

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

    .overlay{
      position:absolute;
      bottom:0;
      width:100%;
      background:rgba(253, 81, 13, 0.8);
      color:white;
      text-align:center;
      padding:15px;
      opacity:0;
      transition:0.4s;
    }

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

    /* CONTACT */
    .contact{
      background:rgb(231, 241, 255);
    }

    .contact-container{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:40px;
    }
    .contact-box{
      background:#cbd7ff;
      padding:20px;
      border-radius:20px;
      box-shadow:0 5px 20px rgba(0,0,0,0.08);
    }

    .contact-box h3{
      margin-bottom:20px;
      color:#0d47a1;
    }

    .contact-box p{
      margin:15px 0;
      color:#0e0d0d;
    }

    .contact-box i{
      color:#0d6efd;
      margin-right:10px;
    }

   

    /* FOOTER */
    footer{
      /*
      background:#0d47a1;
      */
      background: linear-gradient(45deg, rgb(0, 60, 255), rgb(0, 130, 252));
      color:white;
      text-align:center;
      padding:25px;
    }

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

      .hero-content h2{
        font-size:35px;
      }

      .menu{
        display:none;
      }

      .motto{
        margin:0 5%;
      }
    }
    /* POPUP GALLERY */
.popup-image{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.9);
    height: 100%;
    width: 100%;
    z-index: 9999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Jarak antara gambar dan teks di sampingnya */
    padding: 40px;
    box-sizing: border-box;
}

.popup-image img{
    max-width: 85%;
    max-height: 74vh;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    animation: zoomIn 0.3s ease;
}
#popup-caption {
    color: white;
    max-width: 85%; /* Batas lebar teks keterangan */
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    animation: zoomIn 0.3s ease; /* Efek muncul bareng gambar */
}

.popup-image span{
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 50px;
    color: white;
    cursor: pointer;
    font-family: Arial;
}

@keyframes zoomIn{
    from{
        transform: scale(0.7);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}

.gallery-item img{
    cursor: pointer;
}
.whatsapp-float{
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg,#25D366,#1ebe5d);
    border-radius: 50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    z-index:99999;
    text-decoration:none;
    transition:.35s;
    animation: waPulse 2s infinite;
}

.whatsapp-float:hover{
    transform:scale(1.12) rotate(8deg);
    box-shadow:0 15px 35px rgba(37,211,102,.6);
}

@keyframes waPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.6);
    }
    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

@media(max-width:768px){
    .whatsapp-float{
        width:60px;
        height:60px;
        right:18px;
        bottom:18px;
    }
}

.download-btn{

display:inline-flex;
align-items:center;
gap:10px;

padding:16px 30px;

background:linear-gradient(135deg,#ff5100,#ff7b00);

color:white;
text-decoration:none;

border-radius:50px;

font-size:16px;
font-weight:600;

transition:.35s;

box-shadow:0 10px 25px rgba(0,102,255,.3);

}

.download-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(0,102,255,.45);

}