/* =========================================================
Öz Lezzet Börek - QR Menü Ana Stil
========================================================= */

:root{
--primary:#8b0000;
--primary-dark:#5f0000;
--secondary:#111;
--gold:#d6a24a;
--cream:#f8f4ee;
--white:#fff;
--text:#222;
--text-soft:#666;
--shadow:0 10px 30px rgba(0,0,0,.12);
--radius:18px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
width:100%;
overflow-x:hidden;
}

body{
font-family:Poppins,Arial,sans-serif;
background:var(--cream);
color:var(--text);
line-height:1.6;
padding-bottom:140px;
}

.container{
max-width:1200px;
margin:auto;
padding:0 16px;
}

/* =========================================================
HEADER
========================================================= */

.qr-header{
position:sticky;
top:0;
background:#111;
z-index:99999;
box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.qr-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 0;
position:relative;
}

.qr-logo{
display:flex;
align-items:center;
gap:10px;
}

.qr-logo img{
height:46px;
}

.qr-logo-text{
display:flex;
flex-direction:column;
line-height:1.1;
}

.qr-logo-text strong{
color:#fff;
font-size:16px;
}

.qr-logo-text span{
color:#bbb;
font-size:12px;
}

/* =========================================================
MENU
========================================================= */

.qr-nav{
display:flex;
align-items:center;
gap:20px;
}

.qr-nav a{
color:#fff;
text-decoration:none;
padding:8px 16px;
border-radius:20px;
font-size:14px;
transition:.25s;
white-space:nowrap;
}

.qr-nav a:hover{
background:#8b0000;
}

.qr-nav a.active{
background:#8b0000;
}

/* =========================================================
HEADER SEPET
========================================================= */

.header-cart{
display:flex;
align-items:center;
gap:8px;
background:#8b0000;
color:#fff;
padding:6px 14px;
border-radius:25px;
font-weight:500;
position:relative;
text-decoration:none;
height:38px;
flex:0 0 auto;
}

/* =========================================================
PRODUCTS
========================================================= */

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:18px;
padding:30px 0;
}

.product-card{
background:#f1f1f1;
border-radius:30px;
padding:14px;
box-shadow:var(--shadow);
transition:.3s;
display:flex;
flex-direction:column;
height:100%;
text-align:center;

max-width:300px;   /* 🔥 EKLENDİ */
margin:auto;        /* 🔥 EKLENDİ */
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:900px){

.menu-toggle{
display:block;
cursor:pointer;
font-size:24px;
color:#fff;
padding:10px;
position:relative;
z-index:100000;
}

.qr-nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:#111;
flex-direction:column;
display:none;
padding:20px;
z-index:9999;
}

.qr-nav.active{
display:flex;
}

.qr-nav a{
width:100%;
text-align:center;
padding:12px 0;
}

.header-cart{
margin-top:10px;
justify-content:center;
}

.cart-text{
display:none;
}

}

@media(min-width:901px){

.qr-nav{
display:flex;
}

.menu-toggle{
display:none;
}

}

.product-image{
width:100%;
aspect-ratio:1/1;
overflow:hidden;
border-radius:18px;
margin-bottom:8px;
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}

.product-content{
flex:1;
display:flex;
flex-direction:column;
}

.product-title{
font-size:16px;
font-weight:600;
margin-top:6px;
}

.product-desc{
font-size:13px;
color:#777;
margin-top:4px;
}

.cart-btn{
display:flex;
align-items:center;
justify-content:center;
margin-top:10px;
width:100%;
background:none;
border:none;
cursor:pointer;
}

.cart-btn .cart-icon{
width:160px;
max-width:100%;
height:auto;
}

.product-grid{
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* =========================================
🔥 CART FIX
========================================= */

.cart-container .row{
display:flex !important;
flex-direction:row !important;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 0;
border-top:1px dashed #eee;
}

.cart-item{
background:#fff !important;
border-radius:14px !important;
padding:18px !important;
margin-bottom:20px !important;
border:1px solid #eee !important;
box-shadow:0 4px 14px rgba(0,0,0,.05) !important;
}

.cart-title{
font-size:18px !important;
font-weight:600 !important;
margin-bottom:12px !important;
text-align:center;
}

.row-left{
font-size:14px !important;
color:#444 !important;
flex:1;
text-align:center;
}

.qty-box{
display:flex !important;
align-items:center;
justify-content:center;
gap:10px;
}

.qty-btn{
background:#e53935 !important;
color:#fff !important;
border:none;
width:34px;
height:34px;
border-radius:6px;
font-size:18px;
}

.remove-btn{
background:#444 !important;
color:#fff !important;
border:none;
padding:6px 12px;
border-radius:6px;
}

#cartTotal{
width:100%;
text-align:right;
font-size:20px;
font-weight:600;
margin-top:15px;
}

/* ===== FINAL CLEAN FIX CART BUTTONS ===== */

.cart-buttons{
position:relative !important;
left:0 !important;
right:0 !important;
bottom:max(0px, env(safe-area-inset-bottom)) !important;
width:100% !important;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:10px !important;
padding:10px 10px calc(10px + env(safe-area-inset-bottom)) 10px !important;
background:#ffffff !important;
z-index:99999 !important;
box-shadow:0 -2px 10px rgba(0,0,0,.08) !important;
}

.cart-buttons button{
width:130px !important;
height:60px !important;
border:none !important;
outline:none !important;
background-color:transparent !important;
background-size:100% 100% !important;
background-repeat:no-repeat !important;
background-position:center !important;
opacity:1 !important;
visibility:visible !important;
appearance:none !important;
-webkit-appearance:none !important;
}

.btn-back{
background-image:url('../images/btn-back.png') !important;
}

.btn-clear{
background-image:url('../images/btn-clear.png') !important;
}

.btn-order{
background-image:url('../images/btn-order.png') !important;
}

@media(max-width:768px){
.cart-buttons{
padding:8px 8px calc(8px + env(safe-area-inset-bottom)) 8px !important;
gap:8px !important;
}

.cart-buttons button{
width:32% !important;
height:52px !important;
min-width:0 !important;
background-size:100% 100% !important;
}
}

/* ===== FLOATING BUTTONS FIX (ANDROID + GENEL) ===== */

/* farklı class isimleri kullanılmışsa hepsi yakalansın */
.whatsapp-btn,
.whatsapp-button,
.btn-whatsapp,
a.whatsapp-btn,
a.whatsapp-button,
a.btn-whatsapp,
.garson-btn,
.garson-button,
.btn-garson,
.waiter-btn,
.call-waiter-btn,
a.garson-btn,
a.garson-button,
a.btn-garson,
a.waiter-btn,
a.call-waiter-btn{
position:fixed !important;
right:15px !important;
left:auto !important;
z-index:99998 !important;
width:56px !important;
height:56px !important;
min-width:56px !important;
min-height:56px !important;
border-radius:50% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
margin:0 !important;
box-shadow:0 4px 12px rgba(0,0,0,.20) !important;
transform:none !important;
filter:none !important;
backdrop-filter:none !important;
text-decoration:none !important;
overflow:hidden !important;
}

/* WhatsApp */
.whatsapp-btn,
.whatsapp-button,
.btn-whatsapp,
a.whatsapp-btn,
a.whatsapp-button,
a.btn-whatsapp{
bottom:90px !important;
background:#25D366 !important;
}

/* Garson çağır */
.garson-btn,
.garson-button,
.btn-garson,
.waiter-btn,
.call-waiter-btn,
a.garson-btn,
a.garson-button,
a.btn-garson,
a.waiter-btn,
a.call-waiter-btn{
bottom:160px !important;
background:#ff6b00 !important;
}

/* ikon netliği */
.whatsapp-btn img,
.whatsapp-button img,
.btn-whatsapp img,
a.whatsapp-btn img,
a.whatsapp-button img,
a.btn-whatsapp img,
.garson-btn img,
.garson-button img,
.btn-garson img,
.waiter-btn img,
.call-waiter-btn img,
a.garson-btn img,
a.garson-button img,
a.btn-garson img,
a.waiter-btn img,
a.call-waiter-btn img,
.whatsapp-btn svg,
.whatsapp-button svg,
.btn-whatsapp svg,
a.whatsapp-btn svg,
a.whatsapp-button svg,
a.btn-whatsapp svg,
.garson-btn svg,
.garson-button svg,
.btn-garson svg,
.waiter-btn svg,
.call-waiter-btn svg,
a.garson-btn svg,
a.garson-button svg,
a.btn-garson svg,
a.waiter-btn svg,
a.call-waiter-btn svg{
width:28px !important;
height:28px !important;
max-width:28px !important;
max-height:28px !important;
object-fit:contain !important;
display:block !important;
filter:none !important;
transform:none !important;
image-rendering:auto !important;
}
/* MI Browser fallback */
@supports not (position: sticky) {
    .floating-actions{
        bottom: 140px !important;
    }
}

@media(max-width:768px){
.whatsapp-btn,
.whatsapp-button,
.btn-whatsapp,
a.whatsapp-btn,
a.whatsapp-button,
a.btn-whatsapp{
bottom:95px !important;
}

.garson-btn,
.garson-button,
.btn-garson,
.waiter-btn,
.call-waiter-btn,
a.garson-btn,
a.garson-button,
a.btn-garson,
a.waiter-btn,
a.call-waiter-btn{
bottom:165px !important;
}
}
/* ===== FLOATING BUTTON FINAL (SADECE DOĞRU CLASS) ===== */

.floating-actions{
    position: fixed;
    right: 15px;
    bottom: 100px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.floating-garson,
.floating-whatsapp{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.floating-garson{
    background: #ff6b00 !important;
}

.floating-whatsapp{
    background: #25D366;
}
.cart-count.cart-bounce {
    animation: bounce 0.4s ease;
}

@keyframes bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
/* =========================================================
🔥🔥 SLIDER FIX (KESİLME PROBLEMİ ÇÖZÜLDÜ)
========================================================= */

.swiper{
width:100%;
}

.swiper-slide{
display:flex;
align-items:center;
justify-content:center;
background:#fff;
}

.swiper-slide img{
width:100%;
height:auto;
max-height:420px;
object-fit:contain;
}
/* =========================================================
🔥🔥 KATEGORİ PİL GORUNUMU
========================================================= */
.category-bar{
display:flex;
gap:10px;
overflow-x:auto;
padding:10px 0;
margin-bottom:15px;
scrollbar-width:none;
}

.category-bar::-webkit-scrollbar{
display:none;
}

.cat-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    background:#8b0000; /* 🔥 bordo */
    border-radius:20px;
    font-size:13px;
    color:#fff; /* yazı beyaz */
    text-decoration:none;
    box-shadow:0 3px 10px rgba(0,0,0,0.12);
    white-space:nowrap;
    flex:0 0 auto;
    transition:.2s;
}

/* hover efekti daha koyu */
.cat-pill:hover{
    background:#5f0000;
    color:#fff;
}