/* Volkan Restaurant - Modern Intro (overlay for welcome page) */
:root{
  --vk-bg:#070707; --vk-bg2:#12100d; --vk-gold:#d4af37; --vk-gold2:#f3d77a;
  --vk-ember:#ff7a18; --vk-ember2:#ff3d00; --vk-text:#f7f3ea; --vk-muted:rgba(247,243,234,.72);
  --vk-card:rgba(20,18,16,.72); --vk-line:rgba(212,175,55,.22);
}
body{background:var(--vk-bg)!important;color:var(--vk-text);}
.welcome-container.vk-intro{
  background:
    radial-gradient(1200px 700px at 50% 110%, rgba(255,122,24,.22), transparent 60%),
    radial-gradient(900px 500px at 50% 100%, rgba(212,175,55,.10), transparent 65%),
    linear-gradient(180deg, #050505 0%, #0b0908 45%, #120d08 100%) !important;
  overflow:hidden;
}
.welcome-container.vk-intro .bg-pattern{display:none!important;}
.welcome-container.vk-intro::before{
  content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,61,0,.10), transparent 22%),
    radial-gradient(circle at 78% 78%, rgba(255,122,24,.12), transparent 26%),
    radial-gradient(circle at 50% 92%, rgba(212,175,55,.16), transparent 30%);
  filter: blur(18px);
  animation: vkHeat 6s ease-in-out infinite alternate;
}
.welcome-container.vk-intro::after{
  content:""; position:absolute; left:-20%; right:-20%; bottom:-35%; height:75%; z-index:0; pointer-events:none;
  background: radial-gradient(closest-side at 50% 50%, rgba(255,122,24,.35), rgba(255,61,0,.10) 45%, transparent 72%);
  filter: blur(30px);
  transform-origin:center bottom;
  animation: vkFlame 3.8s ease-in-out infinite;
}
@keyframes vkHeat{from{transform:translateY(0) scale(1)}to{transform:translateY(-10px) scale(1.03)}}
@keyframes vkFlame{
  0%,100%{transform:scaleX(1) scaleY(1) translateY(0); opacity:.85}
  35%{transform:scaleX(1.06) scaleY(1.12) translateY(-8px); opacity:1}
  70%{transform:scaleX(.96) scaleY(1.05) translateY(-4px); opacity:.9}
}
.vk-embers{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.vk-ember{position:absolute; bottom:-20px; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, var(--vk-gold2), var(--vk-ember) 55%, rgba(255,61,0,0) 72%);
  box-shadow:0 0 10px rgba(255,122,24,.55);
  opacity:0; animation: vkRise linear infinite;
}
.vk-ember:nth-child(3n){width:3px;height:3px; filter:blur(.2px)}
.vk-ember:nth-child(4n){width:6px;height:6px; filter:blur(.6px); opacity:.8}
@keyframes vkRise{
  0%{transform:translate3d(0,0,0) scale(.6); opacity:0}
  10%{opacity:.9}
  70%{opacity:.55}
  100%{transform:translate3d(var(--drift), -110vh, 0) scale(1.15); opacity:0}
}
.welcome-content.vk-content{position:relative; z-index:2; padding:28px 22px 108px !important; max-width:520px;}
.vk-logo-wrap{
  width:min(var(--logo-size,170px), 42vw); height:min(var(--logo-size,170px), 42vw);
  margin:4px auto 18px; display:flex; align-items:center; justify-content:center;
  position:relative; border-radius:22px; background:rgba(255,255,255,.02);
  box-shadow: 0 0 0 1px rgba(212,175,55,.18), 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,122,24,.10);
  animation: vkLogoIn .9s cubic-bezier(.2,.8,.2,1) both, vkLogoGlow 3.2s ease-in-out 1s infinite;
}
.vk-logo-wrap::before{
  content:""; position:absolute; inset:-2px; border-radius:24px; padding:2px;
  background:conic-gradient(from 180deg, rgba(212,175,55,.0), rgba(212,175,55,.55), rgba(255,122,24,.35), rgba(212,175,55,.0));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.75; filter:blur(.2px);
  animation: vkSpin 8s linear infinite;
}
.vk-logo-wrap img.logo{width:86%; height:86%; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));}
@keyframes vkLogoIn{from{opacity:0; transform:translateY(14px) scale(.92); filter:blur(4px)}to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}}
@keyframes vkLogoGlow{0%,100%{box-shadow:0 0 0 1px rgba(212,175,55,.18), 0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(255,122,24,.08)}50%{box-shadow:0 0 0 1px rgba(212,175,55,.28), 0 18px 50px rgba(0,0,0,.55), 0 0 55px rgba(255,122,24,.18)}}
@keyframes vkSpin{to{transform:rotate(360deg)}}
.vk-kicker{font-size:11px; letter-spacing:3.2px; text-transform:uppercase; color:rgba(212,175,55,.9); margin-bottom:8px; animation: vkFadeUp .7s .15s both;}
.vk-brand{font-size:clamp(28px,7vw,40px); font-weight:700; color:#fff; letter-spacing:.2px; margin:0 0 6px; text-shadow:0 10px 30px rgba(0,0,0,.55); animation: vkFadeUp .7s .22s both;}
.vk-slogan{font-family:'Playfair Display', Georgia, serif; font-style:italic; font-size:clamp(15px,4.2vw,19px); color:var(--vk-muted); margin:0 0 18px; animation: vkFadeUp .7s .3s both;}
.vk-rule{width:72px; height:2px; margin:0 auto 18px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--vk-gold),transparent); opacity:.9; animation: vkFadeUp .7s .36s both;}
.vk-welcome{color:rgba(247,243,234,.9); font-size:15px; margin-bottom:22px; animation: vkFadeUp .7s .42s both;}
.vk-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:220px; padding:16px 28px; border-radius:999px; text-decoration:none;
  color:#120d08; background:linear-gradient(135deg,var(--vk-gold2),var(--vk-gold));
  font-weight:700; font-size:15px; letter-spacing:.3px;
  box-shadow:0 10px 28px rgba(212,175,55,.22), 0 2px 0 rgba(255,255,255,.15) inset;
  position:relative; overflow:hidden; transform:translateZ(0);
  animation: vkFadeUp .7s .5s both; transition:transform .2s ease, box-shadow .2s ease;
}
.vk-cta::after{content:""; position:absolute; inset:-40% -60%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-60%) rotate(12deg); animation: vkShine 4.5s 1.2s ease-in-out infinite;}
.vk-cta:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(212,175,55,.28), 0 2px 0 rgba(255,255,255,.18) inset;}
@keyframes vkShine{0%,70%,100%{transform:translateX(-60%) rotate(12deg)}85%{transform:translateX(60%) rotate(12deg)}}
@keyframes vkFadeUp{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}

/* Bottom tabs */
.vk-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(10,9,8,.55), rgba(10,9,8,.92));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top:1px solid var(--vk-line);
}
.vk-tab{
  appearance:none; border:0; background:transparent; color:var(--vk-muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:8px 4px; border-radius:14px; font:500 11px/1.1 var(--menu-font, 'Poppins', sans-serif); cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .12s ease;
}
.vk-tab i{width:20px; height:20px; color:rgba(212,175,55,.85)}
.vk-tab:active{transform:scale(.98)}
.vk-tab.active,.vk-tab:hover{color:#fff; background:rgba(212,175,55,.08)}

/* Bottom sheet */
.vk-sheet-backdrop{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:.22s ease;}
.vk-sheet-backdrop.open{opacity:1; visibility:visible;}
.vk-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  background:linear-gradient(180deg,#171411,#0f0d0b);
  border-top:1px solid var(--vk-line); border-radius:22px 22px 0 0;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -18px 50px rgba(0,0,0,.55); max-height:min(72vh, 560px); overflow:auto;
}
.vk-sheet-backdrop.open .vk-sheet{transform:translateY(0)}
.vk-sheet-handle{width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.18);margin:4px auto 14px;}
.vk-sheet-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.vk-sheet-head .vk-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(212,175,55,.10);color:var(--vk-gold);}
.vk-sheet-head .vk-ic i{width:20px;height:20px}
.vk-sheet-title{font-size:17px;font-weight:700;color:#fff;margin:0}
.vk-sheet-body{color:var(--vk-muted); font-size:14px; line-height:1.55}
.vk-row{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.vk-row:last-child{border-bottom:0}
.vk-row .k{min-width:92px; color:rgba(212,175,55,.85); font-size:12px; letter-spacing:.2px; text-transform:uppercase}
.vk-row .v{color:#fff; word-break:break-word}
.vk-row .v a{color:#fff; text-decoration:none; border-bottom:1px dashed rgba(212,175,55,.45)}
.vk-empty{padding:14px 4px; color:rgba(247,243,234,.62); font-size:14px}
.vk-badge{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:rgba(212,175,55,.10); color:var(--vk-gold2); font-size:13px; margin-top:4px}
.welcome-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; position:relative; z-index:2}
.loading-overlay{z-index:60!important}

@media (prefers-reduced-motion: reduce){
  .vk-ember,.welcome-container.vk-intro::before,.welcome-container.vk-intro::after,
  .vk-logo-wrap,.vk-logo-wrap::before,.vk-kicker,.vk-brand,.vk-slogan,.vk-rule,.vk-welcome,.vk-cta,.vk-cta::after{animation:none!important; opacity:1!important; transform:none!important}
}
@media (min-width:768px){ .vk-tabbar{max-width:560px; left:50%; transform:translateX(-50%); border-radius:18px 18px 0 0;} .vk-sheet{max-width:560px; left:50%; transform:translateX(-50%);} .vk-sheet-backdrop.open .vk-sheet{transform:translateX(-50%) translateY(0)} .vk-sheet{transform:translateX(-50%) translateY(105%)} }