/* ==========================================================================
   VE HOTELS — QR MENÜ
   Tasarım tokenları — "Antrasit & Mercan" (Charcoal & Coral) teması
   Derin antrasit zemin, sıcak mercan vurgu, dumanlı kiremit ikinci
   vurgu rengi. Şık, modern bir 5 yıldızlı restoran havası.
   ========================================================================== */
:root{
  --ink:#181513;             /* sıcak antrasit — neredeyse siyah zemin */
  --ink-soft:#948A83;
  --ink-2:#231F1C;           /* kartlar için biraz daha açık antrasit katman */
  --cream:#F8F3EC;           /* sıcak fildişi zemin */
  --cream-deep:#EEE3D4;
  --coral:#E2664B;           /* mercan — ana vurgu */
  --coral-deep:#B84730;
  --coral-glow:rgba(226,102,75,.20);
  --ember:#8A5A46;           /* dumanlı kiremit — ikinci vurgu */
  --ember-deep:#5E3B2C;
  --ember-glow:rgba(138,90,70,.18);
  --line:#E7DCC9;
  --white:#FFFFFF;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:10px;
  --shadow-sm:0 8px 22px -14px rgba(24,21,19,.28);
  --shadow-md:0 24px 50px -22px rgba(24,21,19,.4);
  --shadow-lg:0 34px 80px -22px rgba(24,21,19,.5);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif, h1, h2, h3, .brand-word{font-family:'Fraunces', serif;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
a{color:inherit;}
::selection{background:var(--coral-glow);}

/* subtle grain / texture backdrop shared across screens */
.texture{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(226,102,75,.14) 1px, transparent 1.4px);
  background-size:22px 22px;
}

/* ---- Ambient aurora — yavaşça süzülen ışık lekeleri + dönen ipeksi katman ---- */
.ambient{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.ambient::before{
  content:''; position:absolute; inset:-20%;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(226,102,75,.10), rgba(138,90,70,.08), transparent 35%, rgba(226,102,75,.09) 70%, transparent);
  animation:auroraSpin 46s linear infinite;
  mix-blend-mode:multiply;
}
@keyframes auroraSpin{ to{ transform:rotate(360deg); } }
.ambient span{
  position:absolute; border-radius:50%; filter:blur(78px); opacity:.32;
}
.ambient .a1{width:440px; height:440px; background:var(--coral); top:-150px; left:-130px; animation:amb1 24s ease-in-out infinite;}
.ambient .a2{width:380px; height:380px; background:var(--ember); bottom:-130px; right:-110px; animation:amb2 28s ease-in-out infinite;}
.ambient .a3{width:280px; height:280px; background:var(--coral-deep); top:38%; left:58%; animation:amb3 21s ease-in-out infinite;}
@keyframes amb1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(65px,95px) scale(1.18);}}
@keyframes amb2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-75px,-55px) scale(1.12);}}
@keyframes amb3{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-95px,65px) scale(1.22);}}
@media (prefers-reduced-motion: reduce){ .ambient span, .ambient::before{animation:none;} }

/* ==========================================================================
   SPLASH
   ========================================================================== */
#splash{
  position:fixed; inset:0; z-index:100; overflow:hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(226,102,75,.20), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(138,90,70,.18), transparent 50%),
    linear-gradient(165deg, #181513 0%, #221D19 55%, #181513 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:36px 28px; gap:22px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
/* Yatay (landscape) veya kısa TV/tablet ekranlarında dikeyde sıkışmayı önle —
   sadece bu durumda scroll + üstten hizalama kullan, normal dikey ekranlarda
   ortalamayı (justify-content:center) bozmamak için overflow:hidden korunur. */
@media (orientation:landscape) and (max-height:520px){
  #splash{ justify-content:flex-start; padding:22px 28px 30px; gap:14px; overflow-y:auto; }
  #splash .logo-ring{ width:88px; height:88px; padding:8px; }
  #splash .splash-headline{ font-size:26px; }
}
#splash.hide{opacity:0; visibility:hidden; pointer-events:none;}
#splash::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:24px 24px; opacity:.5;
}
#splash::after{
  content:''; position:absolute; left:50%; top:50%; width:900px; height:900px; margin:-450px 0 0 -450px;
  background:conic-gradient(from 90deg, transparent, rgba(226,102,75,.10), transparent 30%, rgba(138,90,70,.08), transparent 60%);
  animation:auroraSpin 38s linear infinite; pointer-events:none;
}
/* ---- Splash yemek & içecek ikonları — yavaşça süzülen dekoratif katman ---- */
.splash-icons{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.fi{
  position:absolute; display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:.85;
  animation:fiFloat var(--fi-dur, 9s) ease-in-out infinite, fiFade 5s ease-in-out infinite;
  animation-delay:var(--fi-delay, 0s);
}
.fi svg{width:100%; height:100%; stroke-width:1.7;}
@keyframes fiFloat{
  0%,100%{ transform:translateY(0) rotate(var(--fi-rot,-6deg)); }
  50%{ transform:translateY(var(--fi-rise,-22px)) rotate(calc(var(--fi-rot,-6deg) * -1)); }
}
@keyframes fiFade{ 0%,100%{ opacity:var(--fi-op,.7); } 50%{ opacity:1; } }

/* Sol yarı (left) ve sağ yarı (right) arasında dengeli, simetrik dağılım — tam beyaz,
   net görünür ikonlar (önceki düşük opaklık değerleri koyu zeminle karışıp soluk/gri
   algılanıyordu; artık belirgin biçimde beyaz). */
.fi-1{ width:30px; height:30px; top:8%;  left:7%;   --fi-dur:10s;   --fi-delay:.2s;  --fi-rot:-10deg; --fi-op:.8; }
.fi-2{ width:34px; height:34px; top:10%; right:7%;  --fi-dur:8.5s;  --fi-delay:1.1s; --fi-rot:8deg;   --fi-op:.85; }
.fi-3{ width:44px; height:44px; top:30%; left:5%;   --fi-dur:11s;   --fi-delay:.6s;  --fi-rot:-6deg;  --fi-op:.7; --fi-rise:-16px; }
.fi-4{ width:32px; height:32px; top:27%; right:5%;  --fi-dur:9.5s;  --fi-delay:2s;   --fi-rot:7deg;   --fi-op:.78; }
.fi-5{ width:30px; height:30px; bottom:26%; left:9%; --fi-dur:9s;   --fi-delay:1.6s; --fi-rot:-8deg;  --fi-op:.78; }
.fi-6{ width:28px; height:28px; bottom:22%; right:9%; --fi-dur:10.5s; --fi-delay:.4s; --fi-rot:9deg;  --fi-op:.82; }
.fi-7{ width:26px; height:26px; bottom:10%; left:16%; --fi-dur:8s;   --fi-delay:2.4s; --fi-rot:-5deg; --fi-op:.72; }
.fi-8{ width:26px; height:26px; bottom:9%; right:16%; --fi-dur:9.5s; --fi-delay:1.3s; --fi-rot:6deg;  --fi-op:.74; }
.fi-9{ width:40px; height:40px; top:55%; left:2%;   --fi-dur:12s;   --fi-delay:.9s;  --fi-rot:-4deg;  --fi-op:.65; --fi-rise:-14px; }
.fi-10{ width:36px; height:36px; top:53%; right:3%; --fi-dur:10s;   --fi-delay:1.8s; --fi-rot:5deg;   --fi-op:.72; }
@media (prefers-reduced-motion: reduce){ .fi{animation:none;} }
@media (max-width:380px){ .fi-3,.fi-9{display:none;} }
@media (orientation:landscape) and (max-height:520px){ .fi-3,.fi-9,.fi-7,.fi-8{display:none;} }

.splash-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; max-width:380px;}
.logo-ring{
  position:relative; width:128px; height:128px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 0 8px rgba(226,102,75,.08), 0 30px 70px -18px rgba(226,102,75,.6);
  animation:riseIn 1s var(--ease) both, ringGlow 3.6s ease-in-out infinite;
}
.logo-ring img{width:100%; height:100%; object-fit:contain;}
@keyframes riseIn{ from{opacity:0; transform:translateY(18px) scale(.92);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes ringGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 0 8px rgba(226,102,75,.08), 0 30px 70px -18px rgba(226,102,75,.6);} 50%{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 0 12px rgba(226,102,75,.14), 0 34px 80px -16px rgba(226,102,75,.75);}}
.eyebrow{
  position:relative; color:var(--coral); letter-spacing:.32em; font-size:11px; text-transform:uppercase; font-weight:700;
  animation:riseIn 1s var(--ease) .1s both;
  padding-bottom:12px;
}
.eyebrow::after{
  content:''; position:absolute; left:50%; bottom:0; width:34px; height:1px; margin-left:-17px;
  background:linear-gradient(90deg, transparent, var(--coral), transparent);
}
.splash-headline{
  color:#fff; font-size:40px; font-weight:500; line-height:1.35; letter-spacing:-.01em; padding-bottom:4px;
  animation:riseIn 1s var(--ease) .18s both;
  background:linear-gradient(100deg, #fff 40%, var(--cream-deep) 55%, #fff 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:riseIn 1s var(--ease) .18s both, headlineSheen 7s ease-in-out 1.4s infinite;
}
@keyframes headlineSheen{0%,100%{background-position:0% 0;} 50%{background-position:100% 0;}}
.splash-sub{
  color:rgba(250,245,233,.6); font-size:13.5px; line-height:1.65; font-weight:300;
  animation:riseIn 1s var(--ease) .26s both;
}
.btn-primary{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--coral), var(--coral-deep));
  color:#1A130A; padding:16px 40px; border-radius:100px; font-size:14px; letter-spacing:.05em;
  font-weight:700; text-transform:uppercase;
  box-shadow:0 18px 34px -14px rgba(226,102,75,.65);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  animation:riseIn 1s var(--ease) .34s both;
}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:btnSheen 3.4s ease-in-out 1.2s infinite;
}
@keyframes btnSheen{0%{left:-60%;} 40%,100%{left:130%;}}
.btn-primary:active{transform:scale(.96);}
.lang-row{display:flex; gap:8px; margin-top:2px; animation:riseIn 1s var(--ease) .4s both;}
.lang-btn{
  padding:7px 16px; border-radius:100px; font-size:11.5px; letter-spacing:.06em; font-weight:600;
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.65);
  transition:all .2s var(--ease);
}
.lang-btn.active{background:var(--coral); border-color:var(--coral); color:#1A130A;}

/* ==========================================================================
   HEADER
   ========================================================================== */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(250,245,233,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
header .side{display:flex; align-items:center; gap:8px; min-width:44px;}
.icon-btn{
  width:40px; height:40px; border-radius:50%; background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0;
  transition:background .2s var(--ease), transform .15s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn svg{width:18px; height:18px; stroke-width:2;}
.icon-btn:active{transform:scale(.92); background:var(--coral-glow); border-color:var(--coral);}
/* Başlıktaki üç ikon (Garson / Filtre / Ara) birbirinden hızlıca ayırt edilsin diye
   her birine kendi rengi verildi — garson çağırma en dikkat çekici olan olduğu için
   dolu/mercan renkte, filtre ve arama nötr ama daha koyu/kontrastlı çizgilerle. */
#waiter-btn{background:var(--coral); border-color:var(--coral); color:#fff;}
#waiter-btn:active{background:var(--coral-deep); border-color:var(--coral-deep); transform:scale(.92);}
#waiter-btn.calling{background:var(--ember); border-color:var(--ember); color:#fff;}
#filter-btn{color:var(--ember-deep);}
#search-btn{color:var(--ink);}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:32px; height:32px; object-fit:contain;}
.brand-word{font-size:15px; letter-spacing:.1em; font-weight:600; color:var(--ink);}

/* ==========================================================================
   GROUPS (top level)
   ========================================================================== */
#groups{position:relative; z-index:1; padding:30px 18px 140px;}
.intro{text-align:center; margin-bottom:26px;}
.intro .eyebrow-line{
  position:relative; display:inline-block; color:var(--coral-deep); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; font-weight:700; margin-bottom:10px; padding-bottom:10px;
}
.intro .eyebrow-line::after{
  content:''; position:absolute; left:50%; bottom:0; width:38px; height:1px; margin-left:-19px;
  background:linear-gradient(90deg, transparent, var(--coral), transparent);
}
.intro h1{font-size:31px; font-weight:500; letter-spacing:-.01em;}
.intro p{font-size:13.5px; color:var(--ink-soft); margin-top:8px;}

.group-grid{display:grid; grid-template-columns:1fr; gap:14px; max-width:560px; margin:0 auto;}
.group-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg); min-height:172px;
  background:linear-gradient(150deg, #221D19 0%, #2E2620 60%, #1E1915 100%);
  display:flex; align-items:flex-end; padding:24px; box-shadow:var(--shadow-md);
  border:1px solid rgba(226,102,75,.22);
  isolation:isolate; text-align:left;
  transition:transform .25s var(--ease);
}
.group-card:active{transform:scale(.98);}
.group-card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image:radial-gradient(circle, rgba(226,102,75,.5) 1px, transparent 1.4px);
  background-size:18px 18px;
}
.group-card::after{
  content:''; position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(138,90,70,.32), transparent 70%); z-index:-1;
}
.group-card .gicon{
  position:absolute; top:18px; right:18px; width:38px; height:38px; color:var(--coral); opacity:.95;
}
.group-card h3{color:#fff; font-size:25px; font-weight:500; line-height:1.15;}
.group-card .meta{color:rgba(255,255,255,.52); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; margin-top:6px; display:flex; align-items:center; gap:6px;}
.group-card .meta .dot{width:4px; height:4px; border-radius:50%; background:var(--ember);}
.group-card .go{
  position:absolute; bottom:20px; right:20px; width:34px; height:34px; border-radius:50%;
  background:rgba(138,90,70,.16); border:1px solid rgba(138,90,70,.4); color:var(--ember);
  display:flex; align-items:center; justify-content:center;
}
.group-card .go svg{width:14px; height:14px;}

/* ==========================================================================
   CATEGORY TABS
   ========================================================================== */
#tabs-wrap{
  position:sticky; top:69px; z-index:35; background:rgba(250,245,233,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:14px 0;
}
#tabs{display:flex; gap:10px; overflow-x:auto; padding:0 18px; scrollbar-width:none;}
#tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  width:82px; height:82px; border-radius:14px; background:var(--white); border:1px solid var(--line);
  color:var(--ink-soft); text-align:center; padding:8px 4px;
  transition:all .22s var(--ease);
}
.tab svg{width:22px; height:22px; stroke:var(--ink-soft); transition:stroke .2s var(--ease);}
.tab span{font-size:10px; font-weight:600; line-height:1.2; letter-spacing:.01em;}
.tab.active{background:var(--ink); border-color:var(--ink); box-shadow:var(--shadow-sm);}
.tab.active svg{stroke:var(--coral);}
.tab.active span{color:#fff;}

/* ==========================================================================
   MENU LIST
   ========================================================================== */
#menu-list{position:relative; z-index:1; padding:24px 18px 70px; max-width:960px; margin:0 auto;}
/* Bir sekmeye tıklanınca ilgili bölüm görünüme kayar (scrollIntoView); sayfanın üstünde
   sabit duran header (~69px) + kategori sekme çubuğu (~110px) toplam ~179px yer kapladığı
   için, bu payı bırakmazsak bölümün ilk satırı bu sabit alanın arkasında kesik görünür. */
#menu-list > div[id^="sec-"]{scroll-margin-top:188px;}
.section-title{
  display:flex; align-items:center; gap:12px; margin:30px 0 16px;
}
.section-title .num{
  width:36px; height:36px; border-radius:10px; background:var(--ink); color:var(--coral);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.section-title .num svg{width:18px; height:18px;}
.section-title h2{font-size:21px; font-weight:500; letter-spacing:-.01em;}
.section-title .rule{
  position:relative; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent);
}
.section-title .rule::before{
  content:''; position:absolute; left:0; top:-2px; width:4px; height:4px; border-radius:50%; background:var(--coral);
}

.items-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){ .items-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:980px){ .items-grid{grid-template-columns:1fr 1fr 1fr;} }

.item-card{
  position:relative;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  display:flex; gap:0; box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  opacity:0; transform:translateY(14px); animation:cardIn .5s var(--ease) forwards;
}
@keyframes cardIn{ to{opacity:1; transform:translateY(0);} }
.item-card:active{transform:scale(.98);}
.item-card:hover{border-color:var(--coral); box-shadow:var(--shadow-md);}
.item-card .thumb{
  width:104px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(155deg, var(--coral-glow), #fff 70%);
  display:flex; align-items:center; justify-content:center; color:var(--coral-deep);
}
.item-card .thumb img{width:100%; height:100%; object-fit:cover;}
.item-card .thumb svg{width:30px; height:30px; opacity:.55;}
.item-body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:14px 14px 14px 12px;}
.item-body h4{font-size:15.5px; font-weight:700; font-family:'Manrope'; line-height:1.25;}
.item-body p{font-size:12px; color:var(--ink-soft); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.item-foot{display:flex; align-items:center; justify-content:space-between; margin-top:3px; gap:8px;}
.price{font-size:14.5px; font-weight:700; color:var(--ember-deep); white-space:nowrap; font-family:'Fraunces';}
.tags{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end;}
.tag{font-size:8.5px; letter-spacing:.03em; background:var(--ember-glow); color:var(--ember-deep); padding:3px 8px; border-radius:100px; font-weight:700; text-transform:uppercase; white-space:nowrap;}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
#lightbox{
  position:fixed; inset:0; background:#070E0C; z-index:200; display:none;
  flex-direction:column; padding:18px; opacity:0; transition:opacity .3s var(--ease);
  overflow-y:auto;
}
#lightbox.open{display:flex;}
#lightbox.show{opacity:1;}
body.lightbox-open{overflow:hidden;}
body.lightbox-open header,
body.lightbox-open #tabs-wrap{backdrop-filter:none; -webkit-backdrop-filter:none;}
.lb-top{display:flex; justify-content:flex-end; margin-bottom:6px;}
.lb-img-wrap{flex:1; display:flex; align-items:center; justify-content:center; position:relative; min-height:0;}
.lb-img-wrap img{max-height:44vh; width:100%; max-width:520px; border-radius:16px; object-fit:cover; box-shadow:var(--shadow-lg);}
.lb-img-wrap .noimg{width:110px; height:110px; color:var(--coral); opacity:.75;}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);
}
.lb-nav svg{width:16px; height:16px;}
.lb-nav.prev{left:0;} .lb-nav.next{right:0;}
.lb-info{color:#fff; padding:20px 4px 0; max-width:600px; margin:0 auto; width:100%;}
.lb-info h3{font-size:25px; font-weight:500; margin-bottom:9px; font-family:'Fraunces';}
.lb-info p{font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:16px; font-weight:300;}
.lb-meta{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.lb-price{font-size:21px; font-weight:700; color:var(--coral); font-family:'Fraunces';}
.lb-count{color:rgba(255,255,255,.35); font-size:11.5px; margin-top:16px; letter-spacing:.05em;}
.lb-disclaimer{color:rgba(255,255,255,.4); font-size:11px; line-height:1.5; margin-top:12px; font-style:italic; font-weight:300;}

/* ==========================================================================
   SEARCH
   ========================================================================== */
#search-overlay{
  position:fixed; inset:0; background:var(--cream); z-index:80; display:none; flex-direction:column; padding:18px;
}
#search-overlay.open{display:flex;}

/* ==========================================================================
   ALERJEN FİLTRESİ
   ========================================================================== */
#filter-modal{
  position:fixed; inset:0; z-index:210; display:none; align-items:flex-end; justify-content:center;
  background:rgba(7,14,12,.6); opacity:0; transition:opacity .3s var(--ease);
}
#filter-modal.open{display:flex;}
#filter-modal.show{opacity:1;}
.filter-sheet{
  position:relative; width:100%; max-width:560px; max-height:82vh; overflow-y:auto; display:flex; flex-direction:column;
  background:linear-gradient(180deg, #1D1815 0%, #181513 100%); color:#fff;
  border-radius:24px 24px 0 0; padding:24px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(24px); transition:transform .3s var(--ease); box-shadow:var(--shadow-lg);
  border:1px solid rgba(226,102,75,.25); border-bottom:none;
}
#filter-modal.show .filter-sheet{transform:translateY(0);}
@media(min-width:640px){
  #filter-modal{align-items:center;}
  .filter-sheet{border-radius:24px; border-bottom:1px solid rgba(226,102,75,.25); transform:translateY(0) scale(.96);}
  #filter-modal.show .filter-sheet{transform:translateY(0) scale(1);}
}
.filter-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.filter-head h3{font-size:21px; font-weight:500; color:#fff;}
.filter-head .icon-btn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff;}
.filter-sub{font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.5; margin-bottom:18px;}
#filter-chip-list{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:6px;}
.filter-chip{
  display:flex; align-items:center; gap:6px; padding:9px 15px; border-radius:100px; font-size:13px; font-weight:700;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75);
  transition:all .18s var(--ease); cursor:pointer;
}
.filter-chip svg{width:14px; height:14px; flex-shrink:0;}
.filter-chip.active{background:var(--coral); border-color:var(--coral); color:#1A130A;}
.filter-chip .fc-count{font-size:10.5px; font-weight:600; opacity:.65;}
.filter-chip.active .fc-count{opacity:.75;}
.filter-empty{text-align:center; color:rgba(255,255,255,.45); font-size:12.5px; padding:20px 0;}
.filter-actions{display:flex; gap:10px; margin-top:20px;}
.filter-actions .btn-ghost{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff;}
#filter-badge{background:var(--coral); color:#fff; border:1.5px solid var(--cream);}
/* Filtre etkinken üst boşlukta gösterilen "N filtre aktif · temizle" pilli */
/* ---- Boşta kalma sonrası ana menüye dönüş uyarısı (köşe rozeti) ---- */
#idle-reset-badge{
  position:fixed; bottom:16px; left:16px; z-index:300;
  background:rgba(24,21,19,.94); color:#fff; padding:10px 16px; border-radius:100px;
  font-size:12px; font-weight:700; letter-spacing:.01em; box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
#idle-reset-badge.show{opacity:1; transform:translateY(0);}

#filter-status-pill{
  display:none; align-items:center; gap:6px; padding:8px 14px; border-radius:100px; font-size:12px; font-weight:700;
  background:rgba(226,102,75,.12); border:1px solid rgba(226,102,75,.3); color:var(--coral-deep);
  margin:0 18px 4px; width:fit-content;
}
#filter-status-pill.show{display:flex;}
#filter-status-pill svg{width:13px; height:13px; flex-shrink:0;}
#filter-status-pill button{color:var(--coral-deep); text-decoration:underline; font-weight:700;}
.category-empty-filtered{padding:40px 18px; text-align:center; color:var(--ink-soft); font-size:13px;}
.search-bar{display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--line); border-radius:100px; padding:12px 18px; box-shadow:var(--shadow-sm);}
.search-bar input{flex:1; border:none; outline:none; background:none; font-size:15px; font-family:'Manrope';}
.search-bar svg{width:18px; height:18px; stroke:var(--ink-soft); flex-shrink:0;}
#search-results{margin-top:18px; overflow-y:auto; flex:1; max-width:640px; width:100%; margin-left:auto; margin-right:auto;}
#search-results .item-card{margin-bottom:12px; animation:none; opacity:1; transform:none;}
.empty-hint{text-align:center; color:var(--ink-soft); font-size:13px; margin-top:50px;}

footer{
  position:relative; z-index:1; text-align:center; padding:26px 18px 40px; color:var(--ink-soft); font-size:11px; letter-spacing:.05em;
}
footer b{color:var(--coral-deep);}

.hidden{display:none !important;}

/* ==========================================================================
   İKON ANİMASYONLARI — buhar, kabarcık, parıltı, zil sallanması, sepet zıplaması
   ========================================================================== */
svg{overflow:visible;}

@keyframes veSteamRise{
  0%{ transform:translateY(0) scaleY(1); opacity:0; }
  18%{ opacity:.9; }
  100%{ transform:translateY(-3.5px) scaleY(1.2); opacity:0; }
}
.ve-steam{ transform-origin:center bottom; animation:veSteamRise 2.4s ease-in-out infinite; }
.ve-steam.d2{ animation-delay:.8s; }

@keyframes veBubbleRise{
  0%{ transform:translateY(0); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(-4px); opacity:0; }
}
.ve-bubble{ animation:veBubbleRise 2.2s ease-in-out infinite; }
.ve-bubble.d2{ animation-delay:.75s; }

@keyframes veSparkle{
  0%,100%{ opacity:.3; transform:scale(.7); }
  50%{ opacity:1; transform:scale(1.15); }
}
.ve-sparkle{ animation:veSparkle 1.9s ease-in-out infinite; transform-origin:center; }

@keyframes veBellRing{
  0%,100%{ transform:rotate(0deg); }
  10%{ transform:rotate(-14deg); } 20%{ transform:rotate(11deg); }
  30%{ transform:rotate(-8deg); } 40%{ transform:rotate(6deg); }
  50%{ transform:rotate(-3deg); } 60%,100%{ transform:rotate(0deg); }
}
#waiter-btn.calling svg{ animation:veBellRing 1.4s ease-in-out infinite; transform-origin:top center; }

@keyframes veFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.group-card .gicon svg{ animation:veFloat 3.4s ease-in-out infinite; }
.group-card:nth-child(2) .gicon svg{ animation-delay:.3s; }
.group-card:nth-child(3) .gicon svg{ animation-delay:.6s; }

.tab.active svg{ animation:veFloat 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .ve-steam, .ve-bubble, .ve-sparkle, #waiter-btn.calling svg,
  .group-card .gicon svg, .tab.active svg{ animation:none !important; }
}

/* ==========================================================================
   GARSON ÇAĞIRMA MODALI İÇİNDEKİ MASA SATIRI — masa numarası artık üst
   çubukta değil, yalnızca bu modal içinde gösterilir/değiştirilir
   ========================================================================== */
.waiter-table-row{
  display:flex; align-items:center; justify-content:center; gap:8px; background:var(--cream);
  border:1px solid var(--line); border-radius:12px; padding:9px 12px; margin-bottom:14px; font-size:12.5px; font-weight:600;
}
.waiter-table-row svg{width:14px; height:14px; color:var(--coral); flex-shrink:0;}
.waiter-table-row span{flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.waiter-table-row button{color:var(--coral); font-weight:700; text-decoration:underline; font-size:12.5px; flex-shrink:0;}

/* ==========================================================================
   KAMPANYAYI YENİDEN AÇ (floating pill)
   ========================================================================== */
#campaign-reopen-btn{
  position:fixed; left:16px; bottom:88px; z-index:60;
  display:flex; align-items:center; gap:6px; padding:10px 16px 10px 12px; border-radius:100px;
  background:linear-gradient(135deg, var(--coral), var(--coral-deep)); color:#1A130A; font-size:12.5px; font-weight:700;
  box-shadow:var(--shadow-md); border:none; animation:crPulse 2.6s ease-in-out infinite;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
#campaign-reopen-btn .cr-emoji{font-size:15px;}
@keyframes crPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.05);}}
/* Geniş ekranlarda (masaüstü/TV) sağ alttaki Garson/Sepet butonlarıyla yatayda
   çok uzakta kaldığından, dikeyde de onlarla aynı hizaya indirilebilir —
   ama mobilde (dar ekran) bu ikisi aynı satırda çakışmasın diye 88px korunur. */
@media(min-width:900px){ #campaign-reopen-btn{ bottom:16px; } }

/* ==========================================================================
   ÖNE ÇIKANLAR (Çok Satılan / Çok Talep Edilen / Yeni Tatlar)
   ========================================================================== */
#featured-section{margin:0 0 30px; max-width:900px; margin-left:auto; margin-right:auto;}
#featured-tabs{display:flex; gap:8px; overflow-x:auto; padding:0 2px 4px; scrollbar-width:none; margin-bottom:14px;}
#featured-tabs::-webkit-scrollbar{display:none;}
.featured-tab{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 10px; border-radius:100px;
  background:var(--white); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink-soft);
  transition:all .2s var(--ease); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.featured-tab span:not(.ft-emoji){overflow:hidden; text-overflow:ellipsis;}
.featured-tab .ft-emoji{font-size:14px; flex-shrink:0;}
.featured-tab.active{background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 0 0 1px var(--coral) inset;}
/* Çok dar ekranlarda (ör. eski/küçük telefonlar) yazı boyutunu biraz daha küçült
   ki üç sekme de kaydırmaya gerek kalmadan tek satıra sığsın. */
@media(max-width:360px){
  .featured-tab{font-size:11px; padding:8px 6px; gap:4px;}
  .featured-tab .ft-emoji{font-size:12px;}
}
#featured-list{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x proximity; scrollbar-width:none;}
#featured-list::-webkit-scrollbar{display:none;}
.featured-card{
  scroll-snap-align:start; flex-shrink:0; width:168px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.featured-card:active{transform:scale(.97);}
.featured-card:hover{border-color:var(--coral);}
.featured-card .thumb{
  width:100%; height:110px; background:linear-gradient(155deg, var(--coral-glow), #fff 70%);
  display:flex; align-items:center; justify-content:center; color:var(--coral-deep);
}
.featured-card .thumb img{width:100%; height:100%; object-fit:cover;}
.featured-card .thumb svg{width:26px; height:26px; opacity:.55;}
.fc-body{padding:10px 12px 12px;}
.fc-body h4{font-size:13px; font-weight:700; font-family:'Manrope'; line-height:1.3; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;}
.fc-body .item-foot{align-items:center;}

/* ==========================================================================
   KAMPANYA POPUP + DUYURU/KARŞILAMA POPUP (aynı görsel dil paylaşılır)
   ========================================================================== */
#campaign-modal, #announce-modal{
  position:fixed; inset:0; z-index:210; display:none; align-items:flex-end; justify-content:center;
  background:rgba(7,14,12,.6); opacity:0; transition:opacity .3s var(--ease);
}
#campaign-modal.open, #announce-modal.open{display:flex;}
#campaign-modal.show, #announce-modal.show{opacity:1;}
.campaign-sheet{
  position:relative; width:100%; max-width:560px; max-height:82vh; overflow-y:auto;
  background:linear-gradient(180deg, #1D1815 0%, #181513 100%); color:#fff;
  border-radius:24px 24px 0 0; padding:24px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(24px); transition:transform .3s var(--ease); box-shadow:var(--shadow-lg);
  border:1px solid rgba(226,102,75,.25); border-bottom:none;
}
#campaign-modal.show .campaign-sheet, #announce-modal.show .campaign-sheet{transform:translateY(0);}
@media(min-width:640px){
  #campaign-modal, #announce-modal{align-items:center;}
  .campaign-sheet{border-radius:24px; border-bottom:1px solid rgba(226,102,75,.25); transform:translateY(0) scale(.96);}
  #campaign-modal.show .campaign-sheet, #announce-modal.show .campaign-sheet{transform:translateY(0) scale(1);}
}
#announce-image{width:100%; max-height:220px; object-fit:cover; border-radius:var(--r-md); margin-bottom:14px; border:1px solid rgba(226,102,75,.2);}
.announce-text{font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.82); margin-bottom:18px; white-space:pre-line;}
.campaign-sheet-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px;}
.campaign-sheet-head .cs-eyebrow{color:var(--coral); font-size:11px; letter-spacing:.24em; font-weight:700; margin-bottom:5px;}
.campaign-sheet-head h3{font-size:21px; font-weight:500; color:#fff;}
.campaign-sheet-head .icon-btn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff;}
#campaign-modal-list{display:flex; flex-direction:column; gap:12px;}
.campaign-card{
  display:flex; gap:0; background:rgba(255,255,255,.04); border:1px solid rgba(226,102,75,.2); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.campaign-card:active{transform:scale(.98);}
.campaign-card:hover{border-color:var(--coral);}
.campaign-card .thumb{
  width:96px; flex-shrink:0; background:linear-gradient(155deg, rgba(226,102,75,.22), rgba(255,255,255,.03) 70%);
  display:flex; align-items:center; justify-content:center; color:var(--coral);
}
.campaign-card .thumb img{width:100%; height:100%; object-fit:cover;}
.campaign-card .thumb svg{width:26px; height:26px; opacity:.6;}
.cc-body{flex:1; min-width:0; padding:12px 14px 12px 12px; display:flex; flex-direction:column; gap:4px; justify-content:center;}
.cc-body h4{font-size:14.5px; font-weight:700; font-family:'Manrope'; color:#fff;}
.cc-note{font-size:11.5px; color:var(--coral); font-weight:700;}
.cc-pct-badge{
  display:inline-block; background:var(--coral); color:#1A130A; font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:100px; vertical-align:middle; margin-left:4px;
}
.bundle-campaign-card{border:1px solid rgba(226,102,75,.3);}
.bundle-campaign-card .thumb{background:linear-gradient(135deg, rgba(226,102,75,.16), rgba(226,102,75,.06));}
.cc-body .price{color:var(--coral);}
.cc-old-price{color:rgba(255,255,255,.4); font-weight:500; margin-right:4px; font-size:12px;}

/* ==========================================================================
   KAMPANYAYI YENİDEN AÇMA ROZETİ — hâlâ yüzen tek eleman (garson çağırma
   artık üstteki masa çubuğunun içinde, ayrı bir sağ-alt buton grubu yok)
   ========================================================================== */
#campaign-reopen-btn.floating-faded{
  opacity:.32; transform:translateY(6px) scale(.94); pointer-events:none;
}

/* ==========================================================================
   GARSON ÇAĞIR MODAL
   ========================================================================== */
#waiter-modal, #order-confirm-modal, #table-modal{
  position:fixed; inset:0; z-index:96; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(11,22,19,.6); opacity:0; transition:opacity .25s var(--ease);
}
#waiter-modal.open, #order-confirm-modal.open, #table-modal.open{display:flex;}
#waiter-modal.show, #order-confirm-modal.show, #table-modal.show{opacity:1;}
.simple-modal{
  background:#fff; border-radius:22px; padding:28px 26px; width:100%; max-width:360px; text-align:center;
  transform:scale(.95); transition:transform .25s var(--ease); box-shadow:var(--shadow-lg);
  border-top:3px solid var(--coral);
}
#waiter-modal.show .simple-modal, #order-confirm-modal.show .simple-modal, #table-modal.show .simple-modal{transform:scale(1);}
.simple-modal .ic{
  width:54px; height:54px; border-radius:50%; background:var(--coral-glow); color:var(--coral-deep); margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
}
.simple-modal .ic svg{width:24px; height:24px;}
.simple-modal h3{font-size:19px; font-weight:600; margin-bottom:8px;}
.simple-modal p{font-size:13px; color:var(--ink-soft); line-height:1.55; margin-bottom:18px;}
.waiter-reasons{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.waiter-reason-btn{
  padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--cream); font-size:13px; font-weight:600;
  text-align:left; transition:all .15s var(--ease);
}
.waiter-reason-btn.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.simple-modal .row-btns{display:flex; gap:10px;}
.simple-modal .row-btns button{flex:1;}
#table-input{
  width:100%; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:var(--cream);
  font-size:15px; text-align:center; font-weight:700; letter-spacing:.05em; margin-bottom:16px; outline:none;
}
#table-input:focus{border-color:var(--coral);}

/* Genel buton stilleri (btn/btn-primary/btn-ghost — waiter/table/campaign modallarında kullanılır) */
.btn{padding:12px 18px; border-radius:100px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:6px; transition:all .2s var(--ease);}
.btn-ghost{background:var(--cream); border:1px solid var(--line); color:var(--ink);}
.btn-ghost:active{transform:scale(.96);}
.row-btns .btn-primary{
  padding:12px 18px; animation:none; box-shadow:none;
}
.row-btns .btn-primary::after{display:none;}

/* ==========================================================================
   RESPONSIVE FINE-TUNING
   ========================================================================== */
@media(min-width:760px){
  .splash-headline{font-size:44px;}
  .intro h1{font-size:34px;}
}
@media(max-width:360px){
  .tab{width:74px; height:76px;}
  .item-card .thumb{width:88px;}
}

/* Büyük ekranlar / TV'ler (duvara monte dijital menü, yatay veya dikey) —
   içerik ortalanmış kalır ama biraz daha ferah bir düzen ve okunabilir boyutlar sağlanır. */
@media(min-width:1200px){
  #menu-list{max-width:1180px;}
  .items-grid{grid-template-columns:1fr 1fr 1fr 1fr;}
  #featured-section, .group-grid{max-width:1040px;}
  .group-grid{grid-template-columns:1fr 1fr; gap:18px;}
}
@media(min-width:1600px){
  body{font-size:17px;}
  #menu-list{max-width:1360px;}
  .items-grid{grid-template-columns:1fr 1fr 1fr 1fr 1fr;}
}
/* Dikey (portre) TV'ler / uzun dar ekranlar — geniş ama kısa değil, dar ama çok uzun olabilir;
   grid tek sütuna düşerken kartların aşırı gerilmesini önle. */
@media(min-width:1200px) and (orientation:portrait){
  .items-grid{grid-template-columns:1fr 1fr;}
  .group-grid{grid-template-columns:1fr;}
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}