/* SENSES ROASTERY - RESPONSIVE.CSS
   Khusus untuk struktur index (1).php yang diberikan.
   Tidak mengubah konten HTML/PHP; fokus pada layout tablet/mobile.
*/

html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
*, *::before, *::after { box-sizing:border-box; }
img, svg, video, iframe { max-width:100%; }
img { height:auto; }
button, a { -webkit-tap-highlight-color:transparent; }

@media (max-width:991.98px){
  .container,.container-fluid{width:100%;max-width:100%;}
  .container{padding-left:15px;padding-right:15px;}

  /* NAVBAR - override inline positioning dari index.php */
  .header_section{width:100% !important;left:0 !important;right:0 !important;}
  .header_section>.container{width:100%;max-width:100%;padding-left:15px;padding-right:15px;}
  .custom_nav-container{width:100%;min-height:70px;padding:5px 0 !important;display:flex;align-items:center;justify-content:space-between;}
  .custom_nav-container .navbar-brand{margin:0 !important;padding:0 !important;display:flex;align-items:center;max-width:calc(100% - 65px);}
  .custom_nav-container .navbar-brand img{display:block;width:auto !important;max-width:175px !important;max-height:58px !important;height:auto !important;margin:0 !important;}
  .custom_nav-container .navbar-toggler{display:block;flex:0 0 auto;width:44px;height:44px;padding:8px;margin:0 !important;border:1px solid rgba(255,255,255,.55);border-radius:8px;outline:none;box-shadow:none;}
  .custom_nav-container .navbar-toggler:focus{outline:none;box-shadow:none;}
  #navbarSupportedContent{width:100%;margin-left:0 !important;margin-top:8px !important;padding:10px 8px 12px !important;background:rgba(5,71,43,.97) !important;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.22);}
  #navbarSupportedContent .navbar-nav{width:100%;margin:0 !important;padding:0 !important;align-items:stretch !important;}
  #navbarSupportedContent .nav-item{width:100%;text-align:center;}
  #navbarSupportedContent .nav-link{display:block;width:100%;padding:11px 15px !important;margin:2px 0 !important;border-radius:8px;font-size:14px;}
  #navbarSupportedContent .nav-link:hover,#navbarSupportedContent .nav-item.active .nav-link{background:rgba(255,255,255,.08);}

  /* TOP SERVICE BAR */
  .top-service-bar{width:100% !important;max-width:100%;padding:7px 0 !important;}
  .top-service-bar .marquee-container{width:100%;max-width:100%;overflow:hidden;}
  .top-service-bar .marquee-content{width:max-content;max-width:none;gap:18px;}
  .top-service-bar .service-item{font-size:10px;letter-spacing:.7px;}
  .top-service-bar .service-divider{margin:0 4px;font-size:10px;}

  /* HERO */
  .hero_area {
        width: 100% !important;
        max-width: 100%;
        height: 100vh !important;
        min-height: 560px;
        overflow: hidden !important;
    }
      .hero_area .bg-box {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    .hero_area .bg-box > div {
        width: 100% !important;
        height: 100% !important;
    }
    
    .hero_area .bg-box video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
  .slider_section,.slider_section>.container{width:100%;max-width:100%;}
  .slider_section .row{width:100%;margin-left:0;margin-right:0;}
  .slider_section .Contact_section{width:100%;max-width:100%;padding-left:15px;padding-right:15px;}
  .slider_section #customCarousel1{width:100%;max-width:100%;margin-bottom:0 !important;}
  .slider_section .carousel-inner{width:100%;overflow:visible;margin-top:0 !important;}
  .slider_section .carousel-item{width:100%;}
  .slider_section .carousel-item .detail-box{width:100%;max-width:100%;margin-top:60px !important;min-height:0 !important;padding:0 5px 55px;}
  .slider_section .carousel-item h2{max-width:100%;margin-left:auto;margin-right:auto;font-size:clamp(28px,7vw,42px) !important;line-height:1.12 !important;letter-spacing:.5px;overflow-wrap:break-word;}
  .slider_section .carousel-item p{max-width:100%;margin-left:auto;margin-right:auto;font-size:15px !important;line-height:1.55 !important;letter-spacing:.04em !important;}
  .slider_section .carousel-indicators{left:0 !important;right:0 !important;bottom:-5px !important;width:100%;margin:0 auto !important;justify-content:center;}
  .slider_section .carousel-indicators li{width:25px !important;height:25px !important;margin:0 5px !important;background-size:22px 22px !important;}

  /* CONTACT OVERLAY */
  .contact-box-overlay{position:relative !important;top:auto !important;right:auto !important;left:auto !important;transform:none !important;width:100% !important;max-width:100% !important;height:auto !important;min-height:0 !important;margin:30px 0 0 !important;padding:22px 18px !important;}
  .contact-box-overlay .contact-item{min-width:0;}
  .contact-box-overlay .contact-item span{overflow-wrap:anywhere;}
  .contact-box-overlay .carousel-indicators{bottom:8px !important;}

  /* WAVE */
  .custom-wave-divider{width:100% !important;height:55px !important;margin-top:-100px !important;overflow:hidden !important;}
  .custom-wave-divider.wave-flip{height:55px !important;margin-top:0 !important;margin-bottom:-25px !important;}
  .custom-wave-divider svg{width:100% !important;height:100% !important;}

  /* KATALOG */
  #katalog{width:100%;max-width:100%;overflow:hidden !important;padding-top:35px;padding-bottom:45px;}
  #katalog>.container{width:100%;max-width:100%;}
  .styled-menu-heading{max-width:100%;margin-top:0 !important;font-size:1.55rem !important;letter-spacing:2px !important;}
  .food_section .filters_menu,.food_section .sub_filters_menu{width:100%;max-width:100%;display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center;gap:7px !important;padding:0 !important;margin-left:auto !important;margin-right:auto !important;}
  .food_section .filters_menu li,.food_section .sub_filters_menu li{flex:0 0 auto;padding:7px 14px !important;font-size:13px !important;line-height:1.25;white-space:nowrap;}
  .food_section .sub_filters_menu{margin-top:-5px !important;margin-bottom:20px !important;}
  .food_section .sub_filters_menu li{font-size:12px !important;padding:6px 11px !important;}
  .filters-content,.filters-content .row,.modern-grid{width:100%;max-width:100%;}
  .modern-grid{margin-left:-7px !important;margin-right:-7px !important;}
  .modern-grid>.modern-card-item{padding-left:7px !important;padding-right:7px !important;margin-bottom:14px !important;}
  .modern-card{width:100% !important;max-width:100%;height:100% !important;min-width:0 !important;}
  .modern-card-img-wrap{width:100% !important;padding-top:68% !important;}
  .modern-card-body{min-width:0;padding:15px !important;}
  .modern-card-title{font-size:.98rem !important;line-height:1.3 !important;overflow-wrap:anywhere;}
  .modern-card-desc{font-size:.80rem !important;line-height:1.45 !important;}
  .modern-card-footer{gap:8px;flex-wrap:wrap;}
  .modern-card-price{font-size:.92rem !important;}
  .modern-card-btn{padding:7px 11px !important;font-size:.75rem !important;min-height:34px;}
  .modern-view-all-wrap{width:100%;margin-top:1.25rem !important;margin-bottom:.5rem !important;}
  .modern-btn-view-all{max-width:100%;padding:10px 20px !important;font-size:.82rem !important;}

  /* BEST SELLER */
  .bestseller-wrapper{width:100% !important;max-width:100%;margin-top:35px !important;padding-top:25px !important;}
  .bestseller-grid{gap:0 !important;margin-left:-7px !important;margin-right:-7px !important;}
  .bestseller-grid>.modern-card-item{padding-left:7px !important;padding-right:7px !important;}
  .bestseller-card{margin-top:10px !important;transform:none !important;}
  .bestseller-card:hover{transform:translateY(-4px) !important;}
  .bestseller-card>div[style*="position: absolute"]{max-width:calc(100% - 24px);font-size:9px !important;padding:4px 7px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ABOUT */
  .about_section.bg-image{width:100%;max-width:100%;padding-top:65px !important;padding-bottom:50px !important;background-attachment:scroll !important;}
  .about_section>.container{width:100%;max-width:100%;}
  .about_section .row{width:100%;margin-left:0;margin-right:0;flex-direction:column !important;}
  .about_section .col-md-6{width:100%;max-width:100%;padding-left:15px;padding-right:15px;}
  .about_section .img-box{width:100%;padding:10px 5px 20px !important;}
  .about_section .img-box img{display:block;width:auto;max-width:min(82%,360px) !important;margin:0 auto;}
  .about_section .detail-box{width:100%;max-width:100%;padding:25px 0 15px !important;margin-bottom:20px !important;}
  .about_section .heading_container h2{font-size:1.65rem !important;line-height:1.2;}
  .about_section .detail-box p{font-size:14px !important;line-height:1.7;}
  .about_section .btn_read_more{padding:9px 27px;font-size:14px;}

  /* GALLERY */
  .about_gallery_wrapper{width:100% !important;max-width:100%;margin-top:25px !important;padding-top:20px !important;overflow:hidden !important;}
  .gallery_heading{width:100%;margin-bottom:18px !important;padding:0 35px;}
  .gallery_heading h3{max-width:100%;font-size:17px !important;letter-spacing:1.3px !important;}
  .gallery_heading h3::before,.gallery_heading h3::after{width:20px;}
  .gallery_heading h3::before{left:-25px;}
  .gallery_heading h3::after{right:-25px;}
  .gallery_slider{width:max-content !important;max-width:none !important;}
  .gallery_track{gap:12px !important;padding-right:12px !important;}
  .gallery_item{width:190px !important;height:130px !important;flex:0 0 190px !important;}

  /* FOOTER */
  .footer-premium{width:100%;max-width:100%;}
  .footer-premium>.container{width:100%;max-width:100%;padding-left:15px !important;padding-right:15px !important;}
  .footer-premium .row{margin-left:-10px;margin-right:-10px;}
  .footer-premium .row>[class*="col-"]{padding-left:10px;padding-right:10px;}
  .footer-content-wrapper{width:100%;max-width:100%;padding:28px 22px !important;border-radius:16px;}
  .info-item::before{left:-22px !important;}
  .info-text{font-size:14px !important;overflow-wrap:anywhere;}
  .social-pills{gap:8px !important;}
  .social-pill{padding:8px 14px !important;font-size:12px !important;}
  .premium-map-container{width:100% !important;min-height:320px !important;height:320px !important;border-radius:16px;}
  .premium-map-container iframe{display:block;width:100% !important;height:100% !important;min-height:320px;}

  /* Reveal animation safety */
  .reveal-left,.reveal-right,.reveal-zoom,.reveal-el{max-width:100%;}
}

@media (max-width:767.98px){
  .container{padding-left:14px;padding-right:14px;}
  .custom_nav-container{min-height:64px;}
  .custom_nav-container .navbar-brand img{max-width:155px !important;max-height:52px !important;}
  .hero_area{min-height:530px;}
  .slider_section .carousel-item .detail-box{margin-top:52px !important;padding-left:8px;padding-right:8px;}
  .slider_section .carousel-item h2{font-size:clamp(27px,8vw,38px) !important;}
  .slider_section .carousel-item p{font-size:13px !important;line-height:1.5 !important;}
  .food_section .filters_menu{gap:6px !important;}
  .food_section .filters_menu li{padding:7px 13px !important;font-size:12px !important;}
  .modern-grid>.modern-card-item,.bestseller-grid>.modern-card-item{flex:0 0 100% !important;max-width:100% !important;width:100% !important;}
  .modern-card-img-wrap{padding-top:62% !important;}
  .modern-card-body{padding:16px !important;}
  .modern-card-title{font-size:1rem !important;}
  .modern-card-desc{font-size:.83rem !important;}
  .modern-card-price{font-size:.96rem !important;}
  .coffee-separator-container{width:100%;padding:28px 12px !important;}
  .coffee-line{max-width:90px !important;}
  .coffee-beans-group{gap:7px !important;margin:0 9px !important;}
  .bean-center{width:15px !important;height:15px !important;}
  .bean-side{width:10px !important;height:10px !important;}
  .dense-text-separator{width:100%;padding:24px 8px !important;gap:6px !important;}
  .dense-text{font-size:.67rem !important;letter-spacing:0 !important;}
  .about_section .img-box img{max-width:75% !important;}
  .about_section .detail-box{padding-top:18px !important;}
  .about_section .heading_container h2{font-size:1.5rem !important;}
  .about_section .detail-box p{font-size:13.5px !important;}
  .gallery_item{width:175px !important;height:120px !important;flex-basis:175px !important;}
  .footer-premium.py-5{padding-top:2.5rem !important;padding-bottom:2.5rem !important;}
  .footer-premium .container.py-4{padding-top:1rem !important;padding-bottom:1rem !important;}
  .footer-content-wrapper{padding:24px 18px !important;}
  .premium-map-container{min-height:280px !important;height:280px !important;}
  .premium-map-container iframe{min-height:280px !important;}
}

@media (max-width:575.98px){
  .row{max-width:100%;}
  .header_section>.container{padding-left:12px;padding-right:12px;}
  .custom_nav-container .navbar-brand{max-width:calc(100% - 58px);}
  .custom_nav-container .navbar-brand img{max-width:145px !important;max-height:50px !important;}
  .custom_nav-container .navbar-toggler{width:40px;height:40px;padding:6px;}
  #navbarSupportedContent{padding:8px 6px 10px !important;}
  .hero_area{height:100svh !important;min-height:500px;}
  .slider_section .Contact_section{padding-left:12px;padding-right:12px;}
  .slider_section .carousel-item .detail-box{margin-top:45px !important;padding-bottom:52px;}
  .slider_section .carousel-item h2{font-size:clamp(25px,8.3vw,34px) !important;line-height:1.1 !important;letter-spacing:0 !important;}
  .slider_section .carousel-item p{font-size:12.5px !important;letter-spacing:.02em !important;}
  .slider_section .carousel-indicators{bottom:-2px !important;}
  .slider_section .carousel-indicators li{width:22px !important;height:22px !important;margin:0 3px !important;background-size:19px 19px !important;}
  .custom-wave-divider{height:43px !important;margin-top:-19px !important;}
  .custom-wave-divider.wave-flip{height:43px !important;margin-bottom:-19px !important;}
  #katalog{padding-top:28px;padding-bottom:38px;}
  .styled-menu-heading{font-size:1.35rem !important;letter-spacing:1.5px !important;}
  .food_section .filters_menu li{padding:6px 12px !important;font-size:11.5px !important;}
  .food_section .sub_filters_menu li{padding:5px 9px !important;font-size:10.5px !important;}
  .modern-grid,.bestseller-grid{margin-left:-5px !important;margin-right:-5px !important;}
  .modern-grid>.modern-card-item,.bestseller-grid>.modern-card-item{padding-left:5px !important;padding-right:5px !important;margin-bottom:12px !important;}
  .modern-card-img-wrap{padding-top:60% !important;}
  .modern-card-body{padding:14px !important;}
  .modern-card-title{font-size:.95rem !important;}
  .modern-card-desc{font-size:.78rem !important;line-height:1.4 !important;}
  .modern-card-price{font-size:.88rem !important;}
  .modern-card-btn{padding:6px 10px !important;font-size:.7rem !important;}
  .modern-btn-view-all{padding:9px 17px !important;font-size:.76rem !important;}
  .bestseller-wrapper{margin-top:28px !important;padding-top:22px !important;}
  .bestseller-wrapper .styled-menu-heading{font-size:1.15rem !important;gap:6px !important;}
  .bestseller-wrapper .styled-menu-heading svg{width:23px !important;height:23px !important;}
  .about_section.bg-image{padding-top:52px !important;padding-bottom:42px !important;}
  .about_section .img-box img{max-width:78% !important;}
  .about_section .heading_container h2{font-size:1.35rem !important;}
  .about_section .detail-box p{font-size:13px !important;line-height:1.65 !important;}
  .about_section .btn_read_more{padding:8px 23px;font-size:13px;}
  .about_gallery_wrapper{margin-top:18px !important;padding-top:16px !important;}
  .gallery_heading{padding-left:28px;padding-right:28px;}
  .gallery_heading h3{font-size:15px !important;letter-spacing:1px !important;}
  .gallery_heading h3::before,.gallery_heading h3::after{width:16px;}
  .gallery_heading h3::before{left:-21px;}
  .gallery_heading h3::after{right:-21px;}
  .gallery_item{width:160px !important;height:110px !important;flex-basis:160px !important;}
  .footer-premium>.container{padding-left:12px !important;padding-right:12px !important;}
  .footer-content-wrapper{padding:22px 16px !important;border-radius:14px;}
  .info-label{font-size:10px !important;letter-spacing:2px !important;}
  .info-text{font-size:13px !important;}
  .social-pills{gap:6px !important;}
  .social-pill{padding:7px 11px !important;font-size:11px !important;}
  .premium-map-container{min-height:250px !important;height:250px !important;border-radius:14px;}
  .premium-map-container iframe{min-height:250px !important;}
}

@media (max-width:375px){
  .custom_nav-container .navbar-brand img{max-width:132px !important;max-height:46px !important;}
  .hero_area{min-height:480px;}
  .slider_section .carousel-item .detail-box{margin-top:38px !important;}
  .slider_section .carousel-item h2{font-size:24px !important;}
  .slider_section .carousel-item p{font-size:11.5px !important;}
  .food_section .filters_menu{gap:5px !important;}
  .food_section .filters_menu li{padding:6px 10px !important;font-size:11px !important;}
  .food_section .sub_filters_menu{gap:5px !important;}
  .food_section .sub_filters_menu li{padding:5px 7px !important;font-size:10px !important;}
  .modern-card-body{padding:13px !important;}
  .modern-card-title{font-size:.9rem !important;}
  .modern-card-desc{font-size:.74rem !important;}
  .modern-card-price{font-size:.82rem !important;}
  .modern-card-btn{padding:5px 8px !important;font-size:.66rem !important;}
  .gallery_item{width:145px !important;height:100px !important;flex-basis:145px !important;}
  .premium-map-container{min-height:230px !important;height:230px !important;}
  .premium-map-container iframe{min-height:230px !important;}
}

@media (min-width:992px){
  html,body{width:100%;max-width:100%;}
  img,video,iframe{max-width:100%;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

@media (max-width: 991.98px) {

    .hero_area,
    .hero_area .bg-box,
    .hero_area .bg-box > div {
        position: relative;
    }

    .hero_area {
        height: 100vh !important;
        min-height: 560px !important;
    }

    .hero_area .bg-box {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .hero_area .bg-box > div {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

    .hero_area .bg-box video {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

@media (max-width: 575.98px) {

    .hero_area {
        height: 100vh !important;
        min-height: 500px !important;
    }

    .hero_area .bg-box video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media (max-width: 991.98px) {

    .custom-wave-divider:not(.wave-flip) {
        height: 70px !important;
        margin-top: -55px !important;
        position: relative !important;
        z-index: 20 !important;
    }

}

@media (max-width: 767.98px) {

    .custom-wave-divider:not(.wave-flip) {
        height: 65px !important;
        margin-top: -50px !important;
        position: relative !important;
        z-index: 20 !important;
    }

}

@media (max-width: 575.98px) {

    .custom-wave-divider:not(.wave-flip) {
        height: 60px !important;
        margin-top: -45px !important;
        position: relative !important;
        z-index: 20 !important;
    }

}

@media (max-width: 375px) {

    .custom-wave-divider:not(.wave-flip) {
        height: 55px !important;
        margin-top: -40px !important;
    }

}

/* ============================================================
   WAVE DIVIDER KEDUA - TURUN KE ARAH FOOTER
   ============================================================ */

@media (max-width: 991.98px) {

    .custom-wave-divider.wave-flip {
        height: 70px !important;
        margin-top: 0 !important;
        margin-bottom: -90px !important;
        position: relative !important;
        z-index: 20 !important;
    }

}

@media (max-width: 767.98px) {

    .custom-wave-divider.wave-flip {
        height: 65px !important;
        margin-bottom: -45px !important;
    }

}

@media (max-width: 575.98px) {

    .custom-wave-divider.wave-flip {
        height: 60px !important;
        margin-bottom: -50px !important;
    }

}

@media (max-width: 375px) {

    .custom-wave-divider.wave-flip {
        height: 55px !important;
        margin-bottom: -80px !important;
    }

}

/* ============================================================
   FIX KHUSUS TABLET
   Wave kedua tidak boleh menimpa foto About Us
   ============================================================ */

@media (min-width: 768px) and (max-width: 991.98px) {

    .custom-wave-divider.wave-flip {
        margin-bottom: 5px !important;
    }

    #aboutus {
        position: relative !important;
        z-index: 20 !important;
    }

    .custom-wave-divider.wave-flip {
        position: relative !important;
        z-index: 10 !important;
    }

}