/* =====================================================================
   FATİH YEMEK — QR Dijital Menü (mobil öncelikli)
   style.css token'larını kullanır · sıcak "Fotoğraflı Menü" stili
   ===================================================================== */

.menu-body { background: var(--cream); }

/* ---------- Header ---------- */
.menu-header { position: relative; background: linear-gradient(160deg, var(--wine), var(--wine-2)); padding: 22px 16px 26px; overflow: hidden; }
.menu-frame { position: absolute; inset: 12px; border: 3px solid rgba(224,113,42,.55); border-radius: 22px; pointer-events: none; }
.menu-header::after { content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(242,180,65,.2), transparent 70%); }
.mh-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.mh-logo { height: 82px; width: auto; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.mh-title { display: flex; flex-direction: column; line-height: 1; }
.mh-kicker { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.mh-menu { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: #fff; margin: 2px 0 6px; }
.mh-tag { align-self: flex-start; background: var(--orange); color: var(--cream-txt); font-family: var(--font-display); font-weight: 700; font-size: .82rem; padding: 4px 14px; border-radius: 999px; box-shadow: 0 3px 0 rgba(122,31,61,.3); }

/* ---------- Sticky category nav ---------- */
.mnav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid var(--line); }
.mnav-track { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 660px; margin: 0 auto; padding: 10px 14px; }
.mnav-track::-webkit-scrollbar { display: none; }
.mnav-track a {
  flex: none; font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--wine);
  background: #fff; border: 2px solid var(--line); padding: .34rem .85rem; border-radius: 999px; white-space: nowrap; transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.mnav-track a.active { background: var(--wine); color: var(--cream-txt); border-color: var(--wine); }

/* ---------- Menu body ---------- */
.menu-main { max-width: 640px; margin: 0 auto; padding: 20px 14px 48px; }
.mcat { margin-bottom: 22px; scroll-margin-top: 90px; }
.mcat-h { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--wine); margin: 6px 0 12px; }
.mcat-ico { width: 40px; height: 40px; padding: 8px; flex: none; color: var(--wine); background: var(--gold); border-radius: 12px; box-shadow: 0 4px 0 var(--gold-2); }

.mitems { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-card); overflow: hidden; }
.mitem { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-bottom: 2px dotted var(--line); }
.mitem:last-child { border-bottom: none; }
.mi-main { flex: 1; min-width: 0; }
.mi-name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; color: var(--ink); display: inline; }
.mi-desc { display: block; font-size: .82rem; color: var(--muted); font-weight: 600; margin-top: 2px; line-height: 1.4; }
.mi-badge { font-family: var(--font-display); font-weight: 700; font-size: .6rem; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; margin-left: 7px; vertical-align: middle; white-space: nowrap; }
.mi-badge.gold { background: var(--gold); color: var(--wine); }
.mi-badge.green { background: var(--green); color: #fff; }

.mi-price { flex: none; font-family: var(--font-display); font-weight: 700; font-size: .96rem; color: #fff; background: var(--orange-2); padding: 4px 13px; border-radius: 999px; white-space: nowrap; align-self: flex-start; }
.mi-prices { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: none; }
.mi-prices .mi-price { font-size: .82rem; padding: 3px 11px; }
.mi-prices .mi-price.az { background: transparent; color: var(--orange-2); border: 2px solid var(--orange); padding: 1px 9px; }

/* ---------- Footer ---------- */
.menu-footer { background: linear-gradient(160deg, var(--wine), var(--wine-3)); color: var(--cream-txt); text-align: center; padding: 28px 18px 34px; margin-top: 10px; }
.mf-afiyet { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--gold); }
.mf-info { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 14px; font-weight: 600; font-size: .9rem; color: var(--cream-txt2); }
.mf-phone { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff !important; letter-spacing: .02em; }
.mf-site { display: inline-block; font-family: var(--font-display); font-weight: 700; color: var(--gold) !important; border: 2px solid rgba(242,180,65,.5); padding: .4rem 1.1rem; border-radius: 999px; }
.mf-site:hover { background: var(--gold); color: var(--wine) !important; }

/* ---------- Back to top ---------- */
.menu-top { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 50px; height: 50px; border-radius: 50%; background: var(--wine); color: var(--cream-txt); display: grid; place-items: center; box-shadow: 0 6px 0 var(--wine-3); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity var(--dur), transform var(--dur), background var(--dur); }
.menu-top.show { opacity: 1; transform: none; pointer-events: auto; }
.menu-top:hover { background: var(--orange); color: #fff; }
.menu-top svg { width: 24px; height: 24px; }

/* ---------- Desktop niceties ---------- */
@media (min-width: 700px){
  .mh-menu { font-size: 3rem; }
  .menu-main { padding-top: 26px; }
}