/* ================================================================
 * Yalla Market — landing page (2026-10-17 redesign)
 *
 * One stylesheet in the app's own visual language (the v5.12 storefront):
 * warm off-white and beige surfaces, white cards with soft shadows, the
 * brand orange, pastel tiles (sale pink, new mint, offers lilac), Inter
 * for Latin scripts and IBM Plex Sans Arabic for Arabic. The hero phone draws the app's
 * Home the way the current app draws it; the rest of the page shows real
 * screens of the current app (img/app/{tr,en,ar}/*.webp).
 *
 * Direction: logical properties throughout, so Arabic (dir="rtl") mirrors
 * without a second set of rules; numbers and Latin runs keep LTR inside.
 * ================================================================ */

:root {
  --orange: #FF6A00;
  --orange-2: #FF8A1F;
  --amber: #FFA301;
  --orange-ink: #C2410C;
  --orange-soft: #FFF0E4;
  --ink: #24160C;
  --ink-2: #5C4A3B;
  --ink-3: #756353;
  --bg: #FFFCF8;
  --beige: #F6EFE6;
  --beige-2: #EFE5D8;
  --card: #FFFFFF;
  --line: rgba(36, 22, 12, .09);
  --line-2: rgba(36, 22, 12, .15);
  --pink: #FDECEF; --pink-line: #F7CCD6; --pink-ink: #B4234A;
  --mint: #E6F6EE; --mint-line: #BEE6CF; --mint-ink: #157A47;
  --lilac: #F1ECFB; --lilac-line: #DCCFF6; --lilac-ink: #6B3FB8;
  --sky: #E8F1FD; --sky-ink: #1D5FA8;
  --gold: #FFF4DB; --gold-ink: #B7791F;
  --dark: #1E140C;
  --dark-2: #2C1C0F;
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --sh-1: 0 1px 2px rgba(36, 22, 12, .05), 0 10px 28px -14px rgba(36, 22, 12, .18);
  --sh-2: 0 2px 6px rgba(36, 22, 12, .06), 0 26px 50px -22px rgba(36, 22, 12, .32);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-arabic: 'Inter', 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
  --nav-h: 68px;
  --container: 1180px;
}

/* The live settings hide what the app does not offer (payment chips, footer badges). */
[hidden] { display: none !important; }

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir="rtl"] body, html[dir="rtl"] { font-family: var(--font-arabic); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
.flag-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.bidi-ltr { unicode-bidi: isolate; direction: ltr; }
.bidi-auto { unicode-bidi: plaintext; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; }
.section--beige { background: var(--beige); }
.section--dark { background: var(--dark); color: #fff; }

/* ── Section headings ── */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--orange-soft); color: var(--orange-ink);
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  margin-bottom: 16px;
}
.section-label--start { margin-inline-end: auto; }
.section-label--light { background: rgba(255, 255, 255, .2); color: #fff; }
.section--dark .section-label { background: rgba(255, 106, 0, .18); color: #FFB37A; }
.section-title {
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; font-weight: 800;
  letter-spacing: -.025em; color: var(--ink); margin-bottom: 14px;
}
[dir="rtl"] .section-title, [dir="rtl"] .hero-title, [dir="rtl"] .chef__title, [dir="rtl"] .cta__title { letter-spacing: 0; line-height: 1.3; }
.section-subtitle { font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: 14px;
  font-size: 15.5px; font-weight: 700; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
}
.btn--primary { background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; box-shadow: 0 10px 22px -10px rgba(255, 106, 0, .7); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(255, 106, 0, .75); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 22px 0 18px; border-radius: 16px;
  background: var(--dark); color: #fff;
  box-shadow: 0 12px 24px -14px rgba(30, 20, 12, .7);
  transition: transform .2s ease, box-shadow .2s ease;
}
[dir="rtl"] .store-btn { padding: 0 18px 0 22px; }
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(30, 20, 12, .75); }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn__label { display: flex; flex-direction: column; line-height: 1.15; }
.store-btn__label small { font-size: 11px; font-weight: 500; opacity: .75; }
.store-btn__label strong { font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; }
.store-btn--light { background: #fff; color: var(--ink); box-shadow: 0 12px 24px -14px rgba(30, 20, 12, .45); }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); flex: none; animation: livePulse 2.4s ease-in-out infinite; }

/* ================================================================
 * NAVBAR
 * ================================================================ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 252, 248, .78);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(36, 22, 12, .35); background: rgba(255, 252, 248, .9); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__logo img { height: 38px; width: auto; max-width: 160px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav__links a { padding: 8px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color .2s, background .2s; }
.nav__links a:hover { color: var(--ink); background: rgba(36, 22, 12, .05); }
/* Where the reader is: the section in view (scrollspy in app.js). */
.nav__links a.is-current { color: var(--orange-ink); background: var(--orange-soft); }
.mobile-menu__links a.is-current { color: var(--orange-ink); }
/* Keyboard users jump past the nav; invisible until focused. */
.skip-link {
  position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 1000;
  padding: 10px 16px; border-radius: 12px; background: var(--dark); color: #fff; font-weight: 700;
  transform: translateY(-160%); transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; outline: 3px solid var(--orange); outline-offset: 2px; }

/* ═══ AT A GLANCE — the live facts under the hero (owner, 2026-10-18: out of the hero, simple and
   professional). One white card overlapping the hero's lower edge: four quiet columns, an icon tile,
   a figure and a word each, hairline dividers. Two by two on a phone. ═══ */
.glance { position: relative; z-index: 2; margin-top: -52px; }
.glance__list {
  display: flex; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.glance__item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 22px 26px; }
.glance__item:not([hidden]) ~ .glance__item:not([hidden]) { border-inline-start: 1px solid var(--line); }
.glance__ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; }
.glance__ico svg { width: 22px; height: 22px; }
.glance__ico--mint { background: var(--mint); color: var(--mint-ink); }
.glance__ico--lilac { background: var(--lilac); color: var(--lilac-ink); }
.glance__ico--sky { background: var(--sky); color: var(--sky-ink); }
.glance__copy { display: flex; flex-direction: column; min-width: 0; }
.glance__value { font-size: 23px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
/* A figure ("450+") stays on one line. */
.glance__value[data-count] { white-space: nowrap; }
[dir="rtl"] .glance__value { letter-spacing: 0; text-align: start; }
.glance__label { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 1024px) {
  .glance__item { padding: 18px 18px; gap: 12px; }
  .glance__value { font-size: 20px; }
}
@media (max-width: 760px) {
  .glance { margin-top: -28px; }
  /* Two by two; the hairlines are the 1px gaps showing the line colour, whatever is hidden. */
  .glance__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: linear-gradient(var(--line), var(--line)), #fff; }
  .glance__item { background: #fff; padding: 16px 14px; gap: 10px; }
  .glance__item:not([hidden]) ~ .glance__item:not([hidden]) { border-inline-start: 0; }
  /* Three facts (no delivery promise to make right now): the last one takes the whole row. */
  .glance__list[data-visible="3"] .glance__item:last-child { grid-column: 1 / -1; }
  .glance__ico { width: 38px; height: 38px; border-radius: 12px; }
  .glance__ico svg { width: 19px; height: 19px; }
  .glance__value { font-size: 18px; }
  .glance__label { font-size: 12.5px; }
}
@media (max-width: 400px) {
  /* A narrow phone: the icon above its figure, so the words get the cell's whole width (a row of
     their own still reads across). */
  .glance__item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 14px 15px; }
  .glance__list[data-visible="3"] .glance__item:last-child { flex-direction: row; align-items: center; gap: 10px; }
  .glance__ico { width: 34px; height: 34px; border-radius: 11px; }
  .glance__ico svg { width: 18px; height: 18px; }
}
/* A card's own way onward (the variety card → the market shelves). */
.bento__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 44px; font-size: 14.5px; font-weight: 700; color: var(--orange-ink); }
.bento__link svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
[dir="rtl"] .bento__link svg { transform: scaleX(-1); }
.bento__link:hover svg { transform: translateX(3px); }
[dir="rtl"] .bento__link:hover svg { transform: scaleX(-1) translateX(3px); }
.bento__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
/* No live shelves (no catalogue) → no links to them. */
body:has(#market[hidden]) a[href="#market"] { display: none; }
body:has(#market[hidden]) .footer-col li:has(> a[href="#market"]) { display: none; }
/* The AI chef switched off (features.enableAIChef === false, js/chef.js hides its section): no links to it, no card for it. */
body:has(#ai-chef[hidden]) a[href="#ai-chef"],
body:has(#ai-chef[hidden]) .footer-col li:has(> a[href="#ai-chef"]),
body:has(#ai-chef[hidden]) .bento__card:has([data-i18n="f3_title"]) { display: none; }
/* No points section (the points switch off, js/rewards.js keeps it hidden): no links to it. */
body:has(#rewards[hidden]) a[href="#rewards"],
body:has(#rewards[hidden]) .footer-col li:has(> a[href="#rewards"]) { display: none; }
main:focus { outline: none; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__cta {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff;
  font-size: 14.5px; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(255, 106, 0, .8);
  transition: transform .2s;
}
.nav__cta:hover { transform: translateY(-1px); }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(36, 22, 12, .05); }
.hamburger { position: relative; width: 20px; height: 14px; display: block; }
.hamburger span { position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .2s, top .25s; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 6px; }
.hamburger span:nth-child(3) { top: 12px; }
.nav__menu[aria-expanded="true"] .hamburger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
.nav__menu[aria-expanded="true"] .hamburger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Language switcher */
.lang-switcher { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; }
.lang-flag { width: 24px; height: 16px; border-radius: 3px; overflow: hidden; }
.lang-chevron { width: 14px; height: 14px; color: var(--ink-3); transition: transform .2s; }
.lang-switcher.open .lang-chevron { transform: rotate(180deg); }
.lang-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px;
  background: #fff; border-radius: 16px; padding: 6px; border: 1px solid var(--line); box-shadow: var(--sh-2); z-index: 10;
}
.lang-switcher.open .lang-dropdown { display: block; animation: dropIn .18s ease-out; }
.lang-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; text-align: start; }
.lang-option:hover { background: var(--beige); }
.lang-opt-flag { width: 24px; height: 16px; border-radius: 3px; flex: none; }
.lang-opt-name { flex: 1; }
.lang-opt-check { width: 16px; height: 16px; color: var(--orange); opacity: 0; }
.lang-option.active .lang-opt-check { opacity: 1; }

/* Mobile menu — a sheet under the bar, like the app's own */
.mobile-menu {
  display: none; position: absolute; top: calc(var(--nav-h) - 4px); inset-inline: 12px;
  background: #fff; border-radius: 22px; padding: 10px; border: 1px solid var(--line); box-shadow: var(--sh-2);
  max-height: calc(100vh - var(--nav-h) - 24px); overflow-y: auto;
}
.mobile-menu.active { display: block; animation: dropIn .2s ease-out; }
.mobile-menu__links { display: flex; flex-direction: column; }
.mobile-menu__links a { padding: 14px 14px; border-radius: 14px; font-size: 17px; font-weight: 700; }
.mobile-menu__links a:active { background: var(--beige); }
.mobile-menu__langs { padding: 10px 14px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.mobile-menu__label { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-bottom: 10px; }
.mobile-lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mobile-lang-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--line); font-size: 13px; font-weight: 700; background: #fff; }
.mobile-lang-opt.active { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-ink); }
.mlang-flag { width: 28px; height: 19px; border-radius: 3px; }
.mobile-menu__cta { display: flex; align-items: center; justify-content: center; height: 54px; margin: 12px 4px 4px; border-radius: 16px; background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; font-weight: 800; font-size: 16px; }

/* ================================================================
 * HERO
 * ================================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 56px) 0 80px;
  background:
    radial-gradient(900px 560px at 88% 8%, #FFE3CC 0%, rgba(255, 227, 204, 0) 62%),
    radial-gradient(760px 520px at -6% 96%, #FFF1E2 0%, rgba(255, 241, 226, 0) 60%),
    var(--bg);
}
[dir="rtl"] .hero {
  background:
    radial-gradient(900px 560px at 12% 8%, #FFE3CC 0%, rgba(255, 227, 204, 0) 62%),
    radial-gradient(760px 520px at 106% 96%, #FFF1E2 0%, rgba(255, 241, 226, 0) 60%),
    var(--bg);
}
.hero__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 31, .18), rgba(255, 138, 31, 0) 65%); top: 18%; inset-inline-end: 6%; pointer-events: none; }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; }
.hero__copy { min-width: 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 26px;
}
[dir="rtl"] .hero-badge { padding: 8px 12px 8px 16px; }
.hero-title {
  font-size: clamp(42px, 5.6vw, 70px); line-height: 1.03; font-weight: 800;
  letter-spacing: -.035em; color: var(--ink); margin-bottom: 22px;
}
.hero-title span { color: var(--orange); background: linear-gradient(120deg, var(--orange) 0%, var(--orange-2) 60%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: 18.5px; line-height: 1.65; color: var(--ink-2); max-width: 540px; margin-bottom: 32px; }


/* Hero visual: the phone, and two live moments beside it */
.hero__visual { position: relative; display: flex; justify-content: center; min-width: 0; }
.hero__stage { position: relative; padding: 10px 0 20px; }

/* ================================================================
 * PHONE FRAME (shared)
 * ================================================================ */
.phone { --w: 300px; --s: .7778; position: relative; width: var(--w); height: calc(var(--w) * 2.06); flex: none; }
.phone__frame {
  position: absolute; inset: 0; border-radius: calc(var(--w) * .155); padding: 10px;
  background: linear-gradient(145deg, #2a2522, #121010 40%, #1c1816);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .08),
    0 0 0 1px rgba(0, 0, 0, .55),
    0 50px 80px -34px rgba(36, 22, 12, .55),
    0 24px 40px -24px rgba(36, 22, 12, .35);
}
.phone__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .125); background: #F4EEE5; isolation: isolate; }
.phone__island { position: absolute; top: calc(var(--w) * .055); left: 50%; transform: translateX(-50%); width: 30%; height: calc(var(--w) * .082); border-radius: 999px; background: #0a0a0a; z-index: 20; }
.phone__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone--hero { --w: 322px; --s: .8389; }
.phone--cta { --w: 270px; }

/* ================================================================
 * THE APP, DRAWN (v5.12 Home) — designed at 360 px, scaled into the screen
 * ================================================================ */
.app {
  position: absolute; top: 0; left: 0; width: 360px;
  height: calc((var(--w) * 2.06 - 20px) / var(--s));
  transform: scale(var(--s)); transform-origin: 0 0;
  display: flex; flex-direction: column;
  background: #F4EEE5; color: #24160C; font-family: var(--font); line-height: 1.3;
  -webkit-user-select: none; user-select: none;
}
.app[dir="rtl"] { font-family: var(--font-arabic); }
.app::after { content: ''; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 128px; height: 5px; border-radius: 3px; background: #1a1a1a; z-index: 6; }
.app__header { position: relative; padding: 50px 14px 14px; color: #fff; flex: none; background: #3b1908; }
/* The app's own header art (public/images/styles/yalla-v5-header.webp): dark brown top-left, the grocery bag right, fading to the page. Mirrored in Arabic, as the app mirrors it. */
.app__header-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; z-index: 0; }
.app[dir="rtl"] .app__header-bg { transform: scaleX(-1); }
.app__header-shade { position: absolute; inset: 0 0 auto; height: 60px; background: linear-gradient(180deg, rgba(36, 14, 4, .35), rgba(36, 14, 4, 0)); z-index: 0; }
.app__status { position: absolute; top: 15px; inset-inline: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; z-index: 2; direction: ltr; }
.app__status-icons { display: inline-flex; align-items: center; gap: 6px; }
.app__status-icons svg:first-child { width: 17px; height: 13px; }
.app__status-icons svg:last-child { width: 26px; height: 13px; }
.app__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; }
.app__logo { height: 33px; width: auto; flex: none; }
.app__where { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 11px; background: rgba(31, 18, 9, .42); }
.app__where-cap { font-size: 9px; font-weight: 500; opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__where-row { display: flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.app__where-row svg { width: 11px; height: 11px; flex: none; }
.app__where-row i { font-style: normal; opacity: .9; }
.app__where-row .app__where-chev { width: 12px; height: 12px; opacity: .9; }
.app__bell { position: relative; width: 42px; height: 42px; border-radius: 14px; background: #fff; color: #24160C; display: grid; place-items: center; flex: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.app__bell svg { width: 22px; height: 22px; }
.app__badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #EF4444; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.app__medal { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, #8f8a86, #5e5955); border: 3px solid rgba(255, 255, 255, .85); display: grid; place-items: center; color: #fff; flex: none; }
.app__medal svg { width: 22px; height: 22px; }
.app__search {
  position: relative; z-index: 1; margin-top: 14px;
  height: 48px; padding: 0 18px; border-radius: 17px; background: #fff;
  display: flex; align-items: center; gap: 11px; color: #8A7868; font-size: 17px; font-weight: 500;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.app__search svg { width: 21px; height: 21px; color: #24160C; flex: none; }
.app__search-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .35s ease; }
.app__search-text.is-swapping { opacity: 0; }
.app__search-text b { color: var(--orange); font-weight: 600; }
.app__body { flex: 1; min-height: 0; overflow: hidden; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.app__greet { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.app__wave { font-size: 24px; display: inline-block; transform-origin: 70% 70%; animation: wave 3.2s ease-in-out infinite; }
.app__greet-copy { display: flex; flex-direction: column; min-width: 0; }
.app__greet-copy b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__greet-copy small { font-size: 12px; color: #5C4A3B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__chef { margin-inline-start: auto; display: flex; align-items: center; gap: 7px; flex: none; }
.app__chef-ico { width: 38px; height: 38px; border-radius: 50%; background: #FFE6D2; color: var(--orange); display: grid; place-items: center; }
.app__chef-ico svg { width: 20px; height: 20px; }
.app__chef b { font-size: 14px; font-weight: 800; }
/* The app's hero banner (HomePage v5.12): its slides cross-fade, the one showing drifts in slowly
   (yalla-hero-drift), the bars under it fill over the seconds per slide (HeroSlideProgress). */
.app__banner { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; aspect-ratio: 5 / 2; background: var(--orange-2); flex: none; }
.app__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease-in-out; }
.app__slide.is-active { opacity: 1; z-index: 1; }
.app__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app__banner:not([data-zoom="off"]) .app__slide.is-active img { animation: appHeroDrift var(--hero-drift, 5.6s) cubic-bezier(.3, .5, .4, 1) both; }
@keyframes appHeroDrift { from { transform: scale(1); } to { transform: scale(1.07); } }
.app__slide-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px; color: #fff; background: linear-gradient(to top, rgb(0 0 0 / .72), transparent 70%); }
.app__slide-badge { align-self: flex-start; padding: 2px 6px; border-radius: 4px; background: rgb(255 255 255 / .22); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.app__slide-copy strong { font-size: 17px; font-weight: 800; line-height: 1.05; }
.app__slide-copy small { font-size: 11px; font-weight: 600; opacity: .92; }
.app__progress { position: absolute; inset-inline: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
/* The banners are light: a white track and the brand orange fill read on any of them. */
.app__progress span { position: relative; width: 20px; height: 3px; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / .7); box-shadow: 0 0 0 .5px rgb(36 22 12 / .14), 0 1px 2px rgb(0 0 0 / .14); }
.app__progress span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--orange); transform: scaleX(0); transform-origin: left center; }
.app[dir="rtl"] .app__progress span::after { transform-origin: right center; }
.app__progress span[data-state="done"]::after { transform: scaleX(1); }
.app__progress span[data-state="active"]::after { animation: appHeroFill var(--hero-interval, 5000ms) linear forwards; }
@keyframes appHeroFill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .app__slide { transition: none; }
  .app__banner .app__slide.is-active img { animation: none !important; }
  .app__progress span[data-state="active"]::after { animation: none; transform: scaleX(1); }
}
.app__h { font-size: 19px; font-weight: 800; letter-spacing: -.01em; padding: 2px 2px 0; }
.app[dir="rtl"] .app__h { letter-spacing: 0; }
.app__qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.qa { position: relative; height: 138px; border-radius: 17px; border: 1.5px solid; padding: 9px 8px 0; overflow: hidden; }
.qa__head { display: flex; align-items: flex-start; gap: 6px; }
.qa__ico { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.qa__copy { display: flex; flex-direction: column; min-width: 0; }
.qa__copy b { font-size: 14px; font-weight: 800; line-height: 1.15; }
.qa__copy small { font-size: 11px; color: #5C4A3B; line-height: 1.25; }
.qa__fan { position: absolute; bottom: -8px; left: 50%; width: 100px; height: 66px; transform: translateX(-50%); }
.qa__fan img { position: absolute; bottom: 0; width: 46px; height: 58px; object-fit: contain; background: #fff; border-radius: 11px; padding: 4px; box-shadow: 0 4px 12px rgba(36, 22, 12, .14); }
.qa__fan img:nth-child(1) { left: 0; transform: rotate(-13deg); }
.qa__fan img:nth-child(2) { left: 27px; bottom: 6px; z-index: 2; }
.qa__fan img:nth-child(3) { left: 54px; transform: rotate(13deg); }
.qa--sale { background: var(--pink); border-color: var(--pink-line); }
.qa--sale b { color: #C0264E; }
.qa--new { background: var(--mint); border-color: var(--mint-line); }
.qa--new b { color: var(--mint-ink); }
.qa--offers { background: var(--lilac); border-color: var(--lilac-line); }
.qa--offers b { color: var(--lilac-ink); }
.qa--offers .qa__ico { color: var(--lilac-ink); }
.app__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cat { height: 118px; border-radius: 18px; background: #F1E5D5; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 6px 10px; }
.cat img { width: 76px; height: 70px; object-fit: contain; }
.cat span { font-size: 12.5px; font-weight: 800; text-align: center; line-height: 1.15; }
.app__nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 82px; padding: 0 8px 18px;
  background: #fff; border-top: 1px solid rgba(36, 22, 12, .07);
  display: flex; align-items: center; justify-content: space-around; z-index: 5;
}
.app__nav-i { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; color: #8A7868; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.app__nav-i svg { width: 23px; height: 23px; }
.app__nav-i.is-active { color: var(--orange); font-weight: 800; }
.app__nav-cart { width: 62px; display: flex; justify-content: center; }
.app__cart { position: relative; width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--orange-2), var(--orange)); box-shadow: 0 10px 20px -6px rgba(255, 106, 0, .7), 0 0 0 5px #fff; }
.app__cart svg { width: 25px; height: 25px; }
.app__cart-n { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #E11D48; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }

/* The two live moments */
.float-card {
  position: absolute; z-index: 3; top: 55%; inset-inline-start: -160px;
  width: 304px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px;
  padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2);
  animation: bob 6s ease-in-out infinite;
}
.float-card__ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; }
.float-card__ico svg { width: 24px; height: 24px; }
.float-card__copy { display: flex; flex-direction: column; min-width: 0; }
.float-card__copy b { font-size: 15px; font-weight: 800; line-height: 1.25; }
.float-card__copy small { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.float-card__bar { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 4px; }
.float-card__bar i { height: 5px; border-radius: 3px; background: var(--beige-2); }
.float-card__bar i:nth-child(-n+2) { background: var(--orange); }
.float-card__bar i:nth-child(3) { background: linear-gradient(90deg, var(--orange) 0 55%, var(--beige-2) 55%); }
[dir="rtl"] .float-card__bar i:nth-child(3) { background: linear-gradient(270deg, var(--orange) 0 55%, var(--beige-2) 55%); }
.float-chip {
  position: absolute; z-index: 3; top: 17%; inset-inline-end: -96px; color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2);
  animation: bob 6s ease-in-out -3s infinite;
}
[dir="rtl"] .float-chip { padding: 12px 12px 12px 18px; }
/* A real deal beside the phone (live catalogue; desktop only — the shelves are right below on a phone). */
.float-deal {
  position: absolute; z-index: 3; bottom: 9%; inset-inline-end: -84px; width: 248px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2);
  color: var(--ink); animation: bob 6s ease-in-out -1.5s infinite;
  transition: opacity .35s ease, box-shadow .2s ease;
}
[dir="rtl"] .float-deal { padding: 10px 10px 10px 14px; }
.float-deal:hover { box-shadow: 0 2px 6px rgba(36, 22, 12, .08), 0 30px 54px -22px rgba(36, 22, 12, .4); }
.float-deal:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.float-deal.is-swapping { opacity: 0; }
.float-deal__img { width: 56px; height: 56px; border-radius: 14px; background: var(--beige); display: grid; place-items: center; overflow: hidden; }
.float-deal__img img { width: 48px; height: 48px; object-fit: contain; }
.float-deal__copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.float-deal__kicker { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pink-ink); }
[dir="rtl"] .float-deal__kicker { text-transform: none; letter-spacing: 0; }
.float-deal__pct { padding: 1px 7px; border-radius: 999px; background: var(--pink); color: var(--pink-ink); font-size: 11.5px; letter-spacing: 0; }
.float-deal__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.float-deal__price { display: flex; align-items: baseline; gap: 6px; justify-content: flex-start; }
[dir="rtl"] .float-deal__price { justify-content: flex-end; }
.float-deal__price b { font-size: 15.5px; font-weight: 900; color: var(--orange-ink); }
.float-deal__price s { font-size: 12px; color: var(--ink-3); }
@media (max-width: 1100px) { .float-deal { display: none; } }

/* The phone leans toward the pointer (desktop with a mouse; off under reduced motion). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .phone--hero { transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .hero__stage .float-card, .hero__stage .float-chip, .hero__stage .float-deal { translate: var(--drift-x, 0px) var(--drift-y, 0px); transition: translate .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, box-shadow .2s ease; }
}
.float-chip__star { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-size: 18px; font-weight: 900; flex: none; }
.float-chip b { font-size: 16px; font-weight: 800; }
.float-chip small { font-size: 12.5px; color: var(--ink-2); }

/* ================================================================
 * INSIDE THE APP — the real screens
 * ================================================================ */
.shot { flex: none; width: 256px; scroll-snap-align: center; transition: transform .35s ease, opacity .35s ease; opacity: .9; transform: scale(.96); }
.shot.is-active { opacity: 1; transform: none; }
.carousel-arrow {
  position: absolute; top: calc(50% - 60px); z-index: 4; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-2);
  transition: transform .2s;
}
.carousel-arrow:hover { transform: scale(1.06); }
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-prev { inset-inline-start: max(12px, calc((100vw - var(--container)) / 2 - 12px)); }
.carousel-next { inset-inline-end: max(12px, calc((100vw - var(--container)) / 2 - 12px)); }
[dir="rtl"] .carousel-arrow svg { transform: scaleX(-1); }

/* ================================================================
 * FEATURES — bento
 * ================================================================ */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bento__card {
  position: relative; display: flex; flex-direction: column; gap: 22px; justify-content: space-between;
  min-height: 268px; padding: 28px; border-radius: 26px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden;
}
.bento__card--wide { grid-column: span 2; flex-direction: row; align-items: stretch; }
.bento__card--wide .bento__text, .bento__card--full .bento__text { flex: 1 1 52%; }
.bento__card--wide .bento__art, .bento__card--full .bento__art { flex: 1 1 48%; align-self: center; }
.bento__card--full { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
.bento__card--warm { background: linear-gradient(140deg, #FFF6EE, #FFFFFF 60%); }
.bento__text h3 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin: 16px 0 8px; }
[dir="rtl"] .bento__text h3 { letter-spacing: 0; }
.bento__text p { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }
.bento__ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; }
.bento__ico svg { width: 25px; height: 25px; }
.bento__ico--orange { background: var(--orange-soft); color: var(--orange); }
.bento__ico--mint { background: var(--mint); color: var(--mint-ink); }
.bento__ico--lilac { background: var(--lilac); color: var(--lilac-ink); }
.bento__ico--gold { background: var(--gold); color: var(--gold-ink); }
.bento__ico--sky { background: var(--sky); color: var(--sky-ink); }
.bento__ico--pink { background: var(--pink); color: var(--pink-ink); }
/* art pieces */
.tracker { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--sh-1); }
.tracker__head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.tracker__head b { font-weight: 800; }
.tracker__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255, 106, 0, .18); animation: livePulse 2.4s ease-in-out infinite; }
.tracker__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.tracker__steps li { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.tracker__steps i { height: 6px; border-radius: 3px; background: var(--beige-2); }
.tracker__steps .is-done i { background: var(--orange); }
.tracker__steps .is-now i { background: linear-gradient(90deg, var(--orange) 0 60%, var(--beige-2) 60%); }
[dir="rtl"] .tracker__steps .is-now i { background: linear-gradient(270deg, var(--orange) 0 60%, var(--beige-2) 60%); }
.tracker__steps .is-done, .tracker__steps .is-now { color: var(--ink); }
.minicats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.minicats span { aspect-ratio: 1; border-radius: 18px; background: #F1E5D5; display: grid; place-items: center; padding: 10px; }
.minicats img { width: 100%; height: 100%; object-fit: contain; }
.bubble span {
  display: inline-block; max-width: 92%; padding: 12px 16px; border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 10px 20px -12px rgba(255, 106, 0, .8);
}
.bubble { text-align: end; }
[dir="rtl"] .bubble span { border-radius: 18px 18px 18px 6px; }
.points { display: flex; align-items: baseline; gap: 8px; padding: 16px 18px; border-radius: 18px; background: var(--gold); color: var(--gold-ink); align-self: flex-start; direction: ltr; }
[dir="rtl"] .points { flex-direction: row-reverse; }
.points b { font-size: 32px; font-weight: 900; letter-spacing: -.02em; }
.points span { font-size: 15px; font-weight: 700; }
.paychips { display: flex; flex-wrap: wrap; gap: 8px; }
.paychips span { padding: 8px 12px; border-radius: 10px; background: var(--beige); border: 1px solid var(--line); font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.paychips span:first-child { font-style: italic; color: #1A1F71; }
.paychips span:nth-child(3) { color: #0B6A4A; }
.hellos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.hellos span { padding: 12px 20px; border-radius: 999px; font-size: 20px; font-weight: 800; }
.hellos span:nth-child(1) { background: var(--pink); color: var(--pink-ink); }
.hellos span:nth-child(2) { background: var(--sky); color: var(--sky-ink); }
.hellos span:nth-child(3) { background: var(--mint); color: var(--mint-ink); font-family: var(--font-arabic); }

/* ================================================================
 * HOW IT WORKS
 * ================================================================ */

/* ================================================================
 * WHERE WE DELIVER
 * ================================================================ */
.cov-card { padding: 30px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.cov-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.cov-card__ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); flex: none; }
.cov-card__ico svg { width: 27px; height: 27px; }
.cov-card__ico--cargo { background: var(--sky); color: var(--sky-ink); }
.cov-card h3 { font-size: 21px; font-weight: 800; line-height: 1.25; }
.cov-card__count { font-size: 14.5px; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.cov-card__kicker { font-size: 12.5px; font-weight: 800; color: var(--sky-ink); margin-bottom: 2px; }
.cov-card__sub { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }
.cov-card__note { margin-top: 18px; font-size: 14px; color: var(--ink-3); line-height: 1.55; }
.cov-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cov-chips:empty { display: none; }
.cov-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: var(--beige); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.cov-chips li svg { width: 13px; height: 13px; color: var(--orange); flex: none; }
.kw-live { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kw-more { margin-top: 22px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.kw-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kw-form select, .kw-form input {
  flex: 1 1 160px; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px;
  border: 1.5px solid var(--line-2); background: #FFFCF8; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.kw-form select:focus, .kw-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 106, 0, .14); }
.kw-form .btn { flex: 0 0 auto; }

/* ================================================================
 * YALLA CHEF (dark)
 * ================================================================ */
.chef {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 480px at 85% 20%, rgba(255, 106, 0, .28), rgba(255, 106, 0, 0) 60%),
    radial-gradient(520px 420px at 10% 90%, rgba(255, 163, 1, .14), rgba(255, 163, 1, 0) 60%),
    var(--dark);
}
[dir="rtl"] .chef {
  background:
    radial-gradient(700px 480px at 15% 20%, rgba(255, 106, 0, .28), rgba(255, 106, 0, 0) 60%),
    radial-gradient(520px 420px at 90% 90%, rgba(255, 163, 1, .14), rgba(255, 163, 1, 0) 60%),
    var(--dark);
}
.chef__title { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: 18px; }
.chef__title em { font-style: normal; color: var(--orange-2); }
.chef__sub { font-size: 17.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); max-width: 520px; margin-bottom: 30px; }

/* ================================================================
 * STATS
 * ================================================================ */

/* ================================================================
 * FAQ
 * ================================================================ */
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; transition: border-color .25s; }
.faq-item.open { border-color: rgba(255, 106, 0, .35); }
.faq-q { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; text-align: start; font-size: 17px; font-weight: 700; color: var(--ink); }
.faq-q span { flex: 1; }
.faq-chevron { width: 22px; height: 22px; flex: none; color: var(--ink-3); transition: transform .3s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--orange); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear .32s; }
.faq-item.open .faq-a-inner { visibility: visible; transition-delay: 0s; }
.faq-a-inner p { padding: 0 22px 22px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.faq-category-badge { display: none; }
.faq-empty { text-align: center; color: var(--ink-3); }

/* ================================================================
 * DOWNLOAD
 * ================================================================ */
.cta { padding: 40px 0 104px; }
.cta__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: center;
  padding: 60px 60px 0; border-radius: 36px; overflow: hidden; color: #fff;
  background:
    radial-gradient(600px 380px at 92% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #FF6A00 0%, #FF7F14 50%, #FF9A1F 100%);
  box-shadow: 0 40px 80px -40px rgba(255, 106, 0, .7);
}
.cta__copy { padding-bottom: 60px; }
.cta__title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; margin-bottom: 16px; }
.cta__sub { font-size: 18px; line-height: 1.65; opacity: .92; max-width: 480px; margin-bottom: 28px; }
.cta__note { margin-top: 16px; font-size: 14px; font-weight: 600; opacity: .85; }
.cta__art { position: relative; align-self: end; display: flex; justify-content: center; height: 460px; }
.cta__art .phone { position: absolute; top: 0; transform: rotate(-5deg); }
[dir="rtl"] .cta__art .phone { transform: rotate(5deg); }

/* ================================================================
 * CONTACT
 * ================================================================ */
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.contact-info, .contact-form { padding: 30px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.contact-info { display: grid; gap: 16px; }
.contact-detail { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; min-width: 0; }
.contact-detail a, .contact-detail span:last-child { min-width: 0; overflow-wrap: anywhere; }
.contact-detail__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); flex: none; }
.contact-detail__ico svg { width: 21px; height: 21px; }
.contact-social #contactSocRow { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.contact-social a { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--beige); color: var(--ink); transition: transform .2s; }
.contact-social a:hover { transform: translateY(-2px); }
.contact-social svg { width: 20px; height: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form-group label { font-size: 14px; font-weight: 700; color: var(--ink); }
.form-group input, .form-group textarea {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line-2);
  background: #FFFCF8; font-size: 15.5px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-group textarea { height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 106, 0, .14); }
.contact-result { margin-top: 12px; font-size: 14.5px; font-weight: 600; text-align: center; min-height: 0; }
.contact-result.success { color: #15803D; }
.contact-result.error { color: #B91C1C; }

/* ================================================================
 * FOOTER
 * ================================================================ */
.footer { background: var(--dark); color: rgba(255, 255, 255, .62); padding: 72px 0 calc(28px + env(safe-area-inset-bottom)); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-logo img { height: 40px; width: auto; max-width: 160px; filter: brightness(0) invert(1); }
.footer-brand p { margin-top: 18px; font-size: 14.5px; line-height: 1.7; max-width: 340px; }
.footer-col h4 { color: #fff; font-size: 14px; font-weight: 800; margin-bottom: 16px; }
.footer-col__h-gap { margin-top: 26px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-contact-item { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; min-width: 0; }
.footer-contact-item svg { width: 16px; height: 16px; color: var(--orange-2); flex: none; }
.footer-contact-item a, .footer-contact-item span { min-width: 0; overflow-wrap: anywhere; }
.footer-legal-info { margin-top: 18px; display: grid; gap: 4px; font-size: 13px; }
.footer-legal-info .legal-company-name { color: #fff; font-weight: 700; }
.footer-legal-info .legal-detail { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: #fff; transition: background .2s; }
.footer-social a:hover { background: rgba(255, 255, 255, .14); }
.footer-social svg { width: 18px; height: 18px; }
.payment-methods-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 52px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.payment-methods-label { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.payment-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-icon { height: 38px; min-width: 58px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 22px; font-size: 13.5px; }
.footer-bottom nav { display: flex; gap: 18px; }
.footer-bottom a:hover { color: #fff; }
.footer-credit { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
 * PHONE-SIZED SCREENS: the app's bottom bar
 * ================================================================ */
.mbar {
  position: fixed; z-index: 90; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  border-radius: 22px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); box-shadow: var(--sh-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateY(160%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
[dir="rtl"] .mbar { padding: 10px 12px 10px 10px; }
.mbar.is-visible { transform: none; }
.mbar__icon { width: 42px; height: 42px; border-radius: 12px; flex: none; }
.mbar__copy { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.mbar__copy b { font-size: 15px; font-weight: 800; }
.mbar__copy small { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar__btn { height: 44px; padding: 0 20px; border-radius: 14px; display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; font-size: 15px; font-weight: 800; flex: none; }

/* ================================================================
 * REVEAL + KEYFRAMES
 * ================================================================ */
/* Hidden for their fade only where the page's script runs (html.js, set in <head>): with no script
   everything is readable, and with one that never arrives it shows after 3 s (app.js marks reveal-live). */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
html.js:not(.reveal-live) .reveal { animation: revealFallback 0s linear 3s forwards; }
@keyframes revealFallback { to { opacity: 1; transform: none; } }
html.js .reveal.visible { opacity: 1; transform: none; }
/* Another language than the page ships in: out of sight until app.js has put it into words (no Turkish
   flash, no jump), shown anyway after 2.5 s should the script never run. */
html.lang-pending body { visibility: hidden; animation: langReveal 0s linear 2.5s forwards; }
@keyframes langReveal { to { visibility: visible; } }
/* Endless motion only where it can be seen (app.js marks a section away while it is off screen). */
.is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }
html.js .reveal-delay-1 { transition-delay: .08s; }
html.js .reveal-delay-2 { transition-delay: .16s; }
html.js .reveal-delay-3 { transition-delay: .24s; }

@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); } 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, .06); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; animation: none; }
  .float-card, .float-chip, .float-deal, .app__wave, .live-dot, .tracker__dot { animation: none; }
  .shot { transition: none; }
}

/* ================================================================
 * RESPONSIVE
 * ================================================================ */
@media (max-width: 1160px) {
  .float-card { inset-inline-start: -120px; }
  .float-chip--points { inset-inline-end: -56px; }
}

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__actions { margin-inline-start: auto; }
  .nav__menu { display: inline-flex; }
  .hero__inner { grid-template-columns: 1fr; gap: 56px; text-align: center; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; }
  .hero-subtitle { margin-inline: auto; }
  .store-row { justify-content: center; }
  .float-card { inset-inline-start: -120px; }
  .float-chip--points { inset-inline-end: -90px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__card--wide { grid-column: 1 / -1; }
  .chef__sub { margin-inline: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta__card { grid-template-columns: 1fr; padding: 48px 32px 0; text-align: center; }
  .cta__copy { padding-bottom: 8px; display: flex; flex-direction: column; align-items: center; }
  .cta__copy .section-label--start { margin-inline: auto; }
  .cta__sub { margin-inline: auto; }
  .cta__art { height: 340px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --nav-h: 62px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 38px; }
  .section-subtitle { font-size: 16px; }
  .container { padding: 0 18px; }
  .nav__cta { display: none; }
  .nav__logo img { height: 34px; }
  .hero { padding: calc(var(--nav-h) + 30px) 0 56px; }
  .hero-badge { margin-bottom: 20px; font-size: 13px; }
  .hero-subtitle { font-size: 16.5px; margin-bottom: 26px; }
  .store-row { width: 100%; }
  .store-btn { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 14px; height: 58px; }
  .store-btn__label strong { font-size: 16px; }
  .phone--hero { --w: 272px; --s: .7; }
  .float-card { top: auto; bottom: -6px; inset-inline-start: 50%; transform: translateX(-50%); width: min(300px, calc(100vw - 48px)); padding: 11px 12px; grid-template-columns: auto 1fr; animation: none; }
  [dir="rtl"] .float-card { transform: translateX(50%); }
  .hero__stage { padding-bottom: 46px; }
  .float-card__ico { width: 38px; height: 38px; }
  .float-card__copy b { font-size: 13.5px; }
  .float-card__copy small { font-size: 11.5px; }
  .float-card__bar { grid-column: 2 / 3; }
  .float-chip--points { display: none; }
  .shot { width: 218px; }
  .carousel-arrow { display: none; }
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .bento__card, .bento__card--wide, .bento__card--full { grid-column: auto; flex-direction: column; min-height: 0; padding: 24px; }
  .hellos { justify-content: flex-start; }
  .cov-card { padding: 24px; }
  .cov-chips { gap: 6px; }
  .cov-chips li { padding: 6px 11px; font-size: 13.5px; }
  .kw-form .btn { flex: 1 1 100%; }
  .faq-q { font-size: 16px; padding: 18px; }
  .faq-a-inner p { padding: 0 18px 18px; }
  .cta { padding: 16px 0 72px; }
  .cta__card { padding: 40px 22px 0; border-radius: 28px; }
  .cta__art { height: 300px; }
  .phone--cta { --w: 230px; }
  .contact-info, .contact-form { padding: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .mbar { display: flex; }
}

@media (max-width: 480px) {
  .store-btn__label small { display: none; }
  .store-btn { gap: 10px; }
  .store-row--light { flex-direction: column; }
  .store-row--light .store-btn { flex: none; width: 100%; }
}

@media (max-width: 380px) {
  .phone--hero { --w: 250px; --s: .6389; }
  .float-card { width: min(280px, calc(100vw - 40px)); }
  .shot { width: 200px; }
  .store-btn { height: 54px; }
  .store-btn svg { width: 22px; height: 22px; }
}

/* ═══ market (js/market.js) ═══ */
/* @market:start */
/*
 * The app's shelves, live: real products at real prices in the app's own
 * v5.12 product card (a white card, the picture on white, the name, the size,
 * the price set like a shelf label with the kuruş a size smaller, the struck
 * base and the -X% badge on a sale, the brand + beside the price), two shelves
 * behind a segmented control, then the aisles on the app's beige tiles.
 * Logical properties only, so Arabic mirrors itself; motion short and calm,
 * none for visitors who asked for less.
 */
.market {
  --mk-card-w: 212px; --mk-gap: 16px; --mk-radius: 20px; --mk-rail-pt: 10px;
  /* The shelves run edge to edge; their first card lines up with the page's column. */
  --mk-pad: max(24px, calc((100% - var(--container)) / 2 + 24px));
  --mk-sale: #DC2626; --mk-badge: #E11D48; --mk-tile: #F7F3EE;
  position: relative; background: var(--bg);
}
.mk-head { margin-bottom: 30px; }
.mk-head .section-title, .mk-head .section-subtitle { text-wrap: balance; }
.mk-live {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  margin-top: 22px; padding: 9px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-2);
}
.mk-live:empty { display: none; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); flex: none; margin-inline-end: 2px; animation: livePulse 2.4s ease-in-out infinite; }
.market.mk-still .mk-dot { animation-play-state: paused; }

/* The segmented control: two equal segments, a white thumb that glides to the chosen one. */
.mk-bar { display: flex; justify-content: center; margin-bottom: 24px; }
.mk-tabs {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 5px; border-radius: 999px; background: var(--beige); border: 1px solid var(--line);
}
.mk-tabs__thumb {
  position: absolute; inset-block: 5px; inset-inline-start: 5px; width: calc((100% - 10px) / 2);
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(36, 22, 12, .08), 0 8px 18px -10px rgba(36, 22, 12, .35);
  transform: translateX(calc(var(--mk-i, 0) * 100%));
  transition: transform .34s cubic-bezier(.3, .8, .3, 1.04);
}
[dir="rtl"] .mk-tabs__thumb { transform: translateX(calc(var(--mk-i, 0) * -100%)); }
.mk-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: var(--ink-3); white-space: nowrap;
  transition: color .2s ease;
}
.mk-tab svg { width: 18px; height: 18px; flex: none; }
.mk-tab[aria-selected="true"] { color: var(--ink); }
.mk-tab[data-shelf="deals"][aria-selected="true"] svg { color: var(--pink-ink); }
.mk-tab[data-shelf="new"][aria-selected="true"] svg { color: var(--mint-ink); }
.mk-tab:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.mk-shelf-title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }

/* A shelf: a snap rail, swiped on a phone, stepped by the arrows on a wide screen. */
/* Edge to edge up to 1440px; wider, the shelves keep the 1440 composition and fade out at their ends. */
.mk-shelves { position: relative; max-width: 1440px; margin-inline: auto; }
@media (min-width: 1441px) {
  .mk-rail {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  }
}
.mk-rail {
  display: flex; gap: var(--mk-gap);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--mk-pad);
  padding: var(--mk-rail-pt) var(--mk-pad) 30px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mk-rail::-webkit-scrollbar { display: none; }
.mk-rail__item { flex: none; display: flex; width: var(--mk-card-w); scroll-snap-align: start; }

/* The card (components/ProductCard + styles/storefront-app-v512.css, in the page's own tokens). */
.mk-card {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--mk-radius);
  box-shadow: var(--sh-1); overflow: hidden; color: var(--ink);
  container-type: inline-size; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .25s ease, border-color .25s ease, transform .16s cubic-bezier(.2, .7, .2, 1);
}
.mk-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.mk-card:active { transform: scale(.985); }
/* The picture on a soft tile: the catalogue's photos are white-backed, so they are multiplied into the
   tile (isolated: the blend reads only its own tile) and sit in it rather than on a white box. */
.mk-card__media {
  position: relative; display: block; aspect-ratio: 1.1; margin: 6px 6px 0; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--mk-radius) - 6px); background: var(--mk-tile);
}
.mk-card__img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; opacity: 0; transition: opacity .35s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
/* A picture fades in as it lands (js adds is-loaded on its load event). */
.mk-card__img.is-loaded, .mk-aisle__img.is-loaded { opacity: 1; }
.mk-card__badge {
  position: absolute; top: 10px; inset-inline-start: 10px;
  padding: 3px 7px; border-radius: 8px; background: var(--mk-badge); color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 1.3;
  box-shadow: 0 3px 8px -4px rgba(225, 29, 72, .55);
}
.mk-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.mk-card__name {
  font-size: 14px; font-weight: 600; line-height: 1.38; letter-spacing: -.005em; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  min-height: 2.76em; overflow-wrap: anywhere;
}
/* Cairo: a little more line, and room for the dots under a final ي (the app's round-20 fix). */
[dir="rtl"] .mk-card__name { line-height: 1.5; min-height: 3em; box-sizing: content-box; padding-bottom: 3px; margin-bottom: -3px; letter-spacing: 0; }
.mk-card__unit { margin-top: 4px; min-height: 1.4em; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--ink-3); }
.mk-card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.mk-card__prices { display: flex; flex-direction: column; min-width: 0; }
.mk-card__was { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--ink-3); text-decoration: line-through; }
.mk-price { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
.mk-price--sale { color: var(--mk-sale); }
.mk-price__cur, .mk-price__dec { font-size: .7em; font-weight: 700; }
.mk-price__cur { margin-inline-end: 1px; }
.mk-card__add {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--orange); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .14);
}
.mk-card__add svg { width: 18px; height: 18px; }
/* A narrow card keeps its + beside the price: the price steps down a size (the app's narrow-foot rule). */
@container (max-width: 159.98px) {
  .mk-card__body { padding: 10px 11px 12px; }
  .mk-price { font-size: 15.5px; }
  .mk-card__add { width: 30px; height: 30px; }
}
@media (hover: hover) and (pointer: fine) {
  .mk-card:hover { box-shadow: var(--sh-2); border-color: var(--line-2); }
  .mk-card:hover .mk-card__img { transform: scale(1.06); }
}

/* The shelf's last card: everything else is in the app. */
.mk-card--all {
  justify-content: center; align-items: center; gap: 10px; padding: 24px 18px; text-align: center;
  background: linear-gradient(165deg, #FFF6EE 0%, #FFE9D7 100%);
  border-color: rgba(255, 106, 0, .16); box-shadow: none;
}
.mk-all__ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; margin-bottom: 4px;
  background: var(--orange); color: #fff; box-shadow: 0 12px 22px -12px rgba(255, 106, 0, .9);
  transition: transform .25s ease;
}
.mk-all__ico svg { width: 24px; height: 24px; }
[dir="rtl"] .mk-all__ico svg { transform: scaleX(-1); }
.mk-all__title { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.mk-all__sub { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .mk-card--all:hover .mk-all__ico { transform: translateX(3px); }
  [dir="rtl"] .mk-card--all:hover .mk-all__ico { transform: translateX(-3px); }
}

/* Holding the space until the shelves are built (no jump when they arrive). */
.mk-card--skel { box-shadow: none; }
.mk-card--skel .mk-card__name { display: block; }
.mk-skel { display: block; border-radius: 6px; background: var(--beige); }
.mk-skel--media { aspect-ratio: 1.1; margin: 6px 6px 0; border-radius: calc(var(--mk-radius) - 6px); background: var(--mk-tile); }
.mk-skel--text { height: 10px; margin: 5px 0 4px; }
.mk-skel--short { width: 62%; }
.mk-skel--tiny { width: 34%; }
.mk-skel--price { width: 64px; height: 20px; }
.mk-skel--add { width: 34px; height: 34px; border-radius: 50%; }

/* A picture that failed to load: a quiet bag, never a broken frame. */
.mk-card__media.is-broken, .mk-aisle__art.is-broken { display: grid; place-items: center; }
.mk-card__media.is-broken::after, .mk-aisle__art.is-broken::after {
  content: ''; width: 34%; aspect-ratio: 1; opacity: .2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324160C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The arrows: each at its own logical end, the glyph mirrored in Arabic; gone where there is no further to go. */
.mk-arrow {
  /* centred on the picture's tile: the rail's top padding, the card's border and the tile's 6px inset, then half the tile */
  position: absolute; z-index: 3; top: calc(var(--mk-rail-pt) + 7px + (var(--mk-card-w) - 14px) / 2.2 - 24px);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-2);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mk-arrow svg { width: 22px; height: 22px; }
.mk-arrow--prev { inset-inline-start: max(8px, calc((100% - var(--container)) / 2 - 30px)); }
.mk-arrow--next { inset-inline-end: max(8px, calc((100% - var(--container)) / 2 - 30px)); }
[dir="rtl"] .mk-arrow svg { transform: scaleX(-1); }
.mk-arrow.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.mk-arrow:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mk-arrow:hover { transform: scale(1.06); } }

/* The aisles: the live categories on the app's beige tiles (styles/storefront-home-v512.css). */
.mk-aisles { margin-top: 46px; }
.mk-aisles__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mk-aisles__title { font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
[dir="rtl"] .mk-aisles__title { letter-spacing: 0; }
.mk-aisles__count { font-size: 14px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.mk-aisles__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mk-aisles__grid > li { display: flex; min-width: 0; }
.mk-aisle {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  padding: 10px 10px 16px; border-radius: 22px; text-align: center; color: var(--ink);
  background: var(--mk-tint, #f8eae0); box-shadow: inset 0 0 0 1px rgba(120, 72, 24, .1);
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mk-aisle:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.mk-aisle:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .mk-aisle:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(120, 72, 24, .14), var(--sh-1); }
}
/* (overflow hidden: the ratio holds whatever the picture's own size, so a tile is the same before and after it loads) */
.mk-aisle__art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1.15; overflow: hidden; }
.mk-aisle__img { width: 86%; height: 92%; object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.mk-aisle__emoji { font-size: 44px; line-height: 1; }
.mk-aisle__name { margin-top: 8px; font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.mk-aisle__count { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* The tiles of a row share their lines: a name on two lines moves no neighbour's count out of line. */
@supports (grid-template-rows: subgrid) {
  .mk-aisles__grid > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .mk-aisle { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; }
  .mk-aisle__name { align-self: end; }
}

/* The way to the app. */
.mk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 52px; text-align: center; }
.mk-foot__line { font-size: 18px; font-weight: 700; color: var(--ink); }
.mk-foot__cta svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .mk-foot__cta svg { transform: scaleX(-1); }
/* A wide screen gets both stores (a desktop installs nothing; its visitor picks a phone's store); a phone, its own. */
.mk-foot__cta { display: none; }
.mk-foot__stores { justify-content: center; }
.mk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1023px) {
  .market { --mk-card-w: 200px; }
  .mk-aisles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* A phone: the app's Home — 16px gutters, about two and a half cards to a screen. */
  .market { --mk-card-w: clamp(144px, calc(41vw - 6px), 196px); --mk-gap: 12px; --mk-pad: 16px; --mk-radius: 18px; --mk-rail-pt: 6px; }
  .market .container { padding-inline: 16px; }
  .mk-head { margin-bottom: 24px; }
  .mk-live { margin-top: 18px; padding: 8px 14px; font-size: 13px; }
  .mk-bar { margin-bottom: 16px; }
  .mk-tabs { display: grid; width: 100%; }
  .mk-tab { min-height: 44px; padding: 0 10px; font-size: 14.5px; }
  .mk-rail { padding-bottom: 24px; }
  .mk-card__body { padding: 11px 12px 12px; }
  .mk-card__name { font-size: 13px; }
  .mk-card__unit { font-size: 11.5px; }
  .mk-price { font-size: 17px; }
  .mk-card__add { width: 32px; height: 32px; }
  .mk-card__badge { top: 8px; inset-inline-start: 8px; padding: 2px 6px; font-size: 10.5px; }
  .mk-all__title { font-size: 15px; }
  .mk-arrow { display: none; }
  .mk-aisles { margin-top: 34px; }
  .mk-aisles__title { font-size: 20px; }
  .mk-aisles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mk-aisle { padding: 8px 6px 12px; border-radius: 18px; }
  .mk-aisle__name { font-size: 12.5px; }
  .mk-aisle__count { font-size: 11.5px; }
  .mk-foot { flex-direction: column; margin-top: 36px; }
  .mk-foot__line { font-size: 16px; }
  .mk-foot__cta { display: inline-flex; width: 100%; max-width: 360px; }
  .mk-foot__stores { display: none; }
}
@media (max-width: 359px) {
  .market { --mk-card-w: calc(58vw - 4px); }
  /* Three aisles to a row still fit their longest words ("Atıştırmalıklar") whole. */
  .mk-aisles__grid { gap: 8px; }
  .mk-aisle { padding-inline: 3px; }
  .mk-aisle__name { font-size: 11.5px; }
  .mk-aisle__count { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-dot { animation: none; }
  .mk-tabs__thumb, .mk-tab, .mk-card, .mk-card__img, .mk-aisle__img, .mk-arrow, .mk-aisle, .mk-all__ico { transition: none; }
  .mk-card:active, .mk-aisle:active, .mk-card:hover .mk-card__img, .mk-aisle:hover,
  .mk-card--all:hover .mk-all__ico, [dir="rtl"] .mk-card--all:hover .mk-all__ico { transform: none; }
}
/* @market:end */

/* ═══ delivery (js/delivery.js) ═══ */
/* @delivery:start */
/* Where we deliver, live: the status line, the hero's address check and the map of Istanbul.
 * The map's colours are the app's area map (components/where/AreaMap.tsx AREA_MAP_COLORS). */
.dl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dl-num { unicode-bidi: isolate; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-name-run { unicode-bidi: isolate; }

/* ── 1. The status line, under the badge: one calm sentence, its room kept until it is known ── */
/* Two lines kept at every width: the open line (one) and the closed one (two) both fit, so nothing below moves when they arrive. */
.dl-status { display: flex; align-items: center; max-width: 580px; margin: -14px 0 18px; min-height: 3.1em; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.dl-status__line { display: block; min-width: 0; text-wrap: pretty; }
.dl-status[data-state="pending"], .dl-status[data-state="quiet"] { visibility: hidden; }
.dl-status__ico { display: inline-block; width: 17px; height: 17px; margin-inline-end: 7px; vertical-align: -3px; color: var(--ink-3); }
.dl-status__ico svg { display: block; width: 100%; height: 100%; }
.dl-status__lead { font-weight: 800; color: var(--ink); }
.dl-status__sep { color: var(--ink-3); }
.dl-status[data-state="open"] .dl-status__ico, .dl-status[data-state="open"] .dl-status__lead { color: #15803D; }
.dl-status[data-state="closed"] .dl-status__ico, .dl-status[data-state="closed"] .dl-status__lead,
.dl-status[data-state="paused"] .dl-status__ico, .dl-status[data-state="paused"] .dl-status__lead { color: #B45309; }

/* ── 2. The check: the app's search field, a list under it, the answer in plain words ── */
.dl-check { position: relative; margin-top: 30px; max-width: 540px; }
.dl-check__label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 14px; font-weight: 800; color: var(--orange-ink); }
.dl-check__label svg { width: 15px; height: 15px; flex: none; }
.dl-check__field { position: relative; scroll-margin-top: calc(var(--nav-h) + 16px); scroll-margin-bottom: 24px; }
.dl-check__icon { position: absolute; inset-inline-start: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink); pointer-events: none; }
.dl-check__input {
  display: block; width: 100%; height: 58px; padding-block: 0; padding-inline: 50px 54px;
  border-radius: 18px; border: 1.5px solid var(--line); background: #fff;
  font-size: 16px; font-weight: 600; color: var(--ink); text-align: start;
  box-shadow: 0 1px 2px rgba(36, 22, 12, .05), 0 14px 30px -18px rgba(36, 22, 12, .34);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none;
}
.dl-check__input::placeholder { color: #8A7868; font-weight: 500; opacity: 1; }
.dl-check__input:hover { border-color: var(--line-2); }
.dl-check__input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 106, 0, .14), 0 14px 30px -18px rgba(36, 22, 12, .34); }
.dl-check__clear { position: absolute; inset-inline-end: 7px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 13px; display: grid; place-items: center; color: var(--ink-3); transition: background .2s ease, color .2s ease; }
.dl-check__clear:hover { background: var(--beige); color: var(--ink); }
.dl-check__clear svg { width: 18px; height: 18px; }
.dl-check__list {
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 8px);
  max-height: 312px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2);
  text-align: start; animation: dlDrop .16s ease-out;
}
.dl-check__list.is-up { top: auto; bottom: calc(100% + 8px); animation-name: dlLift; }
.dl-option { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.dl-option[aria-selected="true"] { background: var(--orange-soft); }
.dl-option__name { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.dl-mark { background: none; color: var(--orange-ink); font-weight: 800; }
.dl-option__tag { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.dl-option[data-tone="none"] .dl-option__tag { color: var(--ink-3); }
.dl-check__answer:empty { display: none; }
.dl-answer { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; text-align: start; animation: dlRise .24s ease-out; }
.dl-answer__mark { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.dl-answer__mark svg { width: 16px; height: 16px; }
.dl-answer[data-tone="ok"] .dl-answer__mark { background: var(--mint); color: var(--mint-ink); }
.dl-answer[data-tone="wait"] .dl-answer__mark { background: var(--gold); color: var(--gold-ink); }
.dl-answer[data-tone="none"] .dl-answer__mark { background: var(--beige-2); color: var(--ink-3); }
.dl-answer__body { flex: 1 1 auto; min-width: 0; }
.dl-answer__title { font-size: 16.5px; font-weight: 800; line-height: 1.45; color: var(--ink); padding-top: 2px; }
.dl-answer__detail { margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.dl-answer__detail b { color: #B45309; font-weight: 800; }
.dl-answer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; }
.dl-answer__cta, .dl-info__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 14px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; font-size: 14.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 20px -12px rgba(255, 106, 0, .85); transition: transform .2s ease, box-shadow .2s ease;
}
.dl-answer__cta:hover, .dl-info__cta:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -12px rgba(255, 106, 0, .85); }
.dl-answer__link, .dl-link {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 700; color: var(--orange-ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}

/* ── 3. The map: the app's drawing of Istanbul over its water, a foot that says what an area gets ── */
.dl-cov .section-head { margin-bottom: 44px; }
.dl-map { margin: 0 0 20px; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.dl-map__stage { position: relative; }
.dl-map__frame {
  position: relative; height: clamp(340px, 40vw, 520px); overflow: hidden;
  background: #DDEAF0; font-family: var(--font); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.dl-map[data-state="loading"] .dl-map__frame { background: linear-gradient(180deg, #E3EEF3, #DDEAF0); }
.dl-map__frame.is-pointing { cursor: pointer; }
.dl-map__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dl-map__svg path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dl-map__land { fill: #F3EEE6; stroke: #fff; stroke-width: 1; }
.dl-map__district { fill: #F3EEE6; stroke: #fff; stroke-width: 1; transition: fill .7s ease; }
.dl-map__district.is-fast { fill: #FCE3CE; }
.dl-map__district.is-booked { fill: #F8ECDF; }
.dl-map.is-pre .dl-map__district.is-fast, .dl-map.is-pre .dl-map__district.is-booked { fill: #F3EEE6; }
.dl-map__lakes path { fill: #DDEAF0; }
.dl-map__hover { fill: rgba(255, 106, 0, .07); stroke: rgba(255, 106, 0, .5); stroke-width: 1.5; pointer-events: none; }
.dl-map__sel { fill: rgba(255, 106, 0, .12); stroke: var(--orange); stroke-width: 2; pointer-events: none; }
.dl-map__sel.is-quiet { fill: #E8E2D8; stroke: #8F8173; }
.dl-map__hover.is-quiet { fill: rgba(143, 129, 115, .1); stroke: rgba(143, 129, 115, .6); }
.dl-map__dots, .dl-map__names { position: absolute; inset: 0; pointer-events: none; }
.dl-mapdot { position: absolute; inset-inline-start: 0; top: 0; width: 0; height: 0; }
.dl-mapdot__dot {
  position: absolute; inset-inline-start: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(36, 22, 12, .28); transition: transform .2s ease;
}
.dl-mapdot[data-kind="booked"] .dl-mapdot__dot, .dl-mapdot[data-kind="none"] .dl-mapdot__dot {
  inset-inline-start: -4px; top: -4px; width: 8px; height: 8px; background: #fff; border: 1.5px solid rgba(255, 106, 0, .62); box-shadow: none;
}
.dl-mapdot[data-kind="none"] .dl-mapdot__dot { border-color: #9A8B7D; }
.dl-mapdot.is-hover .dl-mapdot__dot { transform: scale(1.3); }
.dl-mapdot.is-sel .dl-mapdot__dot { transform: scale(1.55); box-shadow: 0 0 0 3px rgba(255, 106, 0, .2); }
.dl-mapdot[data-kind="none"].is-sel .dl-mapdot__dot { box-shadow: 0 0 0 3px rgba(143, 129, 115, .2); }
.dl-mapname {
  position: absolute; inset-inline-start: 0; top: 0; white-space: nowrap; font-size: 11.5px; font-weight: 700; line-height: 16px;
  color: #3A2A1D; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; opacity: 0; transition: opacity .25s ease;
}
.dl-mapname[data-kind="booked"] { font-size: 11px; font-weight: 600; color: #6B594A; }
.dl-mapname[data-kind="none"] { color: #6B594A; }
.dl-mapname.is-lead { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.dl-mapname.is-shown { opacity: 1; }
.dl-map.is-landing .dl-mapname { opacity: 0; transition-duration: 0s; }
.dl-map__credit {
  position: absolute; inset-inline-end: 10px; bottom: 10px; display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px;
  border-radius: 8px; background: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 600; color: var(--ink-3);
}
.dl-map__credit:hover { color: var(--ink); }
.dl-map__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; min-height: 86px; padding: 14px 22px; border-top: 1px solid var(--line); }
.dl-map__info { flex: 1 1 380px; min-width: 0; }
.dl-info__hint { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.dl-info__hint-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); }
.dl-info__hint-ico svg { width: 20px; height: 20px; }
.dl-info__area { display: flex; align-items: center; gap: 12px; animation: dlRise .2s ease-out; }
.dl-info__area > .dl-dot { width: 12px; height: 12px; }
.dl-info__words { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dl-info__name { font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.dl-info__line { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.dl-info__area[data-tone="none"] .dl-info__line { color: #A16207; }
.dl-info__sub { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.dl-info__close { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--ink-3); transition: background .2s ease, color .2s ease; }
.dl-info__close:hover { background: var(--beige); color: var(--ink); }
.dl-info__close svg { width: 18px; height: 18px; }
.dl-map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.dl-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.dl-legend__n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--beige); font-size: 11.5px; font-weight: 800; color: var(--ink-3); text-align: center; }
.dl-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(36, 22, 12, .1); }
.dl-dot--booked { width: 9px; height: 9px; background: #fff; box-shadow: none; border: 1.8px solid rgba(255, 106, 0, .62); }
.dl-dot--wait { background: #F59E0B; }
.dl-dot--none { width: 9px; height: 9px; background: #fff; box-shadow: none; border: 1.8px solid #A8A29E; }
.dl-dot--land { width: 16px; height: 11px; border-radius: 3px; background: #F3EEE6; box-shadow: inset 0 0 0 1px #E2D7C8; }

/* ── 4. The list: every served area by how it is served; a chip shows it on the map ── */
.dl-cov__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.dl-cov__row > .dl-areas { flex: 1.5 1 480px; min-width: 0; }
.dl-cov__row > .cov-card--cargo { flex: 1 1 340px; min-width: 0; }
.dl-cov.is-live #coverageDistricts { display: none; }
.dl-areas .cov-card__head { margin-bottom: 22px; }
.dl-group + .dl-group { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.dl-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 12px; font-size: 15.5px; line-height: 1.4; }
.dl-group__title { font-weight: 800; color: var(--ink); }
.dl-group__meta { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.dl-group__note { margin: -4px 0 12px; font-size: 13.5px; line-height: 1.5; color: #B45309; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border-radius: 999px;
  background: var(--beige); border: 1px solid var(--line); font-size: 14px; font-weight: 650; color: var(--ink); text-align: start;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dl-chip:hover { background: var(--beige-2); }
.dl-group[data-kind="standard"] .dl-chip { background: #FFF2E7; border-color: rgba(255, 106, 0, .2); }
.dl-group[data-kind="standard"] .dl-chip:hover { background: #FFE8D6; }
.dl-chip[aria-pressed="true"], .dl-group[data-kind="standard"] .dl-chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.dl-chip__extra { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dl-chip[aria-pressed="true"] .dl-chip__extra { color: rgba(255, 255, 255, .85); }
.dl-areas__empty { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.dl-areas__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 20px; }
.dl-areas__note .dl-link { font-size: 14px; }

.dl-chip:focus-visible, .dl-check__clear:focus-visible, .dl-answer__cta:focus-visible, .dl-answer__link:focus-visible,
.dl-info__cta:focus-visible, .dl-info__close:focus-visible, .dl-link:focus-visible, .dl-map__credit:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px;
}
@media (pointer: coarse) { .dl-chip { min-height: 44px; } }

@keyframes dlDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes dlLift { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dlRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dl-check__list, .dl-answer, .dl-info__area { animation: none; }
  .dl-map__district, .dl-mapname, .dl-mapdot__dot, .dl-chip, .dl-check__input, .dl-answer__cta, .dl-info__cta { transition: none; }
}

@media (max-width: 1024px) {
  .dl-status { justify-content: center; text-align: center; margin-inline: auto; }
  .dl-check { width: 100%; max-width: 560px; margin-inline: auto; }
  .dl-check__label { display: flex; justify-content: center; }
}
@media (max-width: 760px) {
  .dl-status { margin: -10px auto 14px; font-size: 13.5px; }
  .dl-check { margin-top: 26px; }
  .dl-check__input { height: 56px; font-size: 16px; }
  .dl-answer__title { font-size: 16px; }
  .dl-cov .section-head { margin-bottom: 30px; }
  .dl-map { border-radius: 24px; margin-bottom: 14px; }
  .dl-map__frame { height: auto; aspect-ratio: 1.36; }
  .dl-map__foot { gap: 12px; min-height: 0; padding: 14px 16px 16px; }
  .dl-map__info { flex-basis: 100%; min-height: 58px; display: flex; align-items: center; }
  .dl-info__area { flex-wrap: wrap; width: 100%; }
  .dl-info__words { flex-basis: calc(100% - 80px); }
  .dl-info__cta { order: 3; flex: 1 1 100%; }
  .dl-map__legend { flex-basis: 100%; gap: 6px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .dl-cov__row { gap: 14px; }
  .dl-cov__row > .dl-areas, .dl-cov__row > .cov-card--cargo { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .dl-cov .cov-card { padding: 20px; }
  .dl-cov .cov-card__head { gap: 12px; }
  .dl-cov .cov-card__ico { width: 42px; height: 42px; border-radius: 13px; }
  .dl-cov .cov-card__ico svg { width: 22px; height: 22px; }
  .dl-cov .cov-card h3 { font-size: 18.5px; }
  .dl-chip { padding-inline: 12px; }
}

/* ── 5. The map's two views (js/turkey.js): İstanbul — the courier's areas — | Türkiye — where cargo goes ── */
.dl-map:not([data-view="turkey"]) .tr-only { display: none !important; }
.dl-map[data-view="turkey"] #dlMapFrame, .dl-map[data-view="turkey"] .dl-map__credit,
.dl-map[data-view="turkey"] #dlMapInfo, .dl-map[data-view="turkey"] #dlMapLegend { display: none !important; }
.dl-map__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dl-views { display: inline-flex; gap: 4px; padding: 4px; border-radius: 17px; background: var(--beige); }
.dl-view {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding-block: 6px; padding-inline: 8px 16px; border-radius: 13px;
  color: var(--ink-2); text-align: start; transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dl-view[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(36, 22, 12, .06), 0 6px 16px -8px rgba(36, 22, 12, .28); }
.dl-view__ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .7); color: var(--ink-3); transition: background .2s ease, color .2s ease; }
.dl-view[aria-pressed="true"] .dl-view__ico { background: var(--orange-soft); color: var(--orange); }
.dl-view__ico svg { width: 19px; height: 19px; }
.dl-view__words { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dl-view__words b { font-size: 14.5px; font-weight: 800; }
.dl-view__words small { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.dl-view__words small:empty { display: none; }
.dl-view:focus-visible, .tr-pick:focus-visible, .kw-map:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.tr-pick {
  height: 46px; min-width: 210px; max-width: 100%; padding: 0 12px; border-radius: 13px; border: 1.5px solid var(--line-2);
  background: #fff; font-size: 14.5px; font-weight: 650; color: var(--ink); cursor: pointer;
}
@media (hover: hover) {
  .dl-view:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
  .dl-view[aria-pressed="true"]:hover { background: #fff; }
  .tr-pick:hover { border-color: rgba(255, 106, 0, .45); }
}

.dl-map .dl-map__frame.tr-map { background: radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, #FBF5EE 62%, #F7EFE5 100%); }
/* The drawing on its way (a click before turkey-map.js arrives): a quiet pulse, not an empty box */
.dl-map .dl-map__frame.tr-map[data-state="loading"] { animation: trPulse 1.4s ease-in-out infinite alternate; }
@keyframes trPulse { from { opacity: 1; } to { opacity: .55; } }
.tr-map__canvas { position: absolute; inset: 26px 30px; }
.tr-map__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.tr-map__svg path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tr-map__prov { fill: #ECE5DA; stroke: #fff; stroke-width: 1; cursor: pointer; transition: fill .6s ease; }
.tr-map__prov[data-kind="served"] { fill: #FFD2AE; }
.tr-map__prov[data-kind="courier"] { fill: var(--orange); }
.tr-map__svg.is-pre .tr-map__prov[data-kind="served"] { fill: #ECE5DA; }
.tr-map__hover { fill: rgba(255, 106, 0, .16); stroke: rgba(230, 95, 0, .8); stroke-width: 1.5; pointer-events: none; }
.tr-map__sel { fill: rgba(255, 106, 0, .26); stroke: var(--orange-ink); stroke-width: 2.2; pointer-events: none; }
.tr-map__hover.is-quiet { fill: rgba(143, 129, 115, .14); stroke: rgba(143, 129, 115, .7); }
.tr-map__sel.is-quiet { fill: rgba(143, 129, 115, .22); stroke: #8F8173; }
.tr-map__names { position: absolute; inset: 0; pointer-events: none; }
.tr-name {
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 15px;
  color: #5C4A3B; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
.tr-name[data-kind="served"] { color: #7C3A0C; }
.tr-name.is-on { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.tr-name.is-lead {
  translate: -50% calc(-100% - 8px); padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--orange-ink);
  font-size: 12px; font-weight: 800; text-shadow: none; box-shadow: 0 1px 2px rgba(36, 22, 12, .1), 0 6px 14px -8px rgba(36, 22, 12, .35);
}
.tr-sw { display: inline-block; flex: none; width: 16px; height: 11px; border-radius: 3px; }
.tr-sw--served { background: #FFD2AE; box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .25); }
.tr-sw--courier { background: var(--orange); }
.tr-sw--later { background: #ECE5DA; box-shadow: inset 0 0 0 1px #DED3C4; }
.dl-info__area > .tr-sw { width: 14px; height: 14px; border-radius: 4px; }
.tr-hint__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-hint__line { font-weight: 700; color: var(--ink); }
.tr-hint__sub { font-size: 13.5px; color: var(--ink-3); }

/* The cargo card: the carriers the checkout shows, and the way to the map's Türkiye view */
#kwCarriers { margin-top: 18px; }
.kw-carriers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kw-carriers__label { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.kw-carrier { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px; border-radius: 9px; background: var(--beige); border: 1px solid var(--line); font-size: 13.5px; font-weight: 750; color: var(--ink); }
.kw-carrier svg { width: 15px; height: 15px; flex: none; color: var(--orange); }
.kw-map { margin-top: 10px; padding: 0; }
.glance__ico--orange { background: var(--orange-soft); color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .tr-map__prov, .dl-view, .dl-view__ico { transition: none; }
  .dl-map .dl-map__frame.tr-map[data-state="loading"] { animation: none; }
}
@media (max-width: 760px) {
  .dl-map__bar { padding: 10px; gap: 10px; }
  .dl-views { display: flex; width: 100%; }
  .dl-view { flex: 1 1 0; min-width: 0; gap: 8px; padding-inline: 6px 10px; }
  .dl-view__ico { width: 30px; height: 30px; border-radius: 9px; }
  .dl-view__ico svg { width: 17px; height: 17px; }
  .dl-view__words small { white-space: normal; }
  .tr-pick { flex: 1 1 100%; min-width: 0; }
  /* A wide country in a phone's frame: the frame takes Türkiye's shape (İstanbul's keeps its own). */
  .dl-map .dl-map__frame.tr-map { aspect-ratio: 1.72; }
  .tr-map__canvas { inset: 16px 10px 12px; }
  .tr-name.is-lead { font-size: 11px; padding: 2px 8px; }
}
@media (max-width: 400px) {
  /* The live cargo card's long "download and order" button takes its own row instead of running past the card */
  .kw-live .btn--primary { flex: 1 1 100%; height: auto; min-height: 50px; padding-block: 10px; white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  /* The smallest phones: the toggle's words get the room its icons took */
  .dl-view__ico { display: none; }
  .dl-view { padding-inline: 10px; }
}
/* @delivery:end */

/* ═══ tour (js/tour.js) ═══ */
/* @tour:start */
/* ================================================================
 * THE APP TOUR — one order, told with real screens (js/tour.js)
 *
 * Desktop: the phone stays beside the steps (position: sticky — the page
 * scrolls as it always does) and glides to the screen of the step in the
 * middle of the screen. Phones and tablets: the steps are an app-like swipe
 * carousel, each with its own phone. Without JS every step reads as active.
 * ================================================================ */
.tour { position: relative; padding: 104px 0 64px; background: var(--beige); }
.tour .section-head { margin-bottom: 40px; }
.tour__stage { position: relative; }
/* "Nasıl Çalışır" in the menu and the footer lands on the steps, clear of the fixed bar */
#how-it-works { scroll-margin-top: calc(var(--nav-h) + 16px); }
.tour-step__kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--orange-ink);
}
[dir="rtl"] .tour-step__kicker { letter-spacing: 0; }
.tour-step__n {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; border: 1.5px solid transparent;
  font-size: 15px; font-weight: 900; box-shadow: 0 8px 18px -8px rgba(255, 106, 0, .85);
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tour-step__title {
  font-size: clamp(24px, 2.3vw, 31px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 12px; transition: color .3s ease;
}
[dir="rtl"] .tour-step__title { letter-spacing: 0; line-height: 1.4; }
.tour-step__text { font-size: 17.5px; line-height: 1.65; color: var(--ink-2); }
.tour-ui { display: flex; margin-top: 24px; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
/* No one-word last lines in the tour's and the points section's words (where the browser can) */
.tour .section-title, .tour-step__title, .rewards__title, .rw-levels__title { text-wrap: balance; }
.tour .section-subtitle, .tour-step__text, .rewards__rule, .rw-result__text, .rewards__note, .rw-levels__note { text-wrap: pretty; }

/* The app's own pieces of UI, one per step */
.tui-search {
  display: inline-flex; align-items: center; gap: 11px; height: 52px; padding: 0 22px; border-radius: 17px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
  color: #8A7868; font-size: 16.5px; font-weight: 500;
}
.tui-search svg { width: 21px; height: 21px; color: var(--ink); flex: none; }
.tui-search b { color: var(--orange); font-weight: 700; }
.tui-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tui-chip {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2); font-size: 15px; font-weight: 700; color: var(--ink-2);
}
.tui-chip.is-on { background: linear-gradient(135deg, var(--orange), var(--orange-2)); border-color: transparent; color: #fff; box-shadow: 0 8px 16px -8px rgba(255, 106, 0, .8); }
.tui-add { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tui-stepper {
  display: inline-flex; align-items: center; gap: 16px; height: 52px; padding: 0 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink-3);
}
.tui-stepper svg { width: 18px; height: 18px; flex: none; }
.tui-stepper svg:last-child { color: var(--orange); }
.tui-stepper b { min-width: 12px; text-align: center; font-size: 17px; font-weight: 800; color: var(--ink); }
.tui-btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 10px 20px -10px rgba(255, 106, 0, .85);
}
.tui-address {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 8px 18px; border-radius: 999px;
  background: #FFF6EE; border: 1.5px solid var(--orange); color: var(--orange-ink); font-size: 15.5px; font-weight: 600;
}
.tui-address svg { width: 20px; height: 20px; color: var(--orange); flex: none; }
.tui-address b { font-weight: 800; }
.tui-confirm {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: min(100%, 320px); height: 58px; padding: 0 26px; border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; font-size: 16.5px; font-weight: 800;
  box-shadow: 0 14px 26px -12px rgba(255, 106, 0, .9);
}
.tui-confirm b { font-size: 19px; font-weight: 800; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.tui-confirm small { font-size: 13px; }
.tui-track {
  display: inline-flex; align-items: center; gap: 12px; padding-block: 12px; padding-inline: 12px 20px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.tui-track__ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); }
.tui-track__ico svg { width: 24px; height: 24px; }
.tui-track__copy { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tui-track__copy b { font-size: 15.5px; font-weight: 800; }
.tui-track__copy small { font-size: 13px; color: var(--ink-2); }
.tui-track__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-inline-start: 14px; background: var(--orange); box-shadow: 0 0 0 5px rgba(255, 106, 0, .16); }
.tour.is-playing .tour-step.is-active .tui-track__dot { animation: tourPulse 2.2s ease-in-out infinite; }
@keyframes tourPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 106, 0, .2); } 50% { box-shadow: 0 0 0 9px rgba(255, 106, 0, .05); } }

/* The phone's screens: stacked, one shown; the next glides in like the app pushes a screen */
.tour__shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; visibility: hidden; transform: translateX(7%);
  /* The screen leaving holds a beat, so the one arriving covers it rather than both showing at half */
  transition: opacity .2s ease .12s, transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s;
}
.tour__shot.is-before { transform: translateX(-7%); }
/* A screen not asked for yet has no src: nothing to paint (no alt text in an empty phone) */
.tour__shot:not([src]), .tour-step__shot:not([src]) { visibility: hidden; }
[dir="rtl"] .tour__shot { transform: translateX(-7%); }
[dir="rtl"] .tour__shot.is-before { transform: translateX(7%); }
.tour__shot.is-active, [dir="rtl"] .tour__shot.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .26s ease, transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

/* ── Desktop: the story beside a phone that stays ── */
@media (min-width: 1025px) {
  .tour__stage {
    --tw: clamp(236px, calc((100vh - var(--nav-h) - 96px) / 2.06), 300px);
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: clamp(40px, 6vw, 88px);
    max-width: var(--container); margin: 0 auto; padding: 0 24px;
  }
  .tour__device {
    position: sticky; top: calc(var(--nav-h) + (100vh - var(--nav-h) - var(--tw) * 2.06) / 2);
    align-self: start; display: flex; justify-content: center;
  }
  .tour__device::before {
    content: ''; position: absolute; inset: 0; margin: auto; width: calc(var(--tw) * 1.75); height: calc(var(--tw) * 1.75);
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 241, 226, .7) 48%, rgba(255, 138, 31, .12) 72%, rgba(255, 138, 31, 0));
  }
  .phone--tour { --w: var(--tw); }
  .tour__steps { padding-block: 2vh 12vh; }
  .tour-step { display: flex; align-items: center; min-height: max(380px, 54vh); }
  .tour-step__body { max-width: 500px; }
  .tour-step__phone, .tour__arrow, .tour__dots { display: none; }
  /* With JS on: one step at a time is "now" — its number lit, its piece of UI awake */
  .tour.is-live .tour-step:not(.is-active) .tour-step__n { background: #fff; border-color: var(--line-2); color: var(--ink-3); box-shadow: none; }
  .tour.is-live .tour-step:not(.is-active) .tour-step__title { color: var(--ink-3); }
  .tour.is-live .tour-step:not(.is-active) .tour-ui { opacity: .45; transform: translateY(8px); filter: saturate(.55); }
}

/* ── Phones and tablets: an app-like swipe carousel ── */
@media (max-width: 1024px) {
  .tour { padding: 80px 0 44px; }
  .tour .section-head { margin-bottom: 26px; }
  /* The phone sized so it, its words and the dots fit one screen; the slide a little wider, so the next one peeks */
  .tour__stage { --slide-w: clamp(180px, min(62vw, (100vh - 400px) / 2.06), 280px); --slide: calc(var(--slide-w) + 48px); }
  .tour__device, .tour-ui { display: none; }
  .tour__steps {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 6px calc(50% - var(--slide) / 2) 4px;
  }
  .tour__steps::-webkit-scrollbar { display: none; }
  .tour__steps:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; border-radius: 18px; }
  .tour-step { flex: none; width: var(--slide); scroll-snap-align: center; }
  .tour-step__phone { display: flex; justify-content: center; }
  .phone--step { --w: var(--slide-w); transition: transform .35s ease, opacity .35s ease; }
  .phone--step .phone__frame { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .55), 0 34px 54px -30px rgba(36, 22, 12, .55); }
  .tour-step { transition: opacity .35s ease; }
  .tour.is-live .tour-step:not(.is-active) { opacity: .55; }
  .tour.is-live .tour-step:not(.is-active) .phone--step { transform: scale(.93); }
  .tour-step__body { text-align: center; padding: 20px 4px 0; }
  .tour-step__kicker { justify-content: center; margin-bottom: 10px; font-size: 13.5px; }
  .tour-step__n { width: 32px; height: 32px; font-size: 14px; }
  .tour-step__title { font-size: 21px; margin-bottom: 8px; }
  .tour-step__text { font-size: 15.5px; line-height: 1.6; }
  .tour__dots { display: flex; justify-content: center; margin-top: 12px; }
  .tour__dot { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
  .tour__dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(36, 22, 12, .2); transition: width .3s ease, background .3s ease; }
  .tour__dot[aria-current="step"]::before { width: 26px; background: var(--orange); }
  .tour__dot:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; border-radius: 12px; }
  .tour__arrow { top: calc(6px + var(--slide-w) * 1.03 - 26px); }
  .tour__arrow:disabled { opacity: .35; cursor: default; transform: none; }
}
@media (max-width: 760px) {
  .tour { padding: 64px 0 36px; }
}
@media (max-width: 380px) {
  .tour__stage { --slide: calc(var(--slide-w) + 28px); }
  .tour-step__title { font-size: 19.5px; }
  .tour-step__text { font-size: 15px; }
}

/* ================================================================
 * SCAN TO GET THE APP — the download card's code (desktop only; @cta-art)
 * ================================================================ */
.cta-qr { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .cta-qr {
    position: absolute; z-index: 2; inset-inline-start: -64px; bottom: 48px; width: 200px;
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 14px 16px;
    border-radius: 24px; background: #fff; color: var(--ink); text-align: center;
    box-shadow: 0 30px 60px -28px rgba(60, 24, 0, .55), 0 2px 6px rgba(60, 24, 0, .12);
  }
  .cta-qr__code { width: 140px; height: 140px; image-rendering: pixelated; }
  .cta-qr__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
  .cta-qr__text b { font-size: 14.5px; font-weight: 800; }
  .cta-qr__text small { font-size: 12.5px; color: var(--ink-2); }
}
@media (min-width: 900px) and (max-width: 1024px) and (hover: hover) {
  .cta-qr { inset-inline-start: calc(50% - 300px); bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour__shot, .tour__shot.is-active, [dir="rtl"] .tour__shot, [dir="rtl"] .tour__shot.is-active { transform: none; transition: none; }
  .tour-step, .tour-step__n, .tour-step__title, .tour-ui, .phone--step, .tour__dot::before { transition: none; }
  .tour.is-playing .tour-step.is-active .tui-track__dot { animation: none; }
}
/* @tour:end */

/* ═══ rewards (js/rewards.js) ═══ */
/* @rewards:start */
/* ================================================================
 * YALLA POINTS — what an order earns (js/rewards.js)
 * Shown only while the app runs points; every figure from its own rule.
 * ================================================================ */
.rewards {
  position: relative; overflow: hidden;
  background:
    radial-gradient(640px 480px at 80% 50%, rgba(255, 196, 64, .18), rgba(255, 196, 64, 0) 62%),
    radial-gradient(520px 400px at 8% 8%, rgba(255, 138, 31, .07), rgba(255, 138, 31, 0) 60%),
    var(--bg);
}
[dir="rtl"] .rewards {
  background:
    radial-gradient(640px 480px at 20% 50%, rgba(255, 196, 64, .18), rgba(255, 196, 64, 0) 62%),
    radial-gradient(520px 400px at 92% 8%, rgba(255, 138, 31, .07), rgba(255, 138, 31, 0) 60%),
    var(--bg);
}
.rewards__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.rewards__copy { min-width: 0; }
.rewards__title {
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; font-weight: 800; letter-spacing: -.025em;
  color: var(--ink); margin-bottom: 14px;
}
[dir="rtl"] .rewards__title { letter-spacing: 0; line-height: 1.3; }
.rewards__rule { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); max-width: 540px; margin-bottom: 26px; }
.rewards__rule:empty { display: none; }

/* The calculator: one white card; its parts are rows, never cards of their own */
.rw-calc { max-width: 560px; padding: 26px 26px 22px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.rw-calc__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.rw-calc__label { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.rw-calc__amount { font-size: 34px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; color: var(--ink); unicode-bidi: isolate; white-space: nowrap; }
.rw-calc__amount small { font-size: 19px; font-weight: 800; }

.rw-range {
  --fill: 37%;
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 6px 0 4px;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.rw-range:focus { outline: none; }
.rw-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--orange) 0, var(--orange-2) var(--fill), var(--beige-2) var(--fill), var(--beige-2) 100%);
}
[dir="rtl"] .rw-range::-webkit-slider-runnable-track {
  background: linear-gradient(to left, var(--orange) 0, var(--orange-2) var(--fill), var(--beige-2) var(--fill), var(--beige-2) 100%);
}
.rw-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: #fff; border: 3px solid var(--orange); box-shadow: 0 4px 12px -2px rgba(255, 106, 0, .45);
  transition: box-shadow .2s ease;
}
.rw-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(255, 106, 0, .22), 0 4px 12px -2px rgba(255, 106, 0, .45); }
.rw-range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--beige-2); }
.rw-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--orange); }
.rw-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 4px 12px -2px rgba(255, 106, 0, .45); }
.rw-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(255, 106, 0, .22); }

.rw-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-preset {
  flex: 1 1 0; min-width: 72px; height: 44px; padding: 0 10px; border-radius: 14px;
  background: var(--beige); border: 1.5px solid transparent; color: var(--ink-2);
  font-size: 15px; font-weight: 800; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.rw-preset:hover { background: var(--beige-2); }
.rw-preset[aria-pressed="true"] { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-ink); }
.rw-preset:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.rw-result {
  display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 17.5px; line-height: 1.45; font-weight: 600; color: var(--ink);
}
.rw-result__coin {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, #FFE7A3, #FFC93C 55%, #E9A20B); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(183, 121, 31, .8), inset 0 -2px 0 rgba(0, 0, 0, .08);
  transition: filter .25s ease, opacity .25s ease;
}
.rw-result__coin svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(120, 70, 0, .35)); }
.rewards:not(.is-earning) .rw-result__coin { filter: grayscale(1); opacity: .45; }
.rw-result__text { min-width: 0; }
.rw-result b { font-size: 22px; font-weight: 900; color: var(--orange-ink); white-space: nowrap; }
.rw-bonus { margin-top: 10px; margin-inline-start: 62px; font-size: 14.5px; font-weight: 700; color: var(--mint-ink); }

.rw-levels { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.rw-levels__title { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; margin-bottom: 6px; }
.rw-levels__list { display: grid; }
.rw-level { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.rw-level + .rw-level { border-top: 1px dashed var(--line); }
.rw-level__coin {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-size: 13.5px; font-weight: 900; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.rw-level__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rw-level__copy b { font-size: 15px; font-weight: 800; color: var(--ink); }
.rw-level__copy small { font-size: 13px; color: var(--ink-3); }
.rw-level__pts { flex: none; font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.rw-levels__note { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.rewards__note { max-width: 560px; margin-top: 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.rewards__note:empty { display: none; }
.rewards__visual { position: relative; display: flex; justify-content: center; min-width: 0; }
.phone--rewards { --w: 290px; }

@media (max-width: 1024px) {
  .rewards__inner { grid-template-columns: 1fr; gap: 44px; }
  .rewards__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .rewards__copy .section-label--start { margin-inline: auto; }
  .rewards__rule { margin-inline: auto; }
  .rw-calc { width: 100%; text-align: start; }
  .rewards__note { margin-inline: auto; }
  .rewards { background: radial-gradient(520px 420px at 50% 88%, rgba(255, 196, 64, .2), rgba(255, 196, 64, 0) 62%), var(--bg); }
}
@media (max-width: 760px) {
  .rewards__title { font-size: clamp(28px, 8vw, 36px); }
  .rewards__rule { font-size: 16px; margin-bottom: 22px; }
  .rw-calc { padding: 20px 18px 16px; border-radius: 22px; }
  .rw-calc__amount { font-size: 30px; }
  .rw-preset { min-width: 0; font-size: 14.5px; }
  .rw-result { font-size: 16.5px; gap: 12px; }
  .rw-result b { font-size: 20px; }
  .rw-result__coin { width: 42px; height: 42px; }
  .rw-bonus { margin-inline-start: 54px; }
  .phone--rewards { --w: 236px; }
}
@media (max-width: 380px) {
  .rw-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-level__copy small { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-preset, .rw-result__coin, .rw-range::-webkit-slider-thumb { transition: none; }
}
/* @rewards:end */

/* ═══ chef (js/chef.js) ═══ */
/* @chef:start */
/*
 * YALLA CHEF, SHOWN (js/chef.js). Around the phone: the page's dark chef
 * section — the pitch, three example questions, the four benefits. Inside
 * it: the app's v5.12 chef chat (components/AIChef.tsx, components/chef/*):
 * white header with the chef's tile, slate page, the customer's brand bubble
 * and the chef's white card each bitten by its coin, the recipe's shop rail.
 * Everything in the phone is sized in em from the phone's width, so the
 * screen keeps its proportions from 320 px phones to desktops.
 */
.chef .chefx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: ". demo" "copy demo" "ask demo" "list demo" ". demo";
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: clamp(40px, 6vw, 88px);
}
.chefx__copy { grid-area: copy; min-width: 0; }
/* The chef's name moves to the next line whole ("يلا شيف", not "يلا / شيف"); a long one still wraps inside itself */
.chefx__copy .chef__title em { display: inline-block; }
.chefx__ask { grid-area: ask; min-width: 0; }
.chefx__demo { grid-area: demo; position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.chefx__list { grid-area: list; min-width: 0; margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 580px; }

/* The three questions: real buttons, the one on the phone pressed */
.chefx__ask-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, .74); }
.chefx__ask-label svg { width: 16px; height: 16px; flex: none; color: #FFB37A; }
.chefx__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chefx__chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding-block: 6px; padding-inline: 7px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1.25; text-align: start;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.chefx__chip:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }
.chefx__chip:active { transform: scale(.98); }
.chefx__chip:focus-visible { outline: 3px solid #FFB37A; outline-offset: 3px; }
.chefx__chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 14px 30px -16px rgba(255, 106, 0, .9); }
.chefx__chip-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .1); font-size: 17px; line-height: 1; }
.chefx__chip[aria-pressed="true"] .chefx__chip-ico { background: var(--orange-soft); }

/* Under the phone: where the products and prices come from (shown with them) */
.chefx__note { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, .7); text-align: center; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s; }
.chefx__note[data-on] { visibility: visible; opacity: 1; }
.chefx__note:not([data-on]) .live-dot { animation: none; }
.chefx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The four benefits */
.chefx__list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.chefx__list span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(255, 106, 0, .16); color: #FFB37A; }
.chefx__list svg { width: 20px; height: 20px; }
.chefx__list b { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #fff; }

/* ── The phone: the app's chef, drawn ── */
.phone--chef { --w: 330px; }
.phone--chef .phone__screen { background: #F8FAFC; }
.cx-app {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  font-size: calc(var(--w) * .04); line-height: 1.35; color: #0F172A; background: #F8FAFC; text-align: start;
}
.cx-app::after { content: ''; position: absolute; bottom: .5em; inset-inline: 0; margin-inline: auto; width: 9.6em; height: .36em; border-radius: 1em; background: #0F172A; z-index: 6; pointer-events: none; }
.cx-status { flex: none; height: 2.95em; padding: .15em 1.95em 0; display: flex; align-items: center; justify-content: space-between; background: #fff; font-weight: 700; direction: ltr; }
.cx-status__icons { display: inline-flex; align-items: center; gap: .4em; }
.cx-status__icons svg:first-child { width: 1.15em; height: .9em; }
.cx-status__icons svg:last-child { width: 1.75em; height: .9em; }
.cx-head { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: .65em; padding: .2em 1.05em .7em; background: #fff; border-bottom: 1px solid rgba(226, 232, 240, .8); }
.cx-head__tile { width: 2.55em; height: 2.55em; border-radius: .85em; display: grid; place-items: center; flex: none; background: rgba(255, 106, 0, .08); color: #FF6A00; }
.cx-head__tile svg { width: 1.4em; height: 1.4em; }
.cx-head__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1em; }
.cx-head__name { font-size: 1.27em; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cx-head__copy small { font-size: .86em; font-weight: 500; line-height: 1.3; color: #64748B; }
.cx-head__badge { flex: none; max-width: 8.5em; padding: .42em .75em; border-radius: 999px; background: #FFF0E4; color: #C2410C; font-size: .76em; font-weight: 700; line-height: 1.15; text-align: center; }
[dir="rtl"] .cx-head__name { letter-spacing: 0; }

.cx-chat { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: .95em .9em 1.1em; display: flex; flex-direction: column; gap: 1em; scrollbar-width: none; }
.cx-chat::-webkit-scrollbar { display: none; }
.cx-hello { margin: auto; display: flex; flex-direction: column; align-items: center; gap: .75em; padding: 0 1em; text-align: center; font-weight: 600; color: #475569; }
.cx-hello__coin { width: 3.4em; height: 3.4em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 106, 0, .1); color: #FF6A00; }
.cx-hello__coin svg { width: 1.7em; height: 1.7em; }

/* A message: its coin sits on the bubble's top edge, the bubble cut around it (the app's bite) */
.cx-msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.cx-msg--user { align-items: flex-end; }
.cx-msg--answer { align-items: stretch; }
.cx-coin { position: absolute; top: 0; z-index: 1; width: 2.35em; height: 2.35em; border-radius: 50%; display: grid; place-items: center; background: #FF6A00; color: #fff; box-shadow: 0 0 0 2px #fff; }
.cx-coin svg { width: 1.2em; height: 1.2em; }
.cx-msg--user .cx-coin { inset-inline-end: .55em; }
.cx-msg--chef .cx-coin { inset-inline-start: .55em; }
.cx-bubble { margin-top: 1.175em; border-radius: 1.6em; padding: 1.4em 1.1em .95em; }
.cx-msg--user .cx-bubble {
  max-width: 86%; background: #EA580C; color: #fff; border-end-end-radius: .45em;
  -webkit-mask-image: radial-gradient(circle 1.6em at calc(100% - 1.725em) 0, transparent 1.5em, #000 1.55em);
  mask-image: radial-gradient(circle 1.6em at calc(100% - 1.725em) 0, transparent 1.5em, #000 1.55em);
}
.cx-msg--chef .cx-bubble {
  background: #fff; color: #334155; box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .95);
  -webkit-mask-image: radial-gradient(circle 1.6em at 1.725em 0, transparent 1.5em, #000 1.55em);
  mask-image: radial-gradient(circle 1.6em at 1.725em 0, transparent 1.5em, #000 1.55em);
}
[dir="rtl"] .cx-msg--user .cx-bubble {
  -webkit-mask-image: radial-gradient(circle 1.6em at 1.725em 0, transparent 1.5em, #000 1.55em);
  mask-image: radial-gradient(circle 1.6em at 1.725em 0, transparent 1.5em, #000 1.55em);
}
[dir="rtl"] .cx-msg--chef .cx-bubble {
  -webkit-mask-image: radial-gradient(circle 1.6em at calc(100% - 1.725em) 0, transparent 1.5em, #000 1.55em);
  mask-image: radial-gradient(circle 1.6em at calc(100% - 1.725em) 0, transparent 1.5em, #000 1.55em);
}
.cx-ask { font-size: 1.04em; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }

/* The chef thinking: the app's three dots and its status line */
.cx-msg--thinking .cx-bubble { min-width: 12.5em; max-width: 86%; padding-bottom: .95em; }
.cx-think { display: flex; align-items: center; gap: .65em; min-height: 1.4em; }
.cx-think__dots { display: inline-flex; align-items: center; gap: .3em; flex: none; }
.cx-think__dots i { width: .45em; height: .45em; border-radius: 50%; background: #FF6A00; animation: cxThinkDot 1.2s ease-in-out infinite both; }
.cx-think__dots i:nth-child(2) { animation-delay: .16s; }
.cx-think__dots i:nth-child(3) { animation-delay: .32s; }
.cx-think__label { display: inline-block; font-size: .98em; font-weight: 500; line-height: 1.35; color: #475569; }
@keyframes cxThinkDot { 0%, 80%, 100% { opacity: .3; transform: scale(.75); } 40% { opacity: 1; transform: scale(1); } }

/* The recipe card */
.cx-title { font-size: 1.42em; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: #0F172A; overflow-wrap: anywhere; }
[dir="rtl"] .cx-title { letter-spacing: 0; line-height: 1.4; }
.cx-meta { margin-top: .45em; display: flex; flex-wrap: wrap; align-items: center; gap: .25em .55em; font-size: .93em; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }
.cx-meta > span { display: inline-flex; align-items: center; gap: .3em; }
.cx-meta svg { width: 1.1em; height: 1.1em; flex: none; color: #FF6A00; }
.cx-meta i { font-style: normal; color: #CBD5E1; }
.cx-note { margin-top: .5em; font-size: .98em; line-height: 1.5; color: #334155; overflow-wrap: anywhere; }
.cx-rule { border: 0; border-top: 1px solid #F1F5F9; margin: .8em 0 .7em; }
.cx-shop-title { font-size: 1.1em; font-weight: 700; line-height: 1.3; color: #0F172A; }
.cx-cost { margin-top: .2em; font-size: .95em; font-weight: 500; line-height: 1.4; color: #64748B; }
.cx-cost b { font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums; }

/* "Hepsini sepete ekle": a link to the store — the basket is in the app, and its second line says so */
.cx-add {
  margin-top: .75em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em;
  width: 100%; min-height: max(44px, 3.3em); padding: .45em .9em; border-radius: 1.5em;
  background: #EA580C; color: #fff; font-weight: 700; line-height: 1.25; text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08); transition: background .2s ease, transform .2s ease;
}
.cx-add:hover { background: #DC4F0B; }
.cx-add:active { transform: scale(.98); }
.cx-add:focus-visible { outline: 3px solid #0F172A; outline-offset: 2px; }
.cx-add__main { display: inline-flex; align-items: center; gap: .45em; }
.cx-add__main svg { width: 1.15em; height: 1.15em; flex: none; }
.cx-add__where { display: inline-flex; align-items: center; gap: .3em; font-size: .78em; font-weight: 600; color: rgba(255, 255, 255, .9); }
.cx-add__where svg { width: 1em; height: 1em; flex: none; }
.cx-add--quiet { background: rgba(255, 106, 0, .08); color: #C2410C; box-shadow: none; }
.cx-add--quiet:hover { background: rgba(255, 106, 0, .14); }

/* The shop rail: each card a real product, its picture, its name, the app's price */
.cx-rail-wrap { position: relative; }
.cx-rail { margin: .75em -1.1em 0; padding: .1em 1.1em .3em; display: flex; gap: .6em; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 1.1em; overscroll-behavior-x: contain; scrollbar-width: none; }
.cx-rail::-webkit-scrollbar { display: none; }
.cx-prod { flex: none; width: 8.7em; display: flex; scroll-snap-align: start; }
.cx-prod__link { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 1.1em; border: 1px solid #E2E8F0; background: #fff; overflow: hidden; transition: border-color .2s ease; }
.cx-prod__link:hover { border-color: #CBD5E1; }
.cx-prod__link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #EA580C; }
.cx-prod__pic { position: relative; display: block; aspect-ratio: 1.4; padding: .45em .5em .25em; background: #fff; }
.cx-prod__pic img { width: 100%; height: 100%; object-fit: contain; }
.cx-prod__off { position: absolute; top: .5em; inset-inline-start: .5em; padding: .15em .4em; border-radius: .4em; background: #E11D48; color: #fff; font-size: .74em; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cx-prod__body { flex: 1; display: flex; flex-direction: column; padding: .1em .7em .65em; }
.cx-prod__name { font-size: .88em; font-weight: 600; line-height: 1.3; color: #0F172A; overflow-wrap: anywhere; }
.cx-prod__price { align-self: flex-start; margin-top: auto; padding-top: .3em; display: flex; flex-direction: column; align-items: flex-start; font-variant-numeric: tabular-nums; }
.cx-prod__was { font-size: .74em; font-weight: 500; line-height: 1.15; color: #94A3B8; }
.cx-prod__now { font-size: 1em; font-weight: 700; line-height: 1.25; color: #C2410C; }

/* A mouse cannot swipe: two arrows, only on hover-and-pointer screens, only where the rail can go */
.cx-rail__nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cx-rail__nav {
    position: absolute; top: calc(50% - 1.1em); z-index: 2; width: 2.2em; height: 2.2em; border-radius: 50%;
    display: grid; place-items: center; background: #fff; color: #334155; border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .14); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  }
  .cx-rail__nav svg { width: 1.15em; height: 1.15em; }
  .cx-rail__nav--back { inset-inline-start: -.55em; }
  .cx-rail__nav--back svg, [dir="rtl"] .cx-rail__nav--next svg { transform: scaleX(-1); }
  [dir="rtl"] .cx-rail__nav--back svg { transform: none; }
  .cx-rail__nav--next { inset-inline-end: -.55em; }
  .cx-rail__nav:hover { transform: scale(1.06); }
  .cx-rail-wrap.can-back:hover .cx-rail__nav--back, .cx-rail-wrap.can-next:hover .cx-rail__nav--next { opacity: 1; pointer-events: auto; }
}

/* What the shop does not carry: listed plainly in the recipe, never drawn as a product */
.cx-home { margin-top: .5em; font-size: .93em; line-height: 1.5; color: #475569; }
.cx-home > svg { display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: .3em; vertical-align: -.17em; color: #94A3B8; }
.cx-home__title { font-weight: 700; color: #334155; }
.cx-home__title::after { content: ':'; margin-inline-end: .35em; }
.cx-home__list, .cx-home__list li { display: inline; }
.cx-home__list li + li::before { content: '·'; margin-inline: .4em; color: #94A3B8; }
.cx-plain { margin-top: .45em; display: grid; gap: .2em; font-size: .95em; line-height: 1.45; color: #334155; }
.cx-plain li { position: relative; padding-inline-start: 1em; }
.cx-plain li::before { content: ''; position: absolute; inset-inline-start: .15em; top: .62em; width: .36em; height: .36em; border-radius: 50%; background: #FF6A00; }

/* The composer: "ask your own" — a link to the app, not an input that does nothing */
.cx-foot { position: relative; z-index: 2; flex: none; padding: .5em .85em 1.55em; background: #fff; border-top: 1px solid #F1F5F9; }
.cx-composer { display: flex; align-items: center; gap: .55em; min-height: max(44px, 3.15em); padding: .3em; border-radius: 999px; background: #F1F5F9; color: #64748B; font-size: .95em; font-weight: 500; line-height: 1.25; transition: background .2s ease; }
.cx-composer:hover { background: #E8EDF3; }
.cx-composer:focus-visible { outline: 3px solid #EA580C; outline-offset: 2px; }
.cx-composer__spark { width: 2.25em; height: 2.25em; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; color: #334155; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.cx-composer__spark svg, .cx-composer__send svg { width: 1.1em; height: 1.1em; }
.cx-composer__text { flex: 1; min-width: 0; }
.cx-composer__send { width: 2.35em; height: 2.35em; border-radius: 50%; display: grid; place-items: center; flex: none; background: #EA580C; color: #fff; }
[dir="rtl"] .cx-composer__send svg { transform: scaleX(-1); }

@media (max-width: 1024px) {
  /* One column: the phone first, its questions right under it — tap one, the answer plays just above */
  .chef .chefx { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "demo" "ask" "list"; grid-template-rows: none; justify-items: center; text-align: center; }
  .chefx__copy { display: flex; flex-direction: column; align-items: center; }
  .chefx__copy .section-label { margin-inline: auto; }
  .chefx__copy .chef__sub { margin-inline: auto; margin-bottom: 0; }
  .chefx__demo { margin-top: 34px; gap: 14px; }
  .chefx__ask { margin-top: 24px; display: flex; flex-direction: column; align-items: center; }
  .chefx__ask-label { justify-content: center; }
  .chefx__chips { justify-content: center; }
  .chefx__list { margin-top: 40px; width: 100%; max-width: 640px; text-align: start; }
}
@media (max-width: 760px) {
  .phone--chef { --w: min(330px, calc(100vw - 36px)); }
  /* On a phone the three questions stack, one even column of buttons */
  .chefx__ask { width: 100%; }
  .chefx__chips { flex-direction: column; align-items: stretch; width: 100%; max-width: 380px; }
  .chefx__list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-think__dots i { animation: none; opacity: 1; transform: none; }
  .chefx__chip, .cx-add, .cx-composer, .cx-prod__link, .chefx__note, .cx-rail__nav { transition: none; }
}
/* @chef:end */

/* ═══ ARABIC (2026-10-18) — IBM Plex Sans Arabic, Latin words and figures in Inter. Arabic is cursive:
   no tracking anywhere (it pulls the joined letters apart), headings at the face's own 700, and the
   lines Arabic needs (taller letters, dots above and below). ═══ */
html[dir="rtl"] body *, html[dir="rtl"] body *::before, html[dir="rtl"] body *::after { letter-spacing: normal !important; }
html[dir="rtl"] :is(h1, h2, h3, .hero-title, .section-title, .cta__title, .rewards__title, .chefx__title) { font-weight: 700; }
html[dir="rtl"] :is(.hero-title, .section-title, .cta__title, .rewards__title, .chefx__title) { line-height: 1.38; }
html[dir="rtl"] :is(.hero-subtitle, .section-subtitle, .cta__sub, .tour-step__text, .bento__text p, .faq-a-inner p, .chefx__sub, .footer-brand p) { line-height: 1.85; }
html[dir="rtl"] :is(.section-label, .tour-step__kicker, .mk-tab, .btn, .nav__links a, .nav__cta) { font-weight: 600; }
/* An address that reads left to right (an e-mail, a phone) lines up with the Arabic fields around it. */
html[dir="rtl"] input[dir="ltr"] { text-align: right; }
html[dir="rtl"] input[dir="ltr"]::placeholder { text-align: right; }