/* Media query untuk layar dengan lebar maksimum 768px (Tablet & HP) */
@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px; /* Kurangi padding agar tidak terlalu besar */
        flex-direction: column; /* Susun navbar secara vertikal */
        gap: 10px; /* Beri jarak antar elemen */
        text-align: center; /* Pusatkan teks */
    }

    .navbar img.logo-nav {
        height: 30px; /* Perkecil logo */
    }

    .navbar .nav-log,
    .navbar .nav-back,
    .navbar .nav-order-log {
        /* flex-direction: column; Susun elemen dalam satu kolom */
        align-items: center;
        gap: 10px;
    }

    .nav-button {
        flex-direction: column; /* Susun tombol secara vertikal */
        gap: 5px;
    }

    .navbar a {
        font-size: 14px; /* Perkecil ukuran teks */
    }

    .btn {
        padding: 8px 15px; /* Kurangi ukuran tombol */
        font-size: 14px;
    }



    .hero-section {
        padding: 30px 20px;
        flex-direction: column-reverse;
    }

    .hero-section .content{
        max-width: 100%;
        text-align: center;
    }

    .hero-section h1 {
        font-size: 24px;
    }

    .hero-section p {
        font-size: 13px;
    }

    .hero-button {
        gap: 5px;
    }

    .hero-section img {
        max-width: 100%;
    }






    .carousel {
        flex-direction: row; /* Kembali ke horizontal */
        align-items: center;
        overflow-x: auto; /* Scroll horizontal */
        overflow-y: hidden;
        white-space: nowrap; /* Mencegah turun ke bawah */
        scroll-behavior: smooth; /* Smooth scroll */
        -ms-overflow-style: none;  /* Hilangkan scrollbar di Edge */
        scrollbar-width: none; /* Hilangkan scrollbar di Firefox */
    }

    /* Hilangkan scrollbar di Chrome & Safari */
    .carousel::-webkit-scrollbar {
        display: none;
    }

    /* Munculkan scrollbar saat hover */
    .carousel:hover::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .carousel:hover::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 3px;
    }

    .carousel .carousel-track {
        display: flex;
        flex-wrap: nowrap; /* Pastikan tetap horizontal */
        justify-content: flex-start;
        gap: 10px;
    }

    .carousel .carousel-track .card {
        flex: 0 0 280px;
        width: 280px;
    }

    .table-card-reg,
    .table-card-vip {
        width: 260px;
        flex: 0 0 260px;
    }

    .carousel .button-prev,
    .carousel .button-next {
        display: none; /* Sembunyikan tombol di layar kecil */
    }

    .card {
        width: 240px;
        padding: 10px;
    }

    .card-title {
        font-size: 14px;
    }

    .card-capacity p,
    .capacity-text {
        font-size: 10px;
    }

    .capacity-icon {
        width: 16px;
        height: 16px;
    }

    .order-table-section {
        text-align: center; 
        padding: 45px 25px;
    }

    .text-item p{
        margin-left: 10px;
    }
    

#menu_qty{
    font-weight: bold;
    margin: 0;
    font-size: 20px;
}


    /* Sembunyikan elemen dengan class "detail" */
    .detail,
    .cost-detail {
        display: none;
    }

    /* Penyesuaian layout footer */
    #foot-order {
        width: 100%; /* Agar footer tetap penuh */
        padding: 15px 10px;
        gap: 10px; /* Mengurangi jarak antar elemen */
        justify-content: space-between;
        flex-direction: column;
    }

    /* Left hanya menampilkan judul */
    .foot-order .left-side {
        gap: 5px; /* Kurangi jarak agar lebih rapi */
    }

    /* Right hanya harga & tombol checkout */
    .foot-order .right-side {
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 50px;
    }

    /* Ukuran font harga agar lebih pas */
    .foot-order .cost {
        font-size: 16px;
    }

    /* Tombol checkout di mobile lebih kecil */
    .btn-checkout {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 8px;
        width: 100%;
        margin:0;
    }

    /* Ikon hapus lebih kecil */
    .btn-batal img {
        width: 18px;
    }

    .left-side,
    .right-side{
        width: 100%;
    }

    .hero-button{
        flex-direction: row;
    }





            /* Atur ulang container utama agar lebih compact */
            .container-confirm {
                padding: 20px;
                margin: 20px auto;
            }
        
            /* Ubah layout agar stacked (bukan 2 kolom) */
            .container-confirm-content {
                flex-direction: column;
                gap: 20px;
            }
        
            /* Table order full width */
            .left-content {
                width: 100%;
            }
        
            /* Sembunyikan elemen yang tidak diperlukan */
            .detail {
                display: none;
            }
        
            /* Atur ulang ukuran tabel */
            .left-content table {
                font-size: 14px;
            }
        
            .left-content td img {
                width: 40px;
                height: 40px;
            }
        
            /* Right content (biaya) full width */
            .container-confirm-content .right-content {
                width: 90%;
                padding: 15px;
            }
        
            /* Biaya total lebih kecil */
            .total {
                font-size: 16px;
            }
        
            /* Responsive tombol copy rekening */
            .konten1-item {
                flex-direction: column;
                align-items: flex-start;
            }

            #konten1 .btn{
                width: 100%;
            }

            .upload-section{
                margin-bottom: 20px;
            }
        
            #rekeningNumber {
                width: 100%;
            }
        
            .copy-btn {
                margin-top: 5px;
                position: static;
                transform: none;
                width: 100%;
                text-align: center;
            }
        
            /* Sesuaikan ukuran QRIS */
            #konten2 img {
                max-width: 200px;
            }
        
            /* Sesuaikan tata cara pembayaran */
            #konten3 ol {
                padding-left: 15px;
                font-size: 14px;
            }
        
            #konten3 ol li {
                margin: 5px 0;
            }
        
            .container-confirm-content .cost-detail{
                display:flex;
            }

            #total-price{
                font-size: 24px;
            }

            #rekeningNumber{
                width:80%;
            }







    
            .hero-section-dpr{
                padding: 30px 20px;
            }

            .hero-section-dpr .content{
                max-width: 100%;
            }




            .nav-back{
                flex-direction: row;
            }


}