html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background: #111; /* biar kalau footer full hitam, bawahnya nyatu */
    }

    body > *:last-child {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
    /* ===== Ultra Premium Navbar ===== */
#premiumNavbar.glass-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-radius: 0;
  opacity: 0.95;
  transition: all 0.4s ease, transform 0.3s ease;
}

/* Scroll effect */
#premiumNavbar.glass-navbar.scrolled {
  background: rgba(0,0,0,0.85);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  padding: 0.6rem 1rem;
  opacity: 1;
}

/* Hover lift navbar */
#premiumNavbar.glass-navbar:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 45px rgba(0,0,0,0.35);
}

/* Brand */
#premiumNavbar .navbar-brand {
  color: #fff !important;
  font-weight: 700;
  transition: color 0.4s ease;
}
#premiumNavbar.scrolled .navbar-brand {
  color: #00d1ff !important;
}

/* Links */
#premiumNavbar .navbar-nav .nav-link {
  color: #fff;
  font-weight: 600;
  position: relative;
  transition: color 0.4s ease;
}
#premiumNavbar.scrolled .nav-link {
  color: #00d1ff;
}
#premiumNavbar .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.3s, background 0.3s;
}
#premiumNavbar .navbar-nav .nav-link:hover::after,
#premiumNavbar .navbar-nav .nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
  background: #00a3cc;
}
#premiumNavbar .navbar-nav .nav-link:hover,
#premiumNavbar .navbar-nav .nav-link.active {
  color: #00a3cc;
}

/* Dropdown Ultra Premium */
#premiumNavbar .dropdown-menu {
  border-radius: 0.8rem;
  margin-top: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.7) 100%
  );
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  transition: all 0.4s ease, transform 0.3s ease;
  transform: translateY(0);
}

/* Hover lift dropdown */
#premiumNavbar .nav-item.dropdown:hover .dropdown-menu {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Dropdown items */
#premiumNavbar .dropdown-item {
  transition: all 0.3s ease;
}
#premiumNavbar .dropdown-item:hover {
  background: rgba(0,123,255,0.15);
  color: #00d1ff;
}

/* Hamburger */
#premiumNavbar .navbar-toggler {
  border-color: #fff;
  transition: border-color 0.4s ease;
}
#premiumNavbar.scrolled .navbar-toggler {
  border-color: #00d1ff;
}
#premiumNavbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  transition: background-image 0.4s ease;
}
#premiumNavbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(0,209,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Mobile adjustments */
@media (max-width: 992px) {
  #premiumNavbar.glass-navbar {
    width: 100%;
    padding: 0.6rem 1rem;
  }
  #premiumNavbar .navbar-nav {
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
  }
  #premiumNavbar .navbar-nav .nav-link,
  #premiumNavbar .dropdown-item {
    color: #fff;
  }
}



    /* ===== FOOTER ELEGAN FIX ===== */
    #foot {
      background: linear-gradient(180deg, #111111, #1b1b1b);
      color: #eee;
      padding: 60px 0 30px;
      width: 100%;
      margin: 0;
      border: none;
      box-shadow: none;
      font-family: 'Nunito Sans', sans-serif;
    }

    #foot .container {
      max-width: 1200px;
      margin: auto;
    }

    #foot h3 {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #fff;
    }

    #foot p,
    #foot a,
    #foot li {
      color: #ccc;
      font-size: 0.95rem;
    }

    #foot a:hover {
      color: #fff;
      text-decoration: none;
    }

    #foot ul {
      padding-left: 0;
    }

    #foot li {
      list-style: none;
      margin-bottom: 8px;
    }

    #foot .copyright {
      border-top: 1px solid rgba(255,255,255,0.1);
      text-align: center;
      margin-top: 40px;
      padding-top: 20px;
      font-size: 0.9rem;
      color: #aaa;
    }

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

  /* ===== SLIDER ULTRA PREMIUM ===== */
  .slide-one-item {
    position: relative;
    z-index: 5;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0 !important;
  }
  .slide-one-item .site-blocks-cover {
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
  }
  .slide-one-item .parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0; left:0;
    background-size: cover;
    background-position: center center;
    transform: translateZ(0);
    transition: transform 0.3s ease-out;
    will-change: transform;
  }
  .slide-one-item .overlay::before {
    content:"";
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    z-index:1;
  }
  .slide-one-item .site-blocks-cover > .container {
    position: relative;
    z-index: 2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    padding: 300px 60px 120px 60px;
  }
  .slide-one-item .caption-content h1,
  .slide-one-item .caption-content p {
    opacity:0;
    transform: translateX(-50px);
    color: #fff;
    text-shadow: 2px 2px 12px rgba(0,0,0,0.7);
  }
  .slide-one-item .caption-content h1 { font-size: 4rem; font-weight:800; animation: slideInLeft 1s forwards 0.3s; }
  .slide-one-item .caption-content p { font-size:1.2rem; animation: slideInLeft 1s forwards 0.6s; }
  .owl-dots { position:absolute; bottom:30px; width:100%; display:flex; justify-content:center; z-index:10; }
  .owl-dot { margin:0 6px; }
  .owl-dot span { width:14px; height:14px; background: rgba(255,255,255,0.5); display:block; border-radius:50%; transition: all 0.3s; }
  .owl-dot.active span, .owl-dot:hover span { background:#00b4ff; }

  @keyframes slideInLeft { to {opacity:1; transform:translateX(0);} }

  /* ===== INTERACTIVE SECTION ===== */
  .site-section {
    position: relative;
    z-index:6;
    margin-top: -50px;
    padding: 30px 35px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: center;
    border-radius: 18px;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 35px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .site-section:hover { transform: scale(1.03); box-shadow:0 20px 60px rgba(0,0,0,0.25); }
  .site-section h2 { font-family:'Montserrat', sans-serif; font-size:2.4rem; font-weight:800; color:#111; margin-bottom:20px; }

  /* RESPONSIVE */
  @media (max-width:768px){
    .site-section { margin-top:-25px; padding:10px 15px; max-width:90%; }
    .site-section h2 { font-size:1.8rem; margin-bottom:15px; }
    .slide-one-item .caption-content h1 { font-size:2.2rem; }
    .slide-one-item .caption-content p { font-size:1rem; }
  }

  /* ===== SECTION GRAY ===== */
  .content-section-gray {
    margin-top: -100px;
    padding: 0;
    background: #dcdcdc !important;
    position: relative;
    z-index: 1;
  }
  .content-section-gray::before {
    content:"";
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: #dcdcdc;
    z-index:-1;
  }
  .content-section-gray > .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 180px 15px 80px 15px;
  }

  /* ===== WHY CHOOSE US ===== */
  #why-choose-us.site-section {
    max-width: 100% !important;
    margin-top: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 80px 0 !important;
  }
  #why-choose-us .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #galery {
    background: #f8f9fa;
    padding: 100px 0;
    font-family: 'Montserrat', sans-serif;
  }

  #galery h2 {
    font-weight: 800;
    font-size: 2.6rem;
    color: #111;
    margin-bottom: 15px;
  }

  /* ===== GRID CARD ===== */
  .gallery-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    opacity:0;
    transform: translateY(20px);
    animation: fadeUp 0.6s forwards;
  }

  .gallery-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  }

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

  .gallery-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
  }

  .gallery-card:hover .gallery-img {
    transform: scale(1.08);
    filter: brightness(0.85);
  }

  .gallery-overlay {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color: #fff;
    text-shadow: 2px 2px 12px rgba(0,0,0,0.7);
    opacity:0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    background: rgba(0,0,0,0.35);
  }

  .gallery-card:hover .gallery-overlay {
    opacity:1;
    transform: scale(1) translateY(0);
  }

  .gallery-overlay h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
  }

  .gallery-overlay span {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: rgba(0,0,0,0.25);
    padding: 2px 8px;
    border-radius: 8px;
  }

  .gallery-content p {
    font-size: 0.875rem;
    color: #555;
    margin-top:10px;
  }

  /* ===== SLIDER ===== */
  .galery-slider { padding:60px 0; }
  .gallery-slide {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .gallery-slide:hover {
    transform: scale(1.03);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  }
  .gallery-slide-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
  }
  .gallery-slide:hover .gallery-slide-img {
    transform: scale(1.08);
    filter: brightness(0.85);
  }
  .gallery-slide-overlay {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-align:center;
    text-shadow: 2px 2px 12px rgba(0,0,0,0.6);
    background: rgba(0,0,0,0.3);
    opacity:0;
    transition: opacity 0.4s ease;
  }
  .gallery-slide:hover .gallery-slide-overlay {
    opacity:1;
  }
  .gallery-slide-overlay h3 { font-size: 1.3rem; font-weight:700; margin-bottom:5px; }
  .gallery-slide-overlay span { font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; }

  @media (max-width:768px){
    .gallery-img, .gallery-slide-img { height:180px; }
    .gallery-overlay h3, .gallery-slide-overlay h3 { font-size:1rem; }
    .gallery-overlay span, .gallery-slide-overlay span { font-size:0.75rem; }
  }

  #pengurus { 
    padding: 100px 0; 
    background: #fff; /* ubah menjadi putih */
    font-family: 'Montserrat', sans-serif; 
  }
  #pengurus .section-title { 
    font-size: 2.6rem; 
    font-weight: 800; 
    margin-bottom: 10px; 
    color:#111; 
  }
  #pengurus .section-subtitle { 
    font-size: 1rem; 
    color:#555; 
    margin-bottom:40px; 
  }

  .team-card {
    background: rgba(255,255,255,0.95); /* sedikit transparansi agar lebih lembut */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,0.1); /* shadow lebih soft di background putih */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .team-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 18px 50px rgba(0,0,0,0.15);
  }
  .team-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
  }
  .team-card:hover .team-img img {
    transform: scale(1.08);
    filter: brightness(0.95); /* lebih terang agar cocok background putih */
  }
  .team-info { padding:20px; text-align:center; }
  .team-info h3 { font-size:1.25rem; font-weight:700; margin-bottom:5px; color:#111; }
  .team-info span { font-size:0.85rem; font-weight:600; display:block; margin-bottom:10px; color:#777; text-transform: uppercase; letter-spacing:1px; }
  .team-info p { font-size:0.875rem; color:#555; margin-bottom:15px; }
  .team-social a {
    color:#555;
    margin:0 5px;
    font-size:0.9rem;
    transition: color 0.3s;
  }
  .team-social a:hover { color:#00b4ff; }

  @media (max-width:768px){
    #pengurus { padding:60px 15px; }
    .team-img img { height:200px; }
    .team-info h3 { font-size:1rem; }
    .team-info span { font-size:0.75rem; }
    .team-info p { font-size:0.8rem; }
  }

  /* ===== TEAM CARD ===== */
  .team-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .team-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 18px 50px rgba(0,0,0,0.15);
  }
  .team-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .team-card:hover .team-img img {
    transform: scale(1.05);
  }
  .team-info { padding: 15px; }
  .team-info h3 { font-size: 1.2rem; font-weight:700; margin-bottom:5px; color:#111; }
  .team-info span { display:block; font-size:0.9rem; color:#555; margin-bottom:3px; }
  @media (max-width:768px){
    .team-img img { height:200px; }
    .team-info h3 { font-size:1rem; }
    .team-info span { font-size:0.8rem; }
  }


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

  .org-chart {
    text-align: center;
    margin: 40px auto;
    position: relative;
    font-family: 'Montserrat', sans-serif;
  }

  /* Node */
  .node {
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 15px;
    margin: 40px 25px;
    width: 170px;
    transition: all 0.3s ease;
  }
  .node:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
  }
  .node img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
  }
  .node h4 {
    margin-top: 10px;
    font-weight: 600;
  }
  .node p {
    font-size: 13px;
    margin: 3px 0;
  }

  /* Garis antar level */
  .line-vertical {
    width: 2px;
    height: 40px;
    background: #007bff;
    margin: 0 auto;
  }
  .line-horizontal {
    width: 400px;
    height: 2px;
    background: #007bff;
    margin: 0 auto;
  }

  /* Modal */
  .modal-img {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 70px;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8);
    animation: fadeIn 0.4s ease;
  }
  .modal-img-content {
    margin: auto;
    display: block;
    width: 40%;
    border-radius: 10px;
    animation: zoomIn 0.4s ease;
  }
  .close-modal {
    position: absolute;
    top: 30px;
    right: 60px;
    color: white;
    font-size: 40px;
    cursor: pointer;
    transition: color 0.2s;
  }
  .close-modal:hover { color: #ccc; }

  /* Animations */
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  @keyframes zoomIn {
    from {transform: scale(0.8);}
    to {transform: scale(1);}
  }

  /* Responsif */
  @media (max-width: 768px) {
    .line-horizontal { width: 200px; }
    .modal-img-content { width: 80%; }
  }

  /*menu footer*/
  .footer-links ul 
  {
    padding-left: 0;
    margin: 0;
    list-style: none;
  }
  .footer-links ul li a {
    color: #ccc;
    text-decoration: none;
  }
  .footer-links ul li a:hover {
    color: #fff;
    text-decoration: underline;
  }

  /*kegiatan*/
  .kegiatan-section {
    background: #fff;
    padding: 100px 0; 
    font-family: 'Montserrat', sans-serif; 
  }

  .section-title {
    font-weight: 800;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
  }
  #pengurus .section-subtitle { 
    font-size: 1rem; 
    color:#555; 
    margin-bottom:40px; 
  }

  .kegiatan-item {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer; /* kursor tangan */
  }

  .kegiatan-item:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 30px rgba(0,0,0,0.15);
  }

  .kegiatan-date-badge {
    display: inline-block;
    background: linear-gradient(45deg, #ff6b6b, #f8e71c);
    color: #fff;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 15px;
    font-size: 0.85rem;
  }

  .kegiatan-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
  }

  .kegiatan-desc {
    font-size: 0.95rem;
    color: #555;
    flex-grow: 1;
    text-align: left;

    /* Hidden awal */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
  }

  .kegiatan-desc.show {
    opacity: 1;
  }

  .kegiatan-lokasi {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    margin-top: 15px;
  }

  .kegiatan-lokasi i {
    color: #ff6b6b;
    margin-right: 5px;
  }

  /* Animasi muncul saat scroll */
  .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .fade-up.appear {
    opacity: 1;
    transform: translateY(0);
  }

  /* Responsive */
  @media (max-width: 992px) {
    .kegiatan-item { min-height: auto; }
  }

  @media (max-width: 576px) {
    .kegiatan-item { padding: 20px; }
  }