/* ==========================================================================
   Bef Cafe — QR Menü stil dosyası
   Mobil öncelikli, telefon genişliğinde ortalanmış tasarım.
   ========================================================================== */

:root{
    --primary:   #10412b;
    --primary-2: #0b3220;
    --olive:     #708a00;
    --accent:    #dda900;
    --bg:        #f4f5f3;
    --card:      #ffffff;
    --text:      #1f2a24;
    --muted:     #7b7b7b;
    --line:      #e7eae6;
    --shadow:    0 6px 20px rgba(16,65,43,.10);
    --radius:    16px;
    --shell:     520px;          /* telefon kabuğu genişliği */
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; }

body{
    font-family:'Poppins', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
    /* Telefon kabuğu: geniş ekranda iki yanda yumuşak arka plan */
    max-width:var(--shell);
    margin-inline:auto;
    position:relative;
    min-height:100vh;
    overflow-x:hidden;
    /* Yapışkan footer: içerik kısa olsa da footer en altta kalsın */
    display:flex;
    flex-direction:column;
}
@media (min-width:560px){
    /* Masaüstünde kabuğun iki yanı: modern charcoal gri arka plan */
    html{ background:
        radial-gradient(1100px 560px at 50% -8%, #3a3f46 0, transparent 62%),
        #2a2e33; }
    body{ box-shadow:0 0 60px rgba(0,0,0,.35); }
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* ---- Açılış animasyonu --------------------------------------------------- */
.preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--primary);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;
}
.preloader.hidden{ opacity:0; visibility:hidden; }
.preloader-mark{
    width:78px; height:78px; border-radius:50%;
    background:#fff; color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:38px;
    animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

/* ---- Üst çubuk ----------------------------------------------------------- */
.navbar{
    position:sticky; top:0; z-index:50;
    height:60px;
    background:var(--primary);
    color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 12px;
    box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.icon-btn{
    width:42px; height:42px; border-radius:12px;
    color:#fff; font-size:18px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .2s ease, transform .15s ease;
}
.icon-btn:active{ transform:scale(.92); background:rgba(255,255,255,.12); }
.brand{ display:flex; align-items:center; gap:8px; }
.brand-text{ font-weight:800; font-size:21px; letter-spacing:.5px; color:#fff; }
.brand-logo{ height:38px; width:auto; object-fit:contain; }

/* ---- Yan menü ------------------------------------------------------------ */
.sidenav{
    position:fixed; top:0; left:0; bottom:0; z-index:200;
    width:80%; max-width:330px;
    background:var(--card);
    transform:translateX(-105%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
    box-shadow:6px 0 30px rgba(0,0,0,.25);
}
.sidenav.open{ transform:translateX(0); }
.sidenav-head{
    background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 16px;
}
.sidenav-title{ font-weight:700; font-size:18px; }
.sidenav-list{ flex:1; min-height:0; overflow-y:auto; padding:8px 0; }
.sidenav-link{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:13px 18px; font-weight:500; color:var(--text);
    border-bottom:1px solid var(--line);
}
.sidenav-link i{ color:var(--primary); width:18px; }
.sidenav-link.active{ color:var(--primary); background:#eef4f0; font-weight:700; }
.count-badge{
    background:var(--bg); color:var(--muted);
    font-size:12px; font-weight:600;
    min-width:24px; height:24px; padding:0 7px;
    border-radius:90px; display:inline-flex; align-items:center; justify-content:center;
}
.sidenav-foot{
    display:flex; gap:10px;
    padding:16px 18px calc(24px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
}
.sidenav-foot a{
    width:42px; height:42px; border-radius:50%;
    background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.overlay{
    position:fixed; inset:0; z-index:150;
    background:rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.overlay.show{ opacity:1; visibility:visible; }

/* ---- Arama --------------------------------------------------------------- */
.search-bar{
    position:sticky; top:60px; z-index:49;
    display:none; align-items:center; gap:10px;
    background:#fff; padding:10px 14px;
    border-bottom:1px solid var(--line);
}
.search-bar.open{ display:flex; }
.search-bar > i{ color:var(--primary); font-size:16px; }
.search-bar input{
    flex:1; border:none; outline:none; font-size:15px;
    font-family:inherit; background:transparent; color:var(--text);
}
/* Tarayıcının yerleşik (mavi) temizleme butonunu kaldır — kendi X'imiz var */
.search-bar input[type="search"]::-webkit-search-cancel-button,
.search-bar input[type="search"]::-webkit-search-decoration{
    -webkit-appearance:none;
    appearance:none;
}
.search-bar .icon-btn{ color:var(--muted); width:32px; height:32px; }

/* ---- Canlı arama sonuçları ----------------------------------------------- */
.search-results{
    position:fixed; left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--shell); z-index:52;
    background:#fff; max-height:64vh; overflow-y:auto;
    box-shadow:0 16px 30px rgba(0,0,0,.18);
    border-top:1px solid var(--line);
    -webkit-overflow-scrolling:touch;
}
.search-results[hidden]{ display:none; }
.sr-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-bottom:1px solid var(--line);
}
.sr-item:active{ background:var(--bg); }
.sr-thumb{ flex:0 0 44px; width:44px; height:44px; border-radius:10px; object-fit:cover; background:var(--primary); }
.sr-info{ flex:1; min-width:0; }
.sr-name{ font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-cat{ font-size:12px; color:var(--muted); margin-top:1px; }
.sr-price{ font-size:14px; font-weight:700; color:var(--primary); white-space:nowrap; }
.sr-empty{ padding:24px 14px; text-align:center; color:var(--muted); font-size:14px; }
.sr-foot{ display:block; padding:12px 14px; text-align:center; font-size:13.5px; font-weight:700; color:var(--primary); }

/* ---- Kategori şeridi (pill) ---------------------------------------------- */
.catbar{
    position:sticky; top:60px; z-index:48;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 12px rgba(16,65,43,.05);
}
.catbar-track{
    display:flex; gap:8px; overflow-x:auto; padding:11px 14px;
    scrollbar-width:none;
}
.catbar-track::-webkit-scrollbar{ display:none; }
.pill{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 15px; border-radius:90px;
    background:var(--bg); color:var(--text);
    font-size:14px; font-weight:600; white-space:nowrap;
    border:1px solid transparent;
    transition:background .2s, color .2s;
}
.pill.active{ background:var(--primary); color:#fff; }
.pill-count{
    font-size:11px; font-weight:700;
    background:rgba(0,0,0,.10); color:inherit;
    padding:1px 7px; border-radius:90px;
}
.pill.active .pill-count{ background:rgba(255,255,255,.22); }

/* ---- Sayfa gövdesi ------------------------------------------------------- */
.page{ padding-bottom:30px; flex:1 0 auto; }
.section{ padding:20px 14px 4px; }
.section-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px;
}
.section-title{
    font-size:19px; font-weight:700; color:var(--primary);
    display:flex; align-items:center; gap:8px;
}
.section-title::before{
    content:''; width:5px; height:20px; border-radius:90px;
    background:var(--accent); display:inline-block;
}
.section-link{ font-size:13px; color:var(--muted); font-weight:500; }

/* ---- Karşılama / hero ---------------------------------------------------- */
.hero{
    margin:14px; border-radius:var(--radius); overflow:hidden;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    color:#fff; padding:26px 22px;
    position:relative;
    box-shadow:var(--shadow);
}
.hero::after{
    content:'\f0f4'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; right:-10px; bottom:-22px;
    font-size:150px; opacity:.10;
}
.hero h1{ font-size:24px; font-weight:800; margin-bottom:6px; }
.hero p{ font-size:14px; opacity:.9; max-width:80%; }
.hero .hero-tag{
    display:inline-block; margin-bottom:12px;
    background:rgba(255,255,255,.16); color:#fff;
    padding:5px 12px; border-radius:90px; font-size:12px; font-weight:600;
}

/* ---- Hero görsel slider -------------------------------------------------- */
.hero-slider{
    position:relative; margin:14px; border-radius:var(--radius); overflow:hidden;
    aspect-ratio:16 / 10; background:var(--primary); box-shadow:var(--shadow);
    touch-action:pan-y;
}
.hero-track{ display:flex; height:100%; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.hero-slide{ position:relative; flex:0 0 100%; width:100%; height:100%; display:block; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-caption{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:18px 20px 30px; color:#fff;
    background:linear-gradient(to top, rgba(7,30,20,.74) 4%, rgba(7,30,20,.18) 42%, transparent 68%);
}
.hero-caption h2{ font-size:23px; font-weight:800; line-height:1.15; }
.hero-caption p{ font-size:14px; opacity:.94; margin-top:4px; max-width:88%; }
.hero-dots{
    position:absolute; left:0; right:0; bottom:10px; z-index:3;
    display:flex; justify-content:center; gap:7px;
}
.hero-dot{
    width:8px; height:8px; padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,.55); cursor:pointer;
    transition:width .3s ease, background .3s ease;
}
.hero-dot.active{ width:22px; border-radius:90px; background:#fff; }

/* ---- Öne çıkanlar carousel ("Favori Lezzetlerimiz") ---------------------- */
.featured-track{
    display:flex; gap:14px; overflow-x:auto;
    padding:4px 14px 16px; scroll-snap-type:x proximity;
    scroll-padding-inline:14px;
    scrollbar-width:none;
}
.featured-track::-webkit-scrollbar{ display:none; }
.fav-card{
    flex:0 0 auto; width:118px; text-align:center; scroll-snap-align:start;
}
.fav-thumb{
    width:118px; height:118px; border-radius:50%;
    object-fit:cover; border:3px solid #fff;
    box-shadow:var(--shadow); background:var(--primary);
}
.fav-name{
    margin-top:8px; font-size:13px; font-weight:600; color:var(--text);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    line-height:1.25;
}
.fav-price{ font-size:12px; font-weight:700; color:var(--primary); margin-top:2px; }

/* ---- Kategori kartları ızgarası ------------------------------------------ */
.cat-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
    padding:4px 14px;
}
.cat-card{
    position:relative; border-radius:var(--radius); overflow:hidden;
    aspect-ratio:1 / 1; box-shadow:var(--shadow);
    display:block;
}
.cat-card-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
}
.cat-card:active .cat-card-bg{ transform:scale(1.06); }
.cat-card-overlay{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(11,50,32,.92) 8%, rgba(16,65,43,.25) 70%, rgba(16,65,43,.05));
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:12px;
}
.cat-card-name{ color:#fff; font-weight:700; font-size:15px; line-height:1.2; }
.cat-card-count{
    color:#dfe7e2; font-size:12px; font-weight:500; margin-top:2px;
}
.cat-card-arrow{
    position:absolute; top:10px; right:10px;
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px;
}

/* ---- Ürün listesi (kategori sayfası) ------------------------------------- */
.product-list{ padding:6px 14px; display:flex; flex-direction:column; gap:12px; }
.product-row{
    display:flex; gap:12px; background:var(--card);
    border-radius:var(--radius); padding:10px;
    box-shadow:var(--shadow); position:relative;
    align-items:stretch;
}
.product-thumb{
    flex:0 0 96px; width:96px; height:96px; border-radius:12px;
    object-fit:cover; background:var(--primary);
}
.product-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.product-name{
    font-size:15px; font-weight:700; color:var(--text); line-height:1.25;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.product-desc{
    font-size:12.5px; color:var(--muted); margin-top:3px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-foot{
    margin-top:auto; padding-top:8px;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.price{ font-size:16px; font-weight:800; color:var(--primary); }
.price-old{ font-size:12px; color:var(--muted); text-decoration:line-through; margin-left:6px; font-weight:600; }

.badge{
    font-size:10.5px; font-weight:700; letter-spacing:.3px;
    padding:2px 8px; border-radius:90px; color:#fff; background:var(--olive);
    text-transform:uppercase;
}
.badge.gold{ background:var(--accent); color:#3a2b00; }
.badge.red{ background:#b70021; }

/* ---- Ürün detay ---------------------------------------------------------- */
.detail-hero{ position:relative; }
.detail-img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; background:var(--primary); }
.detail-back{
    position:absolute; top:14px; left:14px; z-index:5;
    width:42px; height:42px; border-radius:50%;
    background:rgba(0,0,0,.45); color:#fff; backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; font-size:16px;
}
.detail-body{
    background:var(--card); border-radius:24px 24px 0 0;
    margin-top:-26px; position:relative; z-index:2;
    padding:22px 18px 26px;
}
.detail-cat{
    color:var(--olive); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px;
}
.detail-name{ font-size:24px; font-weight:800; margin:4px 0 10px; line-height:1.2; }
.detail-price-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.detail-price{ font-size:26px; font-weight:800; color:var(--primary); }
.detail-desc{ font-size:14.5px; color:#4a554e; line-height:1.65; }
.detail-meta{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;
}
.meta-chip{
    display:flex; align-items:center; gap:7px;
    background:var(--bg); border-radius:12px; padding:10px 14px;
    font-size:13px; font-weight:600; color:var(--text);
}
.meta-chip i{ color:var(--primary); }

.detail-cta{
    position:sticky; bottom:0;
    background:var(--card); border-top:1px solid var(--line);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    display:flex; gap:12px; align-items:center;
}
.btn-primary{
    flex:1; background:var(--primary); color:#fff;
    padding:14px; border-radius:14px; font-weight:700; font-size:15px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .15s ease;
}
.btn-primary:active{ transform:scale(.98); }

/* ---- Boş durum & arama --------------------------------------------------- */
.empty{
    text-align:center; padding:60px 24px; color:var(--muted);
}
.empty i{ font-size:54px; color:var(--line); margin-bottom:14px; }
.empty h3{ color:var(--text); margin-bottom:6px; font-size:18px; }

/* ---- Instagram banner ---------------------------------------------------- */
.ig-banner{ padding:18px 14px; }
.ig-banner-inner{
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(120deg,#833ab4,#fd1d1d,#fcb045);
    color:#fff; padding:16px 18px; border-radius:var(--radius);
    box-shadow:0 8px 22px rgba(253,29,29,.25);
}
.ig-banner-inner > i{ font-size:34px; }
.ig-banner-inner div{ flex:1; display:flex; flex-direction:column; }
.ig-banner-inner strong{ font-size:15px; }
.ig-banner-inner span{ font-size:13px; opacity:.92; }
.ig-cta{
    background:#fff; color:#c1185a; font-weight:700; font-size:13px;
    padding:8px 14px; border-radius:90px;
}

/* ---- Alt bilgi ----------------------------------------------------------- */
.site-footer{
    background:var(--primary-2); color:#cfe0d6;
    text-align:center; padding:20px 18px;
}
.footer-brand{ font-size:22px; font-weight:800; color:#fff; margin-bottom:10px; }
.footer-line{ font-size:13px; margin:4px 0; opacity:.9; }
.footer-line i{ color:var(--accent); margin-right:6px; }
.footer-social{ display:flex; justify-content:center; gap:14px; margin:16px 0; }
.footer-social a{
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.10); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:18px;
    transition:background .2s;
}
.footer-social a:active{ background:rgba(255,255,255,.22); }
.footer-credit{
    display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap;
    font-size:14px; margin:0; letter-spacing:.2px;
}
.footer-credit span{ color:var(--accent); font-weight:700; }
.footer-logo{ height:15px; width:auto; display:block; position:relative; top:-2px; }