/* Customer Modern + Animasyonlu UI - v2026-Fix */
:root{
  --accent3:#b07cff;
}

/* --- HEADER & İKONLAR --- */
header .iconBtn{
  position:relative;
  overflow:hidden;
}
header .iconBtn::before{
  content:"";
  position:absolute;
  inset:-70%;
  background:conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity:.35;
  animation:spinSoft 3.4s linear infinite;
  pointer-events:none;
}
header .iconBtn::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(10,15,25,.35), rgba(10,15,25,.78));
  pointer-events:none;
}
header .iconBtn > *{
  position:relative;
  z-index:1;
}

@keyframes spinSoft{to{transform:rotate(360deg)}}

/* --- GRID & SCROLLBAR (Liste Kaydırma Ayarları) --- */
/* Not: HTML içinde .grid sınıfına height verilmişse bu stiller onu destekler */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

/* --- KART TASARIMI INDEX.HTML DOSYASINA TAŞINDI --- */

/* --- ROZETLER --- */
.badgeTag{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.badgeTag.promo{ color:#ffe7ef; border-color:rgba(255,77,109,.35); background:rgba(255,77,109,.25) }
.badgeTag.rec{ color:#d0f0ff; border-color:rgba(57,208,255,.35); background:rgba(57,208,255,.25) }

/* --- GARSON BUTONU (GÖRÜNÜRLÜK DÜZELTMESİ) --- *//* --- GARSON BUTONU GÖRÜNÜRLÜK DÜZELTMESİ --- */
.fabWaiter {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  
  /* Rengi daha belirgin yap */
  background: linear-gradient(135deg, #ff9f45, #ff4d6d);
  
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 25px rgba(255, 77, 109, 0.4);
  
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 22px;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* EN ÖNEMLİ KISIM: Diğer öğelerin üstüne çıkar */
  position: relative;
  z-index: 9999 !important; 
  pointer-events: auto;
}

.fabWaiter:active {
  transform: scale(0.9);
}

.fabWaiter svg {
  fill: #fff;
  width: 24px;
  height: 24px;
}
/* --- SHEET (Sepet) --- */
.sheet{
  transform: translateY(18px);
  /* Sepet açıkken garson butonunun altında kalmaması için z-index ayarı */
  z-index: 100; 
}
.sheet.show{
  animation:sheetUp .24s ease both;
}
@keyframes sheetUp{from{transform:translateY(22px); opacity:0}to{transform:translateY(0); opacity:1}}

/* --- SİPARİŞ LİSTESİ --- */
.orderRow{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:8px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
}
.orderRow::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity:.22;
  animation:spinSoft 5.4s linear infinite;
  pointer-events:none;
}
.orderRow > *{position:relative; z-index:1}

.orderTop{display:flex;justify-content:space-between;gap:10px;align-items:center}
.orderMeta{color:var(--muted);font-size:12px}
.orderItems{color:rgba(233,240,255,.86);font-size:13px;line-height:1.35}
.orderPill{
  padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:var(--muted);white-space:nowrap;
}
.orderPill.pending{background:rgba(57,208,255,.14);color:var(--text);border-color:rgba(57,208,255,.28)}
.orderPill.prep{background:rgba(255,204,0,.12);color:var(--text);border-color:rgba(255,204,0,.28)}
.orderPill.ready{background:rgba(65,242,182,.14);color:var(--text);border-color:rgba(65,242,182,.28)}
.orderPill.del{background:rgba(255,255,255,.10);color:var(--text)}
.orderPill.can{background:rgba(255,77,109,.14);color:var(--text);border-color:rgba(255,77,109,.28)}

/* === FIX: Overlay Click Sorunu === */
.sheet,
#ordersSheet {
  pointer-events: none !important;
}

.sheet.show,
#ordersSheet.show {
  pointer-events: auto !important;
}

/* === FIX: Alt Menü Z-Index === */
.bottomBar,
#checkoutBtn,
#callWaiter,
#myOrdersBtn {
  position: relative !important;
  z-index: 9999 !important;
}

.bottomBar {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999 !important;
}


/* === FIX: Header Sepet İkonu Tıklama Sorunu === */
.header,
.topBar,
header {
  position: relative !important;
  z-index: 10000 !important;
}

.header button,
.header .iconBtn,
#checkoutBtn {
  position: relative !important;
  z-index: 10001 !important;
}



/* === FIX: Header ikonlarının tıklanması === */
header { z-index: 10000 !important; }
header .headRight, header .iconBtn, #userBtn, #openCart, #myOrdersBtn {
  position: relative !important;
  z-index: 10001 !important;
  pointer-events: auto !important;
}

/* === FIX: Auth modal (giriş/kayıt) === */
.authModal{
  display:none;
  position:fixed;
  inset:0;
  z-index: 20000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.authModal.show{ display:flex; }
.authBox{
  width:min(420px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(18,26,44,.92), rgba(10,16,28,.72));
  box-shadow: 0 16px 60px rgba(0,0,0,.55);
  padding: 18px;
}
.authBox .hr{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}


/* === EXTRA CLICK FIX (safety) === */
.footerBar, .footerInner { pointer-events: auto !important; }
.footerBar { z-index: 9985 !important; }
body.hasFooter .footerBar{ bottom: 64px !important; }


/* === LOGO INTRO (flash-like) === */
body.intro-lock{ overflow:hidden; }
.intro{
  position:fixed; inset:0; z-index:50000;
  display:grid; place-items:center;
  opacity:0; pointer-events:auto;
  background: radial-gradient(1000px 700px at 50% 30%, rgba(57,208,255,.22), transparent 60%),
              radial-gradient(900px 700px at 30% 80%, rgba(65,242,182,.18), transparent 60%),
              radial-gradient(700px 500px at 80% 70%, rgba(255,77,109,.12), transparent 60%),
              linear-gradient(180deg, rgba(4,8,14,.96), rgba(4,8,14,.86));
  transition: opacity .45s ease;
}
.intro.show{ opacity:1; }
.intro.hide{ opacity:0; pointer-events:none; }

.introBg{
  position:absolute; inset:-20%;
  background: conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:.18;
  animation:introSpin 6.5s linear infinite;
  filter: blur(0px);
}
@keyframes introSpin{ to{ transform: rotate(360deg); } }

.introInner{
  position:relative;
  width:min(520px, 92vw);
  padding:28px 22px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  display:grid;
  gap:14px;
  justify-items:center;
  overflow:hidden;
  transform: translateY(14px) scale(.985);
  animation:introIn .55s cubic-bezier(.2,1.2,.2,1) forwards;
}
@keyframes introIn{ to{ transform: translateY(0) scale(1); } }

.introLogoWrap{
  width:116px; height:116px;
  border-radius:30px;
  position:relative;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 55px rgba(57,208,255,.15);
  overflow:hidden;
}

.introLogo{
  width:96px; height:96px;
  object-fit:contain;
  transform: translateZ(0) scale(.92);
  animation:logoPop 1.15s cubic-bezier(.2,1.2,.2,1) forwards;
}
@keyframes logoPop{ 0%{ transform:scale(.78); filter: blur(1px); opacity:.0 } 45%{ opacity:1 } 100%{ transform:scale(1); filter: blur(0); opacity:1 } }

.introGlow{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 50% 50%, rgba(57,208,255,.35), transparent 55%);
  opacity:.65;
  animation:glowPulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{ 0%,100%{ transform:scale(1); opacity:.55 } 50%{ transform:scale(1.06); opacity:.85 } }

.introScan{
  position:absolute; left:-60%; top:-40%; width:220%; height:220%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: rotate(22deg);
  opacity:.28;
  animation:scanMove 1.35s ease-in-out infinite;
  pointer-events:none;
}
@keyframes scanMove{ 0%{ transform: translateX(-18%) rotate(22deg) } 100%{ transform: translateX(18%) rotate(22deg) } }

.introText{ text-align:center; }
.introTitle{ font-weight:950; font-size:20px; letter-spacing:-.3px; }
.introSub{ color:rgba(233,240,255,.72); font-size:12px; margin-top:4px; }
.introHint{
  margin-top:2px;
  font-size:12px;
  color:rgba(233,240,255,.62);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  padding:8px 12px;
  border-radius:999px;
  animation:hintPulse 1.3s ease-in-out infinite;
}
@keyframes hintPulse{ 0%,100%{ transform:translateY(0); opacity:.75 } 50%{ transform:translateY(-2px); opacity:1 } }

@media (prefers-reduced-motion: reduce){
  .introBg, .introGlow, .introScan, .introHint, .introInner, .introLogo{ animation:none !important; }
}

/* === EXTRA FLASH ANIMATIONS (customer only) === */
body.customer::before{
  content:"";
  position:fixed;
  inset:-20%;
  background: radial-gradient(900px 600px at 10% 30%, rgba(176,124,255,.12), transparent 60%),
              radial-gradient(900px 700px at 90% 70%, rgba(57,208,255,.10), transparent 60%);
  opacity:.55;
  pointer-events:none;
  filter: blur(0px);
  animation: bgDrift 10s ease-in-out infinite;
  z-index:-1;
}
@keyframes bgDrift{ 0%,100%{ transform:translate3d(-1.5%,0,0) } 50%{ transform:translate3d(1.5%, -1%, 0) } }

/* grid/cards entrance */
.pCard{ animation: cardIn .42s ease both; animation-delay: var(--d, 0ms); }
@keyframes cardIn{ from{ opacity:0; transform: translateY(10px) scale(.985) } to{ opacity:1; transform: translateY(0) scale(1) } }
.chip{ animation: chipIn .35s ease both; animation-delay: var(--d, 0ms); }
@keyframes chipIn{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform: translateY(0) } }

/* CTA shimmer stronger */
.footerBar.hasItems .barCta{ box-shadow:0 18px 44px rgba(57,208,255,.22); }


/* === Ürün Seçimi + Sipariş Onay Modalları (v20260216) === */
.orderReviewModalBox{
  width:min(980px,92vw);
  max-height:85vh;
  overflow:hidden;
  padding:16px;
  color:#fff;
}
.modal.glass .mtitle { color: #fff; }
.modal.glass .label { color: #fff; }
.orderReviewTableWrap{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:auto;
  max-height:55vh;
  background:rgba(0,0,0,.16);
}
.orderReviewTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.orderReviewTable thead th{
  text-align:left;
  padding:10px 12px;
  color:rgba(233,240,255,.78);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  position:sticky;
  top:0;
  z-index:2;
}
.orderReviewTable tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
  color:#fff;
}
.orderReviewTable tbody tr:hover td{
  background:rgba(255,255,255,.03);
}
.orderReviewFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.orderReviewTotal{
  font-size:14px;
  display:flex;
  align-items:baseline;
  gap:8px;
  color:#fff;
}
.orderReviewTotal b{
  font-size:16px;
}
.orderLineDetail{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:rgba(233,240,255,.62);
  line-height:1.25;
}
.orderLineBtn{
  padding:6px 10px;
  height:auto;
  font-size:12px;
  border-radius:12px;
}
@media (max-width:640px){
  .orderReviewModalBox{padding:14px}
  .orderReviewFoot{flex-direction:column; align-items:stretch}
  .orderReviewFoot .btn{width:100%}
}


/* FooterBar görünür olsun: müşteri alt barı footer yüksekliği kadar yukarı al */
body.hasFooter .bottomBar{ bottom:78px !important; }
@media (max-width:480px){ body.hasFooter .bottomBar{ bottom:88px !important; } }