/* ─────────────────────────────────────────────────────────────
   STAFF · snack — design tokens
   Warm, appetite-forward, high-contrast QSR system
   ───────────────────────────────────────────────────────────── */

/* Fonts are loaded by next/font in apps/web/src/app/layout.tsx — we just
   reference the CSS variables it exposes (--font-display, --font-ui,
   --font-mono) and provide system fallbacks.

   This file is only loaded by layout.tsx when active_theme === 'staff-snack'
   (via the conditional <link rel="stylesheet"> tied to customCssUrl). The
   selectors below are therefore unscoped — when the file is absent, no token
   is defined and the theme is fully inert. */

:root {
  /* — surfaces (warm cream foundation, hex equivalents of design's OKLCH) — */
  --ss-ink: #2a1f18;
  --ss-ink-2: #4a3a2e;
  /* WCAG AA: koyulaştırıldı (#7a6a5c → #6b5d50, kontrast 5.8:1 → ~7.4:1 on cream) */
  --ss-ink-3: #6b5d50;
  --ss-hair: #e4dbcb;
  /* Admin → Settings → Tema → brand_bg_color/brand_cream_color/brand_surface_color
     CSS variable'larına yazılıyor (--pr-bg, --pr-cream, --pr-surface). Bu token'ları
     staff-snack'in temel yüzey değerlerine bağlıyoruz ki admin değişiklikleri
     gerçekten siteye yansısın. Fallback değerleri default cream tasarımını korur. */
  --ss-cream: var(--pr-bg, #f5f1ea);
  --ss-cream-2: var(--pr-cream, #efe9de);
  --ss-paper: var(--pr-surface, #ffffff);

  /* — accents — */
  --ss-saffron: #e66525;
  --ss-saffron-d: #c14d11;
  --ss-ember: #d23a1b;
  --ss-mustard: #f2c94c;
  --ss-moss: #5a8a4a;
  --ss-berry: #8a3a5f;

  /* — radii — bottle-soft — */
  --ss-r-1: 8px;
  --ss-r-2: 14px;
  --ss-r-3: 22px;
  --ss-r-4: 32px;
  --ss-r-pill: 9999px;

  /* — type stack — */
  --ss-font-display: var(--font-display, 'Bricolage Grotesque', ui-serif, system-ui);
  --ss-font-ui: var(--font-ui, 'Geist', system-ui, -apple-system, sans-serif);
  --ss-font-mono: var(--font-mono, 'Geist Mono', ui-monospace, 'SF Mono', monospace);

  /* — elevation — warm shadow casts — */
  --ss-shadow-1: 0 1px 0 rgba(40, 28, 16, 0.04), 0 2px 6px rgba(40, 28, 16, 0.05);
  --ss-shadow-2: 0 8px 24px -8px rgba(40, 28, 16, 0.18), 0 2px 8px rgba(40, 28, 16, 0.06);
  --ss-shadow-3: 0 24px 48px -16px rgba(40, 28, 16, 0.25), 0 4px 12px rgba(40, 28, 16, 0.08);

  /* — spacing scale (4-based) — */
  --ss-s-1: 4px;
  --ss-s-2: 8px;
  --ss-s-3: 12px;
  --ss-s-4: 16px;
  --ss-s-5: 20px;
  --ss-s-6: 24px;
  --ss-s-8: 32px;
  --ss-s-10: 40px;
  --ss-s-12: 48px;
}

/* Premium dark variant — applied when admin selects HomePremium home variant. */
:root[data-theme-mode='dark'] {
  --ss-ink: #f5f1ea;
  --ss-ink-2: #d6cdbd;
  --ss-ink-3: #9a8e7d;
  --ss-hair: #3f3326;
  --ss-cream: #1f1812;
  --ss-cream-2: #2b2218;
  --ss-paper: #2f261b;
  --ss-saffron: #f3823f;
  --ss-mustard: #f2c94c;
}

/* ── Reset + base type ─────────────────────────────────────── */
.ss-reset,
.ss-reset *,
.ss-reset *::before,
.ss-reset *::after {
  box-sizing: border-box;
}
.ss-reset {
  font-family: var(--ss-font-ui);
  color: var(--ss-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  line-height: 1.35;
  /* Mobil tap-highlight gri parlaması yerine ss-btn:active scale animasyonu */
  -webkit-tap-highlight-color: transparent;
}
/* İkon/glyph içeren butonlarda metin seçimi kapalı */
.ss-reset button,
.ss-reset [role='button'] {
  user-select: none;
}
/* Klavye odağı görünür — input/textarea/button — outline: none yapılan yerleri telafi eder */
.ss-reset input:focus-visible,
.ss-reset textarea:focus-visible,
.ss-reset select:focus-visible,
.ss-reset button:focus-visible,
.ss-reset a:focus-visible,
.ss-reset [tabindex]:focus-visible {
  outline: 2px solid var(--ss-ember);
  outline-offset: 2px;
}
/* Input/textarea/select focus ring — outline'a ek olarak saffron border + soft
   shadow. Touch device'larda (focus-visible olmasa da focus aktifken) görünür
   bir feedback verir. Login/Register/Checkout form'ları inline styled olduğu
   için bu global selector hepsini kapsar. */
.ss-reset input:focus,
.ss-reset textarea:focus,
.ss-reset select:focus {
  border-color: var(--ss-saffron, var(--ss-ember));
  box-shadow: 0 0 0 3px rgba(230, 101, 37, 0.18);
}
.ss-reset img {
  max-width: 100%;
  display: block;
}
.ss-reset button {
  font-family: inherit;
}
.ss-reset h1,
.ss-reset h2,
.ss-reset h3,
.ss-reset h4,
.ss-reset p {
  margin: 0;
}

/* ── Typography roles ──────────────────────────────────────── */
.ss-t-display {
  font-family: var(--ss-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.ss-t-h1 {
  font-family: var(--ss-font-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1;
  font-size: 36px;
}
.ss-t-h2 {
  font-family: var(--ss-font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.05;
  font-size: 24px;
}
.ss-t-h3 {
  font-family: var(--ss-font-display);
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.1;
  font-size: 18px;
}
.ss-t-eyebrow {
  font-family: var(--ss-font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ss-ink-3);
}
.ss-t-body {
  font-family: var(--ss-font-ui);
  font-weight: 400;
  font-size: 14px;
}
.ss-t-body-sm {
  font-family: var(--ss-font-ui);
  font-weight: 400;
  font-size: 12px;
  color: var(--ss-ink-2);
}
.ss-t-num {
  font-family: var(--ss-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ss-t-label {
  font-family: var(--ss-font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
}

/* ── Atoms — buttons, chips, tags, cards ───────────────────── */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-family: var(--ss-font-ui);
  font-weight: 600;
  padding: 14px 22px;
  border-radius: var(--ss-r-pill);
  transition:
    transform 0.12s,
    background 0.15s;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.ss-btn:active {
  transform: scale(0.97);
}
.ss-btn-primary {
  background: var(--ss-ink);
  color: var(--ss-cream);
}
.ss-btn-accent {
  background: var(--ss-saffron);
  color: var(--ss-ink);
}
.ss-btn-ghost {
  background: transparent;
  color: var(--ss-ink);
  border: 1.5px solid var(--ss-ink);
}
.ss-btn-block {
  width: 100%;
}
.ss-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--ss-r-pill);
  font-family: var(--ss-font-ui);
  font-weight: 600;
  font-size: 13px;
  background: var(--ss-paper);
  color: var(--ss-ink);
  border: 1px solid var(--ss-hair);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
  cursor: pointer;
}
.ss-chip-active {
  background: var(--ss-ink);
  color: var(--ss-cream);
  border-color: var(--ss-ink);
}
.ss-chip-hot {
  background: var(--ss-ember);
  color: var(--ss-cream);
  border-color: var(--ss-ember);
}

.ss-tag {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--ss-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ss-tag-veg {
  background: rgba(90, 138, 74, 0.18);
  color: var(--ss-moss);
}
.ss-tag-hot {
  background: rgba(210, 58, 27, 0.18);
  color: var(--ss-ember);
}
.ss-tag-new {
  background: var(--ss-ink);
  color: var(--ss-cream);
}
.ss-tag-sweet {
  background: rgba(138, 58, 95, 0.2);
  color: var(--ss-berry);
}

.ss-card {
  background: var(--ss-paper);
  border-radius: var(--ss-r-3);
  box-shadow: var(--ss-shadow-1);
}
.ss-divider {
  height: 1px;
  background: var(--ss-hair);
}

/* ── Image placeholder ─────────────────────────────────────── */
.ss-img-ph {
  background: repeating-linear-gradient(
    135deg,
    rgba(230, 101, 37, 0.28) 0 8px,
    rgba(230, 101, 37, 0.18) 8px 16px
  );
  color: var(--ss-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ss-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--ss-r-2);
}
.ss-img-ph[data-tone='berry'] {
  background: repeating-linear-gradient(135deg, rgba(138, 58, 95, 0.3) 0 8px, rgba(138, 58, 95, 0.18) 8px 16px);
}
.ss-img-ph[data-tone='moss'] {
  background: repeating-linear-gradient(135deg, rgba(90, 138, 74, 0.3) 0 8px, rgba(90, 138, 74, 0.18) 8px 16px);
}
.ss-img-ph[data-tone='ember'] {
  background: repeating-linear-gradient(135deg, rgba(210, 58, 27, 0.3) 0 8px, rgba(210, 58, 27, 0.18) 8px 16px);
}
.ss-img-ph[data-tone='mustard'] {
  background: repeating-linear-gradient(135deg, rgba(242, 201, 76, 0.4) 0 8px, rgba(242, 201, 76, 0.25) 8px 16px);
}
.ss-img-ph[data-tone='ink'] {
  background: repeating-linear-gradient(135deg, #3a2d20 0 8px, #2f2419 8px 16px);
  color: var(--ss-cream);
}

/* ── Screen container ──────────────────────────────────────── */
.ss-screen {
  width: 100%;
  min-height: 100dvh;
  background: var(--ss-cream);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Desktop responsive shell — Login/Register/Contact/Profile/Orders/Campaigns/
   Branches gibi sayfalar henüz dedicated DesktopXxx variant'ına sahip değil.
   Mobile layout direkt desktop'a düşmesin diye desktop'ta orta hizada kart
   görünümü veriyoruz. Form ağırlıklı sayfalar dar (720px), liste ağırlıklı
   sayfalar geniş (1080px). */
@media (min-width: 1024px) {
  .ss-page-narrow {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
  }
  .ss-page-wide {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Shared desktop shell — Header / Footer / DesktopHomepage / DesktopCheckout /
   DesktopProductDetail hepsi aynı 1440px container'ı + 24px yatay padding'i
   paylaşır. Mobile'da pasif (sadece width: 100%) — mobile section'lar kendi
   18px padding'lerini kullanır. */
.ss-shell {
  width: 100%;
}
@media (min-width: 1024px) {
  .ss-shell {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Section padding helper — mobile'da yatay padding verir, desktop'ta sıfırlar
   (ss-page-narrow / ss-page-wide / ss-shell wrapper zaten hizalı padding
   sağlıyor). Section'larda iki katmanlı padding'i önler.
   2026-05: 18px → 20px — header (MobileTopBar 14px 20px) ile birebir hizalı
   olsun ve kart kenarlarında ekrandan biraz daha belirgin nefes alanı kalsın. */
.ss-section-pad {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 1024px) {
  .ss-section-pad {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Live status pulse ─────────────────────────────────────── */
@keyframes ss-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Skeleton loader — soft pulse for hero promo card while /promotions/public
   loads. Önceden statik turuncu placeholder + yanlış dil text flash'ı yerine
   nötr soluk pulse (2026-05-26). */
@keyframes ss-skeleton-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}
.ss-skeleton-pulse {
  animation: ss-skeleton-pulse 1.4s ease-in-out infinite;
}

/* Fade-in — skeleton'dan gerçek karta yumuşak geçiş. Flash yerine 350ms
   opacity rampe. Resim load fade-in'i ayrı (HeroPromoCard içinde inline). */
@keyframes ss-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ss-fade-in {
  animation: ss-fade-in 0.35s ease-out;
}
.ss-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ss-moss);
  animation: ss-pulse 1.4s ease-in-out infinite;
}

/* ── Approaching ring (OrderDetail driver-on-the-way) ─────────
   Privacy-aware substitute for an exact GPS pin. Pulsing concentric
   circles communicate proximity without leaking the driver's actual
   coordinates (see /docs design analysis re: GDPR). */
@keyframes ss-approach-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.65;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.7);
    opacity: 0;
  }
}
.ss-approach-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid var(--ss-saffron);
  pointer-events: none;
  animation: ss-approach-ring 2.4s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}
.ss-approach-ring--fast {
  animation-duration: 1.4s;
}
.ss-approach-ring--delay-1 {
  animation-delay: 0.8s;
}
.ss-approach-ring--delay-2 {
  animation-delay: 1.6s;
}
@media (prefers-reduced-motion: reduce) {
  .ss-approach-ring {
    animation: none;
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* ── Sticky cart pill (used across home/menu) ──────────────── */
/* Z-index ölçeği — bkz. plan dosyası:
   20 header sticky / 40 BottomNav fixed / 50 StickyCartPill (BottomNav üstü) /
   60-61 SideDrawer / 100-101 CartDrawer / 120 Splash */
.ss-cart-pill {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  background: var(--ss-ink);
  color: var(--ss-cream);
  border-radius: var(--ss-r-pill);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--ss-shadow-3);
  z-index: 50;
  font-family: var(--ss-font-ui);
  font-weight: 600;
}

/* ── Mobile bottom nav — fixed to viewport bottom ──────────── */
.ss-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /* 10px → 12px vertical padding: tap target hit zone'unu 44pt minimum'a daha güvenli yaklaştırır
     (icon ~20px + label ~14px = ~34px; 12+34+12 = 58px; safe-area-inset alt için ekstra). */
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--ss-paper);
  border-top: 1px solid var(--ss-hair);
  z-index: 40;
}

/* Mobil/tablet portrait (≤1023px) — BottomNav fixed, sayfa altına yüksekliği
   kadar boşluk bırak. Desktop'ta (≥1024) nav gizli, padding sıfırlanır.
   data-hide-bottom-nav='true' set edilen ekranlarda (auth/checkout/splash) padding iptal.
   data-cart-active='true' (StickyCartPill mount edildi) → pill yüksekliği kadar
   ek tampon bırakılır ki sayfa içerikleri pill altında kaybolmasın. */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body[data-cart-active='true'] {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
  body[data-hide-bottom-nav='true'] {
    padding-bottom: 0;
  }
}

/* ── Side drawer (sağdan açılır menü) ──────────────────────── */
.ss-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.ss-drawer-backdrop[data-open='true'] {
  opacity: 1;
  pointer-events: auto;
}
.ss-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: var(--ss-cream);
  z-index: 61;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition:
    transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 240ms cubic-bezier(0.32, 0.72, 0, 1);
  /* Shadow yalnızca drawer açıkken uygulanır. Kapalıyken translateX(100%) ile
     ekran dışındaki drawer'ın -8px 0 shadow'u viewport'un sağ kenarına
     bleed ediyordu (kullanıcının "boydan boya kararma" şikayeti). */
}
.ss-drawer[data-open='true'] {
  transform: translateX(0);
  box-shadow: -8px 0 24px rgba(20, 18, 16, 0.12);
}
.ss-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-family: var(--ss-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ss-ink);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.ss-drawer-link:hover {
  background: var(--ss-paper);
}
.ss-drawer-link[data-active='true'] {
  background: var(--ss-paper);
  color: var(--ss-ember);
}
.ss-drawer-link-glyph {
  width: 22px;
  text-align: center;
  font-family: var(--ss-font-mono);
  font-size: 18px;
  color: var(--ss-ink-3);
  flex-shrink: 0;
}

/* ── Hide scrollbars inside scroll containers ──────────────── */
.ss-no-scrollbar::-webkit-scrollbar {
  display: none;
}
.ss-no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Reduced motion respect ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ss-btn,
  .ss-pulse-dot,
  .ss-drawer,
  .ss-drawer-backdrop,
  .ss-chip,
  .ss-cart-pill {
    transition: none;
    animation: none;
  }
}

/* ── Responsive switch — utility wrappers ──────────────────── */
/* `<div class="ss-mobile-only">` and `<div class="ss-desktop-only">` let a
   single page.tsx ship both mobile and desktop overrides; only one is
   displayed per viewport. Switch point: 1024px (tablet-landscape and up
   gets the desktop layout — phones + portrait tablets stay on mobile). */
/* display:contents (block değil) — wrapper kendi kutusunu üretmesin; içindeki
   position:sticky header/footer'ın kapsayan bloğu body olsun ve gerçekten
   yapışsın. block olsaydı wrapper sadece header boyunda kalıp sticky'i hapseder,
   header kayıp gider ve alttaki kategori şeridiyle ekran üstü arası boşluk açılır. */
.ss-mobile-only {
  display: contents;
}
.ss-desktop-only {
  display: none;
}
@media (min-width: 1024px) {
  .ss-mobile-only {
    display: none;
  }
  .ss-desktop-only {
    display: contents;
  }
}