/* ============================================================
       La'Matia Design System — token foundation
       (bundled from claude.ai/design "La'Matia Design System",
        derived from this repo). The menu consumes these tokens.
       ============================================================ */
    :root{
      /* ---- Paper / surfaces (warm cream) ---- */
      --paper:#faf9f7;
      --paper-deep:#f0ece8;
      --card:#ffffff;
      /* ---- Ink / espresso browns ---- */
      --ink:#302828;
      --ink-soft:#746665;
      --wood:#3a2417;
      --wood-deep:#241408;
      /* ---- Brush red (signature accent) ---- */
      --brush:#a62b39;
      --brush-deep:#8d2230;
      --brush-bright:#b83645;
      /* ---- Curry gold / kraft ---- */
      --curry:#d99a2b;
      --curry-deep:#8a5f14;
      --kraft:#c8a06b;
      /* ---- Poster yellow (print campaigns) ---- */
      --yellow:#ffd23f;
      --yellow-hi:#ffdf63;
      --yellow-deep:#edb723;
      /* ---- WhatsApp green (order CTA) ---- */
      --wa:#2ebd5f;
      --wa-deep:#1b9248;
      --white:#ffffff;

      /* ---- Semantic aliases (light "kraft paper") ---- */
      --surface-page:var(--paper);
      --surface-sunken:var(--paper-deep);
      --surface-card:var(--card);
      --surface-ground:var(--wood);
      --text-strong:var(--ink);
      --text-body:var(--ink);
      --text-soft:var(--ink-soft);
      --text-inverse:var(--paper);
      --accent:var(--brush);
      --accent-deep:var(--brush-deep);
      --accent-bright:var(--brush-bright);
      --gold:var(--curry);
      --gold-text:var(--curry-deep);
      /* kırmızı METİN (fiyat, link, vurgu) — koyu temada açılır; kırmızı zemin/blob için --brush kullanılır */
      --accent-text:var(--brush-deep);
      /* odak halosu: sıcak altın (kırmızı halo "hata" gibi okunuyordu) */
      --focus-ring:rgba(217,154,43,.30);

      /* hairlines, dotted leaders, shadows */
      --line:rgba(43,29,18,.16);
      --line-soft:rgba(43,29,18,.09);
      --dots:rgba(43,29,18,.22);
      --shadow:rgba(43,29,18,.25);
      /* soft gold "accent chip" tint (variant pills, NFC) */
      --acc-bg:#f4e9e8;
      --acc-fg:#8d2230;
      --acc-bd:#e7cdd0;
      /* frosted control backdrop */
      --ctrl-bg:rgba(250,249,247,.96);
      /* paper-grain opacity knob */
      --grain:.5;

      /* ---- Typography ---- */
      --font-display:'Fraunces','Times New Roman',serif;     /* headings, prices, wordmark */
      --font-body:'Hanken Grotesk',system-ui,sans-serif;     /* body + UI */
      --font-script:'Luxurious Script',cursive;              /* "La'matia" logotype */
      --fw-regular:400; --fw-medium:500; --fw-semibold:600;
      --fw-bold:700; --fw-extra:800; --fw-black:900;
      --text-xs:11px; --text-sm:12.5px; --text-base:14px; --text-md:15px;
      --text-lg:18px; --text-xl:24px; --text-2xl:26px; --text-3xl:31px;
      --leading-tight:1.05; --leading-snug:1.25; --leading-normal:1.55;
      --tracking-kicker:.30em; --tracking-label:.18em; --tracking-tight:-.01em;

      /* ---- Spacing (8-pt-ish, tightened for mobile) ---- */
      --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
      --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
      --page-max:1040px; --page-pad:20px;
      --nav-h:108px;  /* sticky topbar (arama + kategori çubuğu) — bölüm kaydırma payı; JS ölçüp günceller */
      --chips-h:52px;  /* slim modda tepede kalan kategori şeridi (JS ölçer) */
      --srow-h:56px;  /* katlanabilir arama satırı (topbar padding + input) — slim modda bu kadar yukarı kayar */
      --kb:0px;       /* açık klavye yüksekliği (iOS visualViewport) — sheet'ler bunun üstüne oturur */

      /* ---- Radii ---- */
      --radius-sm:12px; --radius:18px; --radius-lg:24px; --radius-xl:26px; --radius-pill:999px;
      /* signature brush-blob — organic hand-torn price tag */
      --brush-blob:0.5em 1.3em 0.6em 1.5em / 1.4em 0.6em 1.6em 0.7em;

      /* ---- Shadows (warm brown, never neutral grey) ---- */
      --shadow-card:0 2px 10px -6px var(--shadow);
      --shadow-soft:0 8px 20px -8px var(--shadow);
      --shadow-pop:0 20px 44px -18px rgba(43,29,18,.6);
      --shadow-sheet:0 -20px 60px rgba(43,29,18,.45);
      --shadow-blob:0 3px 8px -3px rgba(151,26,31,.6);
      --shadow-cta:0 12px 28px -8px rgba(151,26,31,.7),inset 0 1px 0 rgba(255,255,255,.25);
      /* dotted leader rule (price dots / section rules) */
      --leader:repeating-linear-gradient(90deg,var(--dots) 0 6px,transparent 6px 12px);

      /* ---- Motion ---- */
      --ease-out:cubic-bezier(.22,.61,.36,1);
      --ease-spring:cubic-bezier(.34,1.56,.64,1);
      --ease-sheet:cubic-bezier(.32,.72,.27,1);
      --dur-fast:.15s; --dur-base:.25s; --dur-slow:.4s;
      --press:.94;
    }
    /* ---------- dark theme (warm espresso) ---------- */
    :root[data-theme="dark"]{
      --paper:#171009; --paper-deep:#211710; --card:#241a10;
      --ink:#f3ead9; --ink-soft:#b6a48d;
      --line:rgba(244,236,221,.14); --line-soft:rgba(244,236,221,.08); --dots:rgba(244,236,221,.2);
      --shadow:rgba(0,0,0,.5); --acc-bg:rgba(217,154,43,.18); --acc-fg:#e7b24d; --acc-bd:rgba(217,154,43,.45);
      --gold-text:#e7b24d; --ctrl-bg:rgba(36,26,16,.86); --grain:.22;
      --accent-text:#ec6b70; --focus-ring:rgba(231,178,77,.32);
    }
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    /* manipulation: hızlı ➕ tıklamalarında çift-tık zoom'unu engeller */
    button,a,input,[role="button"]{touch-action:manipulation}
    /* klavye/anahtar erişimi: marka renginde tutarlı odak halkası (fareyle tıklamada görünmez) */
    :focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;border-radius:6px}
    [data-theme="dark"] :focus-visible{outline-color:var(--curry)}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
    }
    body{
      margin:0;
      font-family:var(--font-body);
      background:var(--surface-page);
      color:var(--text-body);
      -webkit-font-smoothing:antialiased;
      min-height:100dvh;
    }
    /* iOS Safari body overflow:hidden'ı yok sayar → fixed + JS scroll restore */
    body.lock{position:fixed;left:0;right:0;overflow:hidden;width:100%}
    .wrap{position:relative;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad) calc(110px + env(safe-area-inset-bottom))}
    .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none}
    .progress i{display:block;height:100%;width:0;background:var(--brush)}
    .masthead{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:16px}
    .wordmark{color:var(--accent-text);text-decoration:none;display:grid;gap:5px}
    .wordmark strong{font:400 41px/.9 var(--font-script)}
    .wordmark small{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--ink-soft)}
    .menu-intro{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0}
    .menu-intro h1{font:600 24px/1.2 var(--font-display);letter-spacing:-.03em;margin:0}
    .menu-intro span{font-size:12px;color:var(--ink-soft)}

    /* ---------- sticky top bar: search + chips ---------- */
    .topbar{
      position:sticky;top:0;z-index:30;
      margin:0 calc(-1 * var(--page-pad));padding:8px var(--page-pad) 4px;
      background:linear-gradient(180deg,var(--surface-page) 0%,var(--surface-page) calc(100% - 12px),transparent 100%);
      transition:top .28s var(--ease-out);
    }
    /* slim: aşağı kaydırırken arama satırı üst kenarın ardına kayar, kategori şeridi tepede kalır.
       Layout yüksekliği değişmez (top negatif) → içerik zıplamaz. */
    body.slim{--nav-h:var(--chips-h)}
    body.slim .topbar{top:calc(-1 * var(--srow-h))}
    body.slim .srow{opacity:0;pointer-events:none}
    .srow{transition:opacity .2s var(--ease-out)}
    /* ---------- search ---------- */
    .search{position:relative}
    .search input{
      width:100%;padding:13px 42px 13px 42px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
      /* 16px: iOS, <16px input'a odaklanınca sayfayı zoom'lar */
      background:var(--card);font:500 16px var(--font-body);color:var(--ink);outline:none;
      transition:border-color .15s,box-shadow .15s;
    }
    .search input:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--focus-ring)}
    .search input::placeholder{color:var(--ink-soft);opacity:.7}
    .search input::-webkit-search-cancel-button{display:none}
    .search .mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none}
    .search .clear{
      position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;
      width:34px;height:34px;border:none;border-radius:50%;background:var(--paper-deep);
      color:var(--ink-soft);font:700 15px/1 var(--font-body);cursor:pointer;
    }
    .search.has .clear{display:grid;place-items:center}
    .hits{min-height:22px;padding:4px 6px 0;font-size:12px;font-weight:600;color:var(--ink-soft)}
    .hits:empty{display:none}
    .hits b{color:var(--accent-text)}
    mark{background:rgba(217,154,43,.35);color:inherit;border-radius:3px;padding:0 1px}

    /* ---------- kategori şeridi: sayfa kaydıkça tepede kalır, aktif bölümü izler ---------- */
    .chips{
      display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
      margin:0 calc(-1 * var(--page-pad));padding:8px var(--page-pad) 6px;
      scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline:var(--page-pad);
    }
    .chips::-webkit-scrollbar{display:none}
    .chip{
      flex:none;min-height:38px;padding:9px 15px;border:1.5px solid var(--line);border-radius:var(--radius-pill);
      background:var(--card);color:var(--ink-soft);font:600 13px var(--font-body);white-space:nowrap;cursor:pointer;
      transition:background .18s,color .18s,border-color .18s,transform .12s;
    }
    .chip:active{transform:scale(.95)}
    .chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

    /* A single vertical category index avoids duplicate navigation. */
    .tiles{display:grid;gap:0;margin:10px 0 0}
    .tile{display:flex;align-items:center;gap:15px;width:100%;padding:12px 0;min-height:86px;border:0;border-bottom:1px solid var(--line-soft);background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
    .tile img,.tile-bg{width:62px;height:62px;object-fit:cover;border-radius:16px;flex:none;background:var(--paper-deep)}
    .tile-bg{display:grid;place-items:center;font-size:26px}
    .tile-body{flex:1;min-width:0}
    .tile-name{display:block;font-size:16px;font-weight:600;line-height:1.3}
    .tile-count{display:block;font-size:12px;color:var(--ink-soft);margin-top:5px}
    .tile-arrow{width:19px;height:19px;flex:none;color:var(--ink-soft);margin-inline-end:5px}
    [dir="rtl"] .tile-arrow{transform:scaleX(-1)}
    .tile:active{background:var(--paper-deep)}
    @media(hover:hover){.tile:hover .tile-name{color:var(--accent-text)}}
    section.cat{scroll-margin-top:calc(var(--nav-h) + 4px);content-visibility:auto}
    .cat-title{display:flex;align-items:center;gap:12px;margin:30px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line)}
    .cat-title h3{font:600 23px/1.25 var(--font-display);letter-spacing:-.035em;margin:0}
    .cat-title .rule{flex:1}
    .cat-title .cnt{display:grid;place-items:center;min-width:28px;height:28px;border-radius:8px;background:var(--paper-deep);font-size:12px;color:var(--ink-soft)}
    .items{display:grid;gap:0;margin-top:0}
    .item{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr) 44px;gap:13px;align-items:center;min-height:122px;padding:18px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
    .item-details{grid-column:1/3;display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:13px;width:100%;min-height:86px;text-align:start;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
    .item img,.item .ph{width:86px;height:86px;border-radius:16px;object-fit:cover;background:var(--paper-deep)}
    .item .ph{display:grid;place-items:center;font-size:30px}
    .item-body{min-width:0}
    .item-name{font-weight:700;font-size:15px;line-height:1.3;letter-spacing:-.02em}
    .item-desc{font-size:12px;color:var(--ink-soft);line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .item-price{display:block;font-size:15px;line-height:1.3;font-weight:700;color:var(--accent-text);margin-top:8px;direction:ltr;unicode-bidi:isolate;text-align:start;font-variant-numeric:tabular-nums}
    .variants{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px}
    .variants span{font-size:11px;color:var(--ink-soft);direction:ltr;unicode-bidi:isolate}
    .variants span b{font-weight:700;color:var(--accent-text);white-space:nowrap}
    .empty{text-align:center;padding:45px 20px;color:var(--ink-soft);font-size:14px;line-height:1.5}
    .empty b{display:block;font:600 23px var(--font-display);color:var(--ink);margin-bottom:8px}
    .sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:18px}
    .sugg span{width:100%;font-size:13px;font-weight:600}
    .schip{border:1px solid var(--acc-bd);background:var(--acc-bg);color:var(--acc-fg);font:600 13px var(--font-body);min-height:44px;padding:8px 14px;border-radius:999px;cursor:pointer}
    @media(hover:hover){.item-details:hover .item-name{color:var(--accent-text)}.tile:hover img{filter:brightness(.94)}.langmenu button:hover{background:var(--paper-deep)}}

    /* ---------- ruh haline göre öneri ---------- */
    /* giriş noktası: listenin başında tam genişlik, etiketli kart — ikon değil, ne yaptığı okunur */
    .mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
    .mchip{
      display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 8px;
      border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;
      font:700 12.5px var(--font-body);cursor:pointer;text-align:center;line-height:1.2;
      transition:transform .12s,border-color .18s,background .18s,color .18s;
    }
    .mchip .me{font-size:27px;line-height:1}
    .mchip:active{transform:scale(.94)}
    .mood-result .sheet-cat{margin-top:14px}
    .mchip.on{border-color:var(--curry);background:var(--acc-bg);color:var(--acc-fg)}
    .mood-img{position:relative;margin-top:2px;border-radius:16px;overflow:hidden;background:var(--paper-deep)}
    .mood-img img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover}
    .mood-img .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:2.6;font-size:46px}
    .mood-result{margin-top:20px;border-top:1.5px dashed var(--line);padding-top:18px;animation:moodIn .35s var(--ease-out) both}
    @keyframes moodIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
    .mood-actions{display:flex;gap:10px;margin-top:16px;align-items:stretch}
    .mood-actions .sheet-add{margin-top:0;flex:1}
    .mood-again{
      flex:none;display:flex;align-items:center;gap:6px;padding:13px 16px;border-radius:14px;cursor:pointer;
      border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:800 14px var(--font-body);
      transition:transform .12s;
    }
    .mood-again:active{transform:scale(.95)}

    /* ---------- product sheet ---------- */
    .sheet-back{
      position:fixed;inset:0;z-index:50;background:rgba(43,29,18,.5);
      -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
      opacity:0;pointer-events:none;transition:opacity .25s ease;
    }
    .sheet-back.show{opacity:1;pointer-events:auto}
    .sheet{
      position:fixed;left:0;right:0;bottom:var(--kb);z-index:51;margin:0 auto;max-width:560px;
      background:var(--card);border-radius:26px 26px 0 0;overflow:hidden;
      transform:translateY(105%);transition:transform .32s var(--ease-sheet);
      box-shadow:var(--shadow-sheet);
      padding-bottom:env(safe-area-inset-bottom);
      touch-action:pan-y;
      max-height:calc(100dvh - var(--kb) - 28px);display:flex;flex-direction:column;
    }
    .sheet-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .sheet.show{transform:none}
    .grip{display:flex;justify-content:center;padding:10px 0 4px}
    .grip i{width:44px;height:5px;border-radius:99px;background:var(--dots)}
    .sheet .x,.order .x{
      position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border:none;border-radius:50%;
      display:grid;place-items:center;
      background:rgba(43,29,18,.55);color:var(--paper);font:700 16px/1 var(--font-body);cursor:pointer;
    }
    .order .x{background:var(--paper-deep);color:var(--ink)}
    /* görsel: 4:3, en fazla ekranın ~üçte biri → ad/fiyat/ekle butonu her telefonda ilk bakışta görünür.
       height:auto şart: <img height=…> ipucu CSS'i ezmesin. */
    .sheet-img{position:relative;margin:6px 16px 0;border-radius:18px;overflow:hidden;background:var(--paper-deep)}
    .sheet-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:34dvh;object-fit:cover}
    .sheet-img .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:2;max-height:26dvh;font-size:60px}
    .sheet-body{padding:14px 20px 18px}
    .sheet-cat{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--curry)}
    .sheet-name{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.1;margin:6px 0 0}
    .sheet-desc{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:10px 0 0}
    .sheet-price{
      display:inline-block;font-family:var(--font-display);font-weight:700;font-size:22px;color:#fff;
      background:var(--brush);padding:6px 18px;border-radius:var(--brush-blob);transform:rotate(-1.5deg);
      box-shadow:0 6px 14px -6px rgba(151,26,31,.7);margin-top:14px;
    }
    /* varyantlar: seçilebilir satırlar (radio) — seçim alt çubuktaki fiyata yansır */
    .sheet-vars{margin-top:14px;display:flex;flex-direction:column;gap:8px}
    .sheet-vars .vrow{
      display:flex;align-items:center;gap:10px;width:100%;text-align:start;font:600 14.5px var(--font-body);color:var(--ink);
      border:1.5px dashed var(--line);border-radius:12px;padding:11px 14px;background:var(--paper);cursor:pointer;
      transition:border-color .15s,background .15s,transform .12s;
    }
    .sheet-vars .vrow:active{transform:scale(.985)}
    .sheet-vars .vrow.on{border-style:solid;border-color:var(--brush);background:var(--acc-bg)}
    .sheet-vars .vrow .rad{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:border-color .15s}
    .sheet-vars .vrow.on .rad{border-color:var(--brush)}
    .sheet-vars .vrow.on .rad::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brush)}
    .sheet-vars .vrow .dots{flex:1;border-bottom:2px dotted var(--dots);transform:translateY(3px)}
    .sheet-vars .vrow b{font-family:var(--font-display);font-size:15.5px;color:var(--accent-text)}
    /* sabit alt çubuk: adet + Siparişe Ekle (kaydırınca kaybolmaz) */
    .sheet-bar{
      flex:none;display:flex;align-items:center;gap:10px;padding:10px 16px;
      border-top:1px solid var(--line-soft);background:var(--card);
    }
    .sheet-bar[hidden]{display:none}
    .qty{display:flex;align-items:center;gap:2px;flex:none;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);padding:3px}
    .qty button{
      position:relative;width:36px;height:36px;border:none;border-radius:50%;background:transparent;color:var(--ink);
      font:800 19px/1 var(--font-body);cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .12s;
    }
    /* görünmez geniş dokunma alanı (44px hedefi) — .add/.cstep deseni */
    .qty button::before,.order .call::before,.sheet .x::before,.order .x::before,.search .clear::before{content:"";position:absolute;inset:-6px;border-radius:inherit}
    .qty button:active{background:var(--paper-deep);transform:scale(.9)}
    .qty button[disabled]{opacity:.35;pointer-events:none}
    .qty b{min-width:22px;text-align:center;font:800 15px var(--font-body)}
    .sheet-bar .sheet-add{margin-top:0;flex:1;min-width:0;padding:13px 12px}
    .sheet-add .sp{font-family:var(--font-display);font-weight:700;opacity:.92;white-space:nowrap}
    .sheet-add .sp:not(:empty)::before{content:"·";margin:0 6px 0 2px;opacity:.6}

    /* Persistent bottom navigation keeps the order reachable with one hand. */
    .bottom-nav{position:fixed;z-index:35;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;margin:auto;max-width:var(--page-max);padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ctrl-bg);border-top:1px solid var(--line-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
    .dock-action{flex:0 0 56px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:0;color:var(--ink-soft);font:600 11px var(--font-body);cursor:pointer;border-radius:12px}
    .dock-action svg{width:20px;height:20px}
    .dock-action:active{background:var(--paper-deep)}
    .dock-action.mood{color:var(--acc-fg)}
    .dock-action.mood svg{width:21px;height:21px}
    .ofab{position:relative;display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:52px;padding:10px 15px;border:0;border-radius:14px;background:var(--brush);color:#fff;cursor:pointer;font:700 14px var(--font-body)}
    .ofab .face{display:grid;place-items:center;flex:none;order:-1}
    .ofab .face svg{width:21px;height:21px}
    .ofab .olabel{display:flex;flex:1;min-width:0;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
    .ofab .osum{font-size:13px;font-weight:600;direction:ltr;unicode-bidi:isolate;white-space:nowrap;display:none}
    .ofab.has .osum{display:block}
    .ocnt{display:none;position:absolute;top:4px;inset-inline-start:27px;min-width:17px;height:17px;padding:0 4px;border-radius:50%;background:#fff;color:var(--brush);font:700 10px/17px var(--font-body);text-align:center}
    .ofab.has .ocnt{display:block}
    .ofab:active{background:var(--brush-deep)}
    body.lock .bottom-nav{visibility:hidden}
    .item-side{display:flex;justify-content:flex-end;align-items:center;align-self:center}
    .add{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;position:relative;background:var(--acc-bg);color:var(--accent-text);border:1px solid var(--acc-bd);cursor:pointer}
    .add svg{width:21px;height:21px;display:block}
    .add[data-q]{background:var(--brush);color:#fff;border-color:var(--brush)}
    .add[data-q]::after{content:attr(data-q);position:absolute;top:-6px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:20px;background:var(--ink);color:var(--paper);font:700 10px/18px var(--font-body)}
    .add:active{transform:scale(.94)}
    .sheet-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin-top:14px;padding:14px 16px;border:0;border-radius:14px;cursor:pointer;background:var(--brush);color:#fff;font:700 14px var(--font-body)}
    .sheet-add:active{background:var(--brush-deep)}
    .fly{position:fixed;z-index:70;width:12px;height:12px;background:var(--brush);border:2px solid #fff;border-radius:50%;pointer-events:none;will-change:transform}

    /* ---------- overlay içi sepet ---------- */
    .cart{
      margin-top:12px;background:var(--paper);border-radius:18px;padding:14px 15px;
      border:1px solid var(--line-soft);
    }
    .cart[hidden]{display:none}
    .cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .cart-head b{font-family:var(--font-display);font-size:16px;color:var(--ink)}
    .cart-head button{
      border:none;background:none;cursor:pointer;color:var(--ink-soft);
      font:700 12.5px var(--font-body);text-decoration:underline;padding:10px 6px;margin:-10px -6px;
    }
    .cart-rows{display:flex;flex-direction:column;gap:10px}
    .crow{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink)}
    .crow .cn{flex:1;min-width:0;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    .crow .cn i{font-style:normal;color:var(--ink-soft);font-size:11.5px}
    .crow .cq{display:flex;align-items:center;gap:6px;flex:none}
    .crow .cq b{min-width:16px;text-align:center;font-size:14px}
    .cstep{
      position:relative;
      width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;flex:none;
      display:grid;place-items:center;
      background:var(--paper-deep);color:var(--ink);font:800 15px/1 var(--font-body);
      transition:transform .12s;
    }
    .cstep::before{content:"";position:absolute;inset:-8px;border-radius:50%}
    .cstep:active{transform:scale(.8)}
    .crow .cp{flex:none;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--accent-text);min-width:58px;text-align:right}
    [dir="rtl"] .crow .cp{text-align:left}
    /* fiyatlar RTL'de de "300 ₺" okunur */
    .crow .cp,.order-foot .tot b,.sheet-add .sp,.sheet-vars .vrow b,.sheet-price{direction:ltr;unicode-bidi:isolate}

    /* ---------- sipariş sheet'i: Betül Şef avatarı + tam genişlik sepet + sabit alt CTA ---------- */
    .order-back{
      position:fixed;inset:0;z-index:60;background:rgba(20,11,5,.58);
      -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
      opacity:0;pointer-events:none;transition:opacity .3s ease;
    }
    .order-back.show{opacity:1;pointer-events:auto}
    .order{
      position:fixed;left:0;right:0;bottom:var(--kb);z-index:61;margin:0 auto;max-width:560px;
      background:var(--card);border-radius:26px 26px 0 0;
      transform:translateY(105%);transition:transform .32s var(--ease-sheet);
      box-shadow:var(--shadow-sheet);
      padding-bottom:env(safe-area-inset-bottom);
      touch-action:pan-y;
      max-height:calc(100dvh - var(--kb) - 24px);display:flex;flex-direction:column;
    }
    .order.show{transform:none}
    .order-head{display:flex;align-items:flex-end;gap:12px;padding:2px 60px 0 16px}
    .order .avatar{
      width:58px;height:58px;border-radius:50%;flex:none;
      border:2.5px solid var(--curry);
      background:#e9ddc6 url("assets/betul.png") no-repeat;
      background-size:300% auto;background-position:50% 5%;
      box-shadow:0 6px 14px -6px rgba(0,0,0,.45);
      animation:facetilt 4.2s ease-in-out infinite;
    }
    .order .talk{flex:1;min-width:0}
    .order .talk>*{
      opacity:0;transform:translateY(10px) scale(.94);
      transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
    }
    .order.show .talk>*{opacity:1;transform:none}
    .order.show .who{transition-delay:.18s}
    .order.show .bubble{transition-delay:.28s}
    .order .who{
      display:inline-block;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
      color:#2b1d12;background:var(--curry);padding:5px 11px;border-radius:999px;
    }
    .order .bubble{
      margin-top:6px;position:relative;background:var(--paper);color:var(--ink);
      border:1px solid var(--line-soft);
      border-radius:4px 18px 18px 18px;padding:11px 14px;transform-origin:0 100%;
      font-family:var(--font-display);font-size:16.5px;line-height:1.35;font-weight:600;
    }
    .order .bubble em{font-style:italic;color:var(--accent-text)}
    .order-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 14px}
    /* masa no alanı (sepet kartının içinde) */
    .order .otable{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:2px dotted var(--dots)}
    .otable-l{
      font:800 10.5px var(--font-body);letter-spacing:.16em;text-transform:uppercase;
      color:var(--ink-soft);white-space:nowrap;
    }
    .otable-i{
      flex:1;min-width:0;text-align:center;
      font:800 16px var(--font-body);color:var(--ink);
      background:var(--paper-deep);border:1.5px solid transparent;border-radius:11px;padding:10px 12px;
      transition:border-color .15s,box-shadow .15s,background .15s;
    }
    .otable-i:focus{outline:none;background:var(--card);border-color:var(--ink);box-shadow:0 0 0 4px var(--focus-ring)}
    /* serbest mesaj / sipariş notu */
    .order .omsg{margin-top:10px}
    .omsg-i{
      width:100%;display:block;resize:none;
      font:600 14px var(--font-body);color:var(--ink);line-height:1.4;
      background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;
      transition:border-color .15s,box-shadow .15s;
    }
    .omsg-i::placeholder{color:var(--ink-soft)}
    .omsg-i:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--focus-ring)}
    /* sabit alt: toplam + birincil Gönder + ikincil Ara */
    .order-foot{
      flex:none;padding:10px 16px 6px;border-top:1px solid var(--line-soft);background:var(--card);
      display:flex;flex-direction:column;gap:8px;
    }
    .order-foot .tot{display:flex;align-items:baseline;justify-content:space-between;font:700 13px var(--font-body);color:var(--ink-soft);padding:0 2px}
    .order-foot .tot[hidden]{display:none}
    .order-foot .tot b{font-family:var(--font-display);font-size:21px;color:var(--accent-text)}
    .order .act{
      display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 16px;border-radius:14px;
      text-decoration:none;font:800 15.5px var(--font-body);color:#fff;border:none;cursor:pointer;width:100%;
      box-shadow:0 10px 22px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22);
      transition:transform .12s;
    }
    .order .act:active{transform:scale(.96)}
    .order .act[disabled]{opacity:.6;pointer-events:none}
    .order .act.wa{background:linear-gradient(180deg,var(--wa),var(--wa-deep))}
    .order .act svg{flex:none;width:18px;height:18px;display:block}
    .order .call{
      position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:center;
      padding:9px 14px;border-radius:999px;text-decoration:none;line-height:1.3;
      font:700 13px var(--font-body);color:var(--ink-soft);
    }
    .order .call svg{width:14px;height:14px}
    .order .call:active{background:var(--paper-deep)}

    /* ---------- dar ekranlar (iPhone SE, küçük Android) ---------- */
    @media (max-width:380px){
      .item{gap:10px;padding:9px}
      .item img,.item .ph{width:66px;height:66px}
      .item .ph{font-size:26px}
      .sheet-name{font-size:23px}
      .order .bubble{font-size:15px;padding:10px 12px}
      .order .act{font-size:14.5px;padding:13px 13px}
    }

    /* ---------- üst kontroller: tema + dil ---------- */
    .controls{
      position:relative;z-index:45;
      display:flex;gap:6px;align-items:center;
    }
    .ctrl{
      position:relative;display:flex;align-items:center;gap:6px;border:none;cursor:pointer;min-height:44px;
      background:var(--paper-deep);color:var(--ink);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
      padding:0 12px;border-radius:999px;font:700 12px var(--font-body);
      letter-spacing:.02em;
      transition:transform .12s,background .18s;
    }
    .ctrl::before{content:"";position:absolute;inset:0;border-radius:inherit} /* 44px dokunma hedefi */
    .ctrl:active{transform:scale(.93)}
    .ctrl svg{width:16px;height:16px;display:block;flex:none}
    .ctrl-ic{width:44px;padding:0;display:grid;place-items:center}
    /* tema: ay↔güneş yumuşak geçiş */
    .ticon{position:relative;width:16px;height:16px;display:block}
    .ticon svg{position:absolute;inset:0;transition:opacity .25s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
    .ticon .sun{opacity:0;transform:rotate(-80deg) scale(.5)}
    .ticon .moon{opacity:1;transform:none}
    :root[data-theme="dark"] .ticon .sun{opacity:1;transform:none}
    :root[data-theme="dark"] .ticon .moon{opacity:0;transform:rotate(80deg) scale(.5)}
    .langwrap{position:relative}
    #langCur{text-transform:uppercase}
    .langmenu{
      position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:158px;z-index:46;
      background:var(--card);border:1px solid var(--line);border-radius:14px;
      box-shadow:0 16px 40px -12px rgba(0,0,0,.5);padding:5px;
      display:none;flex-direction:column;gap:2px;
    }
    .langmenu.open{display:flex}
    .langmenu button{
      display:flex;align-items:center;gap:10px;width:100%;text-align:left;
      border:none;background:none;cursor:pointer;color:var(--ink);
      font:600 14px var(--font-body);padding:9px 11px;border-radius:9px;
    }
    .langmenu button.on{background:var(--acc-bg);color:var(--acc-fg)}
    .langmenu button .flag{font-size:16px;line-height:1;width:20px;display:inline-grid;place-items:center;flex:none}
    .langmenu button .flag svg{width:17px;height:17px;display:block}

    /* ---------- toast ---------- */
    /* üstte: alttaki Sipariş FAB'ı ve açık sheet CTA'larını örtmez */
    .toast{
      position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));
      transform:translateX(-50%) translateY(-16px);z-index:80;
      background:var(--ink);color:var(--paper);font:600 13px var(--font-body);
      padding:11px 18px;border-radius:999px;max-width:82vw;text-align:center;
      box-shadow:0 12px 32px -8px rgba(0,0,0,.55);
      opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
    }
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

    /* ---------- menüyü paylaş: bottom sheet ---------- */
    .share-body{padding:4px 20px 24px}
    .qr-wrap{margin-top:14px;text-align:center}
    /* QR daima koyu-üstüne-açık kalmalı (ters kontrast okutmaz) → tema değişkeni yok */
    .qr-ticket{
      display:inline-block;background:#f4ecdd;border:2px dashed var(--kraft);border-radius:20px;
      padding:15px 15px 9px;transform:rotate(-1.4deg);
      box-shadow:0 16px 34px -16px var(--shadow);
    }
    .qr-ticket svg{display:block;width:min(188px,50vw);height:auto;margin:0 auto}
    .qr-turl{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.05em;color:#6b5743}
    .qr-scan{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
    .share-or{
      display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--ink-soft);
      font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    }
    .share-or::before,.share-or::after{content:"";flex:1;border-top:2px dotted var(--dots)}
    .share-acts{display:flex;flex-direction:column;gap:9px}
    .share-act{
      display:flex;align-items:center;gap:13px;width:100%;text-align:left;text-decoration:none;
      border:1.5px solid var(--line);border-radius:15px;background:var(--paper);
      padding:11px 13px;cursor:pointer;font:inherit;color:var(--ink);
      transition:transform .12s,border-color .18s,background .18s;
    }
    .share-act:active{transform:scale(.98)}
    .share-act .sic{
      width:40px;height:40px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;
      background:var(--acc-bg);color:var(--acc-fg);border:1px solid var(--acc-bd);
    }
    .share-act .grow{flex:1;min-width:0}
    .share-act b{display:block;font-size:14.5px;line-height:1.2}
    .share-act small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-soft);margin-top:2px}
    .share-act .chev{flex:none;font-size:19px;line-height:1;color:var(--ink-soft);opacity:.55}
    .share-act.ok{border-color:var(--acc-bd);background:var(--acc-bg)}
    .share-act.ok b{color:var(--acc-fg)}
    .share-act.wait .sic{animation:nfcpulse 1.1s ease-in-out infinite}
    @keyframes nfcpulse{50%{box-shadow:0 0 0 9px var(--acc-bg)}}

    /* ---------- anonim geri bildirim sheet ---------- */
    .fb-body{padding:2px 4px 18px}
    .fb-sub{margin:7px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
    .fb-emojis{display:flex;gap:6px;margin:18px 0 2px}
    .fb-emoji{
      flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
      padding:11px 3px;border:1.5px solid var(--line);border-radius:15px;background:var(--paper);cursor:pointer;
      transition:transform .12s,border-color .15s,background .15s,box-shadow .15s;
    }
    .fb-emoji span{font-size:26px;line-height:1;filter:grayscale(.55);opacity:.7;transition:filter .15s,opacity .15s,transform .15s}
    .fb-emoji small{font-size:11px;font-weight:700;color:var(--ink-soft);text-align:center;line-height:1.1}
    .fb-emoji:active{transform:scale(.92)}
    .fb-emoji.on{border-color:var(--brush);background:var(--acc-bg);box-shadow:0 8px 18px -10px rgba(191,32,38,.5)}
    .fb-emoji.on span{filter:none;opacity:1;transform:scale(1.14)}
    .fb-emoji.on small{color:var(--accent-text)}
    .fb-comment{
      width:100%;display:block;resize:none;margin-top:15px;
      font:600 14px var(--font-body);color:var(--ink);line-height:1.4;
      background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:12px 13px;
      transition:border-color .15s,box-shadow .15s;
    }
    .fb-comment::placeholder{color:var(--ink-soft)}
    .fb-comment:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--focus-ring)}
    .fb-send{
      width:100%;margin-top:15px;padding:14px 16px;border:none;border-radius:14px;cursor:pointer;
      font:800 15px var(--font-body);color:#fff;
      background:linear-gradient(180deg,var(--brush-bright),var(--brush-deep));
      box-shadow:0 10px 22px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22);
      transition:transform .12s,opacity .15s;
    }
    .fb-send:active{transform:scale(.97)}
    .fb-send[disabled]{opacity:.6;pointer-events:none}

    /* ---------- RTL (Arabic) ---------- */
    [dir="rtl"] .langmenu button{text-align:right}
    [dir="rtl"] .search .mag{left:auto;right:14px}
    [dir="rtl"] .search .clear{right:auto;left:8px}
    [dir="rtl"] .sheet .x{right:auto;left:14px}
    [dir="rtl"] .share-act{text-align:right}
    [dir="rtl"] .share-act .chev{transform:scaleX(-1)}
    [dir="rtl"] .order .x{right:auto;left:14px}
    [dir="rtl"] .order-head{padding:2px 16px 0 60px}
    [dir="rtl"] .order .bubble{border-radius:18px 4px 18px 18px;transform-origin:100% 100%}
    [dir="rtl"] .cats{
      padding:10px 0 2px var(--page-pad);
      -webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 18px),transparent);
              mask-image:linear-gradient(270deg,#000 calc(100% - 18px),transparent);
    }
    /* Arabic: drop latin-style uppercasing / wide tracking */
    html[lang="ar"] .brand-sub,html[lang="ar"] .sheet-cat,
    html[lang="ar"] .cat-title .cnt,html[lang="ar"] .ctrl,html[lang="ar"] .otable-l,
    html[lang="ar"] .share-or{
      text-transform:none;letter-spacing:normal}

    footer{margin-top:44px;padding:24px 6px 8px;border-top:2px dotted var(--dots);font-size:13px;color:var(--ink-soft);line-height:1.8;text-align:center}
    footer a{color:var(--accent-text);font-weight:600;text-decoration:none}
    footer .fbrand{font-family:var(--font-script);font-weight:400;font-size:28px;color:var(--ink)}
    /* alt bilgi aksiyonları: yol tarifi · menüyü paylaş · görüş bildir (aynı pill dili) */
    .foot-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
    .dir{
      display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;
      border:1.5px dashed var(--kraft);border-radius:999px;background:transparent;
      color:var(--accent-text);font:700 13px var(--font-body);line-height:1.2;cursor:pointer;text-decoration:none;
      transition:transform .12s;
    }
    .dir:active{transform:scale(.95)}
    .dir svg{flex:none;width:15px;height:15px}

    /* ---------- başa dön ---------- */
    .totop{
      position:fixed;inset-inline-start:14px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:19;
      width:42px;height:42px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
      background:var(--ctrl-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
      color:var(--ink);display:grid;place-items:center;
      box-shadow:0 8px 20px -8px var(--shadow);
      opacity:0;pointer-events:none;transform:translateY(8px) scale(.9);
      transition:opacity .2s,transform .25s var(--ease-out);
    }
    .totop.show{opacity:1;pointer-events:auto;transform:none}
    .totop svg{width:17px;height:17px}
    body.lock .totop{opacity:0;pointer-events:none}

    /* Responsive refinements and accessible interaction surfaces. */
    .search input{border-width:1px;background:var(--paper-deep);border-color:transparent;border-radius:14px}
    .search input::placeholder{opacity:1}
    .search .clear{width:40px;height:40px}
    .search .clear::before{inset:0}
    .sheet:not(.show),.order:not(.show){visibility:hidden}
    .sheet.show,.order.show{visibility:visible}
    .sheet .x,.order .x{width:44px;height:44px}
    .qty button{width:44px;height:44px}
    .qty button::before,.sheet .x::before,.order .x::before{inset:0}
    .cstep{width:44px;height:44px}
    .cstep::before{inset:0}
    .crow{flex-wrap:wrap;gap:8px}
    .crow .cn{flex-basis:calc(100% - 175px);min-width:80px}
    .sheet-cat{font-size:12px;letter-spacing:0;text-transform:none;color:var(--accent-text)}
    .sheet-price{background:none;padding:0;color:var(--accent-text);box-shadow:none;transform:none;border-radius:0}
    .sheet-name{padding-inline-end:20px;line-height:1.2}
    .sheet-add .sp{font-family:var(--font-body);font-size:13px}
    .fb-comment,.omsg-i,.otable-i{font-size:16px}
    .toast{bottom:calc(90px + env(safe-area-inset-bottom))}
    .langmenu button{min-height:44px}
    .skip-link{position:fixed;top:-70px;left:16px;z-index:100;padding:12px 20px;background:var(--ink);color:var(--paper);border-radius:10px}
    .skip-link:focus{top:10px}
    #list{scroll-margin-top:72px}
    [dir="rtl"] .item-price{text-align:right}
    @media(min-width:700px){
      :root{--page-pad:32px}
      .masthead{min-height:100px}
      .wordmark strong{font-size:48px}
      .items{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
      .tile{min-height:92px}
      .tile img,.tile-bg{width:68px;height:68px}
      .bottom-nav{max-width:560px;bottom:16px;border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 30px #30282812}
      .menu-intro{margin-top:30px}
    }
    @media(max-width:420px){
      .bottom-nav{gap:6px;padding-inline:12px}
      .dock-action{flex-basis:50px}
      .ofab{padding-inline:12px}
    }
    @media(max-width:359px){
      :root{--page-pad:16px}
      .item{grid-template-columns:70px minmax(0,1fr) 44px;gap:10px}
      .item-details{grid-template-columns:70px minmax(0,1fr);gap:10px}
      .item img,.item .ph{width:70px;height:78px}
      .bottom-nav{padding-inline:10px;gap:4px}
      .dock-action{flex-basis:48px}
      .ofab{padding-inline:12px;font-size:13px}
      .sheet-bar{gap:7px;padding-inline:10px}
      .sheet-bar .sheet-add{flex-wrap:wrap;padding:10px 6px;gap:3px;font-size:12px}
      .mood-actions{flex-wrap:wrap}
    }