/*Classic Theme*/
/*
  Author name : basti
  Website : http://bastisapp.com
  Item buy link : https://codecanyon.net/item/karenderia-multiple-restaurant-system/9118694
*/

@media (min-width: 320px) { 
   /* .top-logo{
       border: 1px solid red;
   } */

   .hamburger{
       padding: 0;
   }
   .hamburger-inner{
       margin-top: 0;
   }
   .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before{
    width: 30px;
    height: 3px;
  }

  .hamburger-box{
      width: 30px;
      height: 10px;  
  }  

  #main-search-banner .banner-center{
    width: 100%;
  }
  #main-search-banner{
    height:270px;
    background-size: 100% 270px;
  }

  .h2, h2 {
    font-size: 1.5rem;
  }
  
  .restaurant-carousel.rounded img{  
    height: 130px;
  }

  .section-addons .addons{
      height: 200px;      
  }

  .section-benefits .benefits  
  {
    height: 220px;    
  }

  .section-benefits .d-flex{
    height:auto;
  }
  
  .h4, h4 {
    font-size: 1rem;
  }

  .section-join-us,
  .section-join-us .d-flex
   {
      height: auto;
   }

   .section-join-us .d-flex{    
    padding: 20px;
   }

   .h1, h1 {
    font-size: 1.4rem;
   }

   .h3, h3 {
    font-size: 1rem;
   }

   /*.btn{
      padding: 8px !important;
   }*/

   .btn-circle{
     padding: 6px 0px !important;
   }

   .btn-search{
      padding: 0 !important;
   }
   
   .action-index #vue-widget-nav-mobile,
   .action-menu  .widget-services
   {
     display: none !important;
   }

   .action-restaurants #top-navigation{
    border-bottom: none;
   }
   
   .section-fast-delivery-mobile{
      background-size:30%, 30%;
   }   

   #feed-search-mobile .inputs-box-grey{
      width: 100%;
   } 

   .section-menu .menu-left{
      border-right:0;
    }
    
    .gallery_magnific{        
        width: 100% !important;        
    }

    .gallery img{
        height: 120px;
    }
    
    #main-container{
        padding-left:0;
      }

    body.column2-layout{
        background: #fff;
    }

    body.column2-layout #top-nav{
        border-bottom: 1px solid #e5e5e5;        
    }

    .order-search-wrap .search-geocomplete{
        border: 1px solid #e5e5e5;
    }
    
    .address-slot.card,
    .card-listing.card
    {
        height:auto;
        border: 1px solid  #e5e5e5;
    }
       
    .receipt-section img,
    .pagenotfound-section .img-350
    {
        max-width:100%;
    }

}

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) 
{
    
    /* .top-logo{
        border: 1px solid blue;
    } */

    .top-logo img,
    .footer-logo img
    {
        max-width: 140px;
        max-height:30px;
    }

    .ml-xs-1{
        margin-left: 0.5rem !important;
    }

    #main-search-banner{
        height:150px;
        background-size: 100% 150px;
    }

    .h2, h2 {
        font-size: 1.2rem;
     }

     .restaurant-carousel.rounded img{  
        height: 100px;
    }
    
    .h1, h1 {
      font-size: 1.5rem;
    }

    .h3, h3 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 14px;
    }

    .tree-columns-center .d-flex{        
        height: auto;
    }

    .section-mobileapp img.mobileapp{
        max-width: 200px;
    }

    .social-list a{
        font-size: 15px;
    }
    
    .sub-footer-nav a {
        font-size: 12px;
      }
     
    .sub-footer-nav h6{
        font-size: 13px !important;
    } 

    .section-fast-delivery-mobile{
        height:250px;   
     }

     .list-items img, .skeleton-height{
        height: 150px;
     }
       
     .login-container{
         width: 100%;
     }

     .form-control-text {
        min-height: 45px;
      }

     .form-label-group > label,
     .btn-green, 
     .form-control-text,
     .social-login a,
     a.btn,
     .back-arrow,
     .chevron-section
     {
        font-size: 12px !important;
        /* border: 1px solid red; */
     }

     .btn-group label,
     .btn-group p,
     .form-check-label
     {
         font-size: 11px !important;
         /* border: 1px solid red; */
     }

     a.btn{
         padding: 8px !important;
     }

     .input-group-small .btn{
        padding: 5px 8px;
     }

     .category-carousel a.btn{
         font-size: 20px !important;
     }
     
     a.btn.btn-circle{
         padding: 6px 0px !important;
     }

     .chevron-section{
        min-height:auto;
     }

     .track-map-div{
        height: calc(100vw * (9/16));
     }   

     .sidebar-panel{
         width: auto;
     }

     .top-menu .drawer-menu ul li a,
     .menu-carousel a
     {
         font-size: 12px;
     }
     .top-menu .drawer-menu ul.with-icons li a{
         text-indent: 25px;
     }
     
     #main-container{
        padding-top: 10px;
     }

     .header_icon._icons{
        width:40px;
        height:40px;
     }

     .header_icon .rounded-button-icon{
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin-top: 10px;
     }
     .header_icon .rounded-button-icon i{
        font-size:20px;
     }

     .register-bg{
        min-height: 250px;
     }

     .item-modal-footer.modal-footer .w-25{         
         width: 35% !important;
     }

}

@media (min-width: 480px) {
    /* .top-logo{
        border: 1px solid rgb(235, 233, 232);
    } */

    .section-join-us,
    .section-join-us .d-flex
    {
        height: auto;
    }

    .section-join-us .d-flex{    
        padding: 20px;
    }

    .h1, h1 {
        font-size: 1.8rem;
    }

    .h3, h3 {
        font-size: 1.3rem;
    }

     /*.btn{
        padding: 10px !important;
    }*/
    
    .btn-circle{
        padding: 6px 0px !important;
    }

    .btn-search{
        padding: 0 !important;
    }

    .tree-columns-center .d-flex{        
        height: auto;
    }

    .section-mobileapp{
        padding-top: 220px;
    }

    .section-mobileapp img.mobileapp{
        max-width: 250px;
    }

    .sub-footer-nav a{
        font-size: 12px;
    }

    .sub-footer-nav h6{
        font-size: 13px !important;
    }

    .section-fast-delivery-mobile{
        background-size:30%, 30%;
    }

    .track-map-div{
        height: calc(100vw * (9/16));
    }
    
    .register-bg{
        min-height: 350px;
    }
   
    
    .pagenotfound-section .img-350{
        max-width: 300px;
    }
    
    
}

@media (min-width: 768px) {
    /* .top-logo{
        border: 1px solid yellow;
    } */
    
    #main-search-banner{
        height:300px;
        background-size: 100% 300px;
    }
   
    .section-addons .addons{
        height: 300px;      
    }
    
    .section-benefits .d-flex{
        height:auto;
    }
    
    .section-benefits .btn-white-parent{
        margin-top: 10px;
    }

    .section-join-us,
    .section-join-us .d-flex
    {
        height: 390px;
    }

    .tree-columns-center .d-flex{
       height:400px;
    }

    .section-mobileapp{
        padding-top: 250px;
    }
    
    .sub-footer-nav a{
        font-size: 13px;
    }

    .sub-footer-nav h6{
        font-size: 15px;
    }

    .inputs-box-grey{
        width: auto;
    }

    .section-fast-delivery-mobile{
        background-size:25%, 25%;
    }

    .action-menu #vue-search-nav,
    .action-restaurants #vue-search-nav
    {        
        display: none;
    }

    .track-map-div{
        height: calc(100vw * (9/16));
    }

    #main-container{
        padding-top: 10px;
    }

    
    .pagenotfound-section .img-350{
        max-width: 350px;
    }
    
  
}
    
@media (min-width: 992px) {

    /* .top-logo{
        border: 1px solid orange;
    } */

    #main-search-banner{
        height:420px;
        background-size: cover;
    }

    .h2, h2 {
       font-size: 2rem;
    }

    .restaurant-carousel.rounded img{  
        height: 170px;
    }

    .section-addons .addons{
        height: 350px;      
    }

    .section-benefits .benefits{
        height: 320px;
    }

    .h4, h4 {
        font-size: 1.5rem;
    }

    .h1, h1 {
        font-size: 2.5rem;
    }

    .h3, h3 {
        font-size: 1.5rem;
       }

    .section-benefits .d-flex
    {
       height:250px;
    }

    /*.btn{
        padding: 12px !important;
    }*/

    .btn-circle {
        padding: 6px 0px !important;
    }
    
    .action-restaurants #top-navigation{
        border-bottom: 1px solid #e5e5e5;
    }
    
    .section-menu .menu-left{
      border-right:1px solid #e5e5e5;
    }

    .gallery_magnific{        
        width: 50% !important;        
    }

    .gallery img{
        height: 90px;
    }

    .action-menu #vue-search-nav,
    .action-restaurants #vue-search-nav
    {        
        display: block;
    }
   
    .track-map-div{
        height:auto;
    }

    #main-container{
        padding-left: 260px;
    }

    body.column2-layout{
        background:#f6f7f8;
    }
    
    body.column2-layout #top-nav{
        border-bottom:none;
    }

    .order-search-wrap .search-geocomplete{
        border:none;
    }


    .address-slot.card,
    .card-listing.card
    {
        height: 155px;
        border: none;
    }

    .register-bg{
        min-height: 420px;
     }

     .receipt-section img{
        max-width: 700px;
    }

}
    
@media (min-width: 1200px) {
    /* .top-logo{
        border: 1px solid green;
    } */
}
    
@media (min-width: 1400px) {
}


/* BOOSTRAP MEDIA QUERIES*/

@media (max-width: 575.98px) { 
    /* .top-logo{
        border: 1px solid orange;
    } */

    #main-search-banner{
        height: auto;
        min-height: 220px;
        background: linear-gradient(180deg, #fff5ec 0%, #ffe8d4 100%);
        padding: 28px 20px 36px;
        border-bottom: 1px solid #f0e3d3;
    }
    #main-search-banner .banner-center{
        width: 100%;
        padding-top: 8px;
    }
    #main-search-banner h2{
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1.25;
        color: #2c2c2c;
        margin-bottom: 14px;
    }

    .home-search-wrap{
        width: auto;
    }    

    .form-control-text{
        font-size:14px;
    }

    .h2, h2 {
        font-size: 1.2rem;
    }

    .flex-enabled-locate{
        margin-top: 10px;        
    }
    
    .flex-enabled-locate button,
    .flex-enabled-locate,
    .width_87
    {
        width: 100% !important;
    }

}

@media (min-width: 576px) and (max-width: 767.98px)  {
    /* .top-logo{
        border: 1px solid greenyellow;
    } */

    #main-search-banner{
        height: auto;
        min-height: 260px;
        background: linear-gradient(180deg, #fff5ec 0%, #ffe8d4 100%);
        padding: 36px 30px;
        border-bottom: 1px solid #f0e3d3;
    }
    #main-search-banner h2{
        font-size: 1.7rem;
        font-weight: 700;
        margin-bottom: 16px;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* .top-logo{
        border: 1px solid yellow;
    } */

    #main-search-banner{
        height: auto;
        min-height: 320px;
        background: linear-gradient(180deg, #fff5ec 0%, #ffe8d4 100%);
        padding: 50px 40px;
        border-bottom: 1px solid #f0e3d3;
    }
    #main-search-banner h2{
        font-size: 1.9rem;
        font-weight: 700;
        margin-bottom: 18px;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px)  { 
    /* .top-logo{
        border: 1px solid red;
    } */
}

@media (min-width: 1200px) { 
    /* .top-logo{
        border: 1px solid blue;
    } */
}

/* ============================================================ */
/* RESTORAN DETAY SAYFASI MOBIL REDESIGN                        */
/* ============================================================ */

@media (max-width: 991.98px) {

    /* HERO BANNER */
    .mobile-merchant-hero{
        height: 180px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
        margin: 0;
    }
    .mobile-merchant-hero.no-image{
        background: linear-gradient(135deg, #fedc79 0%, #fb923c 60%, #ea580c 100%);
    }
    .mobile-merchant-hero-overlay{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%);
        pointer-events: none;
    }
    .mobile-merchant-hero-actions{
        position: absolute;
        top: 16px;
        left: 16px;
        right: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 5;
    }
    .mhh-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.95);
        color: #2c2c2c;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        text-decoration: none;
        font-size: 20px;
    }
    .mhh-btn:hover, .mhh-btn:focus, .mhh-btn:active{
        color: #2c2c2c;
        background: #fff;
        text-decoration: none;
    }

    /* INFO BLOK (logo + isim + cuisine + info row) */
    .mobile-merchant-info{
        position: relative;
        margin-top: -32px;
        padding-top: 0;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 2;
    }
    .mmi-logo-card{
        width: 76px;
        height: 76px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        margin-bottom: 14px;
    }
    .mmi-logo-img{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 10px;
    }
    .mmi-restaurant-name{
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0 0 10px 0;
        line-height: 1.2;
    }
    .mmi-cuisine-list{
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }
    .mmi-cuisine-chip{
        display: inline-block;
        padding: 4px 12px;
        background: #f5f5f5;
        color: #555;
        font-size: 0.78rem;
        font-weight: 500;
        border-radius: 999px;
    }
    .mmi-info-row{
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 12px;
        color: #2c2c2c;
        text-decoration: none;
        font-size: 0.85rem;
        position: relative;
    }
    .mmi-info-row:hover, .mmi-info-row:focus, .mmi-info-row:active{
        color: #2c2c2c;
        text-decoration: none;
    }
    .mmi-info-item{
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .mmi-info-icon{
        color: #777;
        font-size: 16px;
    }
    .mmi-icon-star{
        color: #f59e0b;
    }
    .mmi-info-value{
        font-weight: 600;
        color: #2c2c2c;
    }
    .mmi-info-sub{
        color: #888;
        font-size: 0.78rem;
    }
    .mmi-info-chevron{
        margin-left: auto;
        color: #bbb;
        font-size: 18px;
    }

    /* STICKY KATEGORI NAV - components-category-carousel rendered */
    .swiper.category-carousel,
    .category-carousel-wrapper{
        position: sticky;
        top: 56px;
        z-index: 50;
        background: #fff;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    /* BENZER RESTORANLAR */
    .similar-title{
        font-size: 1.15rem;
        font-weight: 700;
        color: #1a1a1a;
    }
    .similar-scroll{
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0 8px;
        margin: 0 -15px;
        padding-left: 15px;
        padding-right: 15px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .similar-scroll::-webkit-scrollbar{
        display: none;
    }
    .similar-card{
        flex: 0 0 220px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 14px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        scroll-snap-align: start;
        transition: transform 0.15s ease;
    }
    .similar-card:hover{
        text-decoration: none;
        color: inherit;
    }
    .similar-card-image{
        position: relative;
        height: 110px;
        background-size: cover;
        background-position: center;
    }
    .similar-card-image.no-image{
        background: linear-gradient(135deg, #fff5ec 0%, #ffe8d4 100%);
    }
    .similar-card-logo{
        position: absolute;
        left: 10px;
        bottom: -16px;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #fff;
        padding: 4px;
        object-fit: contain;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }
    .similar-card-closed{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .similar-card-info{
        padding: 22px 12px 12px;
    }
    .similar-card-name{
        font-size: 0.95rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .similar-card-cuisine{
        font-size: 0.78rem;
        color: #777;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .similar-card-rating{
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.82rem;
        color: #2c2c2c;
    }
    .similar-card-rating i{
        color: #f59e0b;
        font-size: 14px;
    }
    .similar-card-rating-count{
        color: #888;
        font-size: 0.75rem;
    }

}
/* end RESTORAN DETAY MOBIL REDESIGN */


/* ============================================================ */
/* ANA SAYFA PROFESYONEL TASARIM - Yemeksepeti/Lieferando tarzı */
/* Sadece görsel/layout - HTML ve Vue componentleri değişmedi   */
/* ============================================================ */

/* ---- HERO ALANI (desktop) - sol turuncu + sag yemek gorseli ---- */
@media (min-width: 992px) {
    #vm_home_search #main-search-banner,
    #main-search-banner {
        height: auto !important;
        min-height: 480px !important;
        background:
            linear-gradient(90deg, #ff6b35 0%, #ff6b35 40%, rgba(255,107,53,0.9) 48%, rgba(255,107,53,0) 60%),
            url("/themes/karenderia_v2/assets/images/hero-food.jpg") right center no-repeat !important;
        background-size: auto, cover !important;
        background-color: #ff6b35 !important;
        border-bottom: none !important;
        position: relative !important;
        overflow: hidden;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 40px 0 !important;
    }
    #main-search-banner .bg-placeholder,
    #main-search-banner .banner-left,
    #main-search-banner .banner-right {
        display: none !important;
    }
    #main-search-banner .banner-center {
        width: 46% !important;
        max-width: 560px !important;
        position: relative !important;
        margin-left: 5% !important;
        z-index: 5 !important;
        text-align: left !important;
    }
    #main-search-banner.d-flex {
        justify-content: flex-start !important;
    }
    #main-search-banner h2 {
        display: block !important;
        color: #ffffff !important;
        font-size: 2.7rem !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        text-align: left !important;
        margin-bottom: 22px !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }
    #main-search-banner .banner-center h5,
    #main-search-banner .banner-center small {
        color: #ffe8dc !important;
        text-align: left !important;
        letter-spacing: 0.08em;
        font-weight: 700;
        display: block !important;
    }
    #main-search-banner .banner-center p {
        color: rgba(255,255,255,0.92) !important;
        text-align: left !important;
        display: block !important;
    }
    .home-search-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ---- ARAMA KUTUSU (tum ekranlar) - buyuk, net, golgeli ---- */
/* home-search-wrap - orijinal justify-content-between yapisina dokunmadan sadece gorsel */
.home-search-wrap {
    width: 100% !important;
    max-width: 640px;
    margin: auto;
}
/* icteki flex satiri - input + buton yan yana (orijinal yapida var) */
.home-search-wrap .d-flex {
    gap: 10px;
    align-items: stretch !important;
}
/* input kutusu - beyaz, golgeli, yuvarlak */
.home-search-wrap .search-geocomplete {
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    min-height: 62px;
    display: flex;
    align-items: center;
}
.home-search-wrap .search-geocomplete.width-87,
.home-search-wrap .search-geocomplete {
    width: auto !important;
    flex: 1 1 0% !important;
    min-width: 0;
}
/* ic elemanlar tam genislesin */
.home-search-wrap .search-geocomplete .p-0,
.home-search-wrap .el-autocomplete,
.home-search-wrap .el-input,
.home-search-wrap .el-input__wrapper {
    width: 100% !important;
}
.home-search-wrap .el-input__inner {
    border: none !important;
    background: transparent !important;
    height: 60px !important;
    font-size: 1.02rem;
    color: #2c2c2c;
}
.home-search-wrap .el-input__inner::placeholder {
    color: #9a9a9a;
}
/* yesil konum/ok butonu - sabit kare, sagda */
.home-search-wrap .flex-enabled-locate {
    flex: 0 0 62px !important;
    width: 62px;
    height: 62px;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Autocomplete sonuç kutusu - modern */
#vue-home-search .search-geocomplete-results,
.auto-complete .search-geocomplete-results {
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
    border: none !important;
    margin-top: 8px;
    overflow: hidden;
}

/* ---- BÖLÜM BAŞLIKLARI - net, modern ---- */
#vue-home-widgets .container > h1,
#vue-home-widgets .container > h2,
#vue-home-widgets .container > h3,
.section-title,
#vue-home-widgets h5.section-title {
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

/* Cuisine list + swiper listlerine nefes alanı */
#vue-home-widgets .container {
    padding-top: 8px;
    padding-bottom: 8px;
}
components-cuisine-list,
components-swiper-list,
components-featured-list {
    display: block;
    margin-bottom: 36px;
}

/* ---- MOBIL APP BÖLÜMÜ - modern kart ---- */
.section-mobileapp.section-newmobileapp {
    background: linear-gradient(135deg, #2b2d42 0%, #1a1b2e 100%);
    border-radius: 24px;
    margin: 40px auto;
    padding: 48px 20px !important;
    max-width: 1140px;
}
.section-mobileapp.section-newmobileapp h1,
.section-mobileapp.section-newmobileapp h5 {
    color: #fff;
}
.section-mobileapp.section-newmobileapp h5 {
    color: #ff8a3d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 700;
}
.section-mobileapp.section-newmobileapp h1 {
    font-weight: 800;
    font-size: 2rem;
}
.section-mobileapp.section-newmobileapp p {
    color: rgba(255,255,255,0.75);
}

/* ---- RESTORAN KARTLARI - hover efekti, gölge ---- */
.rounded-box {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border-radius: 16px !important;
}
.rounded-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* ---- HERO MOBIL ---- */
@media (max-width: 991.98px) {
    #main-search-banner {
        min-height: 340px;
        background: linear-gradient(135deg, #ff8a3d 0%, #ff6b35 55%, #e85826 100%) !important;
        background-size: cover !important;
        border-bottom: none !important;
        padding: 20px !important;
        display: flex !important;
        align-items: flex-end;
        position: relative;
    }

    #main-search-banner .banner-center {
        position: relative;
        z-index: 2;
        width: 100% !important;
    }
    #main-search-banner .bg-placeholder,
    #main-search-banner .banner-left,
    #main-search-banner .banner-right {
        display: none !important;
    }
    #main-search-banner .banner-center {
        width: 100% !important;
        z-index: 2;
    }
    #main-search-banner h2 {
        color: #fff;
        font-size: 1.75rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 20px !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }
    .home-search-wrap {
        width: 100% !important;
    }
}
/* end ANA SAYFA PROFESYONEL TASARIM */


/* ============================================================ */
/* HOW TO ORDER - 3 adim bolumu (Lieferando tarzi)             */
/* ============================================================ */
.section-howto {
    padding: 70px 0 60px;
    background: #fff;
}
.howto-head {
    text-align: center;
    margin-bottom: 48px;
}
.howto-eyebrow {
    display: block;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 6px;
}
.howto-title {
    color: #ff6b35;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
}
.howto-steps {
    display: flex;
    gap: 32px;
    justify-content: center;
}
.howto-step {
    flex: 1 1 0;
    max-width: 340px;
    text-align: center;
    padding: 0 12px;
}
.howto-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    color: #ff6b35;
    display: flex;
    align-items: center;
    justify-content: center;
}
.howto-icon svg {
    width: 64px;
    height: 64px;
}
.howto-step-title {
    color: #1a1a1a;
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.howto-step-desc {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 767.98px) {
    .section-howto {
        padding: 44px 0 36px;
    }
    .howto-title {
        font-size: 1.6rem;
    }
    .howto-steps {
        flex-direction: column;
        gap: 36px;
        align-items: center;
    }
    .howto-step {
        max-width: 100%;
    }
    .howto-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 16px;
    }
    .howto-icon svg {
        width: 54px;
        height: 54px;
    }
    .howto-step-title {
        font-size: 1.2rem;
    }
}
/* end HOW TO ORDER */


/* ============================================================ */
/* RESTORAN DETAY SAYFASI - DESKTOP PROFESYONEL (sadece CSS)    */
/* ============================================================ */
@media (min-width: 992px) {

    /* Ust kart - modern, golgeli, tam genislik */
    .merchant-top-header .container > .row {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.07);
        margin: 0;
        padding: 8px;
        overflow: hidden;
    }
    /* Sol bilgi alani - header gorseli yoksa tam genislik */
    .merchant-top-header .left-info {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 28px !important;
    }
    /* Sag bos alan (header gorseli) - gorsel yoksa gizle */
    .merchant-top-header .right-infox {
        position: absolute !important;
        top: 16px;
        right: 16px;
        width: auto !important;
        max-width: 60px;
        flex: none !important;
        background: transparent !important;
        z-index: 5;
    }
    /* Ama header gorseli VARSA sag yarida gorunsun */
    .merchant-top-header .right-infox:has(.el-image) {
        position: relative !important;
        flex: 0 0 42% !important;
        max-width: 42% !important;
        top: auto;
        right: auto;
        border-radius: 14px;
        overflow: hidden;
    }

    /* Logo - modern kart */
    .merchant-top-header .left-info .img-thumbnail,
    .merchant-top-header .left-info .el-image {
        border-radius: 16px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.1);
        border: 1px solid #f0f0f0 !important;
        padding: 8px !important;
        background: #fff;
    }

    /* Restoran adi - buyuk kalin */
    .merchant-top-header .left-info h4 {
        font-size: 1.75rem;
        font-weight: 800;
        color: #1a1a1a;
        margin: 6px 0 10px;
    }

    /* Cuisine + bilgi satirlari - yatay, chip benzeri */
    .merchant-top-header .left-info ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 10px;
        list-style: none;
    }
    .merchant-top-header .left-info ul li {
        color: #555;
        font-size: 0.92rem;
    }
    .merchant-top-header .info-items-dot-separator {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #ccc;
        display: inline-block;
    }
    .merchant-top-header .left-info .zmdi-star {
        color: #f59e0b;
    }

    /* Favori butonu - dairesel beyaz */
    .merchant-top-header .fav-wrap {
        background: rgba(255,255,255,0.95);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    /* Servis tablari (Delivery/Pickup/Takeout) - modern */
    .merchant-top-header .el-radio-button__inner,
    .merchant-top-header component-merchant-services {
        margin-top: 8px;
    }
}

/* Menu kartlari - sıkı, modern (tum ekranlar) */
.section-menu .items-menu,
.menu-item-row,
.item-lists .item {
    border-radius: 14px !important;
    transition: box-shadow 0.15s ease;
}
.section-menu .items-menu:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Sepet (Warenkorb) - modern kart */
@media (min-width: 992px) {
    .cart-wrap,
    #vue-cart .cart-container,
    .cart-sidebar {
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    }
}

/* Checkout butonu - belirgin */
.btn-checkout,
.cart-checkout-btn {
    border-radius: 12px !important;
    font-weight: 700;
}
/* end RESTORAN DETAY DESKTOP */


/* ============================================================ */
/* RESTORAN DETAY ALT BOLUMLER (about/gallery/address/hours)    */
/* ============================================================ */
/* Bozuk/yuklenmemis section ikonlarini gizle */
#section-about .img-20,
#section-gallery .img-20,
#section-address .img-20 {
    display: none !important;
}
/* Section basliklari - ikonsuz, temiz */
#section-about h5,
#section-gallery h5,
#section-address h5 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 4px;
}
/* Bolumler arasi cizgi + nefes */
#section-about,
#section-gallery,
#section-address {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    border-top: 1px solid #f0f0f0;
}
/* Adres + saatler kartlari - modern */
#section-address .d-flex {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
#section-address p {
    color: #555;
    font-size: 0.92rem;
    line-height: 1.5;
}
#section-address a {
    color: #ff6b35 !important;
    font-weight: 600;
}
/* Opening hours tablosu - temiz satirlar */
#section-address table {
    border-collapse: collapse;
}
#section-address table td {
    padding: 6px 0 !important;
    font-size: 0.9rem;
    color: #444;
    border-bottom: 1px solid #f5f5f5;
}
#section-address table td:first-child {
    color: #777;
    padding-right: 24px !important;
}
#section-address table td.bold {
    font-weight: 600;
    color: #1a1a1a;
}
/* Kirik gallery gorseli - placeholder guzel */
#section-gallery img.lazy {
    border-radius: 12px;
    background: #f5f5f5;
    min-height: 120px;
    object-fit: cover;
}
#section-gallery img[src=""],
#section-gallery img:not([src]) {
    min-height: 120px;
    background: linear-gradient(135deg, #fff5ec, #ffe8d4);
}
/* end RESTORAN ALT BOLUMLER */


/* ============================================================ */
/* ANA SAYFA CANLANDIRMA - mikro-etkilesimler + animasyonlar    */
/* Wolt/Lieferando 2025 tarzi - sadece CSS                      */
/* ============================================================ */

/* --- Giris animasyonlari (fade + yukari kayma) --- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}

/* Hero icerigi yumusak girsin */
#main-search-banner .banner-center {
    animation: fadeUp 0.7s ease both;
}

/* Bolum basliklari girerken */
.howto-head,
#vue-home-widgets .container > h1,
#vue-home-widgets .container > h5.section-title {
    animation: fadeUp 0.6s ease both;
}

/* How-to adimlari sirayla girsin */
.howto-step {
    animation: fadeUp 0.6s ease both;
}
.howto-step:nth-child(1) { animation-delay: 0.05s; }
.howto-step:nth-child(2) { animation-delay: 0.18s; }
.howto-step:nth-child(3) { animation-delay: 0.31s; }

/* How-to ikonlari hover'da canlansin */
.howto-step:hover .howto-icon {
    animation: floatY 1.4s ease-in-out infinite;
    color: #e85826;
}
.howto-icon {
    transition: transform 0.25s ease, color 0.25s ease;
}
.howto-step:hover .howto-icon {
    transform: scale(1.08);
}

/* --- Cuisine (mutfak) daireleri - canli hover --- */
.cuisine-item,
[class*="cuisine"] a,
components-cuisine-list a {
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.cuisine-item:hover,
components-cuisine-list a:hover {
    transform: translateY(-6px) scale(1.04);
}
/* Cuisine daire gorseli - hover'da hafif buyu + golge */
.cuisine-item img,
components-cuisine-list img {
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.cuisine-item:hover img,
components-cuisine-list img:hover {
    box-shadow: 0 8px 20px rgba(255,107,53,0.25);
}

/* --- Restoran kartlari - Wolt tarzi yumusak lift --- */
.rounded-box {
    transition: transform 0.25s cubic-bezier(0.34,1.4,0.64,1),
                box-shadow 0.25s ease !important;
    will-change: transform;
}
.rounded-box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.14) !important;
}
/* Kart ici gorsel - hover'da hafif zoom (cerceve icinde) */
.rounded-box .swiper-image,
.rounded-box img.lazy,
.rounded-box .card-img {
    transition: transform 0.4s ease;
}
.rounded-box:hover .swiper-image,
.rounded-box:hover img.lazy {
    transform: scale(1.06);
}

/* --- Arama kutusu - focus'ta canli --- */
.home-search-wrap .search-geocomplete {
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.home-search-wrap .search-geocomplete:focus-within {
    box-shadow: 0 10px 40px rgba(255,107,53,0.28) !important;
    transform: translateY(-2px);
}
/* Yesil buton - hover pulse */
.home-search-wrap .flex-enabled-locate {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.home-search-wrap .flex-enabled-locate:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(62,207,142,0.4);
}

/* --- Swiper ok butonlari - modern hover --- */
.swiper-button-prev,
.swiper-button-next,
[class*="swiper-button"] {
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
[class*="swiper-button"]:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    background: #ff6b35 !important;
    color: #fff !important;
}

/* --- Bolum basliklarindaki turuncu alt cizgi - animasyonlu --- */
.howto-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    background: #ff6b35;
    border-radius: 2px;
    margin: 14px auto 0;
    animation: fadeIn 1s ease 0.3s both;
}

/* --- Mobil app bolumu telefon - hafif float --- */
.section-mobileapp img,
.section-newmobileapp img {
    animation: floatY 3.5s ease-in-out infinite;
}

/* --- Genel: link/buton gecisleri yumusak --- */
a, .btn {
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

/* Reduced motion - erisim */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* end ANA SAYFA CANLANDIRMA */


/* ============================================================ */
/* RESTORAN LISTE SAYFASI - PROFESYONEL (Wolt/Lieferando tarzi) */
/* Sadece CSS - Vue/modul degismedi                             */
/* ============================================================ */

/* --- Restoran kartlari - modern kart --- */
.row.no-gutters .rounded-box,
[href] .rounded-box,
.rounded-box.no-hover {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: transform 0.25s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.25s ease !important;
    height: 100%;
}
.rounded-box.no-hover:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.13) !important;
    border-color: #ffd9c7 !important;
}

/* Kart gorseli - sabit oran, dolgun */
.rounded-box .position-relative > .el-image,
.rounded-box .el-image {
    width: 100% !important;
    height: 170px !important;
    display: block;
}
.rounded-box .el-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease;
}
.rounded-box:hover .el-image img {
    transform: scale(1.05);
}
/* Logo placeholder gorseller icin - contain + acik zemin */
.rounded-box .el-image img[src*="placeholder"],
.rounded-box .el-image .image-slot {
    object-fit: contain !important;
    background: linear-gradient(135deg,#fff5ec,#ffe8d4);
    padding: 20px;
}

/* Kart ic bilgi alani */
.rounded-box .p-2 {
    padding: 14px 16px 16px !important;
}
.rounded-box h5 {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
}
.rounded-box .font-weight-light {
    color: #888 !important;
    font-size: 0.85rem !important;
    margin-bottom: 10px !important;
}

/* Rating/estimation/distance satiri - chip benzeri */
.rounded-box .d-flex.justify-content-between {
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
    font-size: 0.85rem;
    color: #555;
}
.rounded-box .gold-color,
.rounded-box .fa-star {
    color: #f59e0b !important;
}
.rounded-box .zmdi-time {
    color: #999;
}

/* Promo etiketi - modern badge */
.rounded-box .with-promo {
    background: #ff6b35 !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(255,107,53,0.35);
}

/* Favori butonu - dairesel beyaz sag ust */
.rounded-box .fav-floating {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Kapali restoran - grey overlay yumusak */
.make-grey {
    opacity: 0.65;
}
.layer-content .bold {
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* --- Sol filtre paneli - modern --- */
#section-filter,
.filter-sidebar,
.restaurants-filter {
    background: #fff;
}
.restaurants-filter h5,
#section-filter h5 {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 1rem;
}
/* Baslik "22 Geschafte" */
.restaurants-count,
h2:first-of-type {
    font-weight: 800;
}
/* Fiyat butonlari (€ €€ €€€) */
.price-range-btn,
[class*="price"] .btn {
    border-radius: 10px !important;
    transition: all 0.18s ease;
}
.price-range-btn:hover {
    background: #ff6b35 !important;
    color: #fff !important;
    border-color: #ff6b35 !important;
}
/* Checkbox'lar - turuncu accent */
.restaurants-filter input[type="checkbox"],
.restaurants-filter input[type="radio"] {
    accent-color: #ff6b35;
}

/* Kart giris animasyonu - sirayla fade-up */
.row.no-gutters > [class*="col-"] {
    animation: fadeUp 0.5s ease both;
}
/* end RESTORAN LISTE */


/* ============================================================ */
/* SOL FILTRE PANELI - PROFESYONEL (Wolt tarzi)                 */
/* Sadece CSS - form/modul degismedi                            */
/* ============================================================ */

/* Panel kart hissi */
.section-filter {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 8px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Filtre grubu satirlari */
.section-filter .filter-row {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 16px 0 !important;
}
.section-filter .filter-row:last-child {
    border-bottom: none !important;
}

/* Grup basliklari - net, kalin, ok isaretli */
.section-filter .filter-row > h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}
.section-filter .filter-row > h5 > a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}
.section-filter .filter-row > h5 > a::after {
    content: "\203A";
    font-size: 1.3rem;
    color: #bbb;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}
.section-filter .filter-row > h5 > a.collapsed::after {
    transform: rotate(0deg);
}
.section-filter .filter-row > h5 > a:hover {
    color: #ff6b35 !important;
}

/* Checkbox / radio - modern turuncu */
.section-filter .custom-control {
    padding: 4px 0 4px 28px;
    min-height: auto;
}
.section-filter .custom-control-label {
    color: #444;
    font-size: 0.9rem;
    cursor: pointer;
    padding-top: 1px;
    transition: color 0.15s ease;
}
.section-filter .custom-control-label::before {
    width: 20px;
    height: 20px;
    border: 2px solid #d5d5d5 !important;
    border-radius: 6px !important;
    background: #fff !important;
    left: -28px;
    top: 1px;
    transition: all 0.15s ease;
    box-shadow: none !important;
}
.section-filter .custom-radio .custom-control-label::before {
    border-radius: 50% !important;
}
/* Secili durum - turuncu */
.section-filter .custom-control-input:checked ~ .custom-control-label::before {
    background: #ff6b35 !important;
    border-color: #ff6b35 !important;
}
.section-filter .custom-control-input:checked ~ .custom-control-label {
    color: #1a1a1a;
    font-weight: 600;
}
.section-filter .custom-control-input:checked ~ .custom-control-label::after {
    left: -28px;
    top: 1px;
    width: 20px;
    height: 20px;
}
.section-filter .custom-control-label:hover {
    color: #ff6b35;
}

/* --- Fiyat butonlari (€ €€ €€€ €€€€) --- */
.section-filter .price-btn,
.section-filter [class*="price"] a,
.section-filter .btn-price {
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 10px !important;
    color: #666 !important;
    font-weight: 600;
    padding: 8px 0 !important;
    transition: all 0.18s ease;
    background: #fff !important;
}
.section-filter .price-btn:hover,
.section-filter [class*="price"] a:hover {
    border-color: #ff6b35 !important;
    color: #ff6b35 !important;
}
.section-filter .price-btn.active,
.section-filter [class*="price"] a.active {
    background: #ff6b35 !important;
    border-color: #ff6b35 !important;
    color: #fff !important;
}

/* --- Rating yildizlari --- */
.section-filter .fa-star,
.section-filter .zmdi-star,
.section-filter [class*="star"] {
    color: #f59e0b;
    transition: transform 0.15s ease;
}
.section-filter .star-empty,
.section-filter .fa-star-o {
    color: #ddd;
}
.section-filter [class*="star"]:hover {
    transform: scale(1.15);
}

/* --- Slider (Liefergebühr) --- */
.section-filter input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #f0e3d3;
    outline: none;
}
.section-filter input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff6b35;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255,107,53,0.4);
}
.section-filter input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff6b35;
    border: none;
    cursor: pointer;
}
.el-slider__bar {
    background: #ff6b35 !important;
}
.el-slider__button {
    border-color: #ff6b35 !important;
}

/* "Mehr anzeigen +" linki */
.section-filter a[href*="mehr"],
.section-filter .show-more {
    color: #ff6b35 !important;
    font-weight: 600;
    font-size: 0.88rem;
}

/* "22 Geschafte" baslik */
.restaurants-count,
.result-count {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 20px;
}
/* end SOL FILTRE PANELI */