:root{
  --bg1:#2b0000;
  --bg2:#d11414;
  --card:rgba(255,255,255,.10);
  --card2:rgba(255,255,255,.14);
  --border:rgba(255,255,255,.18);
  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.78);
  --accent:#ffffff;
  --accent2:#22c55e; /* açık (yeşil) */
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(900px 600px at 85% 25%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body::after{
  content:"";
  position:fixed; inset:-120px;
  pointer-events:none;
  background:
    radial-gradient(520px 420px at 20% 80%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(560px 460px at 85% 85%, rgba(22,163,74,.10), transparent 60%),
    radial-gradient(460px 380px at 70% 10%, rgba(255,255,255,.06), transparent 55%);
  filter: blur(2px);
}
a{color:inherit}

.container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px calc(96px + env(safe-area-inset-bottom));
}
.card{
  position:relative;
  width:min(560px, 94vw);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:24px;
  overflow:hidden;
}
.card--has-quickbar{ padding-bottom: 132px; }

.card__top{ padding:22px 22px 14px; text-align:center; }
.brand{ display:flex; flex-direction:column; align-items:center; gap:10px; }

.logoWrap{
  position:relative; overflow:hidden;
  padding:14px; border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.10));
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.logoWrap::before{
  content:"";
  position:absolute;
  top:-65%; left:-25%;
  width:150%; height:150%;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  pointer-events:none;
  opacity:.85;
  transform: rotate(-8deg);
  animation: logoSpotlight 5.5s ease-in-out infinite;
}
.logoWrap::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(420px 220px at 50% 10%, rgba(255,255,255,.16), rgba(212,167,44,0) 65%),
    linear-gradient(135deg, rgba(212,167,44,.12), rgba(255,255,255,0) 55%);
  pointer-events:none;
  opacity:.95;
}
.logo{
  width:160px; height:auto; display:block; position:relative; z-index:2;
  filter: brightness(1.12) contrast(1.06) saturate(1.02) drop-shadow(0 14px 28px rgba(0,0,0,.55));
  border-radius: 12px;
}
.logo--sm{ width:120px; }

@keyframes logoSpotlight{
  0%,100%{transform: translateY(0) rotate(-8deg); opacity:.80}
  50%{transform: translateY(14px) rotate(-8deg); opacity:.95}
}
@media (prefers-reduced-motion: reduce){ .logoWrap::before{animation:none} }

.title{ margin:6px 0 0; font-weight:800; letter-spacing:-0.02em; font-size:clamp(22px, 5.6vw, 28px); }
.subtitle{ margin:6px 0 0; color:var(--muted); font-size:clamp(13px, 3.8vw, 15px); }

.badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.badge{
  padding:7px 12px; font-size:13px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  color:var(--muted);
}
.badge--accent{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.96);
}
.badge--link{ text-decoration:none; }

/* Sosyal medya satırı (badge altı) */
.socialbar{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.socialbar__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 800;
  font-size: 12.8px;
  letter-spacing: .01em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.socialbar__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}
.socialbar__icon{ width:18px; height:18px; opacity:.95; }
.badge--on{
  border-color: rgba(34,197,94,.55) !important;
  background: rgba(34,197,94,.18) !important;
  color: rgba(255,255,255,.94) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,.22), 0 10px 30px rgba(34,197,94,.18);
}
.badge--off{
  border-color: rgba(255,255,255,.35) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.20);
}

.card__actions{ padding:14px 16px 20px; display:grid; gap:12px; }

.btn{
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; width:100%;
  padding:clamp(14px, 3.8vw, 16px);
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.16);
  text-decoration:none;
  font-weight:800;
  position:relative; overflow:hidden;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn::before{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(600px 140px at 0% 0%, rgba(255,255,255,.16), transparent 55%),
              radial-gradient(600px 140px at 100% 0%, rgba(22,163,74,.18), transparent 55%);
  opacity:0; transition: opacity .18s ease;
}
.btn::after{
  content:""; position:absolute; top:-40%; left:-60%;
  width:60%; height:180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: rotate(18deg); opacity:0;
}
.btn:hover{ transform: translateY(-1px); background:rgba(0,0,0,.22); border-color: rgba(255,255,255,.22); box-shadow: 0 18px 60px rgba(0,0,0,.42); }
.btn:hover::before{opacity:1}
.btn:hover::after{ opacity:1; animation: shimmer .9s ease-out 1; }
.btn:active{transform: translateY(0) scale(.995)}
.btn--primary{ background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.10)); border-color:rgba(255,255,255,.32); }

.btn__icon{
  position:relative; z-index:1;
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  flex:0 0 auto;
}
.btn__text{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1 1 auto; min-width:0; }
.btn__label{ font-size:clamp(15px, 4.2vw, 17px); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: rgba(255,255,255,.96); }
.btn__meta{ font-size:clamp(12px, 3.4vw, 13px); color: rgba(255,255,255,.80); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn__chev{
  position:relative; z-index:1;
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
  font-size:22px; line-height:1; opacity:.9; flex:0 0 auto;
}
.icon{ width:22px; height:22px; opacity:.95; }
@keyframes shimmer{ from{transform: translateX(0) rotate(18deg)} to{transform: translateX(240%) rotate(18deg)} }

.card__bottom{
  padding: 14px 14px 18px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.bottom__row{ display:flex; justify-content:center; text-align:center; gap:8px; flex-wrap:wrap; }
.bottom__row span{ max-width:92%; font-size:12.5px; line-height:1.45; color: rgba(255,255,255,.72); }

.bm-sign{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:8px; text-align:center;
  position:relative; z-index:90;
}
.bm-sign__line{ font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.76); }
.bm-sign__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:center;
  padding: 9px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.96);
  text-decoration:none; font-weight: 850; font-size: 12px;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.bm-sign__link::before{ content:"↗"; font-size: 13px; opacity: .9; }
.bm-sign__link:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
.bm-sign__link:active{ transform: translateY(0); opacity: .92; }

/* Modal (CSS :target ile garanti) */
.modal{ position:fixed; inset:0; z-index:80; display:none; }
#modal-directions:target, #modal-reviews:target{ display:block; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__panel{
  position:relative;
  margin: min(18vh, 160px) auto 0;
  width: min(560px, calc(100% - 28px));
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(60,0,0,.96), rgba(25,0,0,.96));
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  overflow:hidden;
  animation: pop .18s ease-out;
}
@keyframes pop{ from{transform: translateY(8px); opacity:.6} to{transform: translateY(0); opacity:1} }
.modal__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 10px; }
.modal__title{ margin:0; font-size:18px; letter-spacing:-0.01em; }
.modal__close{
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:#fff;
  font-size:22px;
  line-height:38px;
  text-decoration:none;
  text-align:center;
}
.modal__desc{ margin:0; padding:0 16px 14px; color:var(--muted); }
.modal__actions{ display:grid; grid-template-columns: 1fr; gap:10px; padding:0 16px 16px; }
.modalbtn{
  display:flex; align-items:center; justify-content:center;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:#fff; text-decoration:none; font-weight:800;
}
.modalbtn:hover{border-color: rgba(255,255,255,.40); background: rgba(255,255,255,.10)}
.modal__foot{ padding: 0 16px 16px; color:rgba(255,255,255,.76); font-size:13px; }

@media (min-width: 520px){
  .modal__actions{grid-template-columns: 1fr 1fr}
  #modal-directions:target .modal__actions{grid-template-columns: 1fr 1fr 1fr}
}

/* Quickbar */
.quickbar{
  position:fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 70;
  padding:10px 12px;
  display:flex; gap:10px; justify-content:center;
  border-radius:18px;
  background:rgba(40,0,0,.72);
  border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.quickbar a{
  flex:1; max-width:180px;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
  font-weight:750;
  text-decoration:none;
  text-align:center;
  color: rgba(255,255,255,.92);
}
.quickbar a.primary{border-color:rgba(255,255,255,.40); background:rgba(255,255,255,.10)}
@media (min-width: 900px){ .container{padding-bottom:24px} .quickbar{display:none} }

/* QR Menü */
.card--menu .card__top{ padding-bottom: 8px; }
.menu{ padding: 8px 16px 20px; display:grid; gap:12px; }
.menu__group{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding: 14px 14px;
}
.menu__title{ margin:0 0 8px; font-size: 16px; letter-spacing:-0.01em; }
.menu__items{ display:grid; gap:8px; }
.menu__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.menu__name{ font-weight:750; color: rgba(255,255,255,.92); line-height: 1.25; }
.menu__desc{ margin-top:4px; font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.35; }
.menu__price{ font-weight:850; color: rgba(255,255,255,.94); white-space:nowrap; }
.menu__empty{ padding:10px 2px; color: rgba(255,255,255,.70); font-size: 12.8px; }
.menu__note{ margin: 6px 2px 0; color: rgba(255,255,255,.70); font-size: 12.5px; text-align:center; }

@media (max-width: 480px){
  .container{padding:14px 12px calc(92px + env(safe-area-inset-bottom))}
  .card{width:100%; border-radius:22px}
  .card__top{padding:20px 18px 12px}
  .logo{width:156px}
  .btn{padding:15px 14px; border-radius:18px}
  .btn__icon{width:50px; height:50px}
  .bm-sign__link{ width: 100%; max-width: 320px; }
}

/* =========================================================
   QR Menü v2 (daha modern) – kategori kartlari + urun kartlari
   ========================================================= */

.menuPage .subtitle .tagline{
  display:inline-block;
  margin-left: 6px;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

/* Sosyal ikonlar: menü sayfalarinda daha kucuk */
.menuPage .socialbar{ margin-top: 10px; gap: 10px; }
.menuPage .socialbtn{
  padding: 8px 10px;
  min-width: 86px;
  border-radius: 16px;
}
.menuPage .socialbtn__icon{ width: 28px; height: 28px; }
.menuPage .socialbtn__label{ font-size: 12px; }

/* Kategori grid: mobilde 2 kolon, kart gibi */
.menuCats__grid{
  gap: 12px;
}
@media (max-width: 520px){
  .menuCats__grid{ grid-template-columns: 1fr 1fr; }
}

.catCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease, border-color .16s ease;
}

.catCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(420px 180px at 100% 0%, rgba(255,255,255,.06), transparent 60%);
  opacity:.0;
  transition: opacity .18s ease;
}

.catCard:active{ transform: scale(.99); }
.catCard:hover{ transform: translateY(-1px); background: rgba(0,0,0,.20); border-color: rgba(255,255,255,.22); }
.catCard:hover::before{ opacity: 1; }

.catCard__icon{
  position:relative;
  z-index:1;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.caticon{ width: 22px; height: 22px; opacity: .95; }

.catCard__text{ position:relative; z-index:1; min-width:0; flex:1 1 auto; }
.catCard__title{ font-weight: 900; font-size: 14.5px; letter-spacing: -0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catCard__meta{ margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.catCard__right{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.catCard__count{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  font-size: 12px;
  color: rgba(255,255,255,.90);
}
.catCard__chev{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  font-size: 22px;
  opacity: .9;
}

/* Urun kartlari */
.menuList{ display:grid; gap: 12px; margin-top: 14px; }
.itemCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
}
.itemCard__name{
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.95);
}
.itemCard__price{
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  font-weight: 900;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
}

@media (max-width: 360px){
  .menuPage .socialbtn{ min-width: 76px; }
  .catCard__title{ font-size: 14px; }
}

/* =========================================================
   QR Menü (Yeni) - Kategori sayfaları + mobil odaklı
   ========================================================= */

.menuHero{
  padding: 12px 16px 8px;
  display: grid;
  gap: 12px;
}

.menuHero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.menuHero__titles{
  min-width:0;
}

.menuHero__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
}

.menuHero__title{
  margin: 10px 0 0;
  font-size: clamp(18px, 4.8vw, 22px);
  letter-spacing:-0.02em;
}

.menuHero__sub{
  margin: 6px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.35;
}

.menuHero__back{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  text-decoration:none;
}

.menuHero__back:hover{ border-color: rgba(255,255,255,.22); }

.menuCats{
  padding: 0 16px 16px;
  display: grid;
  gap: 10px;
}

.menuCats__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.menuCat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  text-decoration:none;
}

.menuCat__left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.menuCat__title{
  font-weight: 900;
  font-size: 15px;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.menuCat__meta{
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
}

.menuCat__chev{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  font-size: 22px;
}

.menuList{
  padding: 0 16px 20px;
}

.menuList__card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  overflow:hidden;
}

.menuRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.menuRow:first-child{ border-top: 0; }

.menuRow__name{
  font-weight: 900;
  color: rgba(255,255,255,.94);
  line-height: 1.25;
}

.menuRow__price{
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  font-weight: 950;
  color: rgba(255,255,255,.98);
  white-space: nowrap;
}

.menuEmpty{
  padding: 16px 14px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

@media (min-width: 520px){
  .menuCats__grid{ grid-template-columns: 1fr 1fr; }
}