/* Frontend QR menu styles (scoped to #qr-menu-app) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root{
  --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2rem;
  --color-text:#020101; --color-muted:#595959; --color-border:#e9e9e9;
  --maxw:1200px; --radius:20px;
}

html,body{margin:0;padding:0}

#qr-menu-app{
  max-width:var(--maxw);margin:0 auto;padding:var(--space-lg) var(--space-md);
  overflow-anchor:none;
}
#qr-menu-app *{box-sizing:border-box}

/* TÜM YAZILAR MONTSERRAT */
#qr-menu-app,
#qr-menu-app *:not(svg):not(path){
  font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--color-text) !important;
  -webkit-text-fill-color:var(--color-text) !important;
}

/* Prevent theme list / marker styles from bleeding in */
#qr-menu-app details,
#qr-menu-app summary,
#qr-menu-app article{
  list-style: none !important;
}

#qr-menu-app summary::marker{ content: "" !important; }
#qr-menu-app summary::-webkit-details-marker{ display:none !important; }

#qr-menu-app .visually-hidden{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden}

/* ==== Kategoriler alt alta (akordeon) ==== */
#qr-menu-app .accordion{display:flex;flex-direction:column;gap:.5rem}
#qr-menu-app details.acc{border-bottom:1px solid var(--color-border);padding:.35rem 0;scroll-margin-top:12px;}
#qr-menu-app details.acc[open]{padding-bottom:var(--space-sm)}
#qr-menu-app summary.acc-h{
  all:unset; display:block; cursor:pointer; padding:.15rem .05rem;
  letter-spacing:.2px; line-height:1.35; border-bottom:1px solid transparent;
  font-size:clamp(1.1rem,.35vw + 1rem,1.25rem);
  transition:border-color .15s ease, transform .12s ease;
  font-weight:400;
}
#qr-menu-app details.acc[open] > summary.acc-h{
  font-size:clamp(1.35rem,1.1vw + 1.15rem,1.8rem);
  font-weight:800;
}
#qr-menu-app summary.acc-h:hover,
#qr-menu-app summary.acc-h:focus-visible{border-color:var(--color-border); outline:none; transform:translateX(1px)}

/* ==== Ürün liste (görselsiz) ==== */
#qr-menu-app .products-list{display:block; content-visibility:auto; contain-intrinsic-size:400px;}
#qr-menu-app .prod-card{padding:1rem 0;border-bottom:1px solid var(--color-border)}
#qr-menu-app .prod-card:last-child{border-bottom:none}

#qr-menu-app .prod-title{margin:0 0 .35rem 0;font-size:clamp(1.2rem,1vw + 1rem,1.9rem);font-weight:400}
#qr-menu-app .price{margin:.05rem 0 .55rem 0;font-size:clamp(1.02rem,.2vw + .98rem,1.08rem);font-weight:700}
#qr-menu-app .price *{font-weight:inherit !important;}
#qr-menu-app .prod-desc{margin:0;color:var(--color-muted) !important}
#qr-menu-app .prod-desc p{margin:0}

/* === Mobil (≤640px): tüm yazılar %20 küçük + SADECE ürün başlıkları bold === */
@media (max-width:640px){
  html{ font-size:80%; }
  #qr-menu-app .price{font-size:clamp(1.15rem,2.2vw + 1rem,1.3rem)}
  #qr-menu-app .prod-desc{font-size:calc(1em - 1pt);}
  #qr-menu-app .prod-title{ font-weight:700 !important; }
}

/* Skeleton */
#qr-menu-app .skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#eee,#f7f7f7,#eee);
  background-size:200% 100%;animation:skeleton 1.1s linear infinite;border-radius:10px}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
#qr-menu-app .skeleton.line{height:14px;border-radius:8px}
#qr-menu-app .skeleton.line.wide{width:70%}
#qr-menu-app .skeleton.line.mid{width:60%}
#qr-menu-app .skeleton.line.short{width:40%}

/* ==== Alt kategori akordeonu (ikinci seviye) ==== */
#qr-menu-app details.acc-sub{padding:.15rem 0 .75rem 0; border-bottom:1px solid var(--color-border); margin:.15rem 0 .35rem 0}
#qr-menu-app details.acc-sub:last-child{border-bottom:none}
#qr-menu-app summary.acc-h-sub{
  all:unset; display:block; cursor:pointer; padding:.1rem .05rem; letter-spacing:.15px; line-height:1.35;
  font-size:clamp(1.02rem,.5vw + .9rem,1.15rem); font-weight:600; border-bottom:1px solid transparent;
  transition:border-color .15s ease, transform .12s ease;
}
#qr-menu-app details.acc-sub[open] > summary.acc-h-sub{
  font-size:clamp(1.1rem,.7vw + .95rem,1.25rem); font-weight:700;
}
#qr-menu-app summary.acc-h-sub:hover,
#qr-menu-app summary.acc-h-sub:focus-visible{border-color:var(--color-border); outline:none; transform:translateX(1px)}

/* === Alkollü / Alkolsüz başlıkları BOLD OLMASIN === */
#qr-menu-app summary.acc-h-sub.no-bold,
#qr-menu-app details.acc-sub[open] > summary.acc-h-sub.no-bold{
  font-weight:400 !important;
}

/* =========================
   REVİZE — SADECE GÖRSEL
   ========================= */
#qr-menu-app .prod-title{
  color:#89978b !important;
  -webkit-text-fill-color:#89978b !important;
}

#qr-menu-app .prod-card{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows:auto;
  column-gap:.75rem;
  row-gap:.35rem;
  align-items:baseline;
}

#qr-menu-app .prod-title{ grid-column:1; margin:0; }
#qr-menu-app .price{ grid-column:2; grid-row:1; margin:0; white-space:nowrap; }
#qr-menu-app .prod-desc{ grid-column:1 / -1; margin:0; }
#qr-menu-app .prod-card .skeleton.line{ grid-column:1 / -1; }