/* ==========================================================================
   QR MENÜ — Yaz teması
   Baloo 2 (başlıklar) + Nunito (gövde). 4 tema: sunset / sea / sorbet / night
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
    margin:0;
    font-family:'Nunito',system-ui,-apple-system,sans-serif;
    color:var(--ink);
    background:var(--bg);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ---- TEMALAR ---- */
.theme-sunset{
    --bg:linear-gradient(180deg,#fff3e6 0%,#ffe8d6 100%);
    --ink:#3a2a3d; --muted:#8a6f7a;
    --card:#ffffff; --card-edge:#ffe1cf;
    --brand1:#ff6b4a; --brand2:#ff9d3d; --brand3:#ff5e8a;
    --accent:#2ec4b6; --price:#ff5e5b; --price-ink:#fff;
    --hero-grad:linear-gradient(135deg,#ff6b4a 0%,#ff8a3d 45%,#ff5e8a 100%);
    --topbar:rgba(255,247,238,.92);
}
.theme-sea{
    --bg:linear-gradient(180deg,#eafaf7 0%,#fff8ec 100%);
    --ink:#0f3d3a; --muted:#5e8c87;
    --card:#ffffff; --card-edge:#cdeee8;
    --brand1:#11a8a0; --brand2:#2ec4b6; --brand3:#ffb627;
    --accent:#ff6b4a; --price:#0e9488; --price-ink:#fff;
    --hero-grad:linear-gradient(135deg,#0e9488 0%,#2ec4b6 50%,#7fdad0 100%);
    --topbar:rgba(234,250,247,.92);
}
.theme-sorbet{
    --bg:linear-gradient(180deg,#fff0f6 0%,#fef6ec 100%);
    --ink:#5a3650; --muted:#a87f9a;
    --card:#ffffff; --card-edge:#ffdbe9;
    --brand1:#ff8fb1; --brand2:#ffb38a; --brand3:#a0e7c8;
    --accent:#ff8fb1; --price:#ff6f91; --price-ink:#fff;
    --hero-grad:linear-gradient(135deg,#ffafcc 0%,#ffc8a2 50%,#bde0fe 100%);
    --topbar:rgba(255,240,246,.92);
}
.theme-night{
    --bg:linear-gradient(180deg,#1b1733 0%,#2a1f43 100%);
    --ink:#f4eeff; --muted:#b3a6d6;
    --card:#2c2350; --card-edge:#43356f;
    --brand1:#ff6b4a; --brand2:#ffb627; --brand3:#ff5e8a;
    --accent:#2ee6d6; --price:#ffb627; --price-ink:#2a1f43;
    --hero-grad:linear-gradient(135deg,#5b2a86 0%,#ff5e8a 50%,#ff8a3d 100%);
    --topbar:rgba(27,23,51,.92);
}

/* ---- ÜST BAR ---- */
.topbar{
    position:sticky;top:0;z-index:40;
    background:var(--topbar);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:10px 18px;
    display:flex;align-items:center;
    border-bottom:2px dashed var(--card-edge);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;}
.brand:active{opacity:.7;}
.logo{height:38px;width:38px;object-fit:contain;border-radius:10px;}
.logo-emoji{font-size:30px;line-height:1;}
.brand-name{
    font-family:'Baloo 2',cursive;font-weight:800;font-size:20px;
    color:var(--brand1);letter-spacing:.3px;
}

/* ---- HERO ---- */
.hero{
    position:relative;
    background:var(--hero-grad);
    color:#fff;
    padding:38px 22px 54px;
    overflow:hidden;
    text-align:center;
}
.hero-sun{
    position:absolute;top:-60px;right:-40px;
    width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.45),rgba(255,255,255,0) 70%);
    animation:floatSun 6s ease-in-out infinite;
}
@keyframes floatSun{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
.hero-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;}
.hero-title{
    font-family:'Baloo 2',cursive;font-weight:800;
    font-size:clamp(30px,8vw,46px);
    margin:0 0 6px;line-height:1.05;
    text-shadow:0 3px 0 rgba(0,0,0,.08);
}
.hero-tag{
    font-size:clamp(15px,4vw,18px);font-weight:600;
    margin:0 auto 18px;max-width:520px;opacity:.96;
}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.chip{
    background:rgba(255,255,255,.22);
    border:1.5px solid rgba(255,255,255,.5);
    color:#fff;font-weight:700;font-size:13px;
    padding:7px 14px;border-radius:50px;
    backdrop-filter:blur(4px);
}
.chip.wifi{cursor:pointer;}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:54px;z-index:1;}
.hero-wave path{fill:var(--bg);}
.theme-sunset .hero-wave path{fill:#fff3e6;}
.theme-sea .hero-wave path{fill:#eafaf7;}
.theme-sorbet .hero-wave path{fill:#fff0f6;}
.theme-night .hero-wave path{fill:#1b1733;}

/* ---- KATEGORİ SEKMELERİ ---- */
/* ---- KONTROLLER: ARAMA + KATEGORİ FİLTRELERİ (yapışkan) ---- */
.menu-controls{
    position:sticky;top:56px;z-index:30;
    background:var(--topbar);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    padding:12px 0 10px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    border-bottom:1px solid var(--card-edge);
}
.search-wrap{
    max-width:760px;margin:0 auto 11px;padding:0 16px;position:relative;
}
.search-ic{
    position:absolute;left:30px;top:50%;transform:translateY(-50%);
    font-size:15px;opacity:.65;pointer-events:none;
}
.search-input{
    width:100%;border:2px solid var(--card-edge);border-radius:50px;
    padding:12px 42px 12px 44px;font-size:15px;font-family:inherit;
    background:var(--card);color:var(--ink);
    transition:border-color .2s,box-shadow .2s;
    -webkit-appearance:none;appearance:none;
}
.search-input:focus{
    outline:none;border-color:var(--brand1);
    box-shadow:0 0 0 4px rgba(255,107,74,.13);
}
.search-input::placeholder{color:var(--muted);}
.search-input::-webkit-search-cancel-button{display:none;}
.search-clear{
    position:absolute;right:26px;top:50%;transform:translateY(-50%);
    border:none;background:var(--card-edge);color:var(--ink);
    width:26px;height:26px;border-radius:50%;font-size:12px;line-height:1;
    display:flex;align-items:center;justify-content:center;
}
.search-clear:hover{background:var(--brand1);color:#fff;}
.search-clear[hidden]{display:none;}

.cat-tabs{padding:0;}
.cat-tabs-inner{
    display:flex;gap:8px;overflow-x:auto;padding:2px 16px;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;
}
.cat-tabs-inner::-webkit-scrollbar{display:none;}
.cat-tab{
    flex:0 0 auto;scroll-snap-align:start;
    background:var(--card);
    border:2px solid var(--card-edge);
    color:var(--muted);font-weight:700;font-size:14px;font-family:inherit;
    padding:9px 16px;border-radius:50px;white-space:nowrap;cursor:pointer;
    transition:transform .15s,background .2s,color .2s,border-color .2s;
    display:flex;align-items:center;gap:6px;
}
.cat-tab-emoji{font-size:16px;}
.cat-tab:active{transform:scale(.96);}
.cat-tab.active{
    background:linear-gradient(135deg,var(--brand1),var(--brand2));
    color:#fff;border-color:transparent;
    box-shadow:0 6px 16px -4px var(--brand1);
}

/* ---- MENÜ ---- */
.menu{max-width:760px;margin:0 auto;padding:24px 16px 40px;}
.cat-section{scroll-margin-top:118px;margin-bottom:34px;}
.cat-heading{
    font-family:'Baloo 2',cursive;font-weight:800;
    font-size:24px;color:var(--brand1);
    margin:0 0 16px;display:flex;align-items:center;gap:10px;
    position:relative;
}
.cat-heading::after{
    content:"";flex:1;height:3px;border-radius:3px;
    background:repeating-linear-gradient(90deg,var(--card-edge) 0 8px,transparent 8px 14px);
}
.cat-heading-emoji{font-size:26px;}

.product-list{display:flex;flex-direction:column;gap:14px;}
.product{
    background:var(--card);
    border:2px solid var(--card-edge);
    border-radius:20px;
    padding:14px;
    display:flex;gap:14px;align-items:flex-start;
    box-shadow:0 8px 22px -14px rgba(0,0,0,.25);
    transition:transform .15s;
}
.product:active{transform:scale(.99);}
.product.featured{
    border-color:var(--brand2);
    background:
        linear-gradient(var(--card),var(--card)) padding-box,
        linear-gradient(135deg,var(--brand1),var(--brand2)) border-box;
    border:2px solid transparent;
}
.product-thumb{
    flex:0 0 auto;position:relative;border:none;padding:0;
    width:84px;height:84px;border-radius:16px;overflow:hidden;background:var(--card-edge);
}
.product-thumb img{width:100%;height:100%;object-fit:cover;}
.img-count{
    position:absolute;bottom:4px;right:4px;
    background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:700;
    padding:2px 6px;border-radius:50px;
}
.product-body{flex:1;min-width:0;}
.product-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.product-name{
    font-family:'Baloo 2',cursive;font-weight:700;font-size:17px;
    margin:0;color:var(--ink);line-height:1.2;
}
.star{color:var(--brand2);}
.product-desc{color:var(--muted);font-size:14px;margin-top:4px;}
.product-desc p{margin:0 0 4px;}

/* Bilet biçimli fiyat etiketi */
.price-tag{
    flex:0 0 auto;
    background:var(--price);color:var(--price-ink);
    font-family:'Baloo 2',cursive;font-weight:700;font-size:14px;
    padding:5px 12px;border-radius:8px;position:relative;white-space:nowrap;
}
.price-tag::before,.price-tag::after{
    content:"";position:absolute;top:50%;transform:translateY(-50%);
    width:8px;height:8px;border-radius:50%;background:var(--card);
}
.price-tag::before{left:-4px;}
.price-tag::after{right:-4px;}

/* ---- FİLTRE GEÇİŞ ANİMASYONU ---- */
@keyframes cardIn{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:none;}
}
.menu.swap .product{animation:cardIn .38s cubic-bezier(.22,.61,.36,1) both;}
.menu.swap .product:nth-child(1){animation-delay:.02s;}
.menu.swap .product:nth-child(2){animation-delay:.06s;}
.menu.swap .product:nth-child(3){animation-delay:.10s;}
.menu.swap .product:nth-child(4){animation-delay:.14s;}
.menu.swap .product:nth-child(5){animation-delay:.18s;}
.menu.swap .product:nth-child(6){animation-delay:.22s;}
.menu.swap .product:nth-child(n+7){animation-delay:.26s;}
.menu.swap .cat-heading{animation:cardIn .3s ease both;}
@media (prefers-reduced-motion:reduce){
    .menu.swap .product,.menu.swap .cat-heading{animation:none;}
}

/* ---- ARAMA SONUCU YOK ---- */
.no-results{text-align:center;padding:50px 20px;color:var(--muted);}
.no-results-emoji{font-size:46px;margin-bottom:10px;}
.no-results p{font-weight:700;margin:0 0 16px;font-size:16px;}
.nr-reset{
    background:linear-gradient(135deg,var(--brand1),var(--brand2));
    color:#fff;border:none;border-radius:50px;
    padding:11px 22px;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer;
    box-shadow:0 6px 16px -4px var(--brand1);
}
.nr-reset:active{transform:scale(.97);}

/* ---- BOŞ DURUM ---- */
.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-emoji{font-size:54px;margin-bottom:10px;}

/* ---- FOOTER ---- */
.site-footer{
    text-align:center;padding:30px 20px 40px;color:var(--muted);
    border-top:2px dashed var(--card-edge);margin-top:10px;
}
.site-footer .ig{
    display:inline-block;font-weight:800;color:var(--brand1);
    margin-bottom:10px;font-size:16px;
}
.site-footer .addr{font-size:14px;margin:6px 0;}
.site-footer .note{font-family:'Baloo 2',cursive;font-weight:600;color:var(--brand1);margin-top:14px;}

/* ---- LIGHTBOX ---- */
.lightbox{
    position:fixed;inset:0;z-index:100;
    background:rgba(20,12,28,.92);
    display:none;align-items:center;justify-content:center;
    padding:20px;
}
.lightbox.open{display:flex;}
.lb-figure{margin:0;max-width:92vw;max-height:82vh;text-align:center;}
.lb-figure img{
    max-width:92vw;max-height:74vh;border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain;
}
.lb-figure figcaption{color:#fff;font-family:'Baloo 2',cursive;font-weight:600;margin-top:12px;font-size:17px;}
.lb-close{
    position:absolute;top:16px;right:16px;
    background:rgba(255,255,255,.15);color:#fff;border:none;
    width:44px;height:44px;border-radius:50%;font-size:20px;
}
.lb-nav{
    background:rgba(255,255,255,.15);color:#fff;border:none;
    width:46px;height:46px;border-radius:50%;font-size:30px;line-height:1;
    flex:0 0 auto;margin:0 4px;
}
.lb-nav:disabled{opacity:.25;}

/* ---- TOAST ---- */
.toast{
    position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:12px 20px;border-radius:50px;
    font-weight:700;font-size:14px;opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s;z-index:120;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (min-width:640px){
    .product-thumb{width:104px;height:104px;}
}
@media (max-width:380px){
    .product{padding:12px;gap:11px;}
    .product-thumb{width:72px;height:72px;}
    .product-name{font-size:16px;}
    .price-tag{font-size:13px;padding:5px 10px;}
    .cat-heading{font-size:21px;}
    .chip{font-size:12px;padding:6px 11px;}
    .search-input{font-size:14px;}
}