/* MEDIA QUERY TAB & MOBILE */
@media screen and (max-width: 768px) { /* Media query untuk Tab */
    /* Responsive font size untuk mobile */
    .hero-content > p, .testimoni > p, .card-section > p, .menu-section > p, .reserv-content > p {
        max-width: 95vw;
        /* font-size: 1rem; */
        padding-left: 8px;
        padding-right: 8px;
    }
    
}

@media screen and (max-width: 840px) { /* Media query untuk Tab */
    .hamburger-icon {
        display: flex; /* Show hamburger icon on mobile */
        align-items: center;
        color: white;
        cursor: pointer;
        font-size: 25px;
    }
    
    .btn-login {
        display: none;
        flex-wrap: wrap;
        position: relative; /* make nav the positioning context for the dropdown */
    }
    
    
    nav ul {
        display: none; /* hide menu by default on mobile, show via .show */
        flex-direction: column;
        width: 100%;
        transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
    }

    nav ul.hidden { /* Ini kalo di hide gak ada animasi tapi kalo gak di hide bug */
        display: none;
    }

    .nav ul li a{
        cursor: none;
    }

    nav ul li a:hover {
        border-bottom: none;
    }

    /* List bar: dropdown under the nav (full width) */
    nav ul.show {
        display: flex !important; 
        flex-direction: column;
        width: 100% !important;
        align-items: flex-start;
        position: absolute !important;
        height: auto !important;
        position: fixed !important;
        left: 0 !important;
        top: 56px !important;  /* tinggi navbar lu */
        padding: 24px !important;
        background-color: #978676;
        backdrop-filter: blur(5px);
        z-index: 99999;
        opacity: 1;
        backdrop-filter: blur(5px);
        z-index: 0;
        margin-top: 0;
        /* padding: 12px 34px; */
        gap: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transform: translateY(0);
    }

    nav ul.show li {
        width: 100%;
    }

    nav ul.show li a {
        padding-left: 28px;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    /* Responsive section reservasi */
    .reserv-content {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
    }
}
/* Responsive SECTION RESERVASI  */

@media (max-width: 1164px) {
  .hero-image {
    display: none;
  }

  .reserv-content {
    justify-content: center;
    text-align: center;
  }

  .hero-text {
    flex: 1 1 100%;
    /* background-color: tomato; */
  }

  .hero-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  /* background-color: #b06016; */
  gap: 1rem;
  flex-wrap: wrap;
  text-align: center !important;
}
}


@media (max-width: 900px) {
    .reserv-section h1,
    .reserv-section p {
        text-align: center;
    }
    .btn-primary {
       text-align: center;
   }

   .btn-secondary {
       text-align: center;
   }

  .hero-image {
    display: none;
  }

  .hero-buttons {
    flex-direction: column; /* ini bikin tombol jadi turun ke bawah */
    gap: 10px;
     /* max-width: 400px; */
    width: 100%;
    /* max-width: 300px; */
    justify-content: center;
    text-align: center;
  }

    .reserv-section {
        padding-bottom: 2rem;
    }

}

@media screen and (max-width: 480px) { /* Media query untuk Mobile (TESTI SECTION)*/
    /* Hero section */
    .hero-content h1 {
        font-size: 40px;
        text-align: center;
    }

    .hero-content p {
        font-size: 20px;
        margin-top: 1rem;
        padding: 0 1.5rem;
        text-align: center;
    }

    .button {
        flex-direction: column; /* ini bikin tombol jadi turun ke bawah */
        gap: 10px;
    }

    .button > .menu,
    .button > .reserv {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        text-align: center;
    }

    /* Testi section */
    .card-testi {
        max-width: 1400px;
    }

    .card-content2 {
        padding: 1rem;
        width: 100%;
        min-height: 250px;
    }

    nav ul.hidden {
        display: none; /* Hide the menu by default */
    }

    /* Reserv Section */
       .hero-buttons {
        flex-direction: column; /* ini bikin tombol jadi turun ke bawah */
        gap: 10px;
        /*  max-width: 400px; */
        width: 100%;
        /* max-width: 300px; */
        justify-content: center;
        text-align: center;
    } 


}

/* Responsive: 2 kolom di tablet, 1 kolom di mobile (CARD SECTION)*/
@media screen and (max-width: 900px) {
    .card {
        width: calc(50% - 2rem);
    }


}
@media (max-width: 600px) {
    .card-content {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem;
    }
    .card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* Footer Section Responsive */

@media (max-width: 870px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .footer-about,
  .links-footer,
  .social-footer {
    width: 100%;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  .links-footer ul,
  .social-footer ul {
    padding-left: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .links-footer ul li {
    margin-bottom: 0.5rem;
  }
  .social-footer ul {
    flex-direction: row;
    gap: 1.2rem;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .social-footer a i {  
    font-size: 1.7rem;
    margin: 0 0.2rem;
  }
}

/* Ensure the mobile menu shows when the `.show` class is present.
   There are multiple `.hidden`/`.show` rules in this file for different
   breakpoints; this rule guarantees `.show` wins when both apply. */


@media (max-width: 870px) {
  .footer-container {
    padding: 1.2rem 0.5rem;
    gap: 1.2rem;
    text-align: center;
  }
  .footer-about h2,
  .links-footer h2,
  .social-footer h2 {
    font-size: 1.2rem;
    text-align: center;
  }
  .footer-about p {
    font-size: 0.95rem;
    text-align: center;
  }
  .links-footer ul li,
  .social-footer a {
    font-size: 1rem;
    text-align: center;
  }
  .social-footer a i {
    font-size: 1.3rem;
  }
  .links-footer ul,
  .social-footer a{
    flex-direction: column;
    /* gap: 1rem; */
    justify-content: center;
    align-items: center;
  }
}