/* Prevent layout shift when popups lock body scroll (desktop/tablet) */
html { scrollbar-gutter: stable both-edges; }
/* Sitewide typography: Inter base — 16px / 1.5 / 400. */
body {
    overflow-y: scroll;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}
/* Moved from MenuX.html inline <style> */
:root { --toolbar-height: 64px; --primary-color: #e21e21; --secondary-color: #e21e21; --mobile-bar-height: 50px; --primary-font: 'Inter', Arial, sans-serif; }

.toolbar { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: var(--toolbar-height); background: var(--primary-color); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 0 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.06); color: #fff; }
.toolbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0)); }
.toolbar-left, .toolbar-right, .toolbar-center { display: flex; align-items: center; justify-content: center; }
.toolbar-center img { height: 48px; display: block; }
.toolbar .icon-btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; color: #fff; border: none; line-height: 0; }
.toolbar .icon-btn:hover { background: rgba(255,255,255,0.16); }
.toolbar .icon-btn:focus, .toolbar .icon-btn:active { outline: none; box-shadow: none; }
.toolbar .icon-btn svg { width: 32px; height: 32px; }

.top { position: relative; width: 100%; height: 240px; background-image: url('../img/pizza.jpg'); background-size: cover; background-position: center; overflow: hidden; padding: 0px; }
.top::after { content: ""; position: absolute; inset: 0; }
/* Logo + pill, .top'un TÜM yüksekliğini kaplar ve dikeyde EŞİT dağılır.
   space-evenly üç eşit boşluk üretir: (mavi bar↓ ile logo arası),
   (logo ile butonlar arası), (butonlar ile menü barı arası). .top, mavi
   toolbar'ın hemen altında başlayıp menü barında bittiği için bu üç boşluk
   tam da istenen üç boşluğa denk gelir — desktop ve mobilde aynı. */
.top-bottom { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; row-gap: 0; z-index: 3; }
.restaurant-logo { position: relative; width: 160px; height: 80px; border-radius: 14px; background: #ffffff; border: 1px solid #e5e7eb; box-shadow: var(--shadow-md); display: grid; place-items: center; font-weight: 700; font-size: 14px; overflow: hidden; opacity: 1; }
.restaurant-logo img { max-width: 98%; max-height: 98%; display: block; object-fit: contain; }
#deliveryToggleTop { position: relative; z-index: 2; }
#deliveryToggleTop .delivery-toggle { margin: 0; }
@media (min-width: 1000px) { .top-bottom { bottom: 0; } }

/* Grow restaurant logo on desktop only */
@media (min-width: 1000px) {
  .restaurant-logo { width: 200px; height: 100px; }
}

/* Sağ sabit basket paneli */
#basket { position: fixed; top: var(--toolbar-height); right: 0; width: 360px; height: calc(100vh - var(--toolbar-height)); background: #fff; border-left: 1px solid #eee; box-shadow: -4px 0 12px rgba(0,0,0,0.06); display: none; z-index: 200; overflow-y: hidden; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #c7c7c7 transparent; }
#basket::-webkit-scrollbar { width: 3px; }
#basket::-webkit-scrollbar-thumb { background-color: #c7c7c7; border-radius: 999px; }
#basket::-webkit-scrollbar-track { background: transparent; }
@media (min-width: 1000px) { #basket { display: flex; flex-direction: column; } body { padding-right: 360px; } .to-top-btn { right: calc(16px + 360px); } .top { width: 100%; height: 240px; } }

/* Tabbar içeriğini ortala ve 1000px ile sınırla */
.tabbar-inner { max-width: 1000px; margin: 0 auto; }
@media (max-width: 999px) {
  /* Mobile: tabbar içeriği tam genişlik olsun, yan boşluk kalmasın */
  .tabbar-inner { max-width: none; margin: 0; }
}
/* Tabbar'ı toolbar altında sticky konumda tut */
.tabbar { top: var(--toolbar-height); }
/* Sayfa içerik alanını 1000px ile sınırla ve ortala */
section { max-width: 1000px; margin: 0 auto; }
/* Modal (Menüler) genişliğini 280px yap */
.modal-content { width: min(90vw, 280px); max-width: 280px; }
/* İçeriği toolbar'ın altından başlat */
body { padding-top: var(--toolbar-height); }
html, body { touch-action: manipulation; }

/* Moved from MenuX.html inline <style> (excluding :root) */
html, body { overscroll-behavior: contain; }
/* Reserve space only for the right scrollbar to avoid left white gutter */
html { scrollbar-gutter: stable; }
/* Right Drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 5000; }
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: 320px; max-width: 86vw; background: #111; color: #eee; box-shadow: -4px 0 18px rgba(0,0,0,.28); transform: translateX(100%); transition: transform .25s ease; z-index: 5001; display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; }
.drawer.open { transform: translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content: space-between; padding: 12px 14px; border-bottom: none; }
.drawer-title { display:flex; align-items:center; gap:10px; font-weight:600; }
.drawer-title .avatar { width:40px; height:40px; border-radius:50%; background:#2a2a2a; display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:#bbb; }
.drawer-close { appearance:none; border:none; background:transparent; color:#ddd; font-size:18px; cursor:pointer; padding:6px; border-radius:6px; }
.drawer-close:hover { background: rgba(255,255,255,.06); }
/* Account CTA */
.acct-hidden { display: none !important; }
.acct-head { display:flex; align-items:center; justify-content: space-between; width:100%; }
.acct-title { font-size:22px; font-weight:600; color:#fff; }
.acct-cta { display:flex; gap:10px; align-items:center; }
.btn { appearance:none; border:none; border-radius:999px; padding:12px 20px; font-family: var(--primary-font); font-size:14px; cursor:pointer; }
.btn-ghost { background: #f3f0eb; color:#111; }
.btn-primary { background: #f07614; color:#fff; }
.acct-cta-row { display:flex; justify-content:center; align-items:center; gap:10px; padding: 6px 14px; }
.acct-cta-row .btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; line-height: 1.2; min-height: 46px; padding-left: 12px; padding-right: 12px; }
.menu-list { list-style:none; margin: 0 0 16px; padding: 0 6px 0 0; }
.drawer .menu-item { display:flex; align-items:center; gap:12px; padding: 12px 14px; color:#eee; text-decoration:none; cursor:pointer; font-family: var(--primary-font); width: 100%; max-width: 100%; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.drawer .menu-item:focus { outline: none; box-shadow: none; }
.drawer .menu-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer .menu-item:hover { background: rgba(255,255,255,.06); }
.drawer .menu-item i, .drawer .menu-item svg { width:20px; height:20px; color:#fff; fill:#fff; opacity:.9; }
/* Ensure icon boxes are perfectly centered vertically */
.drawer .menu-item i { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* Normalize text line-height to avoid baseline jump next to icons */
.drawer .menu-item span { line-height: 1.2; }
.product-info-link { color: #1e90ff; text-decoration: none; font-size: 12px; margin-left: 8px; }
.product-info-link:hover, .product-info-link:focus { text-decoration: none; color: #1b86f2; }
.divider { height:1px; background: rgba(255,255,255,.1); margin: 6px 0; }
.divider-strong { height:1px; background: rgba(255,255,255,.12); margin: 6px 0; }
.divider-strong.above-menu { margin-top: -4px; /* 6px default -> -4px makes it 10px higher visually */ }
.drawer-section-title { padding: 10px 14px; color:#bbb; font-size:12px; text-transform: uppercase; letter-spacing: .4px; }
.drawer-footer { margin-top:auto; padding: 12px 14px; color: #9aa; font-size:12px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; }
/* Drawer language picker */
.drawer-footer { display:flex; align-items:center; justify-content:center; }
.drawer-footer .lang-picker { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #ddd; }
.drawer-footer .lang-picker i { color:#ddd; font-size:16px; }
.drawer-footer .lang-picker .lang-current { appearance:none; border: 1px solid rgba(255,255,255,.16); background: transparent; color:#eee; padding:6px 10px; border-radius:999px; cursor:pointer; font-family: var(--primary-font); font-size: 13px; }
.drawer-footer .lang-picker .lang-current:hover { background: rgba(255,255,255,.06); }
.drawer-footer .lang-picker .lang-menu { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background: #242424; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 6px; list-style: none; margin: 0; display: none; min-width: 160px; box-shadow: 0 8px 20px rgba(0,0,0,.35); z-index: 10; text-align: left; }
.drawer-footer .lang-picker.open .lang-menu { display: block; }
.drawer-footer .lang-picker .lang-menu li { padding: 6px 10px; color:#eee; cursor: pointer; border-radius: 6px; font-family: var(--primary-font); font-size: 13px; }
.drawer-footer .lang-picker .lang-menu li:hover { background: rgba(255,255,255,.10); }
.drawer-footer .lang-picker .lang-menu li[aria-selected="true"] { background: rgba(255,255,255,.14); }
/* Language label next to globe */
.drawer-footer .lang-picker .lang-label { color:#ddd; font-family: var(--primary-font); font-size: 13px; }
@media (max-width: 420px){ .drawer { width: 300px; } }
/* Scroll lock when drawer open */
body.no-scroll { overflow: hidden; }
/* Make inner menu scrollable when content taller than viewport */
.drawer nav { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
/* Edge swipe capture area for Chrome Android */
.edge-swipe-zone { position: fixed; top: 0; right: 0; width: 28px; height: 100%; z-index: 4000; touch-action: pan-y; /* allow vertical scroll; capture horizontal */ }

/* Delivery toggle */
.delivery-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #ece9e6; border: 1px solid #dbdbdb; border-radius: 20px; padding:4px; width: fit-content; margin: 16px auto; }
.delivery-toggle .toggle-track { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 220ms ease; }
.delivery-toggle .toggle-option { position: relative; z-index: 1; background: transparent; border: none; padding: 6px 12px; min-width: 150px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; color: #2f3640; }
.delivery-toggle .toggle-option .toggle-icon { width: 34px; height: 34px; }
.delivery-toggle .toggle-option .toggle-text { display: flex; flex-direction: column; justify-content: center; }
.delivery-toggle .toggle-option .toggle-title { font-family: 'Inter'; font-size: 16px; line-height: 1.1; text-align: center; }
.delivery-toggle .toggle-option .toggle-sub { font-family: 'Inter'; font-size: 12px; margin-top: 2px; text-align: center; }
.delivery-toggle .toggle-option.active { color: #2f3640; }
/* Basket içinde daha kompakt görünüm */
.delivery-toggle.in-basket { padding: 4px; border-radius: 16px; margin: 0px auto; }
.delivery-toggle.in-basket .toggle-option { padding: 6px 10px; min-width: 150px; gap: 8px; }
.delivery-toggle.in-basket .toggle-option .toggle-icon { width: 34px; height: 34px; }
.delivery-toggle.in-basket .toggle-option .toggle-title { font-size: 14px; }
.delivery-toggle.in-basket .toggle-option .toggle-sub { font-size: 12px; }

.Info-Container { width: 100%; margin-top: 15px; }
.Info-Area { max-width: 1000px; height: auto; margin: 0 auto; padding: 0px; color:#ffffff; border: none; border-radius: 10px; background: transparent; }

/* Service-type pill (Collection / Delivery) — floats on the food
   background directly below the brand logo card. Compact two-segment
   pill, Inter font (the site's primary face), state-driven colour:
     [data-state="open"]        → green   (vivid, primary CTA)
     [data-state="preorder"]    → orange  ("closed now, pre-order open")
     [data-state="closed"]      → grey    (muted, informational)
     [data-state="unavailable"] → grey    (service simply not offered)
   Selected segment (aria-selected="true") gets a thicker border + glow
   on top of whichever state colour applies. */
/* Toggle-style pill: only the ACTIVE segment is filled with its state
   colour (green / orange / grey). The inactive segment sits on the same
   neutral pill background as a flat text-only label. Single shared
   silhouette = it reads as one switch, not two separate buttons. */
.fx-pill {
    /* Dikey boşlukları .top-bottom'ın space-evenly'i yönetir; pill'in üst
       margin'i 0 ki logo↔buton boşluğu diğer iki boşlukla eşit kalsın. */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: max-content;
    align-items: stretch;
    background: #ffffff;
    border-radius: 999px;
    padding: 0;
    gap: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    font-family: 'Inter', Arial, sans-serif;
    box-sizing: border-box;
    max-width: 100%;
}
/* Single-segment variant — shop is single-branch and only offers one
   service. Collapse to a single auto-width track so the lone segment
   takes its own natural width without a phantom empty cell. */
.fx-pill.is-single { grid-template-columns: auto; }
.fx-pill-seg {
    width: 100%;
    display: inline-flex;
    /* Centred content — icon and the two text rows are stacked, the
       whole stack centres horizontally per the user's request. */
    align-items: center; justify-content: center;
    gap: 10px;
    min-height: 76px;
    padding: 16px 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    /* Inactive segment text — darker than the original slate-grey so
       older customers can read it without squinting (accessibility:
       contrast ratio bumped from ~7:1 to ~14:1 on white). */
    color: #1e293b;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    font-family: inherit;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.fx-pill-seg:focus-visible { outline: 3px solid rgba(15,23,42,.18); outline-offset: 2px; }
/* Icon raised to roughly two text-rows tall (sits alongside the stacked
   title + sub-line). width:auto keeps the SVG's native aspect ratio so it
   scales up without distortion. */
.fx-pill-icn { width: auto; height: 40px; flex: 0 0 auto; opacity: .65; }
.fx-pill-body {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    line-height: 1.15;
}
.fx-pill-title {
    font-family: 'Inter', Arial, sans-serif;
    /* Başlık artık tek kelime (Collection/Delivery) — daha büyük ve kalın
       yaparak asıl seçimi öne çıkar. */
    font-size: 18px; font-weight: 600; letter-spacing: .2px;
    white-space: nowrap;
}
.fx-pill-sub {
    font-family: 'Inter', Arial, sans-serif;
    /* Accessibility: keep the sub-line at full opacity so older
       customers don't lose the second line to faded text. */
    font-size: 12px; font-weight: 400; opacity: 1;
    white-space: nowrap;
}
/* Saat parçası ("at HH:MM") bölünmez bir bütün: alt satır sarsa bile
   "at" yalnız kalmaz, "at 09:45" birlikte iner. */
.fx-pill-sub-nb { white-space: nowrap; }
.fx-pill-seg:hover { color: #0f172a; }
.fx-pill-seg:hover .fx-pill-icn { opacity: .9; }

/* Closed / unavailable: not actionable. Same flat look as inactive,
   plus a "not-allowed" cursor and pointer-events lock so the click
   handler ignores them. */
.fx-pill-seg[data-state="closed"],
.fx-pill-seg[data-state="unavailable"] {
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
}
.fx-pill-seg[data-state="closed"] .fx-pill-icn,
.fx-pill-seg[data-state="unavailable"] .fx-pill-icn { opacity: .4; }

/* Accessibility: the single "closed" pill sits on a white background, so
   the default muted grey (#94a3b8) is too faint for older / low-vision
   customers. Use a dark, high-contrast slate for both the title and the
   day/time sub-line on this pill. */
.fx-pill-closed .fx-pill-seg[data-state="closed"] { color: #1e293b; }
.fx-pill-closed .fx-pill-title { color: #0f172a; font-weight: 600; }
.fx-pill-closed .fx-pill-sub { color: #334155; font-weight: 500; opacity: 1; }

/* Kapalı pill'de Collection/Delivery arası geçiş: kapalı segment yine de
   tıklanabilir kalsın (o servisin menüsü/fiyatı yüklenir). Sipariş kapalı;
   bu yalnızca görünen servisi değiştirir. "unavailable" (hiç sunulmayan)
   segment tıklanamaz kalır (üstteki kural geçerli). */
.fx-pill-switchable .fx-pill-seg[data-state="closed"] {
    pointer-events: auto;
    cursor: pointer;
}

/* ACTIVE segment — the only one that gets a coloured fill. State
   colour drives the look:
       open      → vivid green
       preorder  → warm orange
       closed    → muted grey-blue (kept selectable visually but inert)
   Outer tinted glow ring was removed per UX feedback, and so was the
   coloured drop shadow (the soft "light" halo). The active segment now
   carries a uniform white frame on all four sides — a 3px white border
   gives the same white gap top/sides/bottom (the lift was dropped so the
   gap stays symmetric instead of only showing under the button). */
.fx-pill-seg[aria-selected="true"][data-state="open"] {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    color: #fff;
    border: 3px solid #fff;
    box-shadow: none;
    z-index: 2;
}
.fx-pill-seg[aria-selected="true"][data-state="preorder"] {
    background: linear-gradient(180deg, #fb923c 0%, #c2410c 100%);
    color: #fff;
    border: 3px solid #fff;
    box-shadow: none;
    z-index: 2;
}
/* Active CLOSED segment — red fill, mirroring the green (open) / orange
   (preorder) treatment so the closed service reads as a clear red state
   with the same 360° white frame. */
.fx-pill-seg[aria-selected="true"][data-state="closed"] {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    border: 3px solid #fff;
    box-shadow: none;
    z-index: 2;
}
/* "unavailable" (service not offered here) stays a neutral, inert grey —
   it is not a live state the customer can act on. */
.fx-pill-seg[aria-selected="true"][data-state="unavailable"] {
    background: #e2e8f0;
    color: #475569;
    box-shadow: inset 0 0 0 2px #cbd5e1;
}
/* On the red closed pill the title/sub sit on red, so force white text. */
.fx-pill-seg[aria-selected="true"][data-state="closed"] .fx-pill-title,
.fx-pill-seg[aria-selected="true"][data-state="closed"] .fx-pill-sub { color: #fff; }
.fx-pill-seg[aria-selected="true"] .fx-pill-icn {
    filter: brightness(0) invert(1);
    opacity: 1;
}
/* Closed (red) keeps the white inverted icon; only "unavailable" (grey)
   keeps the dark/neutral icon so we don't invert grey-on-grey. */
.fx-pill-seg[aria-selected="true"][data-state="unavailable"] .fx-pill-icn {
    filter: none;
    opacity: .6;
}

/* Mobile: keep BOTH segments on a single row (no stacking). Reduce font
   + padding so the pill stays compact enough to fit narrow viewports. */
@media (max-width: 600px) {
    /* Container'ı viewport genişliğine sabitle ve yanlardan nefes payı bırak;
       böylece pill ekran dışına taşmaz (eskiden width:max-content idi ve
       .top overflow:hidden ile kenarlardan kırpılıyordu). */
    .top-bottom { row-gap: 0; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 16px; }
    /* Pill artık container'ın tüm genişliğini doldursun; iki 1fr segment
       kalan alanı eşit paylaşır, taşma olmaz. */
    .fx-pill { padding: 0; width: 100%; max-width: 420px; }
    .fx-pill-seg { padding: 10px 8px; gap: 8px; min-height: 66px; min-width: 0; }
    .fx-pill-icn { width: auto; height: 34px; }
    /* Başlık tek kelime (Collection/Delivery) — belirgin tut; alt satır
       (durum + saat) küçük kalsın, gerekirse sarsın. */
    .fx-pill-title { font-size: 16px; }
    .fx-pill-sub { font-size: 11px; white-space: normal; line-height: 1.2; }
    /* translateY kaldırıldı: logoyu aşağı kaydırmak üç boşluğun eşitliğini
       bozuyordu. Dikey konumu artık space-evenly belirliyor. */
    .restaurant-logo { transform: none; }
}
/* Very narrow phones: drop the icon to free up space for the text. */
@media (max-width: 360px) {
    .fx-pill-icn { display: none; }
    .fx-pill-seg { padding: 6px 10px; }
}

/* The pill lives inside Home/Index.cshtml's .top-bottom — make that
   container a column-flex so the pill sits ON its own line below the
   logo card, centred horizontally on the food background. */
.top .top-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }

/* Info-Area Slider */
.hero-slider { position: relative; width: 100%; aspect-ratio: 20 / 11; height: auto; border-radius: 10px; overflow: hidden; background: #000; }
.hero-track { display: flex; width: 100%; height: 100%; transition: transform 300ms ease; }
.hero-slide { flex: 0 0 100%; height: 100%; cursor: pointer; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.hero-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.hero-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.5); border: none; padding: 0; cursor: pointer; }
.hero-dot.active { background: #ffffff; }
@media (min-width: 600px) { .hero-slider { height: auto; }
}
@media (min-width: 800px) { .hero-slider { height: auto; }
}
@media (min-width: 1000px) { .hero-slider { height: auto; }
}
.mobile-basket-bar { display: none; }
/* Info rows under slider */
.info-list { margin-top: 10px; display: grid; gap: 0; }
.info-row { display: grid; grid-template-columns: 1fr auto; align-items: center; background: #fff; border: 1px solid #eee; border-top: 0; border-radius: 0; padding: 10px 12px; }
.info-list .info-row:first-child { border-top: 1px solid #eee; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.info-list .info-row:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.info-left { display: inline-flex; align-items: center; gap: 10px; color: #2f3640; font-family: 'Inter'; font-size: 14px; }
.info-ico { color: var(--primary-color); font-size: 18px; }
.info-ico.warn { color: var(--primary-color); }
.info-ico-img { width: 18px; height: 18px; display: inline-block; }
.payment-banner { height: 28px; display: inline-block; vertical-align: middle; }
.info-left svg { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; }
.row-info-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #666666; }
.row-info-btn i { color: #666; font-size: 14px; }
.info-accent { color: var(--primary-color); font-weight: normal; }
.payment-icons { display: inline-flex; align-items: center; gap: 10px; margin-left: 10px; vertical-align: middle; }
.payment-icon { height: 22px; width: auto; display: inline-block; }
.payment-icons i { font-size: 26px; color: #404040; line-height: 1; }
.payment-icons .fa-apple-pay, .payment-icons .fa-google-pay { font-size: 30px; }
/* Ortak mobil/desktop checkout butonu stilleri */
.mobile-basket-btn { max-width: 1000px; margin: 0 auto; background: var(--primary-color); color: #fff; border-radius: 26px; height: 48px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.mobile-basket-btn .basket-left { display: flex; align-items: center; justify-content: flex-start; padding-left: 10px; }
.basket-icon-container { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.basket-icon { font-size: 20px; }
.basket-count { position: absolute; top: -3px; right: -15px; background: #ffc107; color: var(--primary-color); border-radius: 999px; font-size: 14px; line-height: 1; padding:2px 5px; }
.mobile-basket-btn .basket-center { text-align: center; font-family:'Inter'; font-size: 18px; }
.mobile-basket-btn .basket-right { text-align: right; padding-right: 16px; font-family:'Inter'; font-size: 16px; }
@media (max-width: 1360px) { .Info-Area { width: calc(100% - 30px); } }
@media (max-width: 1000px) { .Info-Container {width:100%;} .Info-Area { width: calc(100% - 30px); } .top { height: 180px; } .mobile-basket-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: #ffffff; padding: 6px 10px; box-shadow: 0 -1px 3px rgba(0,0,0,0.016), 0 -4px 8px rgba(0,0,0,0.016); } .mobile-basket-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0)); } body { padding-bottom: 62px; } }
/* Basket içindeki buton host'u (desktop) */
#basket .basket-button-host { padding: 8px 10px 12px; }
/* Basket başlık ve boş durum stili */
#basket .basket-header { position: relative; padding: 14px 10px 8px; text-align: center; font-family: 'Inter'; color:#333; font-size: 24px; }
#basket .basket-header .left-icon { display: none; }
#basket .basket-toggle-host { padding: 0px; }
#basket .basket-empty { text-align: center; padding: 16px; color:#666; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: 30px; }
#basket .basket-empty .icon { font-size: 96px; color:#bdbdbd; line-height: 1; margin-bottom: 0; }
#basket .basket-empty .icon svg { width: 1em; height: 1em; display: inline-block; }
#basket .basket-empty .title { font-family:'Inter'; font-size: 18px; color:#333; margin-top: -20px; }
#basket .basket-empty .desc { font-family:'Inter'; font-size: 13px; margin-top: 6px; }
/* Basket content */
#basket .badge-new { display:inline-block; background: var(--secondary-color); color:#fff; font-size:12px; border-radius:8px; padding:4px 8px; margin-right:8px; line-height:1; font-family:'Inter', Arial, sans-serif; }
#basket .basket-content { padding: 0 10px 0; margin-top:6px; border-top: 1px solid #eee; font-family: 'Inter', Arial, sans-serif; overflow-y: auto; }
#basket .basket-content { scrollbar-width: thin; scrollbar-color: #c7c7c7 transparent; }
#basket .basket-content::-webkit-scrollbar { width: 1px; }
#basket .basket-content::-webkit-scrollbar-thumb { background-color: #c7c7c7; border-radius: 999px; }
#basket .basket-content::-webkit-scrollbar-track { background: transparent; }
.basket-item { padding: 10px 0px 10px; border-bottom: 1px solid #eee; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "qty title price" "qty options options"; align-items: center; gap: 4px 8px; }
.basket-item-header { display: contents; }
.qty-pill { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px; background: #efefef; border-radius: 20px; padding: 6px; font-family: 'Inter'; color:#333; }
.qty-pill { grid-area: qty; align-self: start; }
.qty-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #d0d0d0; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.qty-btn svg { width: 14px; height: 14px; stroke: #666; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qty-count { min-width: 22px; height: 24px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; font-size: 14px; }
.basket-item-title { grid-area: title; font-family: 'Inter'; font-size: 14px; color:#222; }
.basket-item-price { grid-area: price; font-family: 'Inter'; font-size: 14px; color:#111; justify-self: end; }
.basket-options { grid-area: options; margin: 0; display: grid; gap: 3px; }
.basket-option { font-size: 12px; color:#666; }
.options-toggle { margin-top: 6px; font-size: 12px; color: var(--primary-color); cursor: pointer; text-decoration: none; }
.extra-group { display: none; }
.basket-divider { height: 1px; background: #eee; margin: 12px 0100px; }
.basket-summary { padding: 4px 0; }
.summary-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 4px 10px; font-size: 14px; color:#333; }
.summary-row.total { font-family: 'Inter'; font-size: 20px; font-weight: 700; color: #111; border-top: 2px solid #ddd; margin-top: 8px; padding-top: 12px; }

.delivery-toggle .toggle-option.disabled{ opacity:0.45; cursor:not-allowed; pointer-events:none; }

/* Address + Delivery Times panels layout */
.at-row { display: flex; flex-wrap: wrap; gap: 12px; }
.at-row > .address-banner, .at-row > .delivery-times-panel { flex: 1 1 100%; min-width: 0; border: 1px solid #eee; border-radius: 10px; background: #fff; padding: 10px 12px; color: #2f3640; }
@media (min-width: 1000px) {
  .at-row { flex-wrap: nowrap; }
  .at-row > .address-banner, .at-row > .delivery-times-panel { flex: 1 1 0; }
}

 /* Address banner iç düzen */
.Info-Area .address-banner { display: flex !important; align-items: center !important; gap: 10px; flex-wrap: nowrap !important; }
.Info-Area .address-banner .ab-ico { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; }
.Info-Area .address-banner .ab-text { display: grid; min-width: 0; flex: 1 1 auto; }
.Info-Area .address-banner .ab-title { font-family: 'Inter'; font-size: 14px; line-height: 1.2; }
.Info-Area .address-banner .ab-sub { font-size: 13px; color: #555; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 /* Delivery özel renkleri */
.Info-Area .address-banner[data-mode="delivery"] .ab-ico svg path { fill: var(--secondary-color); }
.Info-Area .address-banner[data-mode="delivery"] .ab-sub { color: #555; }
 /* Delivery özel font & başlık rengi */
.Info-Area .address-banner[data-mode="delivery"] .ab-btn { font-family: var(--primary-font); }
.Info-Area .address-banner[data-mode="delivery"] .ab-text .ab-sub { font-family: var(--primary-font); }
.Info-Area .address-banner[data-mode="delivery"] .ab-text .ab-title { color: var(--primary-color); }
.Info-Area .address-banner .ab-btn { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 8px; border: 1px solid #e0e0e0; background: #fff; color: #333; padding: 6px 10px; border-radius: 18px; cursor: pointer; white-space: nowrap !important; }
.Info-Area .address-banner .ab-btn i { color: var(--secondary-color); }
.Info-Area .address-banner .ab-btn .ab-btn-label { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Collection özel renk & fontlar */
.Info-Area .address-banner[data-mode="collection"] .ab-btn { font-family: var(--primary-font); }
.Info-Area .address-banner[data-mode="collection"] .ab-text .ab-sub { font-family: var(--primary-font); color: #555; }
.Info-Area .address-banner[data-mode="collection"] .ab-ico svg path { fill: var(--secondary-color); }
.Info-Area .address-banner[data-mode="collection"] .ab-text .ab-title { color: var(--primary-color); }
/* Delivery times panel iç düzen */
.Info-Area .delivery-times-panel { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto !important; align-items: center !important; gap: 10px; }
.Info-Area .delivery-times-panel .dtp-ico { width: 22px; height: 22px; display: grid; place-items: center; }
 .Info-Area .delivery-times-panel[data-mode="delivery"] .dtp-ico svg path { fill: var(--secondary-color); }
 .Info-Area .delivery-times-panel .dtp-text { min-width: 0; }
 .Info-Area .delivery-times-panel .dtp-title { font-family: 'Inter'; font-size: 14px; line-height: 1.2; color: #2f3640; }
 .Info-Area .delivery-times-panel .dtp-sub { font-size: 13px; color: #555; line-height: 1.2; }
 .Info-Area .delivery-times-panel[data-mode="delivery"] .dtp-title { color: var(--secondary-color); }
 .Info-Area .delivery-times-panel[data-mode="delivery"] .dtp-sub { color: #555; }
 /* Collection özel renk & fontlar (Today's Collection Hours) */
 .Info-Area .delivery-times-panel[data-mode="collection"] .dtp-ico svg path { fill: var(--secondary-color); }
 .Info-Area .delivery-times-panel[data-mode="collection"] .dtp-title { color: var(--secondary-color); }
 .Info-Area .delivery-times-panel[data-mode="collection"] .dtp-sub { color: #555; font-family: var(--primary-font); }
.Info-Area .delivery-times-panel[data-mode="collection"] .dtp-btn { font-family: var(--primary-font); }
.Info-Area .delivery-times-panel .dtp-btn { display: inline-flex !important; align-items: center !important; gap: 8px; border: 1px solid #e0e0e0; background: #fff; color: #333; padding: 6px 10px; border-radius: 18px; cursor: pointer; white-space: nowrap !important; justify-self: end !important; max-width: 100%; min-width: 0; }
.Info-Area .delivery-times-panel .dtp-btn i { color: var(--secondary-color); }
.Info-Area .delivery-times-panel .dtp-btn span { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }

/* Daha dar ekranlarda buton metinlerini biraz daha kısalt */
@media (max-width: 420px) {
  .address-banner .ab-btn .ab-btn-label, .delivery-times-panel .dtp-btn span { max-width: 120px; }
}

/* Site Footer */
.site-footer { width: 100%; overflow-x: hidden; background: #f5f5f7; color: #333; margin-top: 20px; }
.site-footer .footer-inner { max-width: 1000px; width: 100%; margin: 0 auto; padding: 16px 12px; display: grid; gap: 14px; box-sizing: border-box; }
.site-footer a.footer-link { color: #333; text-decoration: none; font-family: 'Inter', Arial, sans-serif; font-size: 14px; opacity: 0.9; }
.site-footer a.footer-link:hover { color: var(--primary-color); opacity: 1; text-decoration: none; }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; justify-items: center; text-align: center; }
.site-footer .pay-icons { display: inline-flex; align-items: center; gap: 10px; }
.site-footer .pay-icons i { font-size: 26px; color: #444; }
.site-footer .footer-bottom { border-top: 1px solid rgba(0,0,0,0.06); padding-top: 10px; font-size: 12px; color: #555; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.site-footer .copy { font-family: 'Inter', Arial, sans-serif; }
.site-footer .footer-made { display: inline-flex; align-items: center; gap: 8px; color: #555; font-family: 'Inter'; font-size: 13px; opacity: 0.95; }
.site-footer .footer-logo { height: 18px; width: auto; display: inline-block; filter: none; opacity: 0.95; }
.site-footer .footer-social { display: inline-flex; align-items: center; gap: 10px; }
.site-footer .footer-social .social-link { color: #444; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; transition: background 160ms ease, color 160ms ease; }
.site-footer .footer-social .social-link:hover { background: rgba(0,0,0,0.06); color: var(--primary-color); }
.site-footer .footer-social i { font-size: 18px; line-height: 1; }

/* Bottom right area that contains Made with FoodX + payment icons */
.site-footer .footer-right { display: grid; justify-items: center; gap: 8px; }

/* Top-right payment icons container */
.site-footer .footer-top-right { display: flex; align-items: center; justify-content: flex-end; }

/* Made with FoodX link */
.site-footer .made-link { color: var(--primary-color); text-decoration: none; }
.site-footer .made-link:hover { color: #b91515; text-decoration: none; }

/* Mobile: center payment icons under links */
@media (max-width: 999px) {
  .site-footer .footer-top-right { justify-content: center; margin-top: 6px; }
  /* Hide footer links on mobile */
  .site-footer .footer-links { display: none; }
}

@media (min-width: 700px) {
  .site-footer .footer-inner { gap: 18px; padding: 22px 15px; }
  .site-footer .footer-links { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 1000px) {
  .site-footer .footer-inner { grid-template-columns: 1fr auto; align-items: center; gap: 16px 24px; }
  .site-footer .footer-links { grid-template-columns: repeat(7, auto); justify-content: start; }
  .site-footer .footer-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; }
  .site-footer .footer-bottom .footer-social { justify-self: start; }
  .site-footer .footer-bottom .copy { justify-self: center; }
  .site-footer .footer-bottom .footer-made { justify-self: end; }
}

/* === Moved from content.html === */
/* Delivery toggle */
.delivery-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #ece9e6; border: 1px solid #dbdbdb; border-radius: 20px; padding:4px; width: fit-content; margin: 16px auto; }
.delivery-toggle .toggle-track { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 220ms ease; }
.delivery-toggle .toggle-option { position: relative; z-index: 1; background: transparent; border: none; padding: 6px 12px; min-width: 150px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; color: #2f3640; }
.delivery-toggle .toggle-option .toggle-icon { width: 34px; height: 34px; }
.delivery-toggle .toggle-option .toggle-text { display: flex; flex-direction: column; justify-content: center; }
.delivery-toggle .toggle-option .toggle-title { font-family: 'Inter'; font-size: 16px; line-height: 1.1; text-align: center; }
.delivery-toggle .toggle-option .toggle-sub { font-family: 'Inter'; font-size: 12px; margin-top: 2px; text-align: center; }
.delivery-toggle .toggle-option.active { color: #2f3640; }

/* Info-Area and Slider */
.Info-Container { width: 100%; margin-top: 15px; }
.Info-Area { max-width: 1000px; height: auto; margin: 0 auto; padding: 0px; color:#ffffff; border: none; border-radius: 10px; background: transparent; }
.hero-slider { position: relative; width: 100%; aspect-ratio: 20 / 11; height: auto; border-radius: 10px; overflow: hidden; background: #000; }
.hero-track { display: flex; width: 100%; height: 100%; transition: transform 300ms ease; }
.hero-slide { flex: 0 0 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.hero-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.5); border: none; padding: 0; cursor: pointer; }
.hero-dot.active { background: #ffffff; }
@media (min-width: 1360px) { .hero-slider { height: auto; } }

/* Info rows */
.info-list { margin-top: 10px; display: grid; gap: 0; }
.info-row { display: grid; grid-template-columns: 1fr auto; align-items: center; background: #fff; border: 1px solid #eee; border-top: 0; border-radius: 0; padding: 10px 12px; }
.info-list .info-row:first-child { border-top: 1px solid #eee; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.info-list .info-row:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.info-left { display: inline-flex; align-items: center; gap: 10px; color: #2f3640; font-family: 'Inter'; font-size: 14px; }
.info-ico { color: var(--secondary-color); font-size: 18px; }
.info-ico.warn { color: var(--secondary-color); }
.info-ico-img { width: 18px; height: 18px; display: inline-block; }
.payment-banner { height: 28px; display: inline-block; vertical-align: middle; }
.info-left svg { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; }
.info-left svg path { fill: var(--secondary-color); }
.row-info-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #666666; }
.row-info-btn i { color: #666; font-size: 14px; }
.info-accent { color: #e21e21; font-weight: normal; }

/* Warnings row: whole row clickable; text clamps to max 2 lines and, when it
   overflows, shows a ">" marker (added via JS .is-truncated) instead of "…". */
.info-row.allWarningsBtn { cursor: pointer; }
.info-row.allWarningsBtn:hover { background: #fafafa; }
.info-row.allWarningsBtn .info-left { min-width: 0; }
.info-row.allWarningsBtn .warning-text {
  min-width: 0;
  display: block;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
  position: relative;
}
.info-row.allWarningsBtn .warning-text.is-truncated::after {
  content: 'more';
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 8px;
  background: #fff;
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 13px;
  text-decoration: underline;
}

/* Delivery Times Panel */
.delivery-times-panel { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; background:#fff; border:1px solid #eee; border-radius:10px; padding:10px 12px; color:#2f3640; font-family:'Inter'; margin: 10px 0 16px; box-sizing: border-box; }
.delivery-times-panel .dtp-ico { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; }
.delivery-times-panel .dtp-text { display:flex; flex-direction:column; line-height:1.2; min-width: 0; word-break: break-word; }
.delivery-times-panel .dtp-title { font-size:16px; }
.delivery-times-panel .dtp-sub { font-size:13px; color:#444; }
.delivery-times-panel .dtp-btn { height: 36px; display: inline-flex; align-items: center; font-family: 'Inter'; }
.delivery-times-panel .dtp-btn i { font-size: 14px; }
.info-list .dtp-btn { white-space: nowrap; padding: 8px 12px; border-radius: 20px; border: 1px solid #e0e0e0; background: #ffffff; color: #2f3640; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter'; }
.info-list .dtp-btn i { color: var(--secondary-color); font-size:14px; line-height:1; }
.dtp-btn { transition: filter .15s ease, background-color .15s ease; }
.dtp-btn:hover { filter: brightness(0.95); }
@media (max-width: 400px) {
  /* Allow button to use more space and ellipsis only on the label */
  .delivery-times-panel .dtp-btn { max-width: 70%; }
  .delivery-times-panel .dtp-btn span { max-width: 160px; }
}
.at-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 12px; }
.at-row > .address-banner, .at-row > .delivery-times-panel { flex: 1 1 100%; margin: 0 !important; min-width: 0; }
@media (min-width: 1000px) { .at-row { flex-wrap: nowrap; } .at-row > .address-banner, .at-row > .delivery-times-panel { flex: 1 1 0; } }
.address-banner .ab-text { min-width: 0; }
.info-row[data-type="delivery-times"] { display: none !important; }

/* Responsive helpers from content */
@media (max-width: 1360px) { .Info-Area { width: calc(100% - 30px); } }
@media (max-width: 1000px) { .Info-Area { width: calc(100% - 30px); } }
/* Language menu: constrain height and thin divider */
.drawer-footer .lang-picker .lang-menu {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.drawer-footer .lang-picker .lang-menu::-webkit-scrollbar { width: 6px; }
.drawer-footer .lang-picker .lang-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }
.drawer-footer .lang-picker .lang-menu::-webkit-scrollbar-track { background: transparent; }

/* Make the divider inside the language menu truly 1px thick */
.drawer-footer .lang-picker .lang-menu li.divider {
  padding: 0;
  height: 1px;            /* max 1-2px */
  margin: 6px 0;
  background: rgba(255,255,255,.10);
}