/*FOR GSAP */
 /* Mencegah elemen berkedip sebelum animasi jalan */
 /* #latest .main-img-wrapper,
 #latest .display-3,
 #latest p.lead,
 #latest span h2 h5,
 .experience-badge {
 opacity: 0;
 } */
 /* Pastikan tidak ada elemen yang "menutup" layar sebelum AOS jalan */
 [data-aos] {
   pointer-events: none;
 }

 [data-aos].aos-animate {
   pointer-events: auto;
 }

 *,
 html {
   font-family: "Outfit", sans-serif;
   font-optical-sizing: auto;
   border-radius: 0 !important;
   font-style: normal !important;
   scroll-behavior: smooth !important;
 }

 .bd-placeholder-img {
   font-size: 1.125rem;
   text-anchor: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   height: 1000px;
 }

 .btn-explore:hover{
  background: #ffc107;
  transition: all 0.4s ease;
   color: #000;
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
 }

 /* CSS Tambahan untuk Video Parallax */
 .video-parallax-container {
   position: relative;
   /* Konteks untuk elemen absolut di dalamnya */
   min-height: 75vh;
   /* Sesuaikan tinggi section */
   overflow: hidden;
   /* Penting untuk memotong video yang mungkin lebih besar */
   display: flex;
   /* Untuk menengahkan konten overlay */
   align-items: center;
   justify-content: center;
 }

 .video-background-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   /* Posisikan di belakang konten */
   overflow: hidden;
   /* Pastikan video tidak keluar dari wrapper ini */
 }

 #bgvid {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .video-content-overlay {
   position: relative;
   /* Atau z-index lebih tinggi dari video-background-wrapper */
   z-index: 1;
   color: white;
   text-align: center;
   padding: 40px 0;
 }

 .video-content-overlay h2,
 .video-content-overlay p {
   text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
   /* Bayangan teks agar lebih jelas di atas video */
 }

 /* Opsional: Overlay gelap di atas video agar teks lebih mudah dibaca */
 .video-parallax-container::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.3);
   /* Hitam transparan 30% */
   z-index: 0;
   /* Di antara video dan konten */
 }

 /* EVENT */
 .deskripsi-teks {
   display: -webkit-box;
   /* Wajib agar -webkit-line-clamp berfungsi */
   -webkit-box-orient: vertical;
   /* Wajib agar -webkit-line-clamp berfungsi */
   -webkit-line-clamp: 2;
   /* Jumlah baris yang diinginkan */
   overflow: hidden;
   /* Sembunyikan teks yang melebihi batas */
   text-overflow: ellipsis;
   /* Tampilkan "..." di akhir teks yang terpotong */
   line-height: 1.4em;
   max-height: 5em;
 }

 .card-header {
   background-color: white;
   border-radius: 0;
 }

 @media (min-width: 768px) {
   .bd-placeholder-img-lg {
     font-size: 3.5rem;
   }
 }

 /* NAVIGASI BAR */
 .navbar {
   background-color: rgba(33, 37, 41, 0.5) !important;
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
 }

 /* Tombol Custom agar terlihat Premium */
 .btn-warning {
   background-color: #ffc107;
   border: none;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 10px 25px;
 }

 /* Card Hover Effect */
 .card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: none;
 }

 .card:hover {
   transform: translateY(-10px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .video-parallax-container::before {
   background-color: rgba(0, 0, 0, 0.5);
 }

 .achievement-scroll-container {
   display: flex;
   overflow-x: auto;
   gap: 20px;
   padding: 20px 0;
   scroll-snap-type: x mandatory;
   /* Membuat scroll "menempel" di card */
   scrollbar-width: none;
   /* Sembunyikan scrollbar di Firefox */
 }

 .achievement-scroll-container::-webkit-scrollbar {
   display: none;
   /* Sembunyikan scrollbar di Chrome/Safari */
 }

 /* Card Styling */
 .achievement-card {
   min-width: 300px;
   max-width: 300px;
   scroll-snap-align: start;
   border: none;
   background: #fff;
   position: relative;
   overflow: hidden;
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .achievement-card img {
   height: 350px;
   object-fit: cover;
   filter: grayscale(40%);
   /* Memberikan kesan serius/profesional */
   transition: all 0.5s ease;
 }

 .achievement-card:hover img {
   filter: grayscale(0%);
   transform: scale(1.05);
 }

 /* Overlay Text */
 .achievement-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 20px;
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
   color: white;
 }

 .achievement-badge {
   background-color: #ffc107;
   color: #000;
   font-size: 0.7rem;
   font-weight: bold;
   padding: 3px 10px;
   display: inline-block;
   margin-bottom: 10px;
 }

 /* Tombol navigasi bantuan (opsional) */
 .scroll-hint {
   font-size: 0.8rem;
   color: #888;
   margin-top: 10px;
 }

 /* Container Utama */
 .agenda-wrapper {
   background: #ffffff;
   border-left: 5px solid #ffc107;
   /* Garis aksen kuning di samping */
   transition: all 0.3s ease;
   border-radius: 8px !important;
   /* Sedikit lengkungan agar modern */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .agenda-wrapper:hover {
   transform: translateX(10px);
   /* Efek bergeser saat hover */
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }

 /* Kotak Tanggal */
 .date-box {
   background: #212529;
   /* Warna gelap agar kontras dengan teks kuning */
   color: #ffc107;
   min-width: 100px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 20px;
   border-radius: 4px 0 0 4px !important;
 }

 .date-box .day {
   font-size: 2.2rem;
   font-weight: 800;
   line-height: 1;
 }

 .date-box .month {
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
 }

 /* Konten Agenda */
 .agenda-body {
   padding: 20px 30px;
 }

 .agenda-title {
   font-weight: 700;
   color: #212529;
   margin-bottom: 5px;
   font-size: 1.25rem;
 }

 .agenda-info {
   font-size: 0.9rem;
   color: #6c757d;
   display: flex;
   gap: 15px;
   margin-top: 10px;
 }

 .agenda-info i {
   color: #ffc107;
 }

 /* Tombol Detail */
 .btn-detail {
   border: 2px solid #212529;
   color: #212529;
   font-weight: 700;
   font-size: 0.8rem;
   letter-spacing: 1px;
   transition: all 0.3s;
   border-radius: 0 !important;
 }

 .btn-detail:hover {
   background: #212529;
   color: #ffc107;
 }

 /* Pastikan carousel menempati tinggi layar penuh */
 .carousel,
 .carousel-inner,
 .carousel-item {
   height: 100vh;
   /* vh = viewport height */
   width: 100%;
 }

 /* Mengatur gambar agar menutupi seluruh area */
 .carousel-item img {
   height: 100vh !important;
   width: 100%;
   object-fit: cover;
   /* Ini kunci agar gambar tidak gepeng */
   object-position: center;
   /* Fokus ke tengah gambar */
 }

 /* Menyesuaikan posisi caption agar lebih proporsional di layar full */
 .carousel-caption {
   bottom: 20%;
   /* Naikkan sedikit posisi teks dari bawah */
   z-index: 10;
 }

 /* Section Tertarik Bergabung */
 .cta-section {
   background: #111;
   /* Hitam pekat modern */
   padding: 100px 0;
   position: relative;
   overflow: hidden;
 }

 /* Dekorasi Lingkaran di Background */
 .cta-section::before {
   content: '';
   position: absolute;
   top: -100px;
   right: -100px;
   width: 300px;
   height: 300px;
   background: rgba(255, 193, 7, 0.05);
   border-radius: 50%;
 }

 .join-title {
   font-size: clamp(2.5rem, 5vw, 4.5rem);
   /* Responsive font size */
   line-height: 1.1;
   font-weight: 800;
   color: #fff;
   margin-bottom: 30px;
 }

 .btn-join {
   font-size: 1.1rem;
   font-weight: 700;
   letter-spacing: 2px;
   padding: 15px 40px;
   border: 2px solid #ffc107;
   color: #ffc107;
   background: transparent;
   transition: all 0.4s ease;
   display: inline-flex;
   align-items: center;
   gap: 15px;
 }

 .btn-join:hover {
   background: #ffc107;
   color: #000;
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
 }

 /* Footer Modern */
 footer {
   background: #000;
   color: #888;
   padding-top: 80px;
 }

 .footer-logo-text {
   font-size: 1.5rem;
   font-weight: 800;
   color: #fff;
   letter-spacing: 2px;
 }

 .footer-link-title {
   color: #fff;
   font-weight: 700;
   margin-bottom: 25px;
   text-transform: uppercase;
   font-size: 0.9rem;
   letter-spacing: 1px;
 }

 .footer-links a {
   color: #888;
   text-decoration: none;
   display: block;
   margin-bottom: 12px;
   transition: 0.3s;
   font-size: 0.95rem;
 }

 .footer-links a:hover {
   color: #ffc107;
   padding-left: 5px;
 }

 .social-circle {
   width: 40px;
   height: 40px;
   background: #222;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   transition: 0.3s;
   margin-right: 10px;
   text-decoration: none;
 }

 .social-circle:hover {
   background: #ffc107;
   color: #000;
   transform: rotate(360deg);
 }

 .copyright-bar {
   border-top: 1px solid #222;
   padding: 30px 0;
   margin-top: 60px;
   font-size: 0.85rem;
 }

 /* LATEST SECTION */

 /* Section Latest Styling */
 .image-stack {
   position: relative;
   padding: 30px;
 }

 .main-img-wrapper {
   position: relative;
   z-index: 2;
   background: #fff;
   padding: 20px;
   border-radius: 10px;
 }

 .deco-box {
   position: absolute;
   top: 0;
   left: 0;
   width: 80%;
   height: 80%;
   border-radius: 10px;
   z-index: 1;
 }

 .experience-badge {
   position: absolute;
   bottom: -20px;
   right: 0;
   z-index: 3;
   border-radius: 5px;
   min-width: 150px;
   text-align: center;
 }

 .italic-custom {
   font-family: 'Outfit', sans-serif;
   font-style: italic;
   font-weight: 300;
 }

 .play-icon {
   transition: transform 0.3s ease;
 }

 .d-flex:hover .play-icon {
   transform: scale(1.1);
 }

 @media (max-width: 991px) {
   .display-3 {
     font-size: 2.5rem;
   }
 }