/* Akordeon & kartlar */
.acc{display:flex; flex-direction:column; gap:10px}
.item{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--soft); transition:box-shadow .15s}
.item.open{box-shadow:0 10px 24px rgba(0,0,0,.06)}

/* Kategori başlığı */
.head{width:100%; position:relative; display:block; padding:0; height:clamp(120px,22vw,180px); background:#eee; border:0; cursor:pointer; overflow:hidden}
.head-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform .35s}
.item.open .head-bg{transform:scale(1.03)}
.shade{position:absolute; left:0; right:0; bottom:0; padding:8px 10px; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); display:flex; align-items:center; justify-content:center; gap:6px}
.cat-name{color:#fff; font-weight:800; font-size:15px; text-shadow:0 1px 2px rgba(0,0,0,.35); letter-spacing:.2px; white-space:normal; line-height:1.25; text-align:center}
.chev{color:#fff; transition:transform .2s}
.item.open .chev{transform:rotate(180deg)}

.panel{display:none; background:var(--soft)}
.item.open .panel{display:block}
.panel .inner{padding:8px 8px 12px}

/* Skeleton */
.skeleton{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.sk{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px}
.sk .sk-img{width:100%; aspect-ratio:1/1; border-radius:10px; background:linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size:200% 100%; animation:sh 1.2s infinite}
.sk .sk-line{height:12px; margin-top:8px; border-radius:6px; background:linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size:200% 100%; animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Ürünler */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; transition:.2s}
.grid.list{grid-template-columns:1fr}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:6px; position:relative}
.card.list{flex-direction:row; align-items:center; gap:10px}
.thumb{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; background:#f4f4f4}
.thumb.list{width:96px; aspect-ratio:auto; height:96px}
.name{font-weight:800; line-height:1.2; font-size:15px; overflow-wrap:anywhere; word-break:normal; hyphens:auto}
.desc{font-size:12px; color:var(--muted); line-height:1.3}
.price{font-weight:900; margin-top:2px}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.badge{font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; border:1px solid var(--line); background:var(--soft); color:var(--fg)}
.badge.hot{background:#fff0f0; border-color:#f3c2c2; color:#b30000}
.badge.vegan{background:#ecfdf5; border-color:#c7f0d7; color:#057a55}
.badge.gf{background:#eef2ff; border-color:#c7d2fe; color:#3730a3}
.badge.chef{background:#fff7ed; border-color:#fed7aa; color:#9a3412}
.badge.new{background:#f0f9ff; border-color:#bae6fd; color:#075985}
.allergens{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; font-size:12px; color:#555}
.allergens .a{display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.a .ico{font-size:14px}
.sold{opacity:.6; filter:grayscale(1)}
.ribbon{position:absolute; top:8px; left:-6px; background:#ef4444; color:#fff; font-size:12px; font-weight:800; padding:4px 10px; border-radius:0 8px 8px 0; box-shadow:0 2px 6px rgba(0,0,0,.15)}

/* Favori */
.fav{position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:999px; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); cursor:pointer}
.fav svg{width:18px; height:18px; fill:none; stroke:#ef4444; stroke-width:2px}
.fav.active svg{fill:#ef4444}

/* Filtre sheet */
.filtersheet{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:flex-end; z-index:26}
.filtersheet.open{display:flex}
.filter-panel{background:var(--surface); width:100%; border-radius:16px 16px 0 0; padding:14px}
.frow{display:flex; flex-direction:column; gap:10px}
.fchk{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:10px}
.factions{display:flex; gap:10px; justify-content:flex-end; margin-top:8px}
.factions .btn{padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-weight:700; cursor:pointer}
.factions .primary{background:var(--fg); color:var(--bg); border-color:var(--fg)}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:flex-end; z-index:90}
.modal.open{display:flex}
.sheet{width:100%; background:var(--surface); border-radius:16px 16px 0 0; padding:14px; max-height:92svh; overflow:auto; position:relative; overscroll-behavior:contain}
.sheet .row{display:flex; flex-direction:column; align-items:center; gap:12px}
.sheet img.main{width:clamp(240px,75vw,480px); max-width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; display:block; margin:0 auto}
.thumbs{display:flex; gap:8px; overflow:auto; padding:2px 0}
.thumbs img{width:72px; height:72px; object-fit:cover; border-radius:10px; border:2px solid transparent; cursor:pointer}
.thumbs img.active{border-color:#111}
.sheet h3, .sheet p, .sheet .price{text-align:center}
.sharebar{display:flex; gap:10px; justify-content:center; margin-top:6px}
.sharebtn{padding:10px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-weight:700; cursor:pointer}
.close{position:fixed; top:calc(var(--safeTop) + 8px); right:8px; z-index:1001; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:999px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15); font-size:18px; font-weight:900}

/* Kategori içi boş mesaj */
.cat-empty {
  margin: 8px var(--pad);
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  display: none; /* JS gerektiğinde açacak */
}
 .cat-empty{
    margin:12px var(--pad);
    padding:14px;
    border:1px dashed var(--line);
    border-radius:12px;
    color:var(--muted);
    text-align:center;
  }


 #q, #btnClear, #btnFilter, #fSheet, #global,
#fVegan, #fMilkFree, #fGlutenFree, #fEggFree, #fNutFree, #fSugarFree { display:none !important; }

/* sticky üst bar yüksekliği kadar margin bırak */
:root {
    --sticky-h: 56px;
}
/* senin üst barın farklıysa ayarla */

#menuList,
.list,
.cards,
.cat-section {
    scroll-margin-top: calc(var(--sticky-h) + 8px);
}
/* Kategori başlıklarını sticky header'ın altına hizala */
.acc .item { scroll-margin-top: calc(var(--headH, 0px) + 8px); }




/* === Spotlight styles === */
.sp-sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;z-index:9999;opacity:0;pointer-events:none;transition:.2s}
.sp-sheet.open{opacity:1;pointer-events:auto}
.sp-panel{background:#fff;width:100%;max-height:85vh;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 -10px 30px rgba(0,0,0,.25);animation:spUp .2s ease-out}
@keyframes spUp{from{transform:translateY(20px)}to{transform:translateY(0)}}
.sp-head{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 6px}
.sp-title{font-weight:800;font-size:18px}
.sp-sub{color:#666;font-size:13px}
.sp-close{border:0;background:#f2f2f2;border-radius:10px;width:36px;height:36px;font-size:18px;cursor:pointer}
.sp-strip{display:flex;gap:12px;overflow:auto;padding:12px 14px 18px;scroll-snap-type:x mandatory}
.sp-card{scroll-snap-align:start;border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;min-width:180px;text-align:left}
.sp-card img{width:100%;height:120px;object-fit:cover;background:#f4f4f4;display:block}
.sp-name{font-weight:700;padding:8px 10px}
.sp-price{color:#444;padding:0 10px 10px}
.sp-foot{display:flex;justify-content:flex-end;padding:10px 14px;border-top:1px solid #f3f3f3}
.sp-hide{background:#111;color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer}