/* ==========================================================================
   1. BASE & GLOBAL STYLES (dari style.css)
   ========================================================================== */
:root {
  --navy: #21325e;
  --yellow: #f1d00a;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none !important;
  scroll-behavior: smooth;
}
body {
  background-color: var(--navy);
  overflow-x: hidden;
}

/* Custom Scroll Bar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
  background: #6e93f7;
  border-radius: 12px;
  transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover { background: var(--navy); }


/* ==========================================================================
   2. NAVIGATION (dari style.css & media.css)
   ========================================================================== */
nav {
  position: fixed;
  width: 100%;
  z-index: 998;
  transition: all 0.3s ease;
  font-family: "Plus Jakarta Sans", sans-serif;
  background: transparent; /* Latar transparan saat di atas */
}
nav.sticky {
  background: var(--navy);
  box-shadow: 0 0 100px var(--navy);
}
nav .navbar {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
nav .navbar .logo img {
  width: 60px; /* Ukuran logo yang pas */
  height: auto;
  padding: 5px 0;
}
nav .navbar .menu {
  display: flex;
  position: relative;
}
nav .navbar .menu li {
  list-style: none;
  margin: 0 8px;
}
.navbar .menu a {
  font-size: 16px;
  font-weight: 500;
  color: white;
  padding: 6px 0;
  transition: all 0.4s ease;
}
.navbar .menu a:hover {
  color: var(--yellow);
}
nav.sticky .menu a {
  color: #fff;
}
nav.sticky .menu a:hover {
  color: var(--yellow);
}

/* Tombol Menu Mobile */
nav .menu-btn,
.navbar .menu .cancel-btn {
  display: none; /* Sembunyi di desktop */
  position: absolute;
  color: #fff;
  right: 30px;
  top: 20px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}


/* ==========================================================================
   3. HOME SECTION (dari style.css)
   ========================================================================== */
.home {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  color: #fff;
}
.parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/bg.jpg"); /* Pastikan path gambar benar */
  background-size: cover;
  background-position: center;
  filter: brightness(70%);
}
.home .home-content {
  position: relative;
  width: 90%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2; /* Memastikan konten di atas parallax */
}
.home .text-two {
  color: #fff;
  font-size: 60px;
  font-weight: 600;
  margin-left: -3px;
}
.home .text-three {
  font-size: 40px;
  margin: 5px 0;
  color: #fff;
}
.home .button {
  margin: 14px 0;
}
.home .button button {
  outline: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  background: var(--yellow);
  color: var(--navy); /* Warna teks agar kontras */
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.4s ease;
}
.home .button a:nth-child(2) button {
    background: transparent;
    border-color: var(--yellow);
    color: var(--yellow);
}
.home .button button:hover {
  border-color: var(--yellow);
  background-color: #fff;
  color: var(--navy);
}


/* ==========================================================================
   4. GENERIC SECTIONS & ABOUT (dari style.css)
   ========================================================================== */
section {
  padding-top: 40px;
}
section .content {
  width: 80%;
  margin: 40px auto;
}
section .subheader {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
section .subheader span {
  color: white;
  font-size: 30px;
  font-weight: 600;
  position: relative;
  padding-bottom: 8px;
}
section .subheader span::after {
  content: "";
  position: absolute;
  height: 3px;
  background: white;
  bottom: -7px;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
}
.about .about-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.about-details .left,
.about-details .right {
  text-align: justify;
  width: 45%;
}

/* ==========================================================================
   5. DIVISION SECTION (dari division.css)
   ========================================================================== */
.division-container::after {
  content: "";
  display: table;
  clear: both;
}
.float-start { float: left; }
.float-end { float: right; }

.yellow {
  width: 68%;
  height: 20em;
  background-color: var(--yellow);
  color: var(--navy);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 10px 10px 0;
  margin-bottom: 3.1rem;
}
.blue {
  width: 68%;
  height: 20em;
  background-color: #3e497a;
  color: var(--yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px 0 0 10px;
  margin-bottom: 3.1rem;
}
.blue .desc .title {
  text-align: right;
}
.elemen {
  width: 650px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.1rem;
}
.division-img {
    width: 18em; /* Ukuran yang lebih terkontrol */
    height: auto;
}
.elemen .desc .title {
  font-size: 2.5em;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.elemen .desc p {
  font-weight: 500;
  font-size: 1.1em;
  font-family: "Poppins", sans-serif;
  text-align: justify;
}


/* ==========================================================================
   6. FOOTER & SCROLL BUTTON (dari style.css)
   ========================================================================== */
.scroll-button a {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: var(--navy);
  background: var(--yellow);
  padding: 7px 12px;
  font-size: 18px;
  border-radius: 6px;
  border: 1px solid var(--navy);
  display: none;
  z-index: 10;
}


/* ==========================================================================
   7. RESPONSIVE STYLES (dari media.css)
   ========================================================================== */
@media (max-width: 1190px) {
  section .content {
    width: 85%;
  }
}

@media (max-width: 1000px) {
  .about .about-details {
    justify-content: center;
    flex-direction: column;
  }
  .about .about-details .left,
  .about-details .right {
    width: 100%;
    margin-bottom: 20px;
  }
}

@media (max-width: 750px) {
  .parallax-image {
    background-position: -15em;
  }
  
  /* Responsive Navbar */
  nav .navbar .menu {
    position: fixed;
    left: -100%;
    top: 0;
    background: var(--navy);
    height: 100vh;
    width: 100%;
    padding-top: 60px;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s ease;
  }
  .navbar.active .menu {
    left: 0;
  }
  nav .navbar .menu a {
    font-size: 23px;
    display: block;
    color: #fff;
    margin: 10px 0;
  }
  nav .menu-btn,
  .navbar .menu .cancel-btn {
    display: block;
  }

  /* Responsive Home */
  .home .text-two {
    font-size: 65px;
  }
  .home .text-three {
    font-size: 35px;
  }
  
  /* Responsive Division */
  .yellow,
  .blue {
    font-size: 10px;
    width: 100% !important;
    height: auto !important; /* INI PERBAIKAN BUG dari 1rem */
    border-radius: 0 !important;
    padding: 1.4rem;
    margin-bottom: 1rem;
    float: none !important;
  }
  .elemen {
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .blue .elemen {
    flex-direction: column-reverse; /* Agar gambar tetap di bawah */
  }
  .blue .desc .title {
    text-align: center; /* Sesuaikan text align di mobile */
  }
  .elemen .desc .title {
    font-size: 1.8rem;
  }
  .elemen .desc p {
    font-size: 1rem;
  }
}

@media (max-width: 500px) {
  .home .text-two {
    font-size: 30px;
  }
  .home .text-three {
    font-size: 18px;
  }
  
}
/* ============================================== */
/* ==   GAYA BARU: ANIMASI & FITUR ZOOM GALERI == */
/* ============================================== */

/* 1. Animasi Interaktif saat Hover */
.gallery-item {
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-item:hover {
    transform: scale(1.05);
    z-index: 10; /* Memastikan gambar yang di-hover berada di atas gambar lain */
}

.gallery-item .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

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

.gallery-item img {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

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

/* 2. Gaya untuk Modal Pop-up */
/* (Gaya dasar sudah diatur via kelas Tailwind di HTML) */
/* Kita pastikan modal yang aktif akan menggunakan flexbox */
#image-modal.flex {
    display: flex;
}

/* ==========================================================================
   8. DOCUMENTATION SECTION (dari division.css)
   ========================================================================== */
section.progress {
  width: 100%;
  background-color: var(--yellow);
  padding: 7% 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.progress .progress-title {
  display: flex;
  justify-content: center;
}
.progress .progress-title h1 {
  color: var(--navy);
  font-size: 30px;
  font-weight: 600;
  position: relative;
  padding-bottom: 8px;
}
.progress .progress-title h1::after {
  content: "";
  position: absolute;
  height: 3px;
  background: var(--navy);
  bottom: -7px;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
}
section.progress iframe {
  width: 860px;
  max-width: 90vw; /* Agar responsif di layar kecil */
  height: 415px;
}


/* ==========================================================================
   9. FOOTER & CONTACT (dari style.css)
   ========================================================================== */
footer {
  background-color: #3e497a;
  margin-top: 160px;
}
.footer-content {
  padding-top: 100px;
  padding-bottom: 100px;
}
.footer-col h3 {
  margin: 0px;
  font-size: 30px;
  color: #ffffff;
  position: relative;
  display: inline-block; /* Agar border bottom pas */
  margin-bottom: 2rem;
  font-weight: bold;
}
.footer-col h3::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 5em;
  height: 0.2rem;
  background: #ffffff;
}
/* Styling untuk daftar kontak yang sudah dirapikan */
.contact-list {
  list-style: none;
  padding: 0;
}
.contact-list li {
  margin-bottom: 2rem;
}
.contact-list a {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}
.contact-list a:hover {
  color: var(--yellow);
}
.contact-list i {
  font-size: 2.5em;
  color: var(--yellow);
}
.contact-text h4 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  color: white;
}
.contact-text span {
  font-size: 16px;
  color: var(--yellow);
}

/* Styling untuk Peta Google Maps */
.map-container {
  position: relative;
  text-align: right;
  width: 100%;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
}
.gmap-iframe {
  height: 400px !important;
  width: 100% !important;
}

.footer-bottom {
  background-color: var(--yellow);
  color: var(--navy);
  padding: 17px 18px;
  text-align: left;
}


/* ==========================================================================
   10. RESPONSIVE TAMBAHAN (dari media.css)
   ========================================================================== */
@media (max-width: 750px) {
  section.progress {
    gap: 2.5rem;
  }
  section.progress iframe {
    height: 20rem;
    width: 90vw; /* Lebar iframe di mobile */
  }
}

/* ==========================================================================
   11. GALLERY MODAL STYLES
   ========================================================================== */

/* Modal Gallery Zoom */
#gallery-modal {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#gallery-modal.flex {
  display: flex !important;
}

/* Modal Image Styling */
#modal-img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

/* Loading Animation */
#modal-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Close Button Hover Effects */
#modal-close:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(241, 208, 10, 0.3);
}

/* Gallery Item Hover Enhancement */
.gallery-item {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-5px);
  filter: brightness(1.1);
}

.gallery-item:active {
  transform: translateY(-2px) scale(0.98);
}

/* Focus states for accessibility */
#modal-close:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Prevent image selection/dragging */
.gallery-img {
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* Mobile optimizations */
@media (max-width: 750px) {
  #modal-img {
    max-width: 98vw;
    max-height: 85vh;
  }
  
  #modal-close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  
  #modal-caption {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    transform: none;
    max-width: none;
  }
}

/* Smooth scrolling prevention when modal is open */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}

/* ==========================================================================
   12. GALLERY SECTION FOCUS STYLES
   ========================================================================== */

/* Gallery section focus state (for modal close return) */
#gallery:focus {
  outline: none; /* Remove default browser outline */
}

/* Smooth scroll behavior for better UX */
html {
  scroll-behavior: smooth;
}

/* Ensure gallery section is properly positioned for scroll targeting */
#gallery {
  scroll-margin-top: 80px; /* Account for fixed navbar */
}

/* ==========================================================================
   13. DIVISION SECTION ENHANCEMENTS
   ========================================================================== */

/* Enhanced styling untuk division titles agar lebih kontras */
.division-title {
  color: var(--navy) !important; /* Warna navy untuk mode cerah */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow untuk depth */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Dark mode override */
.dark .division-title {
  color: var(--navy) !important; /* Warna putih untuk mode gelap */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Shadow lebih kuat untuk dark mode */
}

/* Hover effect untuk division cards */
.division-card:hover .division-title {
  color: var(--yellow) !important; /* Highlight dengan warna kuning saat hover */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Dark mode hover effect */
.dark .division-card:hover .division-title {
  color: var(--yellow) !important; /* Tetap kuning untuk dark mode hover */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Enhanced contrast untuk description text */
.division-description {
  color: #4a5568 !important; /* Warna abu-abu gelap untuk mode cerah */
  transition: color 0.3s ease;
}

.dark .division-description {
  color: #2d3748 !important; /* Warna abu-abu terang untuk mode gelap */
}

.division-card:hover .division-description {
  color: #2d3748 !important; /* Lebih gelap saat hover di mode cerah */
}

.dark .division-card:hover .division-description {
  color: #f2dc14 !important; /* Lebih terang saat hover di mode gelap */
}

/* Enhanced contrast untuk section subtitle */
.section-subtitle {
  color: #4a5568 !important; /* Warna abu-abu gelap untuk mode cerah */
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow untuk depth */
}

/* Dark mode dengan kontras yang lebih baik */
.dark .section-subtitle {
  color: #2d3748 !important; /* Warna putih terang untuk mode gelap */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Shadow lebih kuat untuk dark mode */
}

/* Styling konsisten untuk semua section subtitle */
.about-section-subtitle,
.achievements-section-subtitle {
  color: #4a5568 !important; /* Warna abu-abu gelap untuk mode cerah */
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow untuk depth */
}

/* Dark mode dengan kontras yang lebih baik untuk semua subtitle */
.dark .about-section-subtitle,
.dark .achievements-section-subtitle {
  color: #f7fafc !important; /* Warna putih terang untuk mode gelap */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Shadow lebih kuat untuk dark mode */
}

/* Styling untuk gallery section subtitle */
#gallery p {
  color: #4a5568 !important; /* Warna abu-abu gelap untuk mode cerah */
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark #gallery p {
  color: #f7fafc !important; /* Warna putih terang untuk mode gelap */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Responsive text sizing */
@media (max-width: 768px) {
  .section-subtitle {
    font-size: 1rem;
    line-height: 1.6;
  }

  
  /* main.css */

/* ==========================================================================
   14. TEAM SECTION ANIMATIONS (EFEK PEMILIHAN KARAKTER)
   ========================================================================== */

/* Transisi halus untuk semua kartu tim - CLEANED UP VERSION */
.team-card {
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden !important; /* CRITICAL: Prevent ripple overflow */
    border-radius: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    will-change: transform, box-shadow; /* Optimize for animations */
}

/* REMOVED: All CSS hover effects to prevent conflict with JavaScript */
/* JavaScript will handle all hover animations for better control */

/* Animasi untuk foto profil - BASE STYLES ONLY */
.team-card img {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 4px solid var(--yellow);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Container untuk image dengan overflow control - ENHANCED */
.team-image-container {
    overflow: hidden !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

/* Base styles untuk nama dan jabatan */
.team-card h4,
.team-card p {
    transition: all 0.3s ease;
}

/* Efek ripple saat diklik - IMPROVED */
.team-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 208, 10, 0.3), transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.team-card.clicked::before {
    width: 200px; /* Reduced size to prevent overflow */
    height: 200px;
    opacity: 1;
}

/* Floating animation untuk kartu */
@keyframes teamFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Enhanced smooth floating animation - ADDED */
@keyframes teamFloatSmooth {
    0%, 100% { 
        transform: translateY(0px);
    }
    33% { 
        transform: translateY(-6px);
    }
    66% { 
        transform: translateY(-3px);
    }
}

.team-card.animate-float {
    animation: teamFloat 3s ease-in-out infinite;
}

/* Enhanced floating class - ADDED */
.team-card.floating {
    animation: teamFloatSmooth 3.5s ease-in-out infinite;
}

/* Animation reset class untuk mencegah konflik - ADDED */
.team-card.animation-reset {
    animation: none !important;
}

/* Responsive adjustments - SIMPLIFIED */
@media (max-width: 768px) {
    .team-card {
        padding: 1rem;
    }
    
    /* Disable complex animations on mobile untuk better performance */
    .team-card::before {
        display: none;
    }
}

/* Disable animations untuk users yang prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .team-card,
    .team-card img,
    .team-card h4,
    .team-card p {
        animation: none !important;
        transition: none !important;
    }
    
    .team-card::before {
        display: none !important;
    }
} 
}