/* Meat Et v12 (V3) base - TKT-1580.
   1) host-base.css of the prototype, unchanged (body margin, font, background, [hidden], img max-width).
   2) image hooks from site.css (image library): real photos are set inline as --pic on [data-pic].
   3) .hidden / .d-none: the shared payment script (Views/Shared/_PaymentScripts.cshtml) toggles visibility with
      these classes (V1 Bootstrap / V2 Tailwind); V3 must honour both or the wallet buttons never show. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
[data-pic] { --pic-size:cover; }
[data-pic]::after { display:none !important; }
.hidden, .d-none { display:none !important; }
/* the prototype's brand mark is an inline svg; the shop's own logo is an image in the same box */
img.logo-mark { object-fit:contain; }
/* the prototype's map box is a placeholder; the shop's map setting is an embed (same as Page/Map) */
.map-ph iframe { width:100%; height:100%; min-height:240px; border:0; display:block; }
/* combo window: rows the shared V2 row templates add under a column (#kolonsecimdetay{id}) */
.sel-detail { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.sel-row { display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--cream-300); border-radius:var(--radius-m); background:var(--cream-50); font-size:13px; }
.sel-row .lbl { flex:1; }
.opt .qty, .sel-row .qty { margin-top:0; }
/* C1 (2026-10-27): a selection's quantity sits in the option's own row (no extra row under the column);
   in a "remove" column (SELECTION_MODE 2) the checked option's name and quantity are red */
.opt .sel-inline { display:flex; align-items:center; flex:none; }
.group.is-exclude .opt:has(input:checked) .lbl,
.group.is-exclude .opt .sel-inline .qty .v,
.group.is-exclude .opt .sel-inline .qty button { color:var(--ember); }
/* window shell on every V3 page (the delivery-type window can open anywhere: CartHeadermenu "Before" setting).
   Page css (menu.css, home.css ...) carries the full prototype rules and wins by specificity. */
.backdrop { position:fixed; inset:0; background:rgba(42,28,19,.55); z-index:100; display:grid; place-items:center; justify-content:center; padding:20px; }
/* overlays switched on with style.display = 'flex' (V1 / V2 scripts) keep the sheet centred: justify-content above */
.sheet { background:var(--cream-50, #FFFDF8); border-radius:var(--radius-l, 8px); width:100%; max-width:508px; max-height:calc(100vh - 56px); display:flex; flex-direction:column; overflow:auto; }
/* cart page (/cart) and the confirm / points window (js/cart.js, CartPreviewmenu) */
.cart-page { max-width:520px; margin:28px auto 40px; padding:0 16px; }
.v3-confirm { padding:22px; gap:12px; }
.v3-confirm h2 { font-size:18px; }
.v3-confirm input[type=number] { width:100%; padding:10px 12px; border:1px solid var(--cream-300); border-radius:var(--radius-m); font:inherit; }
.v3-confirm-acts { display:flex; gap:10px; margin-top:6px; }
.v3-confirm-acts button { flex:1; min-height:44px; }
.v3-confirm-acts .v3-no { border:1px solid var(--cream-300); border-radius:var(--radius-m); background:var(--cream-50); }
.v3-confirm-acts a.v3-no { display:grid; place-items:center; flex:1; min-height:44px; text-decoration:none; color:inherit; }
/* delivery-type window rows + buttons (pages whose css has no basket / sheet rules, e.g. home) */
.v3-confirm .opt { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--cream-300); }
.v3-confirm .opt .lbl { flex:1; }
.v3-confirm .btn-checkout { background:var(--btn-bg); color:var(--btn-fg); border:0; border-radius:var(--radius-m); padding:10px 14px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; }
/* TKT-1653: the window also opens on menu pages, where menu.css gives .opt the option-card look and .btn-checkout the full-width
   basket button (body[data-page="menu"], 0,2,1) and the label is squeezed. Rows keep the look above (0,3,0+); confirm buttons
   in .v3-confirm-acts (js/cart.js) are not in an .opt row and stay as they are. */
.sheet.v3-confirm .opt { padding:12px 0; margin:0; min-height:0; border:0; border-bottom:1px solid var(--cream-300); border-radius:0; background:none; cursor:default; }
.sheet.v3-confirm .opt:hover { border-color:var(--cream-300); }
.sheet.v3-confirm .opt .lbl { flex:1; font-size:inherit; }
.sheet.v3-confirm .opt .btn-checkout { width:auto; flex:none; min-height:0; padding:10px 14px; font-size:inherit; }
/* checkout steps: the prototype is one page with numbered panels; the real flow is one page per step (V1 wizard st=da / dt / dp).
   ol ... li a: the page css colours every link (body[data-page] a) and loads after this file */
.co-steps { list-style:none; display:flex; gap:8px; margin:0 0 16px; padding:0; }
.co-steps li { flex:1; min-width:0; }
ol.co-steps li a { display:flex; align-items:center; gap:9px; height:100%; padding:10px 12px; border:1px solid var(--cream-300); border-radius:var(--radius-s); background:var(--cream-50); color:var(--ink-600); font-size:13.5px; font-weight:600; text-decoration:none; min-height:44px; }
ol.co-steps li.on a { border-color:var(--wood-900); color:var(--ink-900); }
.co-steps li:not(.on):not(.done) .step-no { background:var(--cream-200); color:var(--ink-600); }
.co-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.co-one { max-width:760px; padding-bottom:40px; }
.co-gap { margin-bottom:12px; }
.co-sub { font-size:14px; font-weight:700; margin:16px 0 0; }
.co-time { display:inline-block; font-size:20px; font-variant-numeric:tabular-nums; margin:2px 0 4px; }
.co-more { margin-top:12px; width:100%; }
/* payment step summary: where / when / who (TKT-1580). .sum prefix — the page css (.cfg / .cfg-row / a) loads after this file */
.sum .sum-info .cfg { margin-top:0; gap:7px; }
.sum .sum-info .cfg-row .k { width:78px; font-size:10px; }
.sum .sum-info .cfg-row .v { font-size:13px; color:var(--ink-900); }
.sum .sum-info a { color:var(--teal-700); text-decoration:underline; }
.ok-box { background:var(--leaf-wash); border:1px solid #BFD8C6; border-radius:var(--radius-s); padding:12px 14px; font-size:13px; color:#26583A; }
/* time step (V1 *DeliveryTimeSelect): the ASAP card is a .pick without a radio (button), the slots are prototype .slot buttons */
body[data-page] button.pick { width:100%; text-align:left; font:inherit; color:inherit; }
body[data-page] .pick.on { border-color:var(--teal-700); background:var(--teal-100); box-shadow:inset 0 0 0 1px var(--teal-700); }
.delivery-slot .slot { width:100%; }
/* toast (js/cart.js V3Toast) on pages whose css has none — menu.css carries the prototype rule */
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:200; background:var(--wood-900, #2A1C13); color:var(--cream-50, #FFFDF8); padding:12px 20px; border-radius:var(--radius-pill, 999px); font-size:14px; font-weight:600; box-shadow:0 10px 30px rgba(42,28,19,.3); }
/* Bootstrap words the copied V1 checkout scripts use (V3 loads no Bootstrap). visually-hidden as in Bootstrap 5:
   V1's loading overlays carry it and are set to display:flex — they stay clipped there, so they stay clipped here too. */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.is-invalid { border-color:#C0392B !important; box-shadow:0 0 0 1px #C0392B; }
.is-valid { border-color:#3D7A4E !important; }
.invalid-feedback { display:block; color:#B03A2E; font-size:12.5px; margin-top:4px; }
/* address step: class names the copied scripts put on #result / #checkResult, in prototype colours */
.v3-addr .p-2 { padding:10px 12px; border-radius:var(--radius-s); }
.v3-addr .text-center { text-align:center; }
.v3-addr .bg-success, .v3-addr .bg-success-light { background:var(--leaf-wash); color:#26583A; }
.v3-addr .bg-danger, .v3-addr .bg-danger-light { background:var(--ember-wash); color:#7E3319; }
.v3-addr .bg-light { background:var(--cream-100); color:var(--ink-600); }
.v3-addr .text-muted { color:var(--ink-400); font-size:13px; }
.v3-addr .mt-3 { margin-top:12px; }
/* My Addresses edit window: Tailwind words the copied V2 script sets on #checkResultEdit and the inputs */
.v3-addr .bg-green-100 { background:var(--leaf-wash); color:#26583A; }
.v3-addr .bg-red-100 { background:var(--ember-wash); color:#7E3319; }
.v3-addr .bg-amber-100 { background:var(--gold-100); color:var(--gold-700); }
.v3-addr .bg-gray-50 { background:var(--cream-100); color:var(--ink-400); }
.v3-addr .border-green-500 { border-color:#3D7A4E !important; }
.v3-addr .border-red-500 { border-color:#C0392B !important; }
/* Add Address: more Tailwind words the copied V2 scripts assign (result lines, message box, check result) */
.v3-addr .bg-green-50 { background:var(--leaf-wash); color:#26583A; }
.v3-addr .bg-red-50 { background:var(--ember-wash); color:#7E3319; }
.v3-addr .bg-amber-50 { background:var(--gold-100); color:var(--gold-700); }
.v3-addr .text-green-600 { color:#3D7A4E; }
.v3-addr .text-red-600 { color:#B03A2E; }
.v3-addr .text-amber-600 { color:var(--gold-700); }
.v3-addr .text-blue-600 { color:var(--teal-700); }
.v3-addr .text-gray-600 { color:var(--ink-600); }
.v3-addr .p-3 { padding:12px; }
.v3-addr .py-2 { padding-top:8px; padding-bottom:8px; }
.v3-addr .rounded, .v3-addr .rounded-lg { border-radius:var(--radius-s); }
.v3-addr .border { border:1px solid var(--cream-300); }
.v3-addr .text-xs { font-size:12px; }
.v3-addr .text-sm { font-size:13.5px; }
.v3-addr .mt-2 { margin-top:8px; }
.v3-addr #messageContainer:not(.hidden), .v3-addr #messageContainer_rules:not(.hidden) { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.v3-search { position:relative; }
.v3-search .v3-x { position:absolute; right:4px; top:4px; }
.v3-map { border-radius:var(--radius-s); overflow:hidden; }
.addr-map { display:block; width:100%; height:128px; object-fit:cover; border-radius:var(--radius-s); border:1px solid var(--cream-300); margin-top:10px; }
.addr-act { gap:6px; }
.v3-addr #result:not(:empty) { margin:10px 0; font-size:13.5px; }
.v3-addr #map { height:450px; width:100%; border-radius:var(--radius-s); margin-top:12px; }
.co-addr { font-weight:700; margin:0 0 10px; }
body[data-page] .hint.co-gap { margin-bottom:12px; }
.co-who { font-weight:700; font-size:15px; margin:6px 0 2px; }
.co-form { margin-top:16px; padding-top:6px; border-top:1px solid var(--cream-300); }
/* saved address cards (V1 card list) */
.addr-list { display:flex; flex-direction:column; gap:10px; margin:12px 0; }
.addr-card { border:1px solid var(--cream-300); border-radius:var(--radius-s); background:var(--cream-50); padding:14px; }
.addr-card.is-default { border-color:var(--teal-700); }
.addr-card.is-out { border-color:#F0CBBB; }
.addr-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.addr-who b { display:block; font-size:14.5px; }
.addr-who span, .addr-line { font-size:13px; color:var(--ink-600); }
.addr-line { margin:6px 0 0; }
.addr-tag { font-size:11.5px; color:var(--ink-400); white-space:nowrap; }
.addr-warn { margin-top:8px; }
.addr-act { display:flex; justify-content:flex-end; margin-top:10px; }
.addr-act:empty { display:none; }
.tag-sel { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--teal-700); }
/* a field whose control is not an input (Stripe card element, Iyzico form): same look as the prototype label.field */
body[data-page] div.field { display:block; margin-bottom:12px; }
body[data-page] div.field > .lbl { display:block; font-size:12px; font-weight:700; color:var(--ink-400); margin-bottom:6px; }
.co-err { color:#B03A2E; font-size:12.5px; margin-top:4px; }
.co-err:empty { display:none; }
/* sign-in / sign-up (V2 member forms): consent row, remember-me row, waiting spinner (#faSpin, shown by jQuery .show()) */
body[data-page] .consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-600); margin-top:6px; }
body[data-page] .consent input { margin-top:2px; flex:none; }
.auth-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:-4px 0 14px; font-size:13.5px; }
.auth-row .consent { margin-top:0; }
body[data-page] .auth-head + .guest { margin-bottom:14px; }
.auth-remembered { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.co-spin { display:block; width:24px; height:24px; margin:0 auto 12px; border:3px solid var(--cream-300); border-top-color:var(--teal-700); border-radius:50%; animation:v3spin .8s linear infinite; }
@keyframes v3spin { to { transform:rotate(360deg); } }
/* TKT-1750: delivery type not chosen yet ("Before" setting) - the header field breathes softly until the customer chooses.
   Layout script adds .attn; reduced-motion visitors get a static ring instead of the pulse. */
.addr-btn.attn { animation:v3attn 2.6s ease-in-out infinite; }
@keyframes v3attn { 0%, 100% { box-shadow:0 0 0 0 rgba(14,110,115,0); } 50% { box-shadow:0 0 0 6px rgba(14,110,115,.22); } }
@media (prefers-reduced-motion:reduce) { .addr-btn.attn { animation:none; box-shadow:0 0 0 2px rgba(14,110,115,.5); } }
/* content pages: the shop's own HTML (panel setting) — embeds fill the column; the active info page in the .toc row */
.page-content iframe { width:100%; min-height:360px; border:0; border-radius:var(--radius-m); display:block; }
.page-content img { height:auto; }
body[data-page] .toc a[aria-current="page"] { background:var(--teal-100); border-color:var(--teal-700); color:var(--teal-800); font-weight:700; }
/* account pages: V2's account links (anchors) in the prototype's tab column (account.css styles buttons) */
body[data-page="account"] .acc-nav a { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-s); min-height:44px; font-size:14.5px; font-weight:600; color:var(--ink-600); text-decoration:none; white-space:nowrap; }
body[data-page="account"] .acc-nav a:hover { background:var(--cream-200); color:var(--ink-900); }
body[data-page="account"] .acc-nav a[aria-current="page"] { background:var(--btn-bg); color:var(--btn-fg); }
/* Profil scroll-spy (V2 script) marks the link in view with Tailwind words; "font-semibold" is the one V3 shows */
body[data-page="account"] .acc-nav a.font-semibold { background:var(--cream-200); color:var(--ink-900); }
.v3-code-row { display:flex; gap:8px; margin-bottom:12px; }
.v3-code-row .in { width:46px; min-height:48px; padding:0; text-align:center; font-size:18px; font-weight:700; }
.v3-disabled { pointer-events:none; opacity:.5; }
.v3-points { font-size:18px; color:var(--leaf, #3D7A4E); }
body[data-page="account"] .acc-nav a.is-warn { color:#9A5B13; }
body[data-page="account"] .acc-nav a.is-danger { color:#B03A2E; }
body[data-page="account"] .narrow { max-width:760px; }
body[data-page="account"] .panel { margin-bottom:14px; }
body[data-page="account"] .kv { display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; }
body[data-page="account"] .kv + .kv { border-top:1px solid var(--cream-200); }
body[data-page="account"] .kv .k { color:var(--ink-400); }
body[data-page="account"] .kv .v { font-weight:600; text-align:right; }
/* destructive action (delete account) */
body[data-page] .btn.v3-danger { background:#B03A2E; color:#fff; }
body[data-page] .btn.v3-danger:hover:not(:disabled) { background:#922F25; }
.order-list { display:flex; flex-direction:column; gap:10px; }
.order-card { cursor:pointer; }
.order-card:hover, .order-card:focus-visible { border-color:var(--teal-600); }
.empty .btn { margin-top:12px; }
body.overflow-hidden { overflow:hidden; }
/* window with a click-to-close shade behind the sheet (My Orders detail) */
.v3-modal-shade { position:absolute; inset:0; }
.backdrop > .sheet { position:relative; z-index:1; }
.v3-order-sheet { max-width:860px; }
.v3-order-sheet .sum { position:static; }
/* order detail inside that window: checkout.css rules (scoped to the checkout page there) for the shared _OrderDetailBody */
.v3-order-sheet .done-hero { background:var(--panel-bg); color:var(--panel-fg); border:1px solid var(--panel-border); border-radius:var(--radius-m); padding:28px 24px; text-align:center; }
.v3-order-sheet .done-tick { width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--leaf); color:#fff; display:grid; place-items:center; }
.v3-order-sheet .done-tick svg { width:28px; height:28px; stroke-width:2.6; }
.v3-order-sheet .done-hero h1 { font-size:28px; font-weight:800; }
.v3-order-sheet .done-hero .ref { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:0.12em; color:var(--panel-accent); margin-top:8px; }
.v3-order-sheet .done-hero .eta { font-size:15.5px; color:var(--ink-600); margin-top:12px; }
.v3-order-sheet .done-hero .eta b { color:var(--ink-900); font-size:20px; font-family:var(--font-display); }
.v3-order-sheet .track { display:flex; gap:0; margin:22px 0 0; list-style:none; padding:0; }
.v3-order-sheet .track li { flex:1; position:relative; text-align:center; padding-top:34px; }
.v3-order-sheet .track li::before { content:""; position:absolute; top:9px; left:50%; width:100%; height:2px; background:var(--cream-300); }
.v3-order-sheet .track li:last-child::before { display:none; }
.v3-order-sheet .track .dot { position:absolute; top:3px; left:50%; transform:translateX(-50%); width:15px; height:15px; border-radius:50%; background:var(--cream-50); border:2px solid var(--cream-300); z-index:1; }
.v3-order-sheet .track li.done .dot { background:var(--leaf); border-color:var(--leaf); }
.v3-order-sheet .track li.done::before { background:var(--leaf); }
/* V3 kusur #9 (06.11): şu anki adım — checkout.css :352 ile aynı görünüş */
.v3-order-sheet .track li.now .dot { background:var(--teal-700); border-color:var(--teal-700); box-shadow:0 0 0 4px var(--teal-100); }
.v3-order-sheet .track .t { font-size:12.5px; font-weight:600; color:var(--ink-900); }
.v3-order-sheet .track .s { font-size:11px; color:var(--ink-400); display:block; margin-top:2px; }
.v3-order-sheet .done-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; margin-top:16px; }
.v3-order-sheet .kv { display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; }
.v3-order-sheet .kv + .kv { border-top:1px solid var(--cream-200); }
.v3-order-sheet .kv .k { color:var(--ink-400); }
.v3-order-sheet .kv .v { font-weight:600; text-align:right; }
/* order status (order detail): V2's colour groups — delivered / cancelled / preparing-ready / other */
.st-pill { display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:var(--radius-pill, 999px); background:var(--teal-100); color:var(--teal-700); }
.st-pill.is-done { background:var(--leaf-wash); color:#26583A; }
.st-pill.is-cancel { background:var(--ember-wash); color:#7E3319; }
.st-pill.is-prep { background:var(--gold-100); color:var(--gold-700); }
/* phone field (intlTelInput v17, V1 padding kept) */
.tel-field { display:block; position:relative; margin-bottom:12px; }
.tel-field .lbl { display:block; font-size:12px; font-weight:700; color:var(--ink-400); margin-bottom:6px; }
.tel-field .iti { display:block; width:100%; }
.tel-field .tel-mark { position:absolute; right:12px; bottom:14px; z-index:2; }
.tel-mark.is-ok { color:#3D7A4E; }
.tel-mark.is-err { color:#B03A2E; }
#TelefonInput { padding-left:80px !important; }
/* window holding a form (guest address, rules branch: #addressAddModal) */
.v3-form-sheet { max-width:620px; }
.v3-sheet-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:18px 20px 10px; }
.co-form .v3-sheet-head { padding:10px 0; }
.v3-sheet-head h2 { font-size:18px; font-weight:700; margin:0; }
.v3-sheet-body { padding:0 20px 10px; }
.v3-sheet-foot { display:flex; justify-content:flex-end; padding:12px 20px 18px; border-top:1px solid var(--cream-300); }
.v3-x { width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-s); flex:none; }
.co-end { margin-bottom:40px; }
/* delivery-type window placed in the page (checkout step "select"): the window shell becomes a plain card, Close is hidden */
.v3-inline > .backdrop:first-child { position:static; display:block; background:none; padding:0; z-index:auto; }
.v3-inline > .backdrop:first-child > .sheet { max-height:none; margin:28px auto 40px; border:1px solid var(--cream-300); }
.v3-inline > .backdrop:first-child .v3-confirm-acts > button.v3-no { display:none; }
/* V3-K1 (06.11): language switch in the header (summary carries each page's .btn-ghost look; the menu is page-independent) */
.lang-switch { position:relative; }
.lang-switch > summary { list-style:none; cursor:pointer; }
.lang-switch > summary::-webkit-details-marker { display:none; }
.lang-switch .lang-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:80; min-width:176px; padding:6px;
  background:var(--cream-50, #FFFDF8); border:1px solid var(--cream-300); border-radius:var(--radius-m);
  box-shadow:0 10px 30px rgba(42,28,19,.16); display:flex; flex-direction:column; gap:2px; }
.lang-switch .lang-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:var(--radius-s);
  background:none; border:0; text-align:left; font:inherit; font-size:14px; color:var(--ink-900); cursor:pointer; }
.lang-switch .lang-menu button:hover { background:var(--cream-200); }
.lang-switch .lang-menu button.is-active { font-weight:700; }
.lang-switch .lang-menu .code { min-width:28px; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:700; text-align:center;
  background:var(--cream-200); color:var(--ink-600); }
.lang-switch .lang-menu button.is-active .code { background:var(--btn-bg); color:var(--btn-fg); }
@media (max-width:520px) {
  ol.co-steps li a { flex-direction:column; text-align:center; gap:5px; padding:8px 6px; font-size:12px; }
}