/* Shine Cafe — cam.css: ortak cam tasarım dili (site + panel; 22 Ekim cam arayüz). Her sayfa pages.css'ten hemen sonra, sayfaya özel
   stillerden (panelde panel.css'ten) önce yükler. İçerik: token'lar (cam yüzey/kenar/bulanıklık, mor–kırmızı ışık, teknik yazı),
   yardımcı sınıflar (.cam, .cam-chip, .cam-mono, .cam-live, .cam-btn-primary) ve mevcut bileşenlerin cam görünümü (başlık, yüzen alt
   sekme çubuğu, kart, düğme, çip) — yerleşim değişmez. Renkler yalnız :root'ta; buzlu cam desteklenmiyorsa düz koyu yüzey.
   Panel yalnız token'ları alır: zemin ışığı ve bileşen yenilemesi panel dışında (panel kabuğu kendi görevinde yenilenir). */

:root {
  --cam-bg-glow: radial-gradient(120% 60% at 15% 0%, rgba(124,58,237,.5) 0%, transparent 55%), radial-gradient(90% 55% at 100% 25%, rgba(225,29,72,.45) 0%, transparent 55%);
  --cam-surface: rgba(255,255,255,.07);
  --cam-surface-hi: rgba(255,255,255,.11);
  --cam-border: rgba(255,255,255,.13);
  --cam-blur: 14px;
  --cam-radius: 16px;
  --cam-tint: rgba(12,10,18,.5);         /* başlık / sekme çubuğu camı: bulanık zemin üstünde okunurluk için koyu ton */
  --cam-tint-strong: rgba(12,10,18,.8);  /* kaydırılmış başlık */
  --cam-solid: #17141b;                  /* buzlu cam yoksa (ya da sabit kartta) düz yüzey */
  --cam-label: #a8a0b8;                  /* küçük büyük harfli etiket (≥ 7:1) */
  --cam-live: #22c55e;                   /* canlı nokta */
  --cam-on-red: #fff;
  --cam-red-hi: #f01b25;
  --font-mono: ui-monospace, Menlo, monospace;
}

/* ---------- Zemin: mor–kırmızı ışık ----------
   Görüntü alanına sabit katman (gövde zemini tuvale yayıldığından gradyan uzun sayfada esnemesin); kendi zemini olan bölümler örter. */
body:not([data-page="panel"])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cam-bg-glow);
}

/* ---------- Yardımcı sınıflar ---------- */
.cam {
  background: var(--cam-surface);
  -webkit-backdrop-filter: blur(var(--cam-blur));
  backdrop-filter: blur(var(--cam-blur));
  border: 1px solid var(--cam-border);
  border-radius: var(--cam-radius);
}
.cam-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--cam-border);
  border-radius: 999px;
  background: var(--cam-surface);
  color: var(--gray-light);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .12s var(--ease);
}
.cam-chip:hover { color: var(--cream); background: var(--cam-surface-hi); }
.cam-chip:active { transform: scale(.97); }
.cam-chip.is-on, .cam-chip[aria-pressed="true"] { color: var(--cam-on-red); background: var(--red); border-color: var(--red); box-shadow: 0 4px 14px var(--red-glow); }
@media (hover: none) { .cam-chip { min-height: 44px; } }
.cam-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cam-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cam-label);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cam-live::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cam-live);
  box-shadow: 0 0 8px var(--cam-live);
  animation: cam-pulse 2.4s ease-in-out infinite;
}
@keyframes cam-pulse { 50% { opacity: .45; } }
.cam-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid var(--red);
  border-radius: 12px;
  background: var(--red);
  color: var(--cam-on-red);
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 6px 18px var(--red-glow);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.cam-btn-primary:hover { background: var(--cam-red-hi); border-color: var(--cam-red-hi); box-shadow: 0 8px 26px var(--red-glow); }
.cam-btn-primary:active { transform: scale(.97); }

/* ---------- Mevcut bileşenler (panel dışı; :where → özgüllük değişmez, sayfaya özel kurallar yine kazanır) ---------- */
:where(body:not([data-page="panel"])) { --glass: var(--cam-surface); } /* .btn, .hdr-login ve çekmece yüzeyleri cama geçer */
:where(body:not([data-page="panel"])) .card { background-color: var(--cam-surface); border-color: var(--cam-border); border-radius: var(--cam-radius); }
.card.push-card { background-color: var(--cam-solid); } /* sabit (fixed) kart: altındaki içerik görünmesin */
:where(body:not([data-page="panel"])) .chip { background: var(--cam-surface); border-color: var(--cam-border); }
.branch-toggle { background: var(--cam-surface); border-color: var(--cam-border); }
.hdr-login { border-color: var(--cam-border); }

/* Başlık: koyu tonlu buzlu cam, ince açık kenar (yerleşim components.css'te). */
.header::before {
  background: var(--cam-tint);
  -webkit-backdrop-filter: blur(var(--cam-blur)) saturate(160%);
  backdrop-filter: blur(var(--cam-blur)) saturate(160%);
  border-bottom-color: var(--cam-border);
}
.header.is-scrolled::before { background: var(--cam-tint-strong); }

/* ---------- Alt sekme çubuğu: yüzen cam (kenarlardan 10 px, alt güvenli alanın üstünde) ----------
   Ana · Menü · Rezervasyon · Hesabım. Etkin sekme Shine kırmızısı ikon + parıltılı zemin; gövde altı çubuk + 20 px boşluk. */
@media (max-width: 860px) {
  body { padding-bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
  .tabbar {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
    grid-template-columns: repeat(4, 1fr);
    height: var(--tabbar-h);
    padding: 0 4px;
    border: 1px solid var(--cam-border);
    border-radius: 20px;
    background: var(--cam-tint);
    -webkit-backdrop-filter: blur(var(--cam-blur)) saturate(160%);
    backdrop-filter: blur(var(--cam-blur)) saturate(160%);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
  .tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a[aria-current="page"] { color: var(--cream); }
  .tabbar a[aria-current="page"]::before {
    top: 6px; bottom: 6px; left: 6px; right: 6px;
    z-index: -1;
    width: auto; height: auto;
    margin: 0;
    border-radius: 14px;
    background: radial-gradient(80% 90% at 50% 30%, var(--red-glow), transparent 75%);
    box-shadow: none;
    opacity: .55;
  }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  .cam-live::before { animation: none; }
  .cam-chip, .cam-btn-primary { transition: none; }
  .cam-chip:active, .cam-btn-primary:active { transform: none; }
}

/* ---------- Buzlu cam desteklenmiyorsa: düz koyu yüzey (yarı saydam yüzey bulanıksız okunmaz) ---------- */
@supports not (backdrop-filter: blur(1px)) {
  @supports not (-webkit-backdrop-filter: blur(1px)) {
    .cam, .header::before, .header.is-scrolled::before, .tabbar { background: var(--cam-solid); }
  }
}