@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; src: url(../fonts/ar-500_900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; src: url(../fonts/ar-500_900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/is-400-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/is-400-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/is-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/is-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/fg-400_800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/fg-400_800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/jb-500_700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/jb-500_700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* 1-core.css — Chef Mersin Tantuni tasarım sistemi: renk/yazı belirteçleri, sıfırlama, düğme, form, rozet, kart, katmanlar (sheet/drawer/modal/toast), hareket.
   Dil: kömür siyahı, markanın kırmızısı, lavaş kremi; logodaki altıgen rozet tekrar eden biçim. Sürekli animasyonda yalnız transform/opacity. */
:root {
  --red: #e31e24; --red-2: #c4141b; --red-ink: #b3121a; --red-soft: #fde4e2;
  --ember: #ff6b2c; --lemon: #f3c33f; --leaf: #2f7d4a; --leaf-soft: #e3f1e6; --sky: #2563eb;
  --coal: #141011; --coal-2: #1d1818; --coal-3: #2a2324; --coal-4: #3a3132;
  --bg: #f6f0e6; --bg-2: #eee4d5; --paper: #fffcf7; --paper-2: #fbf6ee;
  --ink: #1c1615; --ink-2: #463c39; --mut: #7a6d68; --line: rgba(28, 22, 21, .12); --line-2: rgba(28, 22, 21, .2);
  --on-dark: #f7efe6; --on-dark-2: rgba(247, 239, 230, .72); --on-dark-3: rgba(247, 239, 230, .48); --line-d: rgba(247, 239, 230, .12);
  --f-d: 'Archivo', 'Arial Black', system-ui, sans-serif; --f-s: 'Instrument Serif', Georgia, serif;
  --f-b: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-m: 'JetBrains Mono', ui-monospace, monospace;
  --r-s: 10px; --r: 16px; --r-l: 24px; --r-xl: 34px;
  --sh-1: 0 1px 2px rgba(28, 16, 14, .06), 0 4px 14px rgba(28, 16, 14, .06);
  --sh-2: 0 2px 6px rgba(28, 16, 14, .08), 0 18px 40px -12px rgba(28, 16, 14, .22);
  --sh-3: 0 30px 80px -20px rgba(20, 10, 8, .45);
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-o: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --wrap: 1280px; --gut: clamp(16px, 4vw, 40px); --hd-h: 76px; --stk: calc(var(--hd-h) + 20px);
  color-scheme: light;
}
.hd-hid :is(.proc__ms, .proc__m, .pdp__ms, .pdp__buy, .brp__ms, .faqp__s > div, .cpg__s > div, .cog__s > div, .acn) { --stk: 20px; } /* kökte değişken değiştirmek tüm sayfayı yeniden hesaplatıyordu */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 16px); }
body { margin: 0; font: 400 16px/1.6 var(--f-b); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* —— yerleşim —— */
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap--n { width: min(100% - 2 * var(--gut), 880px); margin-inline: auto; }
.wrap--w { width: min(100% - 2 * var(--gut), 1480px); margin-inline: auto; }
.sec { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.sec--t { padding-top: 0; }
.sec--s { padding-block: clamp(48px, 6vw, 84px); }
.dark { background: var(--coal); color: var(--on-dark); --line: var(--line-d); --mut: var(--on-dark-3); --ink-2: var(--on-dark-2); }
.cream2 { background: var(--bg-2); }
.paper { background: var(--paper); }
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.row { display: flex; align-items: center; gap: 12px; }
.row--w { flex-wrap: wrap; }
.sp { flex: 1; }
.c { text-align: center; }

/* —— yazı —— */
.dsp { font-family: var(--f-d); font-weight: 850; font-stretch: 118%; text-transform: uppercase; line-height: 1.02; letter-spacing: -.012em; }
.h1 { font-size: clamp(42px, 7.6vw, 112px); }
.h2 { font-size: clamp(34px, 5.2vw, 72px); }
.h3 { font-size: clamp(24px, 2.8vw, 36px); }
.h4 { font-family: var(--f-d); font-weight: 800; font-stretch: 112%; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.15; letter-spacing: -.005em; }
.srf { font-family: var(--f-s); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; font-stretch: 100%; }
.dsp .srf { font-size: 1.08em; line-height: .9; }
.red { color: var(--red); }
.dark .red { color: #ff4a4f; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.mut { color: var(--mut); }
.sm { font-size: 14px; }
.xs { font-size: 12.5px; }
.mono { font-family: var(--f-m); font-feature-settings: 'zero' 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1 var(--f-b); letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.dark .eyebrow { color: #ff6b6f; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--plain::before { display: none; }
.prose { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 800 semi-expanded clamp(24px, 2.6vw, 32px)/1.2 var(--f-d); text-transform: none; color: var(--ink); margin-top: 1.8em; letter-spacing: -.01em; }
.prose h3 { font: 800 semi-expanded 21px/1.3 var(--f-d); color: var(--ink); margin-top: 1.5em; }
.prose ul { padding-left: 1.2em; list-style: none; }
.prose ul li { position: relative; padding-left: 6px; }
.prose ul li + li { margin-top: .45em; }
.prose ul li::before { content: ""; position: absolute; left: -14px; top: .72em; width: 7px; height: 7px; border-radius: 2px; background: var(--red); transform: rotate(45deg); }
.prose blockquote { border-left: 3px solid var(--red); padding: 4px 0 4px 22px; font: italic 400 25px/1.4 var(--f-s); color: var(--ink); }
.prose a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }

/* —— simge —— */
.ic { width: 20px; height: 20px; flex: none; }
.ic--s { width: 16px; height: 16px; }
.ic--l { width: 26px; height: 26px; }
a.btn .ic, button.btn .ic { color: currentColor; margin: 0; }

/* —— logo —— */
.logo { display: block; width: var(--lw, 112px); aspect-ratio: 508 / 323; color: #fff; --lb: var(--red); }
.logo svg { width: 100%; height: 100%; overflow: visible; }
.logo--mono { --lb: transparent; }

/* —— düğme —— */
.btn { --bh: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--bh); padding: 0 24px; border-radius: 999px; font: 700 15.5px/1 var(--f-b); letter-spacing: .01em;
  background: var(--red); color: #fff; border: 1.5px solid transparent; position: relative; isolation: isolate; overflow: hidden; white-space: nowrap; transition: transform .35s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .35s var(--ease); -webkit-tap-highlight-color: transparent; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 70%); opacity: 0; transition: opacity .3s; }
.btn:hover::after { opacity: 1; }
.btn:hover { background: var(--red-2); box-shadow: 0 12px 28px -10px rgba(227, 30, 36, .65); }
.btn:active { transform: scale(.97); }
.btn--coal { background: var(--coal); }
.btn--coal:hover { background: #000; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.dark .btn--line, .btn--line.on-d { color: var(--on-dark); border-color: rgba(247, 239, 230, .3); }
.dark .btn--line:hover, .btn--line.on-d:hover { background: var(--on-dark); color: var(--coal); }
.btn--cream { background: var(--paper); color: var(--ink); }
.btn--cream:hover { background: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
.btn--ghost { background: transparent; color: inherit; padding: 0 14px; }
.btn--ghost:hover { background: rgba(127, 110, 100, .12); box-shadow: none; }
.btn--wa { background: #0b6b37; color: #fff; }
.btn--wa:hover { background: #08592d; box-shadow: 0 12px 28px -12px rgba(11, 107, 55, .7); }
.btn--leaf { background: var(--leaf); }
.btn--leaf:hover { background: #256a3c; box-shadow: 0 12px 28px -12px rgba(47, 125, 74, .6); }
.btn--s { --bh: 40px; padding: 0 16px; font-size: 14px; gap: 8px; }
.btn--xs { --bh: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn--l { --bh: 60px; padding: 0 30px; font-size: 17px; }
.btn--blk { width: 100%; }
.btn--ic { width: var(--bh); padding: 0; }
.btn[disabled], .btn.is-dis { opacity: .45; pointer-events: none; }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn.is-load { color: transparent !important; pointer-events: none; }
.btn.is-load::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn--line.is-load::before, .btn--cream.is-load::before { border-color: rgba(0, 0, 0, .15); border-top-color: var(--ink); }
.lnk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--red-ink); }
.dark .lnk { color: #ff6b6f; }
.lnk .ic { transition: transform .3s var(--ease); }
.lnk:hover .ic { transform: translateX(4px); }
.icb { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; color: inherit; transition: background .2s, transform .2s; position: relative; flex: none; }
.icb:hover { background: rgba(127, 110, 100, .14); }
.icb:active { transform: scale(.92); }
.icb--b { border: 1.5px solid var(--line-2); }
.icb .dot { position: absolute; top: 4px; right: 4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font: 800 11px/19px var(--f-b); text-align: center; box-shadow: 0 0 0 2px var(--paper); }

/* —— etiket, çip, rozet —— */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 12px/1 var(--f-b); letter-spacing: .02em; background: var(--red-soft); color: var(--red-ink); white-space: nowrap; }
.tag--coal { background: var(--coal); color: #fff; }
.tag--leaf { background: var(--leaf-soft); color: #1f5e35; }
.tag--lemon { background: #fff2c6; color: #7a5800; }
.tag--line { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
.tag--glass { background: rgba(20, 16, 17, .55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tag .ic { width: 14px; height: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--line-2); background: var(--paper); font: 600 14.5px/1 var(--f-b); color: var(--ink-2); transition: all .2s; white-space: nowrap; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .ic { width: 17px; height: 17px; }
.chip .n { font-size: 12px; opacity: .6; }
.heat { display: inline-flex; gap: 1px; color: var(--red); }
.heat .ic { width: 14px; height: 14px; }
.stars { display: inline-flex; gap: 2px; color: #f2a50c; }
.stars .ic { width: 15px; height: 15px; fill: currentColor; }

/* rozet biçimi (logodaki altıgen) — maske olarak */
.rozet { -webkit-mask: url(../img/rozet.svg) center / 100% 100% no-repeat; mask: url(../img/rozet.svg) center / 100% 100% no-repeat; }
.price { font: 800 semi-expanded 18px/1 var(--f-d); letter-spacing: -.01em; white-space: nowrap; }
.price s { font: 500 13px/1 var(--f-b); color: var(--mut); margin-right: 6px; }
.price--l { font-size: 26px; }

/* —— form —— */
.fld { display: grid; gap: 7px; }
.fld > label, .lbl { font: 600 13.5px/1.2 var(--f-b); color: var(--ink-2); }
.inp { width: 100%; height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--paper); font-size: 16px; transition: border-color .2s, box-shadow .2s; outline: 0; }
textarea.inp { height: auto; min-height: 104px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237a6d68' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.inp:hover { border-color: rgba(28, 22, 21, .35); }
.inp:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(227, 30, 36, .12); }
.inp.is-err { border-color: var(--red); background: #fff7f6; }
.inp::placeholder { color: #a99b95; }
.fld .err { color: var(--red-ink); font-size: 13px; }
.inpw { position: relative; }
.inpw > .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mut); pointer-events: none; }
.inpw > .inp { padding-left: 46px; }
.inpw > .end { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 560px) { .f2, .f3 { grid-template-columns: 1fr; } .f2.keep { grid-template-columns: 1fr 1fr; } }
.chk { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.chk input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.8px solid var(--line-2); background: var(--paper) center / 14px no-repeat; transition: all .15s; cursor: pointer; }
.chk input[type=radio] { border-radius: 50%; }
.chk input:checked { background-color: var(--red); border-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='3.4' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.chk input[type=radio]:checked { background-image: radial-gradient(circle, #fff 0 4px, transparent 5px); }
.chk a { color: var(--red-ink); text-decoration: underline; }
.sw { appearance: none; width: 46px; height: 28px; border-radius: 99px; background: rgba(127, 110, 100, .35); position: relative; cursor: pointer; transition: background .25s; flex: none; margin: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .3s var(--ease); }
.sw:checked { background: var(--leaf); }
.sw:checked::after { transform: translateX(18px); }
.seg { display: inline-flex; padding: 4px; border-radius: 99px; background: rgba(127, 110, 100, .14); gap: 2px; position: relative; }
.seg button { height: 40px; padding: 0 18px; border-radius: 99px; font: 700 14px/1 var(--f-b); color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; transition: color .2s, background .25s, box-shadow .25s; white-space: nowrap; }
.seg button.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.seg .ic { width: 17px; height: 17px; }
.qty { display: inline-flex; align-items: center; border-radius: 99px; border: 1.5px solid var(--line-2); height: 44px; background: var(--paper); }
.qty button { width: 42px; height: 100%; display: grid; place-items: center; border-radius: 99px; transition: background .2s; }
.qty button:hover { background: rgba(127, 110, 100, .14); }
.qty .ic { width: 17px; height: 17px; }
.qty output { min-width: 26px; text-align: center; font: 800 16px/1 var(--f-b); }
.qty--s { height: 36px; }
.qty--s button { width: 34px; }
.otp { display: flex; gap: 10px; justify-content: center; }
.otp input { width: 52px; height: 62px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--paper); text-align: center; font: 800 24px/1 var(--f-m); outline: 0; transition: border-color .2s, transform .2s; }
.otp input:focus { border-color: var(--red); transform: translateY(-2px); }
@media (max-width: 400px) { .otp { gap: 6px; } .otp input { width: 44px; height: 56px; font-size: 21px; } }

/* —— kart —— */
.card { background: var(--paper); border-radius: var(--r-l); border: 1px solid var(--line); }
.card--p { padding: clamp(20px, 2.6vw, 32px); }
.dark .card { background: var(--coal-2); }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.ph { position: relative; overflow: hidden; background: var(--bg-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ratio-1 { aspect-ratio: 1; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-34 { aspect-ratio: 3 / 4; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 15px/1 var(--f-b); background: var(--coal); color: #fff; flex: none; letter-spacing: .02em; }
.avatar--red { background: var(--red); }
.avatar--s { width: 34px; height: 34px; font-size: 12px; }
.empty { text-align: center; padding: 48px 20px; color: var(--mut); display: grid; justify-items: center; gap: 12px; }
.empty .ic { width: 44px; height: 44px; color: var(--line-2); stroke-width: 1.4; }
.skel { background: linear-gradient(90deg, rgba(127, 110, 100, .1) 0, rgba(127, 110, 100, .2) 50%, rgba(127, 110, 100, .1) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }

/* —— katmanlar: perde, sheet, drawer, modal, toast —— */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(16, 10, 9, .55); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.scrim.is-on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--paper); display: flex; flex-direction: column; transform: translateX(104%); transition: transform .5s var(--ease-o); box-shadow: var(--sh-3); }
.drawer.is-on { transform: none; }
.drawer--l { left: 0; right: auto; transform: translateX(-104%); }
.drawer__hd { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px 24px; border-bottom: 1px solid var(--line); }
.drawer__bd { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 18px 24px; }
.drawer__ft { padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper-2); }
.modal { position: fixed; z-index: 95; inset: 0; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.modal__box { width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow: auto; background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--sh-3); opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .3s, transform .45s var(--ease-o); pointer-events: none; overscroll-behavior: contain; }
.modal.is-on .modal__box { opacity: 1; transform: none; pointer-events: auto; }
.modal__x { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(255, 252, 247, .92); box-shadow: var(--sh-1); }
@media (max-width: 720px) {
  .modal--sheet { padding: 0; align-items: end; }
  .modal--sheet .modal__box { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; transform: translateY(100%); transition: transform .5s var(--ease-o); opacity: 1; }
  .modal--sheet.is-on .modal__box { transform: translateY(var(--drag, 0px)); }
  .modal--sheet .modal__box::before { content: ""; position: sticky; top: 0; display: block; height: 0; }
  .grab { position: sticky; top: 0; z-index: 4; height: 22px; display: grid; place-items: center; margin-bottom: -22px; touch-action: none; }
  .grab::after { content: ""; width: 42px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
}
@media (min-width: 721px) { .grab { display: none; } }
.toasts { position: fixed; z-index: 120; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 10px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px; background: var(--coal); color: #fff; box-shadow: var(--sh-3); font-size: 14.5px; line-height: 1.35; pointer-events: auto; animation: toastIn .5s var(--ease-o) both; }
.toast.is-out { animation: toastOut .35s var(--ease) both; }
.toast__ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--red); flex: none; }
.toast__ic img { width: 36px; height: 36px; border-radius: 12px; object-fit: cover; }
.toast--ok .toast__ic { background: var(--leaf); }
.toast b { display: block; font-weight: 700; }
.toast .btn { margin-left: auto; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
.live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); flex: none; }
.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 1.8s var(--ease) infinite; }
.live--red { background: var(--red); }
.live--amber { background: #f59e0b; }

/* —— sekme —— */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; overflow-y: hidden; touch-action: pan-x pan-y; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { position: relative; padding: 14px 16px; font: 700 15px/1 var(--f-b); color: var(--mut); white-space: nowrap; transition: color .2s; display: inline-flex; gap: 8px; align-items: center; }
.tabs .is-on { color: var(--ink); }
.tabs .is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--red); }

/* —— hareket —— */
[data-r] { transition: opacity .9s var(--ease-o), transform 1.1s var(--ease-o); transition-delay: var(--d, 0ms); }
.js [data-r]:not(.is-in) { opacity: 0; transform: translateY(34px); }
.js [data-r=fade]:not(.is-in) { transform: none; }
.js [data-r=scale]:not(.is-in) { transform: scale(.94); }
.js [data-r=left]:not(.is-in) { transform: translateX(-40px); }
.js [data-r=right]:not(.is-in) { transform: translateX(40px); }
[data-r=clip] { transform: none !important; }
[data-r=clip] > img, [data-r=clip] > .clipin { transition: clip-path 1.4s var(--ease-o), transform 1.8s var(--ease-o); transition-delay: var(--d, 0ms); }
.js [data-r=clip]:not(.is-in) > img, .js [data-r=clip]:not(.is-in) > .clipin { clip-path: inset(100% 0 0 0); transform: scale(1.15); }
.js [data-r=clip]:not(.is-in) { opacity: 1; }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .06em .1em; margin: -.14em -.06em -.1em; }
[data-split] .wi { display: inline-block; transition: transform 1.1s var(--ease-o); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.js [data-split]:not(.is-in) .wi { transform: translateY(112%) rotate(4deg); }
[data-split].is-done .w { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-r], .js [data-split] .wi { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
.dsp { overflow-wrap: break-word; }
@media (max-width: 560px) { .dsp { font-stretch: 106%; } .h2 { font-size: clamp(28px, 8.6vw, 40px); } .h3 { font-size: clamp(22px, 6.6vw, 28px); } }
/* harita altlığı: OpenStreetMap, markaya uygun ton */
.map-light .leaflet-tile-pane { filter: grayscale(.92) sepia(.14) brightness(1.03) contrast(.94); }
.map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(.9) brightness(.78) contrast(.9); }
.map-dark { background: #1a1516 !important; }
.ratio-43 { aspect-ratio: 4 / 3; }
/* 2-site.css — kurumsal site: başlık, mobil menü, alt bilgi, iletişim düğmesi, hero, şeritler, ana sayfa bölümleri, iç sayfalar. */
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--red); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top .2s; }
.skip:focus { top: 12px; }
.grain { position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }

/* —— başlık —— */
.hd { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: 12px 0; transition: transform .5s var(--ease-o), background .35s, box-shadow .35s, padding .35s; color: var(--ink); }
.hd__in { display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 10px 0 16px; border-radius: 999px; transition: background .35s, box-shadow .35s, border-color .35s; border: 1px solid transparent; }
.hd.is-solid .hd__in, body:not(.has-dark-hd) .hd .hd__in { background: rgba(255, 252, 247, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 30px -14px rgba(30, 16, 14, .3); border-color: rgba(28, 22, 21, .06); }
.hd--dark:not(.is-solid) { color: var(--on-dark); }
.hd--dark:not(.is-solid) .hd__in { background: rgba(20, 16, 17, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .08); }
.hd-hid .hd { transform: translateY(-110%); }
.nav-on .hd { transform: none; }
.hd__logo .logo { --lw: 74px; transition: transform .4s var(--ease); }
.hd__logo:hover .logo { transform: rotate(-4deg) scale(1.04); }
.hd__nav { display: flex; gap: 2px; margin-inline: auto; }
.hd__nav a { position: relative; padding: 10px 14px; border-radius: 99px; font: 650 15px/1 var(--f-b); opacity: .82; transition: opacity .2s, background .2s; }
.hd__nav a:hover { opacity: 1; background: rgba(127, 110, 100, .12); }
.hd__nav a[aria-current] { opacity: 1; }
.hd__nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--red); }
.hd__act { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hd__nav + .hd__act { margin-left: 0; }
.hd__cta { margin-left: 6px; }
.hd__burger { display: none; }
.hd__acc { position: relative; }
.hd__in-dot { position: absolute; right: 9px; bottom: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 2px var(--paper); transform: scale(0); transition: transform .3s var(--ease); }
.hd__acc.is-in .hd__in-dot { transform: scale(1); }
.hd--dark:not(.is-solid) .icb .dot { box-shadow: 0 0 0 2px var(--coal); }
@media (max-width: 1180px) { .hd__nav a { padding: 10px 10px; font-size: 14.5px; } .hd__qr { display: none; } }
@media (max-width: 1020px) { .hd__nav { display: none; } .hd__burger { display: inline-grid; } .hd__act { margin-left: auto; } }
@media (max-width: 560px) { .hd { padding: 8px 0; } .hd__in { height: 56px; padding: 0 4px 0 12px; gap: 6px; } .hd__logo .logo { --lw: 64px; } .hd__cta { display: none; } .hd__act .icb { width: 42px; height: 42px; } }

/* —— mobil menü —— */
.mnav { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; padding: 14px var(--gut) calc(20px + env(safe-area-inset-bottom)); overflow: auto; clip-path: circle(0 at calc(100% - 40px) 40px); transition: clip-path .7s var(--ease-io); visibility: hidden; }
.nav-on .mnav { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; }
.nav-on { overflow: hidden; }
.mnav__top { display: flex; align-items: center; height: 58px; }
.mnav__logo { --lw: 70px; }
.mnav__l { display: grid; margin: 28px 0 24px; }
.mnav__l a { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-d); font: 800 expanded clamp(26px, 7vw, 40px)/1.05 var(--f-d); text-transform: uppercase; letter-spacing: -.01em; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease-o), color .2s; }
.mnav__l a small { font-size: 12px; color: var(--on-dark-3); width: 22px; }
.mnav__l a .ic { margin-left: auto; color: var(--red); width: 24px; height: 24px; }
.mnav__l a:hover { color: #ff5a5f; }
.nav-on .mnav__l a { opacity: 1; transform: none; }
.nav-on .mnav__l a:nth-child(2) { transition-delay: .05s; } .nav-on .mnav__l a:nth-child(3) { transition-delay: .1s; } .nav-on .mnav__l a:nth-child(4) { transition-delay: .15s; } .nav-on .mnav__l a:nth-child(5) { transition-delay: .2s; } .nav-on .mnav__l a:nth-child(6) { transition-delay: .25s; } .nav-on .mnav__l a:nth-child(7) { transition-delay: .3s; }
.mnav__q { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.mnav__q a { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: var(--coal-2); border: 1px solid var(--line-d); font-weight: 650; font-size: 14.5px; }
.mnav__q .ic { color: #ff5a5f; }
.mnav__c { display: grid; gap: 10px; margin-top: auto; }

/* —— iletişim düğmesi (sol alt, yukarı açılır) —— */
.cfab { position: fixed; z-index: 55; left: max(16px, env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); pointer-events: none; transition: opacity .4s, transform .5s var(--ease-o); }
html:not(.is-sc) .cfab { opacity: 0; transform: translateY(24px); visibility: hidden; }
.cfab__btn { pointer-events: auto; width: 58px; height: 58px; border-radius: 50%; background: var(--coal); color: #fff; display: grid; place-items: center; position: relative; box-shadow: 0 14px 30px -10px rgba(20, 10, 8, .55); transition: transform .35s var(--ease), background .3s; }
.cfab__btn::before, .cfab__btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); animation: cfab 3.2s var(--ease) infinite; opacity: 0; }
.cfab__btn::after { animation-delay: 1.6s; }
@keyframes cfab { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.cfab__btn:hover { transform: scale(1.06); background: var(--red); }
.cfab__btn .ic { position: absolute; width: 24px; height: 24px; transition: transform .4s var(--ease), opacity .3s; }
.cfab__c { opacity: 0; transform: rotate(-90deg) scale(.5); }
.cfab.is-on .cfab__btn { background: var(--red); }
.cfab.is-on .cfab__btn::before, .cfab.is-on .cfab__btn::after { animation: none; }
.cfab.is-on .cfab__o { opacity: 0; transform: rotate(90deg) scale(.5); }
.cfab.is-on .cfab__c { opacity: 1; transform: none; }
.cfab__l { position: absolute; left: 0; bottom: 70px; display: grid; gap: 8px; width: max-content; }
.cfab__l li { opacity: 0; transform: translateY(14px) scale(.96); transform-origin: left bottom; transition: opacity .3s, transform .45s var(--ease-o); }
.cfab.is-on .cfab__l li { opacity: 1; transform: none; pointer-events: auto; }
.cfab.is-on .cfab__l li:nth-last-child(2) { transition-delay: .04s; } .cfab.is-on .cfab__l li:nth-last-child(3) { transition-delay: .08s; } .cfab.is-on .cfab__l li:nth-last-child(4) { transition-delay: .12s; }
.cfab__l a { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 99px; background: var(--paper); box-shadow: var(--sh-2); color: var(--ink); transition: transform .25s var(--ease); }
.cfab__l a:hover { transform: translateX(4px); }
.cfab__l b { display: block; font-size: 14.5px; line-height: 1.2; }
.cfab__l small { color: var(--mut); font-size: 12.5px; }
.cfab__i { width: 42px; height: 42px; border-radius: 50%; background: var(--coal); color: #fff; display: grid; place-items: center; flex: none; }
.cfab__i--wa { background: #0b6b37; }
.pg-order .cfab, .pg-track .cfab { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 1101px) { .pg-order .cfab { bottom: 18px; } }

/* —— alt bilgi —— */
.ft { position: relative; overflow: hidden; padding-top: clamp(64px, 9vw, 120px); }
.ft__cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: clamp(48px, 7vw, 90px); }
.ft__mq { overflow: hidden; border-block: 1px solid var(--line-d); padding: 18px 0; cursor: grab; touch-action: pan-y; user-select: none; }
.ft__mqt { display: flex; align-items: center; gap: 28px; width: max-content; will-change: transform; }
.ft__mqt span { font: 900 expanded clamp(48px, 9vw, 128px)/1 var(--f-d); color: transparent; -webkit-text-stroke: 1.5px rgba(247, 239, 230, .28); white-space: nowrap; letter-spacing: -.01em; }
.ft__mqt i { width: 22px; height: 22px; border-radius: 4px; background: var(--red); transform: rotate(45deg); flex: none; }
.ft__g { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr; gap: 36px; padding-block: 64px 48px; }
.ft__logo { --lw: 120px; margin-bottom: 18px; }
.ft__b p { color: var(--on-dark-2); font-size: 15px; max-width: 34ch; }
.ft__so { display: flex; gap: 8px; margin-top: 20px; }
.ft__so .icb { border-color: var(--line-d); }
.ft__so .icb:hover { background: var(--red); border-color: var(--red); }
.ft__h { font: 700 12.5px/1 var(--f-b); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 18px; }
.ft__col ul { display: grid; gap: 11px; }
.ft__col a { color: var(--on-dark-2); font-size: 15px; transition: color .2s; }
.ft__col a:hover { color: #fff; }
.ft__ct { display: grid; gap: 12px; align-content: start; }
.ft__ct > a { display: flex; align-items: center; gap: 10px; }
.ft__ct .ic { color: #ff5a5f; }
.ft__hr { display: flex; gap: 10px; color: var(--on-dark-2); font-size: 15px; margin-top: 6px; }
.ft__bt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: 24px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-d); font-size: 13.5px; color: var(--on-dark-3); }
.ft__bt nav { display: flex; flex-wrap: wrap; gap: 18px; }
.ft__bt a:hover { color: #fff; }
.ft__by { margin-left: auto; color: var(--on-dark-2); font-weight: 650; }
@media (max-width: 1100px) { .ft__g { grid-template-columns: repeat(3, 1fr); } .ft__b, .ft__ct { grid-column: span 3; } }
@media (max-width: 620px) { .ft__g { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .ft__b, .ft__ct { grid-column: 1 / -1; } .ft__bt { padding-left: 74px; } .ft__by { margin-left: 0; } }

/* —— bölüm başlığı —— */
.shd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: clamp(28px, 4vw, 52px); }
.shd .eyebrow { margin-bottom: 16px; }
.shd__a { gap: 18px; }
.railnav { display: flex; gap: 8px; }
@media (max-width: 720px) { .railnav { display: none; } }

/* —— hero —— */
.hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: center; padding: calc(var(--hd-h) + 40px) 0 90px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(1200px 700px at 78% 45%, #3a1514 0%, rgba(20, 16, 17, 0) 60%), radial-gradient(800px 600px at 10% 110%, #2b1210 0, transparent 60%), var(--coal); }
.hero__glow { position: absolute; width: 900px; height: 900px; right: -10%; top: 50%; margin-top: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 44, .28) 0, rgba(227, 30, 36, .16) 30%, transparent 64%); animation: glow 7s var(--ease-io) infinite alternate; }
@keyframes glow { to { transform: scale(1.12) translateX(-30px); opacity: .8; } }
.hero__rings { position: absolute; right: 22%; top: 50%; width: 0; height: 0; }
.hero__rings i { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px; border-radius: 50%; border: 1px solid rgba(255, 120, 80, .22); animation: ring 7.5s linear infinite; opacity: 0; }
.hero__rings i:nth-child(2) { animation-delay: 1.5s; } .hero__rings i:nth-child(3) { animation-delay: 3s; } .hero__rings i:nth-child(4) { animation-delay: 4.5s; } .hero__rings i:nth-child(5) { animation-delay: 6s; }
@keyframes ring { 0% { transform: scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.hero__sparks i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffb070; box-shadow: 0 0 10px 2px rgba(255, 140, 60, .6); opacity: 0; animation: spark 6s linear infinite; }
.hero__sparks i:nth-child(1) { left: 52%; animation-delay: 0s; } .hero__sparks i:nth-child(2) { left: 58%; animation-delay: .8s; animation-duration: 7s; } .hero__sparks i:nth-child(3) { left: 64%; animation-delay: 1.6s; } .hero__sparks i:nth-child(4) { left: 70%; animation-delay: 2.1s; animation-duration: 5.4s; } .hero__sparks i:nth-child(5) { left: 76%; animation-delay: 3s; } .hero__sparks i:nth-child(6) { left: 82%; animation-delay: .4s; animation-duration: 8s; } .hero__sparks i:nth-child(7) { left: 88%; animation-delay: 2.6s; } .hero__sparks i:nth-child(8) { left: 61%; animation-delay: 4s; width: 3px; height: 3px; } .hero__sparks i:nth-child(9) { left: 73%; animation-delay: 4.6s; width: 3px; height: 3px; } .hero__sparks i:nth-child(10) { left: 85%; animation-delay: 5.2s; } .hero__sparks i:nth-child(11) { left: 55%; animation-delay: 3.5s; animation-duration: 6.6s; } .hero__sparks i:nth-child(12) { left: 67%; animation-delay: 5.6s; } .hero__sparks i:nth-child(13) { left: 79%; animation-delay: 1.2s; width: 2px; height: 2px; } .hero__sparks i:nth-child(14) { left: 91%; animation-delay: 3.9s; }
@keyframes spark { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(-60px, -92vh); opacity: 0; } }
.hero__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.hero__live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: var(--on-dark-2); margin-bottom: 28px; transition: background .2s; }
.hero__live:hover { background: rgba(255, 255, 255, .1); }
.hero__live b { color: #fff; font-variant-numeric: tabular-nums; }
.hero__t { font-size: clamp(46px, 5.8vw, 96px); }
.hero__t .srf { display: inline-block; }
.hero__l { margin-top: 26px; color: var(--on-dark-2); max-width: 52ch; }
.hero__cta { margin-top: 34px; gap: 12px; }
.hero__facts { display: flex; gap: clamp(22px, 3.4vw, 48px); margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line-d); max-width: 560px; }
.hero__facts b { display: flex; align-items: baseline; gap: 3px; font: 850 expanded clamp(28px, 3vw, 40px)/1 var(--f-d); color: #fff; }
.hero__facts small { font-size: .45em; color: #ff6b6f; font-weight: 800; }
.hero__facts li > span { font-size: 13.5px; color: var(--on-dark-3); }
.hero__vis { position: relative; }
.hero__stage { position: relative; aspect-ratio: 508 / 323; width: 100%; max-width: 900px; margin-left: auto; }
.hero__badge { position: absolute; inset: 0; background: var(--coal-3); }
.hs__s { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hs__s img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s linear; }
.hs__s.is-on { opacity: 1; }
.hs__s.is-on img { transform: scale(1.01); }
.hero__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 45%, transparent 60%); transform: translateX(-100%); animation: shine 6s var(--ease-io) infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.hero__ring { position: absolute; width: 150px; height: 150px; left: -40px; top: -40px; animation: spin 24s linear infinite; }
.hero__ring text { font: 800 13px var(--f-d); letter-spacing: .06em; fill: var(--on-dark); }
.hero__card { --mut: #7a6d68; --line: rgba(28, 22, 21, .12); position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 252, 247, .94); color: var(--ink); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: float 6s var(--ease-io) infinite alternate; }
@keyframes float { to { transform: translateY(-12px); } }
.hero__card--a { left: -28px; bottom: 6%; width: 270px; }
.hero__card--b { right: 4%; top: -18px; animation-delay: -3s; padding: 8px 10px 8px 8px; }
.hero__card--b img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.hero__card--b b { display: block; font-size: 14px; }
.hcard__i { width: 42px; height: 42px; border-radius: 14px; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.hero__card--a > div { flex: 1; min-width: 0; }
.hero__card--a small { color: var(--mut); font-size: 11.5px; }
.hero__card--a b { display: block; font-size: 14.5px; line-height: 1.25; }
.hcard__bar { height: 5px; border-radius: 9px; background: rgba(127, 110, 100, .2); margin-top: 6px; overflow: hidden; }
.hcard__bar i { display: block; height: 100%; width: 40%; border-radius: 9px; background: linear-gradient(90deg, var(--red), var(--ember)); transition: width .8s var(--ease); }
.hcard__eta { text-align: center; line-height: 1; }
.hcard__eta b { display: block; font: 850 expanded 26px/1 var(--f-d); }
.hcard__eta small { font-size: 11px; color: var(--mut); }
.hcard__add { width: 36px; height: 36px; border-radius: 50%; background: var(--coal); color: #fff; display: grid; place-items: center; margin-left: 6px; transition: transform .2s, background .2s; }
.hcard__add:hover { background: var(--red); transform: rotate(90deg); }
.hs__dots { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); display: flex; gap: 8px; }
.hs__dots button { width: 44px; height: 24px; display: grid; place-items: center; }
.hs__dots i { display: block; width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); position: relative; overflow: hidden; }
.hs__dots i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.hs__dots .is-on i::after { animation: fill var(--hs, 5.5s) linear forwards; }
.hs__dots .is-past i::after { transform: none; }
@keyframes fill { to { transform: scaleX(1); } }
.hero__down { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); }
.hero__down i { width: 1px; height: 38px; background: linear-gradient(var(--on-dark-3), transparent); position: relative; overflow: hidden; }
.hero__down i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: down 2s var(--ease-io) infinite; }
@keyframes down { to { top: 100%; } }
@media (max-width: 980px) {
  .hero { min-height: 0; padding: calc(var(--hd-h) + 28px) 0 92px; }
  .hero__in { grid-template-columns: 1fr; gap: 56px; }
  .hero__stage { margin: 0 auto; }
  .hero__rings { right: 50%; top: 72%; }
  .hero__down { display: none; }
}
@media (max-width: 560px) {
  .hero__t { font-size: clamp(40px, 12.4vw, 60px); }
  .hero__facts { gap: 18px; margin-top: 36px; }
  .hero__facts li > span { font-size: 12px; }
  .hero__ring { width: 104px; height: 104px; left: -10px; top: -34px; }
  .hero__card--a { left: 0; bottom: -40px; width: 236px; padding: 10px 12px; }
  .hero__card--b { right: 0; top: -30px; }
  .hero__card--b > div { display: none; }
  .hs__dots { bottom: auto; top: calc(100% + 54px); }
  .hero__cta .btn { width: 100%; }
  .hero__vis { margin-bottom: 40px; }
}

/* —— kırmızı şerit —— */
.ribw { overflow: clip; padding-block: 26px; margin-block: -42px -26px; position: relative; z-index: 2; }
.ribbon { background: var(--red); color: #fff; overflow: hidden; padding: 18px 0; transform: rotate(-1.4deg) scaleX(1.04); position: relative; box-shadow: 0 18px 40px -18px rgba(227, 30, 36, .7); cursor: grab; touch-action: pan-y; user-select: none; }
.ribbon__t { display: flex; align-items: center; gap: 26px; width: max-content; will-change: transform; }
.ribbon span { font: 850 expanded clamp(20px, 2.4vw, 30px)/1 var(--f-d); text-transform: uppercase; white-space: nowrap; }
.ribbon .ic { width: 22px; height: 22px; opacity: .8; }

/* —— ürün kartı —— */
.pc { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-l); border: 1px solid var(--line); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.pc:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.pc__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.pc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-o); }
.pc:hover .pc__img img { transform: scale(1.07); }
.pc__tag { position: absolute; left: 12px; top: 12px; }
.pc__off { position: absolute; left: 12px; bottom: 12px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--red); color: #fff; font: 800 13px/28px var(--f-b); }
.pc__fav { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 252, 247, .92); display: grid; place-items: center; color: var(--ink); z-index: 2; transition: transform .2s, color .2s; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.pc__fav:hover { transform: scale(1.08); }
.pc__fav.is-on, [data-fav].is-on { color: var(--red); }
.pc__fav.is-on .ic, [data-fav].is-on .ic { fill: currentColor; }
.pc__bd { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 16px; gap: 8px; }
.pc__t { display: flex; align-items: center; gap: 8px; font: 800 semi-expanded 18px/1.2 var(--f-d); letter-spacing: -.005em; }
.pc__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc__d { font-size: 14px; color: var(--mut); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc__ft { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.pc__k { font-size: 12px; color: var(--mut); }
.pc__add { position: relative; z-index: 2; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--coal); color: #fff; display: grid; place-items: center; transition: transform .35s var(--ease), background .2s; }
.pc__add:hover { background: var(--red); transform: rotate(90deg) scale(1.05); }
.pc__add:active { transform: scale(.9); }
.pc .price s { display: block; margin: 0 0 3px; }

/* —— raylar —— */
.rail { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; cursor: grab; padding: 10px 0 30px; margin-bottom: -20px; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; }
.rail.is-drag a, .rail.is-drag button { pointer-events: none; }
.rail__in { display: flex; gap: 20px; width: max-content; padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2)); }
.pc--rail { width: clamp(290px, 30vw, 400px); flex: none; }
.rail__more { width: 250px; flex: none; border-radius: var(--r-l); background: var(--coal); color: var(--on-dark); display: grid; align-content: center; justify-items: start; gap: 10px; padding: 28px; transition: background .3s; }
.rail__more:hover { background: var(--red); }
.rail__more > span { width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; margin-bottom: 10px; }
.rail__more small { color: var(--on-dark-3); }

/* —— süreç (yapışkan görsel) —— */
.proc__g { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); }
.proc__m { align-self: stretch; }
.proc__ms { position: sticky; top: var(--stk); transition: top .5s var(--ease-o); aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: var(--coal); }
.proc__f { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.proc__f img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease-o); }
.proc__f.is-on { opacity: 1; }
.proc__f.is-on img { transform: none; }
.proc__t { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(20, 16, 17, .62); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.proc__bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.proc__bar i { display: block; height: 100%; width: 25%; background: var(--red); border-radius: 4px; transition: width .6s var(--ease); }
.proc__l { display: grid; }
.proc__s { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: clamp(36px, 8vh, 90px) 0; border-bottom: 1px solid var(--line); opacity: .32; transition: opacity .5s; }
.proc__s:first-child { padding-top: 10px; }
.proc__s.is-on { opacity: 1; }
.proc__n { font-size: 14px; color: var(--red-ink); padding-top: 8px; }
.proc__s h3 { margin-bottom: 14px; }
.proc__s p { color: var(--ink-2); margin-bottom: 16px; max-width: 44ch; }
@media (max-width: 860px) {
  .proc__g { grid-template-columns: 1fr; }
  .proc__m { position: sticky; top: calc(var(--stk) - 6px); z-index: 2; transition: top .5s var(--ease-o); }
  .proc__ms { position: relative; top: 0; aspect-ratio: 16 / 10; }
  .proc__s { opacity: .45; padding: 40px 0; grid-template-columns: 44px 1fr; }
}

/* —— ekosistem —— */
.eco { overflow: hidden; }
.eco__bg { position: absolute; inset: 0; background: radial-gradient(900px 600px at 20% 30%, rgba(227, 30, 36, .16), transparent 60%); }
.eco__g { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.phone { width: min(330px, 100%); margin: 0 auto; aspect-ratio: 9 / 18.6; border-radius: 46px; padding: 11px; background: linear-gradient(160deg, #3a3132, #120e0f); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .08), 0 50px 100px -30px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(255, 255, 255, .04); position: relative; }
.phone::before { content: ""; position: absolute; left: 50%; top: 20px; width: 90px; height: 26px; margin-left: -45px; border-radius: 20px; background: #050404; z-index: 3; }
.phone__sc { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #efe8dc; color: var(--ink); display: flex; flex-direction: column; }
.ecs__top { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px 6px; font-size: 12px; font-weight: 700; position: relative; z-index: 2; }
.ecs__top span:last-child { display: flex; gap: 4px; }
.ecs__top .ic { width: 14px; height: 14px; }
.ecs__map { position: relative; flex: 1; background: linear-gradient(0deg, #e9e1d3 0 0) , repeating-linear-gradient(0deg, transparent 0 38px, rgba(0, 0, 0, .05) 38px 40px), repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .05) 46px 48px); background-blend-mode: multiply; overflow: hidden; }
.ecs__map::before { content: ""; position: absolute; left: -20%; top: 54%; width: 140%; height: 34px; background: #cfe3ef; transform: rotate(-16deg); }
.ecs__map svg { position: absolute; inset: 10% 4% 20% 4%; width: 92%; height: 70%; overflow: visible; }
.ecs__rd { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; }
.ecs__rt { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 8; }
.ecs__a, .ecs__b, .ecs__k { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.ecs__a { left: 10%; top: 75%; background: var(--coal); }
.ecs__b { left: 95%; top: 18%; background: var(--leaf); margin-left: -30px; }
.ecs__k { left: 10%; top: 75%; background: var(--red); border: 3px solid #fff; z-index: 2; transition: left 1s linear, top 1s linear; }
.ecs__a .ic, .ecs__b .ic, .ecs__k .ic { width: 18px; height: 18px; }
.ecs__card { margin: -24px 10px 10px; position: relative; z-index: 3; background: var(--paper); border-radius: 24px; padding: 16px; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .2); }
.ecs__st { font: 800 semi-expanded 16px/1.2 var(--f-d); }
.ecs__eta { font-size: 13px; background: var(--coal); color: #fff; padding: 4px 9px; border-radius: 99px; }
.ecs__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 12px 0 14px; }
.ecs__steps li { height: 5px; border-radius: 5px; background: rgba(127, 110, 100, .22); transition: background .5s; }
.ecs__steps li.is-on { background: var(--red); }
.ecs__cr { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.ecs__cr b { display: block; font-size: 14px; line-height: 1.2; }
.ecs__cr small { font-size: 11.5px; color: var(--mut); }
.ecs__pin { text-align: center; background: var(--red-soft); color: var(--red-ink); padding: 5px 10px; border-radius: 12px; line-height: 1.1; }
.ecs__pin small { display: block; font-size: 10px; }
.eco__f { display: grid; gap: 12px; counter-reset: f; }
.flow { display: grid; grid-template-columns: 36px 52px 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: var(--r-l); border: 1px solid var(--line-d); background: rgba(255, 255, 255, .02); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.flow:hover { background: rgba(255, 255, 255, .05); border-color: rgba(227, 30, 36, .5); transform: translateX(6px); }
.flow__n { font-size: 13px; color: var(--on-dark-3); padding-top: 4px; }
.flow__i { width: 52px; height: 52px; border-radius: 16px; background: var(--red); color: #fff; display: grid; place-items: center; }
.flow h3 { margin-bottom: 6px; }
.flow p { color: var(--on-dark-2); font-size: 15px; margin-bottom: 10px; }
.eco__mods { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(32px, 5vw, 56px); }
.eco__mods a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px; border: 1px solid var(--line-d); font-weight: 650; font-size: 14.5px; transition: background .2s, border-color .2s; }
.eco__mods a:hover { background: var(--red); border-color: var(--red); }
.eco__mods .ic { width: 18px; height: 18px; color: #ff6b6f; }
.eco__mods a:hover .ic { color: #fff; }
@media (max-width: 900px) { .eco__g { grid-template-columns: 1fr; } .eco__ph { order: 2; } }
@media (max-width: 480px) { .flow { grid-template-columns: 44px 1fr; padding: 18px; } .flow__n { display: none; } .flow__i { width: 44px; height: 44px; border-radius: 14px; } }

/* —— QR bölümü —— */
.qrs__g { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.qrs__t .lead { margin-bottom: 28px; }
.ticks { display: grid; gap: 12px; margin-bottom: 32px; }
.ticks li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.ticks li > .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--red-soft); color: var(--red-ink); flex: none; }
.dark .ticks li > .ic { background: rgba(227, 30, 36, .18); color: #ff6b6f; }
.ticks--s li { font-weight: 500; font-size: 15px; gap: 10px; }
.ticks--s li > .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--red); color: #fff; }
.qrs__v { position: relative; min-height: 520px; display: grid; place-items: center; }
.qrs__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl); }
.tent { position: relative; z-index: 2; width: 290px; padding: 12px; border-radius: 30px; background: var(--red); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .7); transform: rotate(-4deg); transition: transform .6s var(--ease); }
.tent:hover { transform: rotate(0) scale(1.02); }
.tent__in { background: var(--paper); border-radius: 22px; padding: 22px 22px 20px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.tent__logo { --lw: 110px; }
.tent__m { font-size: 13px; letter-spacing: .3em; color: var(--red-ink); font-weight: 700; }
.tent__qr { width: 180px; height: 180px; padding: 10px; background: #fff; border-radius: 14px; border: 1.5px dashed var(--line-2); display: grid; place-items: center; }
.tent__qr svg, .tent__qr img { width: 100%; height: 100%; }
.tent b { font: 800 semi-expanded 18px/1.2 var(--f-d); }
.tent small { color: var(--mut); font-size: 12.5px; }
@media (max-width: 900px) { .qrs__g { grid-template-columns: 1fr; } .qrs__v { min-height: 460px; } }

/* —— kampanya kartları —— */
.camp__g { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.cc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate; transition: transform .5s var(--ease); }
.cc:hover { transform: translateY(-6px); }
.cc__img { position: absolute; inset: 0; z-index: -1; }
.cc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-o); }
.cc:hover .cc__img img { transform: scale(1.06); }
.cc__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 17, .05) 20%, rgba(20, 16, 17, .88) 100%); }
.cc--red .cc__img::after { background: linear-gradient(180deg, rgba(227, 30, 36, .1) 10%, rgba(160, 12, 18, .94) 100%); }
.cc--cream { color: var(--ink); }
.cc--cream .cc__img::after { background: linear-gradient(180deg, rgba(246, 240, 230, .0) 10%, rgba(246, 240, 230, .97) 72%); }
.cc__b { padding: 26px; display: grid; gap: 10px; justify-items: start; }
.cc__b p { opacity: .86; font-size: 15px; max-width: 36ch; }
.cc .lnk { color: inherit; }
.cpr { display: flex; gap: 12px; margin-top: 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x pan-y; padding: 4px; margin-inline: -4px; }
.cpr::-webkit-scrollbar { display: none; }
.cpk { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1.5px dashed var(--line-2); background: var(--paper); flex: none; text-align: left; transition: border-color .2s, transform .2s; }
.cpk:hover { border-color: var(--red); transform: translateY(-2px); }
.cpk__c { padding: 9px 12px; border-radius: 12px; background: var(--coal); color: #fff; font-size: 14px; font-weight: 700; }
.cpk b { display: block; font-size: 14.5px; }
.cpk small { color: var(--mut); font-size: 12.5px; }
@media (max-width: 980px) { .camp__g { grid-template-columns: 1fr 1fr; } .camp__g > :first-child { grid-column: 1 / -1; min-height: 380px; } }
@media (max-width: 620px) { .camp__g { grid-template-columns: 1fr; } .cc { min-height: 360px; } }

/* —— Mersin hikâyesi —— */
.story__g { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.story__img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story__t .lead { margin-bottom: 32px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stats b { display: block; font: 850 expanded clamp(30px, 3.6vw, 48px)/1 var(--f-d); color: var(--red-ink); }
.stats span { font-size: 13.5px; color: var(--mut); }
@media (max-width: 900px) { .story__g { grid-template-columns: 1fr; } .story__img { aspect-ratio: 16 / 11; } }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } }

/* —— şube kartları —— */
.brs__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.brc { display: grid; gap: 10px; padding: 24px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.brc:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.brc h3 { margin-top: 8px; }
.brc__f { display: grid; gap: 7px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.brc__f span { display: flex; align-items: center; gap: 8px; }
.brc__f .ic { color: var(--red-ink); }
@media (max-width: 1000px) { .brs__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .brs__g { grid-template-columns: 1fr; } }

/* —— yorumlar —— */
.revs__r { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; padding: 6px 0 20px; }
.revs__r.is-drag { cursor: grabbing; }
.revs__t { display: flex; gap: 18px; width: max-content; will-change: transform; padding-left: 18px; }
.rv { width: 360px; flex: none; padding: 26px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.rv blockquote { font: italic 400 21px/1.4 var(--f-s); color: var(--ink); }
.rv figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv figcaption b { font-size: 14.5px; }
@media (max-width: 520px) { .rv { width: 290px; padding: 22px; } .rv blockquote { font-size: 19px; } }

/* —— Chef Puan bandı —— */
.loy__c { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); position: relative; overflow: hidden; }
.loy__c::before { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 30, 36, .35), transparent 65%); }
.loy__c > * { position: relative; }
.loy__ring { position: relative; width: 140px; height: 140px; }
.loy__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.loy__ring circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; }
.loy__ring .loy__p { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 72 100; }
.loy__ring b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 850 expanded 32px/1 var(--f-d); }
.loy__ring small { display: block; font-size: 12px; color: var(--on-dark-3); font-family: var(--f-b); font-weight: 600; margin-top: 4px; }
.loy__c h2 { margin: 10px 0; }
@media (max-width: 900px) { .loy__c { grid-template-columns: auto 1fr; } .loy__c > .row, .loy__c > .btn { grid-column: 1 / -1; } }
@media (max-width: 520px) { .loy__c { grid-template-columns: 1fr; } .loy__ring { width: 110px; height: 110px; } }

/* —— franchise bandı —— */
.fr__g { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.fr__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fr__g::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(160, 12, 18, .95) 0%, rgba(227, 30, 36, .7) 45%, rgba(20, 16, 17, .1) 100%); }
.fr__t { padding: clamp(28px, 5vw, 64px); max-width: 680px; }
.fr__t .eyebrow { color: #fff; }
.fr__t h2 { margin: 16px 0; }
.fr__t .lead { color: rgba(255, 255, 255, .86); margin-bottom: 28px; }
@media (max-width: 620px) { .fr__g::after { background: linear-gradient(180deg, rgba(20, 16, 17, .2) 0%, rgba(160, 12, 18, .95) 60%); } .fr__g { min-height: 560px; } }

/* —— iç sayfa başlığı —— */
.phd { position: relative; padding: calc(var(--hd-h) + 76px) 0 clamp(56px, 7vw, 96px); overflow: hidden; isolation: isolate; }
.phd__bg { position: absolute; inset: 0; z-index: -2; }
.phd__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.phd__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 17, .4), var(--coal) 96%); }
.phd__glow { position: absolute; z-index: -1; width: 700px; height: 700px; right: -200px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 30, 36, .3), transparent 62%); }
.phd__in { display: grid; gap: 18px; justify-items: start; }
.phd__t { font-size: clamp(42px, 7vw, 100px); max-width: 15ch; }
.phd .lead { color: var(--on-dark-2); }
.phd__chips { margin-top: 12px; }
.chip.on-d { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--on-dark); }
.chip.on-d:hover { border-color: #fff; }
.chip.on-d .n { color: var(--on-dark-3); opacity: 1; }
.bc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--on-dark-3); }
.bc a:hover { color: #fff; }
.bc--l { color: var(--mut); margin-bottom: 18px; }
.bc--l a:hover { color: var(--ink); }
.mini-hd { padding-top: calc(var(--hd-h) + 38px); padding-bottom: 12px; }
.mini-hd h1 { margin-top: 4px; }

/* —— menü sayfası —— */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .mgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .mgrid { grid-template-columns: 1fr 1fr; gap: 12px; } .mgrid .pc__d { display: none; } .mgrid .pc__bd { padding: 14px 12px 12px; } .mgrid .pc__t { font-size: 15.5px; } .mgrid .pc__k { display: none; } .mgrid .pc__add { width: 38px; height: 38px; } }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--bg-2); font-size: 14.5px; color: var(--ink-2); }
.note > .ic { color: var(--red-ink); flex: none; margin-top: 2px; }
.note a { color: var(--red-ink); text-decoration: underline; }
.note--l { padding: 20px 22px; border: 1px solid var(--line); background: var(--paper); }

/* —— ürün detayı —— */
.pdp { padding-top: calc(var(--hd-h) + 36px); }
.pdp__g { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.pdp__m { align-self: stretch; }
.pdp__ms { position: sticky; top: var(--stk); transition: top .5s var(--ease-o); display: grid; gap: 12px; }
.pdp__main { border-radius: var(--r-xl); display: block; cursor: zoom-in; }
.pdp__main img { transition: transform 1s var(--ease-o); }
.pdp__main:hover img { transform: scale(1.04); }
.pdp__th { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp__th a { border-radius: 16px; cursor: zoom-in; }
.pdp__th-n { border-radius: 16px; border: 1.5px dashed var(--line-2); display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.3; aspect-ratio: 1; }
.pdp__th-n small { font-weight: 500; color: var(--mut); }
.pdp__b { display: grid; gap: 22px; padding-bottom: 40px; }
.pdp__t { font-size: clamp(36px, 4.6vw, 64px); }
.pdp__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); position: sticky; top: var(--stk); z-index: 3; transition: top .5s var(--ease-o); box-shadow: var(--sh-1); }
.pdp__buy small { display: block; margin-top: 4px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.facts li { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 16px 8px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.facts .ic { color: var(--red-ink); margin-bottom: 6px; }
.facts b { font: 800 semi-expanded 18px/1 var(--f-d); }
.facts span { font-size: 12.5px; color: var(--mut); }
.pdp__s { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.ogs { display: grid; gap: 12px; }
.ogs > div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; font-size: 14.5px; }
.ogs b { color: var(--ink); }
.ogs span { color: var(--ink-2); }
.ogs em { font-style: normal; color: var(--red-ink); font-weight: 700; }
.ings { display: flex; flex-wrap: wrap; gap: 8px; }
.ings li { padding: 8px 14px; border-radius: 99px; background: var(--bg-2); font-size: 14px; }
.usta { display: flex; gap: 16px; padding: 22px; border-radius: var(--r-l); background: var(--coal); color: var(--on-dark); }
.usta p { font: italic 400 21px/1.45 var(--f-s); }
.usta cite { display: block; margin-top: 10px; font: 600 13px var(--f-b); font-style: normal; color: var(--on-dark-3); }
.usta .avatar { background: var(--red); }
@media (max-width: 900px) { .pdp__g { grid-template-columns: 1fr; } .pdp__ms { position: relative; top: 0; } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr 1fr; } .ogs > div { grid-template-columns: 1fr; gap: 2px; } .pdp__buy .btn { flex: 1 1 100%; } .pdp__buy { top: auto; bottom: 0; position: relative; } }

/* —— akordeon —— */
.acc { display: grid; gap: 10px; }
.acc__it { border-radius: 20px; background: var(--paper); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.acc__it.is-on { border-color: transparent; box-shadow: var(--sh-2); }
.acc__q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 20px 20px 22px; text-align: left; font: 700 16.5px/1.4 var(--f-b); }
.acc__n { font-size: 12.5px; color: var(--red-ink); flex: none; }
.acc__q > span:nth-child(2) { flex: 1; }
.acc__q i { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); transition: transform .45s var(--ease), background .3s, color .3s; }
.acc__it.is-on .acc__q i { transform: rotate(135deg); background: var(--red); color: #fff; }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-o); }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 22px 22px 58px; color: var(--ink-2); line-height: 1.7; }
.acc__it.is-on .acc__a { grid-template-rows: 1fr; }
@media (max-width: 520px) { .acc__a p { padding-left: 22px; } .acc__q { font-size: 15.5px; padding: 16px; gap: 12px; } }

/* —— hikâye —— */
.prose--xl { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.65; color: var(--ink); }
.dropcap::first-letter { float: left; font: 900 expanded 5.2em/.8 var(--f-d); color: var(--red); margin: 6px 14px 0 0; }
.tl__l { display: grid; gap: clamp(60px, 9vw, 130px); }
.tl__i { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.tl__i:nth-child(even) .tl__f { order: 2; }
.tl__f { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.tl__f img { width: 100%; height: 100%; object-fit: cover; }
.tl__n { font-size: 14px; color: var(--red-ink); display: block; margin-bottom: 12px; }
.tl__t h2 { margin-bottom: 18px; }
@media (max-width: 800px) { .tl__i { grid-template-columns: 1fr; } .tl__i:nth-child(even) .tl__f { order: 0; } }
.vals__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.val { padding: 28px; border-radius: var(--r-l); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.dark .val { background: rgba(255, 255, 255, .02); }
.val__i { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--red); color: #fff; margin-bottom: 8px; }
.val p { color: var(--ink-2); font-size: 15px; }
.val--l { background: var(--paper); }
@media (max-width: 900px) { .vals__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vals__g { grid-template-columns: 1fr; } }
.qte { text-align: center; display: grid; justify-items: center; gap: 16px; }
.qte blockquote { max-width: 18ch; }
.qte__a { justify-content: center; margin-top: 16px; }

/* —— şubeler sayfası —— */
.brp__g { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.brp__l { display: grid; gap: 14px; }
.brx { padding: 24px; border-radius: var(--r-l); background: var(--paper); border: 1.5px solid var(--line); display: grid; gap: 12px; transition: border-color .3s, box-shadow .3s; cursor: pointer; scroll-margin-top: calc(var(--hd-h) + 20px); }
.brx.is-on, .brx:hover { border-color: var(--red); box-shadow: var(--sh-2); }
.brx__i { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 14px; color: var(--ink-2); }
.brx__i li { display: flex; align-items: center; gap: 8px; }
.brx__i .ic { color: var(--red-ink); }
.brp__m { align-self: stretch; }
.brp__ms { position: sticky; top: var(--stk); transition: top .5s var(--ease-o); }
.map { width: 100%; height: min(72vh, 680px); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-2); z-index: 1; }
@media (max-width: 900px) { .brp__g { grid-template-columns: 1fr; } .brp__m { order: -1; } .brp__ms { position: relative; top: 0; } .map { height: 360px; } }
@media (max-width: 480px) { .brx__i { grid-template-columns: 1fr; } }
.mpin { display: grid; place-items: center; }
.mpin > span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--coal); color: #fff; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.mpin--red > span { background: var(--red); }
.mpin--leaf > span { background: var(--leaf); }
.mpin .ic { width: 18px; height: 18px; }
.mpin--br > span { border-radius: 14px; transform: rotate(45deg); }
.mpin--br > span .ic { transform: rotate(-45deg); }
.mpin--k > span { background: var(--red); position: relative; }
.mpin--k > span::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--red); animation: pulse 1.8s var(--ease) infinite; }
.leaflet-container { font-family: var(--f-b) !important; }
.leaflet-popup-content-wrapper { border-radius: 16px !important; box-shadow: var(--sh-2) !important; }
.leaflet-popup-content { margin: 14px 16px !important; font-size: 14px; line-height: 1.45; }
.leaflet-popup-content b { font-size: 15px; }

/* —— kampanyalar sayfası —— */
.cbig { display: grid; gap: 22px; }
.cb { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden; background: var(--paper); border: 1px solid var(--line); scroll-margin-top: calc(var(--hd-h) + 20px); }
.cb:nth-child(even) .cb__img { order: 2; }
.cb__img { min-height: 380px; }
.cb__img img { width: 100%; height: 100%; object-fit: cover; }
.cb__b { padding: clamp(26px, 4vw, 56px); display: grid; gap: 16px; align-content: center; justify-items: start; }
.cb.cc--red { background: var(--red); color: #fff; border: 0; }
.cb.cc--red .eyebrow, .cb.cc--red .lead { color: rgba(255, 255, 255, .88); }
.cb.cc--red .btn { background: var(--coal); }
.cb.cc--red .ticks--s li > .ic { background: #fff; color: var(--red); }
.cb.cc--coal { background: var(--coal); color: var(--on-dark); border: 0; }
.cb.cc--coal .lead { color: var(--on-dark-2); }
@media (max-width: 820px) { .cb { grid-template-columns: 1fr; } .cb:nth-child(even) .cb__img { order: 0; } .cb__img { min-height: 260px; aspect-ratio: 16 / 10; } }
.cps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cpx { display: grid; grid-template-columns: 130px 1fr; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.cpx__l { background: var(--red); color: #fff; display: grid; place-content: center; justify-items: center; text-align: center; position: relative; border-right: 2px dashed rgba(255, 255, 255, .5); }
.cpx__l::before, .cpx__l::after { content: ""; position: absolute; right: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.cpx__l::before { top: -11px; } .cpx__l::after { bottom: -11px; }
.cpx__v { font-size: 36px; }
.cpx__l small { font-size: 12px; opacity: .8; font-weight: 600; }
.cpx__r { padding: 20px; display: grid; gap: 8px; }
@media (max-width: 760px) { .cps { grid-template-columns: 1fr; } .cpx { grid-template-columns: 100px 1fr; } .cpx__v { font-size: 28px; } }

/* —— franchise —— */
.fsteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s; }
.fsteps li { padding: 24px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; position: relative; }
.fsteps__n { width: 52px; height: 52px; border-radius: 50%; background: var(--coal); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: 6px; }
.fsteps li:last-child .fsteps__n { background: var(--red); }
@media (max-width: 1000px) { .fsteps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fsteps { grid-template-columns: 1fr; } }
.ff__g { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.ff__g .lead { margin: 16px 0 24px; }
.ff { display: grid; gap: 18px; }
.ff fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
.ff__st { display: flex; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mut); }
.ff__st span { flex: 1; padding-top: 10px; border-top: 3px solid var(--line); transition: border-color .3s, color .3s; }
.ff__st span.is-on { border-color: var(--red); color: var(--ink); }
.ff__a { margin-top: 6px; }
@media (max-width: 900px) { .ff__g { grid-template-columns: 1fr; } }
.done { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 30px 10px; }
.done .ic { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--leaf-soft); color: var(--leaf); }

/* —— galeri —— */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gal__i { border-radius: 20px; display: block; cursor: zoom-in; }
.gal__i img { transition: transform 1s var(--ease-o); }
.gal__i:hover img { transform: scale(1.06); }
.gal__i span { position: absolute; left: 10px; bottom: 10px; right: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(20, 16, 17, .6); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gal__i:hover span { opacity: 1; transform: none; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gal { grid-template-columns: 1fr 1fr; gap: 10px; } .gal__i span { display: none; } }

/* ışık kutusu */
.lbx { position: fixed; inset: 0; z-index: 150; background: rgba(12, 9, 9, .96); color: #fff; display: grid; grid-template-rows: auto 1fr auto auto; opacity: 0; pointer-events: none; transition: opacity .35s; }
.lbx.is-on { opacity: 1; pointer-events: auto; }
.lbx__top { display: flex; align-items: center; gap: 6px; padding: 12px 14px; }
.lbx__n { margin-right: auto; font-size: 14px; color: rgba(255, 255, 255, .7); padding-left: 6px; }
.lbx__stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.lbx__track { display: flex; height: 100%; transition: transform .5s var(--ease-o); }
.lbx__track figure { flex: 0 0 100%; display: grid; place-items: center; padding: 0 clamp(8px, 6vw, 90px); overflow: hidden; }
.lbx__track img { max-height: calc(100dvh - 220px); max-width: 100%; object-fit: contain; border-radius: 12px; transition: transform .3s var(--ease); user-select: none; -webkit-user-drag: none; }
.lbx.is-z .lbx__track img { transition: none; cursor: move; }
.lbx__nav { position: absolute; top: 50%; margin-top: -22px; background: rgba(255, 255, 255, .1); }
.lbx__nav:hover { background: rgba(255, 255, 255, .2); }
.lbx__p { left: 14px; } .lbx__nx { right: 14px; }
.lbx__cap { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .75); padding: 10px 16px 4px; min-height: 32px; }
.lbx__th { display: flex; gap: 8px; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: safe center; touch-action: pan-x pan-y; cursor: grab; }
.lbx__th::-webkit-scrollbar { display: none; }
.lbx__th button { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; opacity: .45; border: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.lbx__th button.is-on { opacity: 1; border-color: var(--red); }
.lbx__th img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 720px) { .lbx__nav { display: none; } }

/* —— SSS / iletişim —— */
.faqp { display: grid; grid-template-columns: 340px 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.faqp__s { align-self: stretch; }
.faqp__s > div { position: sticky; top: var(--stk); transition: top .5s var(--ease-o); display: grid; gap: 12px; }
@media (max-width: 900px) { .faqp { grid-template-columns: 1fr; } .faqp__s { order: 2; } .faqp__s > div { position: relative; top: 0; } }
.ctp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.ctp__c { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ctc { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; min-width: 0; }
.ctc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.ctc > span:last-child { min-width: 0; }
.ctc small { display: block; font-size: 12.5px; color: var(--mut); }
.ctc b { display: block; font-size: 15px; overflow-wrap: anywhere; line-height: 1.3; }
.ctc__i { width: 48px; height: 48px; border-radius: 16px; background: var(--coal); color: #fff; display: grid; place-items: center; flex: none; }
.ctc__i--wa { background: #0b6b37; }
.ctf { display: grid; gap: 16px; }
@media (max-width: 900px) { .ctp { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ctp__c { grid-template-columns: 1fr; } }

/* —— blog —— */
.postf { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: var(--r-xl); overflow: hidden; background: var(--paper); border: 1px solid var(--line); margin-bottom: 22px; transition: box-shadow .4s; }
.postf:hover { box-shadow: var(--sh-2); }
.postf__img { min-height: 380px; }
.postf__img img { transition: transform 1.2s var(--ease-o); }
.postf:hover .postf__img img { transform: scale(1.04); }
.postf__b { padding: clamp(24px, 4vw, 52px); display: grid; gap: 16px; align-content: center; justify-items: start; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.posts--2 { grid-template-columns: 1fr 1fr; margin-top: 24px; }
.post { display: grid; border-radius: var(--r-l); overflow: hidden; background: var(--paper); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
.post:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.post__img img { transition: transform 1s var(--ease-o); }
.post:hover .post__img img { transform: scale(1.05); }
.post__b { padding: 20px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.post__b .row { gap: 10px; }
@media (max-width: 900px) { .postf { grid-template-columns: 1fr; } .postf__img { min-height: 0; aspect-ratio: 16 / 10; } .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .posts, .posts--2 { grid-template-columns: 1fr; } }
.art__h { padding-top: calc(var(--hd-h) + 40px); display: grid; gap: 18px; justify-items: start; margin-bottom: 36px; }
.art__m { gap: 8px; flex-wrap: wrap; }
.art__img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 21 / 9; margin-bottom: clamp(36px, 5vw, 64px); }
.art__img img { width: 100%; height: 100%; object-fit: cover; }
.art__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 48px; }
@media (max-width: 620px) { .art__img { aspect-ratio: 4 / 3; } }

/* —— yasal —— */
.lg { padding-top: calc(var(--hd-h) + 40px); }
.lg h1 { margin-bottom: 14px; }
.lg__nav { margin: 26px 0 10px; }
.nf { padding-top: calc(var(--hd-h) + 80px); min-height: 70vh; }

/* —— platform —— */
.tip { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-bottom: 28px; border-color: rgba(227, 30, 36, .3); background: linear-gradient(90deg, var(--red-soft), var(--paper) 60%); }
.tip__i { width: 52px; height: 52px; border-radius: 16px; background: var(--red); color: #fff; display: grid; place-items: center; }
.tip p { margin-top: 6px; max-width: 80ch; }
@media (max-width: 760px) { .tip { grid-template-columns: 1fr; } }
.pflow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 28px; }
.pflow__s { position: relative; padding: 18px 16px; border-radius: 18px; background: var(--coal); color: var(--on-dark); display: grid; gap: 8px; font-size: 14.5px; }
.pflow__s .mono { color: #ff6b6f; font-size: 12.5px; }
.pflow__s:not(:last-child)::after { content: ""; position: absolute; right: -8px; top: 50%; width: 8px; height: 2px; background: var(--red); }
@media (max-width: 1000px) { .pflow { grid-template-columns: repeat(3, 1fr); } .pflow__s::after { display: none; } }
@media (max-width: 520px) { .pflow { grid-template-columns: 1fr 1fr; } }
.pmods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pmod { padding: 24px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.pmod:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: transparent; }
.pmod__i { width: 52px; height: 52px; border-radius: 16px; background: var(--coal); color: #fff; display: grid; place-items: center; transition: background .3s; }
.pmod:hover .pmod__i { background: var(--red); }
@media (max-width: 1000px) { .pmods { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pmods { grid-template-columns: 1fr; } }
.pstat { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.pstat__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pstat__g > div { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-d); }
.pstat__g b { display: block; font: 850 expanded 32px/1 var(--f-d); }
.pstat__g span { font-size: 13px; color: var(--on-dark-3); }
@media (max-width: 900px) { .pstat { grid-template-columns: 1fr; } .pstat__g { grid-template-columns: 1fr 1fr; } }
.pc--off .pc__img img { filter: grayscale(1) brightness(.85); }
.pc--off .pc__add { opacity: .3; }
.cpx__r .row { flex-wrap: wrap; }
.faqp__s .btn { white-space: normal; overflow-wrap: anywhere; height: auto; min-height: var(--bh); padding-block: 10px; text-align: center; }
.cb > *, .postf > *, .tl__i > *, .story__g > * { min-width: 0; }
/* tek şube: ana sayfa kartı + harita */
.br1 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.br1__c { border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 44px); display: grid; gap: 16px; align-content: start; position: relative; overflow: hidden; }
.br1__c::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 30, 36, .3), transparent 65%); pointer-events: none; }
.br1__f { display: grid; gap: 10px; }
.br1__f li { display: flex; align-items: center; gap: 12px; color: var(--on-dark-2); }
.br1__f .ic { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: rgba(227, 30, 36, .18); color: #ff6b6f; }
.br1__m .map { height: 100%; min-height: 420px; }
@media (max-width: 900px) { .br1 { grid-template-columns: 1fr; } .br1__m .map { min-height: 320px; } }
.zones { margin-bottom: 4px; }
.zone { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.zone i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.brx--fr { display: flex; align-items: center; gap: 16px; }
.brx--fr .val__i { margin: 0; flex: none; }
.brx--fr > .ic { margin-left: auto; color: var(--red-ink); flex: none; }
.brp .brx .sum { margin: 4px 0 0; }
@media (max-width: 820px) { .cb__img { min-height: 0; } }
/* mobil başlık: ikonlar sağda (gizli nav'ın kardeş kuralı margin'i sıfırlıyordu) */
@media (max-width: 1020px) { .hd__nav + .hd__act { margin-left: auto; } }
.hero__in > * { min-width: 0; }
@media (max-width: 560px) { .hero__t { font-size: clamp(34px, 11vw, 54px); font-stretch: 100%; } }
/* —— 2. tur: logo ölçüleri, tam genişlik yapışkan başlık bandı, telefon maketi —— */
.hd__in { height: 70px; }
.hd__logo .logo { --lw: 104px; }
.hd.is-solid { background: rgba(246, 240, 230, .9); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 rgba(28, 22, 21, .08), 0 10px 30px -18px rgba(30, 16, 14, .35); }
.hd.is-solid .hd__in { background: transparent !important; box-shadow: none !important; border-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.pg-order .ocats { box-shadow: 0 10px 24px -20px rgba(30, 16, 14, .4); }
.ft__logo { --lw: 150px; }
.mnav__logo { --lw: 92px; }
.tent__logo { --lw: 132px; }
@media (max-width: 1180px) { .hd__logo .logo { --lw: 96px; } }
@media (max-width: 560px) { .hd__in { height: 60px; } .hd__logo .logo { --lw: 86px; } }
.phone__sc { --mut: #7a6d68; --line: rgba(28, 22, 21, .12); --ink-2: #463c39; }
.ecs__card .row { align-items: flex-start; gap: 10px; }
.ecs__st { font-size: 15px; }
.ecs__eta { white-space: nowrap; flex: none; }
.ecs__a, .ecs__b { left: 0; top: 0; margin-left: -18px !important; }
.ecs__cr > div { min-width: 0; }
.ecs__pin { flex: none; }
/* —— 3. tur hizalama —— */
.pstat { background: var(--coal) !important; border-color: transparent !important; }
.proc__s { opacity: .4; }
@media (max-width: 860px) { .proc__s { opacity: .55; } }
@media (max-width: 620px) { .ft__bt { padding-left: 0; padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
.zone b { white-space: nowrap; }
.zone > span { white-space: nowrap; }
@media (max-width: 560px) { .zone { flex-wrap: wrap; row-gap: 2px; } .zone > .sp { display: none; } .zone > span:last-child { flex-basis: 100%; padding-left: 26px; color: var(--ink-2); } }
.ecs__a, .ecs__b { margin: -18px 0 0 -18px !important; z-index: 1; }
/* —— 4. tur (müşteri geri bildirimi): %100 helal şeridi, kalite bandı, WhatsApp Alo Paket, açılış indirimi, QR menü —— */
.hd { padding-top: 0; }
.hbar { background: var(--coal); color: var(--on-dark); font-size: 13px; line-height: 1; transition: background .35s; }
.hbar__in { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 16px; }
.hbar__b { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: 99px; background: var(--red); color: #fff; font: 800 12px/1 var(--f-d); letter-spacing: .06em; flex: none; }
.hbar__b .ic { width: 15px; height: 15px; }
.hbar__t { color: var(--on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hbar__l { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark-2); white-space: nowrap; transition: color .2s; }
.hbar__l:hover { color: #fff; }
.hbar__l b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.hbar__wa .ic { color: #25d366; }
.hd .hd__in { margin-top: 10px; }
.hd.is-solid .hd__in { margin-top: 0; }
.hd--dark .hbar { background: rgba(10, 7, 7, .55); }
.hd.is-solid .hbar { background: var(--coal); }
@media (max-width: 1020px) { .hbar__x, .hbar__wa span { display: none; } }
@media (max-width: 560px) { .hbar__in { height: 32px; gap: 10px; padding: 0 12px; } .hbar__l span { display: none; } .hbar__t { font-size: 12px; } .hd .hd__in { margin-top: 6px; } }
@media (max-width: 380px) { .hbar__l b { display: none; } }

.hero__pills { gap: 10px; margin-bottom: 26px; }
.hero__pills .hero__live { margin-bottom: 0; }
.hero__halal { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--red); color: #fff; font: 800 14px/1 var(--f-d); letter-spacing: .04em; box-shadow: 0 10px 30px -10px rgba(227, 30, 36, .8); }
.hero__halal .ic { width: 18px; height: 18px; }
.hero__alo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--on-dark-2); font-size: 15px; }
.hero__alo a { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.hero__alo a:hover { color: var(--lemon); }
.hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--on-dark-3); margin: 0 4px; }

.qband { position: relative; background: var(--red); color: #fff; overflow: hidden; isolation: isolate; }
.qband::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 62%); z-index: -1; }
.qband__in { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: clamp(28px, 5vw, 72px); padding-block: clamp(64px, 9vw, 120px); }
.qband .eyebrow { color: rgba(255, 255, 255, .78); }
.qband__q { margin: 14px 0 20px; font-size: clamp(44px, 7.4vw, 112px); line-height: .92; letter-spacing: -.02em; font-weight: 850; font-stretch: 112%; text-wrap: balance; }
.qband__q .srf { color: var(--coal); font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; }
.qband__l { max-width: 560px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .88); margin: 0 0 28px; }
.qband__f { position: relative; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: visible; }
.qband__f img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 10px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(40, 0, 0, .7); }
.qband__p { position: absolute; left: -6%; bottom: 8%; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: var(--sh-3); }
.qband__p small { font-size: 12.5px; color: var(--mut); }
.qband__p b { font: 850 26px/1 var(--f-d); font-stretch: 110%; color: var(--red-ink); }
@media (max-width: 860px) { .qband__in { grid-template-columns: 1fr; } .qband__f { width: min(320px, 78%); justify-self: center; } }

.wfab { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 14px; border-radius: 99px; background: #0b6b37; color: #fff; box-shadow: 0 16px 34px -12px rgba(11, 107, 55, .75); transition: transform .3s var(--ease), box-shadow .3s; }
.wfab:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(11, 107, 55, .85); }
.wfab .ic { width: 26px; height: 26px; }
.wfab span { display: grid; line-height: 1.1; }
.wfab small { font-size: 11.5px; opacity: .82; }
.wfab b { font: 800 15px/1.1 var(--f-d); }
.wfab::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(37, 211, 102, .55); animation: wfp 2.4s var(--ease-o) infinite; pointer-events: none; }
@keyframes wfp { 0% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1.14); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wfab::after { animation: none; } }
.pg-order .wfab, .pg-track .wfab { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 1101px) { .pg-order .wfab { bottom: 18px; } }
@media (max-width: 560px) { .wfab { width: 56px; padding: 0; justify-content: center; } .wfab span { display: none; } }

.promo__box { position: relative; width: min(820px, 100%); display: grid; grid-template-columns: 1fr 1.1fr; padding: 0; overflow: hidden; }
.promo__img { position: relative; min-height: 100%; background: var(--coal); }
.promo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__st { position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--red); color: #fff; text-align: center; box-shadow: 0 0 0 6px rgba(255, 255, 255, .18), var(--sh-3); transform: rotate(-8deg); }
.promo__st b { font: 850 36px/.9 var(--f-d); font-stretch: 112%; }
.promo__st small { font: 700 12px/1 var(--f-b); text-transform: uppercase; letter-spacing: .08em; margin-top: -18px; }
.promo__b { display: grid; gap: 14px; align-content: center; padding: clamp(26px, 4vw, 44px); }
.promo__b .h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1; }
.promo__b p { margin: 0; }
.promo__code { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: 14px; border: 2px dashed var(--red); background: var(--red-soft); color: var(--red-ink); font-size: 22px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.promo__code small { margin-left: auto; font: 600 13px/1 var(--f-b); letter-spacing: 0; color: var(--ink-2); }
.promo__no { justify-self: center; color: var(--mut); }
@media (max-width: 720px) { .promo__box { grid-template-columns: 1fr; max-height: calc(100dvh - 32px); } .promo__img { height: 190px; } .promo__st { width: 84px; height: 84px; } .promo__st b { font-size: 28px; } }

/* QR menü */
.pg-qm { background: var(--bg); }
.qm__hd { position: relative; overflow: hidden; isolation: isolate; padding: 14px 0 26px; }
.qm__bg { position: absolute; inset: 0; z-index: -1; }
.qm__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.qm__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 17, .55), var(--coal) 92%); }
.qm__top { display: flex; align-items: center; gap: 10px; }
.qm__logo { --lw: 92px; }
.qm__top .hero__halal { height: 32px; font-size: 13px; }
.qm__in { display: grid; gap: 10px; padding-top: 26px; }
.qm__in .h2 { font-size: clamp(30px, 6vw, 52px); line-height: 1; margin: 0; }
.qm__in p { margin: 0; }
.qm__cats { position: sticky; top: 0; z-index: 30; background: rgba(246, 240, 230, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.qm__cr { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 12px 8px; }
.qm__cr::-webkit-scrollbar { display: none; }
.qm__cr .chip { flex: none; }
.qm__s { padding-bottom: 10px; }
.qm__s .inpw { max-width: 520px; }
.qm__s .inp { height: 44px; }
.qm__m { display: grid; gap: 30px; padding-top: 22px; padding-bottom: 120px; }
.qm__sec { scroll-margin-top: 130px; }
.qm__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 850 24px/1 var(--f-d); font-stretch: 108%; }
.qm__h .ic { width: 22px; height: 22px; color: var(--red); }
.qm__h small { font: 600 13px/1 var(--f-b); color: var(--mut); padding: 4px 8px; border-radius: 99px; background: var(--bg-2); }
.qm__l { display: grid; gap: 10px; }
@media (min-width: 900px) { .qm__l { grid-template-columns: 1fr 1fr; } }
.qmi { display: grid; grid-template-columns: clamp(132px, 14vw, 190px) 1fr; gap: 14px; align-items: center; width: 100%; padding: 10px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); text-align: left; color: inherit; font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.qmi:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.qmi:active { transform: scale(.99); }
.qmi.is-off { opacity: .55; }
.qmi__img { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--coal); }
.qmi__img img { width: 100%; height: 100%; object-fit: cover; }
.qmi__b { display: grid; gap: 5px; min-width: 0; }
.qmi__t { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.2; font-weight: 750; }
.qmi__d { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qmi__f { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.qmi__f .price { font-size: 16px; }
.qm__empty { display: flex; align-items: center; gap: 10px; color: var(--mut); }
.qm__ft { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 18px 0 0; color: var(--ink-2); font-size: 14px; }
.qm__ft a { color: var(--red-ink); font-weight: 700; }
.qm__bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 12px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 34%); }
.qm__bar .btn:first-child { flex: 1; max-width: 520px; margin-left: auto; }
.qm__bar .qm__wa { width: 56px; padding: 0; justify-content: center; margin-right: auto; flex: none; }
.qm__bar .qm__wa .ic { width: 24px; height: 24px; }
.qmd .modal__box { position: relative; width: min(600px, 100%); padding: 0; scrollbar-width: none; touch-action: pan-y; overscroll-behavior: contain; }
.qmd .modal__box::-webkit-scrollbar { display: none; }
.qmd .modal__box.is-drag { cursor: grabbing; user-select: none; }
.qmd__c { will-change: transform; }
.qmd__img { position: relative; margin: 0; aspect-ratio: 3 / 2; width: 100%; overflow: hidden; background: var(--coal); }
.qmd__img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; -webkit-user-drag: none; user-select: none; }
.qmd__z { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(20, 16, 17, .62); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .18); transition: background .2s, transform .2s; }
.qmd__z:hover { background: var(--red); transform: scale(1.06); }
.qmd__z .ic { width: 22px; height: 22px; }
.qmd__nav { position: absolute; z-index: 2; top: 0; left: 0; right: 0; aspect-ratio: 3 / 2; pointer-events: none; }
.qmd__n { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 99px; background: rgba(20, 16, 17, .62); color: #fff; font-size: 12.5px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.qmd__n b { font-weight: 700; }
.qmd__n span { font-family: var(--f-m); opacity: .8; }
.qmd__a { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(255, 252, 247, .94); color: var(--ink); box-shadow: var(--sh-2); pointer-events: auto; transition: transform .2s, background .2s; }
.qmd__a:hover { background: #fff; transform: scale(1.08); }
.qmd__a .ic { width: 24px; height: 24px; }
.qmd__a--p { left: 12px; }
.qmd__a--n { right: 12px; }
.qmd__b { display: grid; gap: 12px; padding: 20px 22px 0; }
.qmd__b .h3 { margin: 0; }
.qmd__b p { margin: 0; color: var(--ink-2); }
.qmd__b .ogs > div { grid-template-columns: 110px 1fr; font-size: 14px; }
.qmd__al { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut) !important; }
.qmd__ft { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; margin: 4px -22px 0; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -12px 24px -18px rgba(28, 16, 14, .35); }
.qmd__b .tag .ic { width: 14px; height: 14px; }
@media (max-width: 720px) { .qmd__a { width: 42px; height: 42px; margin-top: -21px; } .qmd__n { top: 26px; } .qmd .modal__x { top: 22px; } .qmd__b .ogs > div { grid-template-columns: 96px 1fr; } }
html:has(.pg-qm) { scrollbar-width: thin; scrollbar-color: rgba(28, 22, 21, .28) transparent; }
@media (max-width: 560px) { .hbar__t { display: none; } .hbar__in .sp { display: block; } }
.qmi__t { display: block; } .qmi__t .heat { display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.lbx__cap { font: 700 clamp(16px, 2.2vw, 20px)/1.3 var(--f-b); color: #fff; padding: 10px 16px 6px; text-align: center; letter-spacing: .01em; }
.lbx { background: #0c0909; }
/* ışık kutusu yakınlaştırma */
.lbx__zc { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.lbx__zc .icb { width: 38px; height: 38px; color: #fff; }
.lbx__zp { min-width: 58px; height: 32px; padding: 0 8px; border-radius: 99px; color: #fff; font-size: 13px; text-align: center; }
.lbx__zp:hover { background: rgba(255, 255, 255, .12); }
.lbx__top .icb[data-lc] { color: #fff; }
.lbx__stage { cursor: zoom-in; }
.lbx.is-z .lbx__stage { cursor: grab; }
.lbx.is-z .lbx__stage.is-pan { cursor: grabbing; }
.lbx__track img { will-change: transform; transform-origin: 50% 50%; }
.lbx.is-z .lbx__track img { cursor: inherit; }
.lbx.is-z .lbx__nav { opacity: .35; }
.lbx__hint { position: absolute; left: 50%; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; background: rgba(20, 16, 17, .82); color: #fff; font-size: 14px; white-space: nowrap; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .45s var(--ease-o); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lbx__hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.lbx__hint .ic { width: 20px; height: 20px; flex: none; }
@media (max-width: 560px) { .lbx__hint { white-space: normal; width: calc(100% - 32px); justify-content: center; text-align: center; font-size: 13px; } .lbx__zc .icb { width: 34px; height: 34px; } .lbx__zp { min-width: 50px; } }
/* —— telefon akıcılığı: hero'daki sürekli efektler ve kaydırma sırasında yeniden çizilen bulanıklıklar ——
   Maske içindeki yakınlaşma, parlama, kıvılcım/halka ve yüzen kartlar mobil GPU'da kaydırmayı donduruyordu. */
.hero__card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero.is-off *, .hero.is-off *::before, .hero.is-off *::after { animation-play-state: paused !important; }
@media (hover: none), (max-width: 900px) {
  .hero__rings, .hero__shine { display: none; }
  /* kıvılcımlar telefonda hafif sürüm: gölge yerine tek renkli yumuşak nokta (ayrı çizim katmanı yok), 10 adet,
     yükseklik svh ile (adres çubuğu gizlenince animasyon yeniden hesaplanmaz); yalnız transform + opacity → GPU birleştirir */
  .hero__sparks i { width: 7px; height: 7px; box-shadow: none; background: radial-gradient(circle, #ffe2b8 0, #ff9a4d 38%, rgba(255, 107, 44, 0) 70%); animation-name: sparkm; }
  .hero__sparks i:nth-child(n+11) { display: none; }
  .hero__glow, .hero__card, .hero__ring { animation: none; }
  .hs__s img { transform: none; transition: none; }
  .hs__s { transition-duration: .7s; }
}
@media (hover: none) {
  .hd.is-solid, .hd.is-solid .hd__in, body:not(.has-dark-hd) .hd .hd__in, .hd--dark:not(.is-solid) .hd__in, .tag--glass, .proc__t, .gal__i span, .ocats, .qm__cats, .qa__cats, .qcall, .scrim, .qmd__z, .qmd__n { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .hd.is-solid { background: rgba(246, 240, 230, .985); }
  body:not(.has-dark-hd) .hd:not(.is-solid) .hd__in { background: rgba(255, 252, 247, .97); }
  .hd--dark:not(.is-solid) .hd__in { background: rgba(20, 16, 17, .5); }
  .ocats, .qm__cats { background: rgba(246, 240, 230, .985); }
  .tag--glass { background: rgba(20, 16, 17, .72); }
  .qmd__z, .qmd__n { background: rgba(20, 16, 17, .78); }
  .wfab::after { animation: none; }
}
@keyframes sparkm { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .85; } 100% { transform: translate3d(-36px, -720px, 0) scale(.6); transform: translate3d(-36px, -86svh, 0) scale(.6); opacity: 0; } }
/* —— bayraklı dil seçici —— */
.lsw { position: relative; flex: none; }
.lsw__b { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px 0 8px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: inherit; font: 750 13px/1 var(--f-b); letter-spacing: .05em; cursor: pointer; transition: background .2s, border-color .2s; }
.lsw__b:hover { background: rgba(127, 110, 100, .12); }
.hd--dark:not(.is-solid) .lsw__b, .lsw--d .lsw__b { border-color: rgba(255, 255, 255, .2); color: #fff; }
.lsw__b img, .lsw__m img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); flex: none; }
.lsw__b .ic { opacity: .7; transition: transform .25s var(--ease); }
.lsw.is-on .lsw__b .ic { transform: rotate(180deg); }
.lsw__m { position: absolute; right: 0; top: calc(100% + 8px); z-index: 75; min-width: 196px; padding: 6px; border-radius: 16px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-3); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity .2s, transform .28s var(--ease-o); }
.lsw.is-on .lsw__m { opacity: 1; transform: none; pointer-events: auto; }
.lsw__m a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.lsw__m a:hover { background: var(--bg-2); }
.lsw__m a[aria-current] { background: var(--red-soft); color: var(--red-ink); }
.lsw__m a .ic { margin-left: auto; }
.hd__act .lsw { margin-right: 4px; }
@media (max-width: 560px) { .lsw__b { height: 40px; padding: 0 8px; gap: 5px; } .lsw__b span { display: none; } .hd__act .lsw { margin-right: 0; } }
.qm__top .lsw { margin-left: 8px; }
/* 3-shop.css — müşteri uygulaması: sipariş sayfası, ürün seçenek ekranı, sepet çekmecesi, sepet, ödeme, 3D Secure, takip, giriş, hesabım, QR masa. */

/* —— sipariş sayfası —— */
.ohd { position: relative; padding: calc(var(--hd-h) + 44px) 0 0; overflow: hidden; isolation: isolate; }
.ohd__bg { position: absolute; inset: 0; z-index: -1; }
.ohd__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.ohd__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--coal) 20%, rgba(20, 16, 17, .55)), linear-gradient(0deg, var(--coal), transparent 60%); }
.ohd__in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; }
.ohd__t .eyebrow { margin-bottom: 12px; }
.ohd__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seg--d { background: rgba(255, 255, 255, .08); }
.seg--d button { color: var(--on-dark-2); }
.seg--d button.is-on { background: var(--paper); color: var(--ink); }
.oaddr { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); text-align: left; max-width: 360px; transition: background .2s; }
.oaddr:hover { background: rgba(255, 255, 255, .14); }
.oaddr > .ic:first-child { color: #ff6b6f; }
.oaddr span { min-width: 0; line-height: 1.2; }
.oaddr small { display: block; font-size: 11.5px; color: var(--on-dark-3); }
.oaddr b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ohd__eta { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 99px; background: var(--red); }
.ohd__eta span { line-height: 1.1; }
.ohd__eta small { display: block; font-size: 11px; opacity: .8; }
.ohd__eta b { font-size: 14.5px; }
.ohd__cp { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 22px; touch-action: pan-x pan-y; cursor: grab; }
.ohd__cp::-webkit-scrollbar { display: none; }
.ocp { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .25); font-size: 13.5px; color: var(--on-dark-2); }
.ocp b { color: #fff; font-weight: 650; }
.ocp .mono { color: #ff8a8d; font-size: 12.5px; }
.ocp:hover { border-color: #ff6b6f; }
.ocats { position: sticky; top: calc(var(--hd-h) + 0px); z-index: 40; background: rgba(246, 240, 230, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: top .5s var(--ease-o); }
.hd-hid .ocats { top: 0; }
.ocats__in { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.ocats__r { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: 1; touch-action: pan-x pan-y; padding: 2px; }
.ocats__r::-webkit-scrollbar { display: none; }
.ocats .chip { flex: none; height: 40px; }
.osearch { width: 280px; flex: none; }
.osearch .inp { height: 44px; border-radius: 99px; }
@media (max-width: 760px) { .ocats__in { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .osearch { width: 100%; } }
.opg { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; padding-block: 28px 80px; }
.osec { padding-top: 28px; scroll-margin-top: 160px; }
.osec__h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.ogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc--row { flex-direction: row-reverse; align-items: stretch; }
.pc--row .pc__img { width: 260px; flex: none; aspect-ratio: auto; }
.pc--row .pc__tag { left: auto; right: 10px; top: auto; bottom: 10px; display: none; }
.pc--row .pc__fav { right: auto; left: 12px; top: 12px; width: 34px; height: 34px; }
.pc--row .pc__fav .ic { width: 17px; height: 17px; }
.pc--row .pc__bd { padding: 16px 16px 14px; }
.pc--row:hover { transform: translateY(-3px); }
.pc--row .pc__fav { left: auto; right: 12px; }
.oside { position: sticky; top: calc(var(--hd-h) + 90px); padding: 20px; display: grid; gap: 14px; transition: top .5s var(--ease-o); max-height: calc(100dvh - var(--hd-h) - 110px); overflow: auto; }
.hd-hid .oside { top: 90px; }
.oside__h { display: flex; align-items: baseline; justify-content: space-between; }
.oside__l { justify-self: center; }
.oside .empty { padding: 28px 10px; }
.obar { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 20px 0 10px; border-radius: 20px; background: var(--red); color: #fff; font-weight: 700; box-shadow: 0 18px 40px -12px rgba(227, 30, 36, .7); transform: translateY(140%); transition: transform .5s var(--ease-o); }
.obar.is-on { transform: none; }
.obar__n { width: 42px; height: 42px; border-radius: 14px; background: rgba(0, 0, 0, .18); display: grid; place-items: center; font-weight: 800; }
.obar b { margin-left: auto; font: 800 semi-expanded 18px var(--f-d); }
@media (min-width: 1101px) { .obar { display: none; } }
@media (max-width: 1100px) { .opg { grid-template-columns: 1fr; } .oside { display: none; } }
@media (max-width: 900px) { .ogrid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pc--row .pc__img { width: 42vw; } .pc--row .pc__d { -webkit-line-clamp: 2; font-size: 13px; } .pc--row .pc__k { display: none; } .pc--row .pc__t { font-size: 16px; } .pc--row .pc__bd { padding: 14px 12px 12px 14px; } .pc--row .pc__fav { width: 30px; height: 30px; right: 8px; top: 8px; } .pc--row .pc__add { width: 38px; height: 38px; } }

/* —— ürün seçenek ekranı —— */
.psheet .modal__box { width: min(980px, 100%); padding: 0; }
.ps { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; min-height: min(640px, calc(100dvh - 40px)); }
.ps__media { grid-row: 1 / 3; position: relative; background: var(--coal); }
.ps__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps__tags { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.ps__bd { padding: 28px 28px 10px; overflow: auto; max-height: calc(100dvh - 40px - 92px); display: grid; gap: 22px; align-content: start; }
.ps__hd { display: grid; gap: 10px; padding-right: 40px; }
.ps__t { font: 850 expanded clamp(26px, 2.6vw, 34px)/1.05 var(--f-d); text-transform: uppercase; letter-spacing: -.01em; }
.ps__d { color: var(--ink-2); font-size: 15px; }
.ps__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13.5px; color: var(--mut); }
.ps__meta span { display: inline-flex; align-items: center; gap: 6px; }
.og { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.og legend { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin-bottom: 10px; font: 800 semi-expanded 16px/1.2 var(--f-d); }
.og legend em { font: 600 12px var(--f-b); font-style: normal; color: var(--mut); background: var(--bg-2); padding: 5px 9px; border-radius: 99px; }
.og__l { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.opt:hover { border-color: var(--line-2); }
.opt input { appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 1.8px solid var(--line-2); flex: none; transition: all .15s; background: var(--paper) center / 13px no-repeat; }
.opt input[type=checkbox] { border-radius: 7px; }
.opt input:checked { border-color: var(--red); background-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='3.4' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.opt input[type=radio]:checked { background-image: radial-gradient(circle, #fff 0 4px, transparent 5px); }
.opt:has(input:checked) { border-color: var(--red); background: #fff8f6; }
.opt__n { flex: 1; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.opt__p { font-size: 13.5px; color: var(--mut); font-weight: 600; }
.opt:has(input:checked) .opt__p { color: var(--red-ink); }
.opt__h { width: 30px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #f6d36b, #ff8a3c, var(--red), #8f0c12); -webkit-mask: linear-gradient(90deg, #000 var(--hv), transparent var(--hv)); mask: linear-gradient(90deg, #000 var(--hv), transparent var(--hv)); background-color: transparent; }
.opt__h[data-h="0"] { --hv: 8%; } .opt__h[data-h="1"] { --hv: 35%; } .opt__h[data-h="2"] { --hv: 68%; } .opt__h[data-h="3"] { --hv: 100%; }
.ps__ft { display: flex; gap: 12px; align-items: center; padding: 16px 28px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.ps__go { flex: 1; justify-content: space-between; }
@media (max-width: 720px) {
  .ps { display: block; min-height: 0; }
  .ps__media { aspect-ratio: 4 / 3; }
  .ps__bd { max-height: none; overflow: visible; padding: 22px 18px 10px; }
  .ps__ft { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .2); }
  .ps__go { padding: 0 18px; }
}

/* —— sepet satırları + çekmece —— */
.cartd { width: min(480px, 100%); }
.cls { display: grid; gap: 4px; }
.cl { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cl img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.cl__b { min-width: 0; display: grid; gap: 4px; }
.cl__t { font-weight: 700; font-size: 15px; line-height: 1.3; }
.cl__o { font-size: 12.5px; color: var(--mut); line-height: 1.4; }
.cl__n { font-style: italic; }
.cl__f { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cl__p { margin-left: auto; font: 800 semi-expanded 15.5px var(--f-d); white-space: nowrap; }
.cl--ro { grid-template-columns: 48px 1fr auto; align-items: center; padding: 10px 0; }
.cl--ro img { width: 48px; height: 48px; border-radius: 12px; }
.cls--s .cl { padding: 10px 0; }
.cls--l .cl { grid-template-columns: 92px 1fr; }
.cls--l .cl img { width: 92px; height: 92px; border-radius: 18px; }
.fbar { padding: 14px; border-radius: 16px; background: var(--bg-2); display: grid; gap: 10px; }
.fbar__t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.fbar__t .ic { color: var(--red-ink); }
.fbar__b { height: 7px; border-radius: 9px; background: rgba(127, 110, 100, .2); overflow: hidden; }
.fbar__b i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--ember), var(--red)); transition: width .8s var(--ease); }
.fbar.is-ok { background: var(--leaf-soft); }
.fbar.is-ok .fbar__t .ic { color: var(--leaf); }
.fbar.is-ok .fbar__b i { background: var(--leaf); }
.ups { margin-top: 22px; }
.ups__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.ups__r { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 6px; touch-action: pan-x pan-y; cursor: grab; }
.ups__r::-webkit-scrollbar { display: none; }
.ups__i { position: relative; flex: none; width: 128px; text-align: left; display: grid; gap: 4px; font-size: 13px; }
.ups__i img { width: 156px; height: 156px; border-radius: 16px; object-fit: cover; margin-bottom: 4px; }
.ups__i span { font-weight: 650; line-height: 1.25; }
.ups__i b { font-size: 13.5px; }
.ups__i i { position: absolute; right: 8px; top: 92px; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: var(--sh-1); transition: background .2s, color .2s; }
.ups__i:hover i { background: var(--red); color: #fff; }
.ups__i i .ic { width: 16px; height: 16px; }
.ups--grid .ups__r { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
.ups--grid .ups__i, .ups--grid .ups__i img { width: 100%; height: auto; aspect-ratio: 1; }
.ups--grid .ups__i { aspect-ratio: auto; }
.ups--grid .ups__i i { top: auto; bottom: 64px; }
.ups--card { padding: 20px; margin-top: 16px; }
.sum { display: grid; gap: 8px; margin: 4px 0 14px; font-size: 14.5px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum dt { color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.sum dd { font-weight: 700; }
.sum .ok { color: var(--leaf); }
.sum__d dd, .sum__d dt { color: var(--leaf); }
.sum__t { padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--line-2); }
.sum__t dt { color: var(--ink); font-weight: 700; font-size: 16px; }
.sum__t dd { font: 850 expanded 22px var(--f-d); }
.warn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9a5b00; background: #fff4dc; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; }
.ok { color: var(--leaf); display: flex; align-items: center; gap: 6px; }
.drawer__ft .row .btn { flex: 1; padding: 0 16px; }
.drawer__ft .row .btn--line { flex: 0 0 auto; }

/* —— sepet + ödeme sayfaları —— */
.cpw { padding-bottom: 90px; }
.cpe { max-width: 560px; margin: 20px auto; padding: 56px 28px; }
.cpg, .cog { display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; }
.cpg__m, .cog__m { display: grid; gap: 16px; min-width: 0; }
.cpg__s, .cog__s { align-self: stretch; }
.cpg__s > div, .cog__s > div { position: sticky; top: var(--stk); transition: top .5s var(--ease-o); display: grid; gap: 14px; }
.cpg__mode { margin: 18px 0; }
.ecochk { display: flex; padding: 16px; border-radius: 16px; background: var(--leaf-soft); margin-top: 18px; }
.cpf .inp { padding-right: 110px; }
.cpl { display: grid; gap: 8px; }
.cpn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--line-2); text-align: left; transition: border-color .2s, background .2s; }
.cpn:hover { border-color: var(--red); }
.cpn.is-on { border-style: solid; border-color: var(--leaf); background: var(--leaf-soft); }
.cpn__c { padding: 6px 9px; border-radius: 9px; background: var(--coal); color: #fff; font-size: 12.5px; font-weight: 700; flex: none; }
.cpn__t { flex: 1; font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.cpn__t small { display: block; font-weight: 500; color: var(--mut); font-size: 12px; }
.cpn.is-on .ic { color: var(--leaf); }
.cpg__safe { display: flex; align-items: center; justify-content: center; gap: 6px; }
@media (max-width: 1000px) { .cpg, .cog { grid-template-columns: 1fr; } .cpg__s > div, .cog__s > div { position: relative; top: 0; } }
.steps { display: flex; gap: 8px; margin-bottom: 22px; font-size: 14px; font-weight: 650; color: var(--mut); overflow-x: auto; scrollbar-width: none; }
.steps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.steps li + li::before { content: ""; width: 28px; height: 1.5px; background: var(--line-2); }
.steps i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; background: var(--bg-2); }
.steps .is-on { color: var(--ink); }
.steps .is-on i { background: var(--red); color: #fff; }
.steps .is-done i { background: var(--leaf); color: #fff; }
.cos { display: grid; gap: 16px; }
.cos__h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cos__n { width: 32px; height: 32px; border-radius: 50%; background: var(--coal); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.cos__l { margin-top: 4px; }
.cos__x { margin-top: 4px; }
.seg--s button { height: 34px; padding: 0 12px; font-size: 13px; }
.who { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.alist { display: grid; gap: 10px; }
.alist--g { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.aopt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; border: 1.5px solid var(--line); cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.aopt:hover { border-color: var(--line-2); }
.aopt input { position: absolute; opacity: 0; }
.aopt:has(input:checked) { border-color: var(--red); background: #fff8f6; }
.aopt:has(input:checked)::after { content: ""; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='3.4' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.aopt__i { width: 42px; height: 42px; border-radius: 14px; background: var(--bg-2); display: grid; place-items: center; flex: none; }
.aopt:has(input:checked) .aopt__i { background: var(--red); color: #fff; }
.aopt b { display: block; font-size: 15px; }
.aopt small { display: block; font-size: 13px; color: var(--mut); line-height: 1.45; margin-top: 2px; }
.aopt--new { border-style: dashed; align-items: center; }
.aopt--new > .ic { width: 42px; height: 42px; padding: 10px; border-radius: 14px; background: var(--coal); color: #fff; }
.pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.pay { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border-radius: 16px; border: 1.5px solid var(--line); font-size: 13px; font-weight: 650; text-align: center; transition: border-color .2s, background .2s; }
.pay:hover { border-color: var(--line-2); }
.pay.is-on { border-color: var(--red); background: #fff8f6; color: var(--red-ink); }
.payb { display: grid; gap: 14px; }
.sc { display: grid; gap: 8px; }
.sco { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; }
.sco input { appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 1.8px solid var(--line-2); flex: none; }
.sco input:checked { border: 7px solid var(--red); }
.sco:has(input:checked) { border-color: var(--red); background: #fff8f6; }
.sco__b { width: 54px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #1a1f71; color: #fff; flex: none; }
.sco__b .ic { width: 34px; height: 22px; }
.sco__b--mastercard { background: #111; color: #f79e1b; }
.sco small { display: block; font-size: 12.5px; color: var(--mut); }
.ncard { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .ncard { grid-template-columns: 1fr; } }
.vcard { position: relative; width: 100%; max-width: 330px; aspect-ratio: 1.586; perspective: 1000px; }
.vcard > div { position: absolute; inset: 0; border-radius: 18px; padding: 18px 20px; color: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s var(--ease-o); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5); overflow: hidden; }
.vcard__f { background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .22), transparent 40%), linear-gradient(135deg, #2a2324 0%, #141011 60%, #3a1514 100%); display: flex; flex-direction: column; justify-content: space-between; }
.vcard[data-brand=visa] .vcard__f { background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .25), transparent 40%), linear-gradient(135deg, #1a1f71, #0b0f4a); }
.vcard[data-brand=mastercard] .vcard__f { background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .2), transparent 40%), linear-gradient(135deg, #e31e24 0%, #7a0b10 100%); }
.vcard[data-brand=troy] .vcard__f { background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .2), transparent 40%), linear-gradient(135deg, #00a4a6, #00595a); }
.vcard__b { background: linear-gradient(135deg, #2a2324, #141011); transform: rotateY(180deg); padding: 22px 0 0 !important; }
.vcard.is-flip .vcard__f { transform: rotateY(-180deg); }
.vcard.is-flip .vcard__b { transform: rotateY(0); }
.vcard__top { display: flex; justify-content: space-between; align-items: center; }
.vcard__chip { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f3d48a, #b98b2e); }
.vcard__br .ic { width: 52px; height: 32px; }
.vcard__no { font-size: clamp(17px, 2vw, 20px); letter-spacing: .08em; }
.vcard__bt { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.vcard__bt small, .vcard__cvv small { display: block; font-size: 9.5px; opacity: .65; text-transform: uppercase; letter-spacing: .1em; }
.vcard__bt b { font-weight: 650; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: block; }
.vcard__strip { height: 40px; background: #000; }
.vcard__cvv { margin: 18px 20px 0; padding: 8px 12px; background: #fff; color: var(--ink); border-radius: 6px; text-align: right; }
.vcard__cvv small { color: var(--mut); opacity: 1; }
.ncard__f { display: grid; gap: 14px; }
.troy { font: 900 italic 15px/1 var(--f-b); letter-spacing: -.02em; }
.test { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); color: var(--ink-2); line-height: 1.5; }
.dpay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dpay__b { height: 56px; border-radius: 14px; background: #000; color: #fff; display: grid; place-items: center; }
.dpay__b .ic { width: 64px; height: 30px; }
.dpay__b--g { background: #fff; color: #000; border: 1.5px solid var(--line-2); }
.wal { display: grid; gap: 12px; }
.wal__c { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-radius: 18px; background: var(--coal); color: #fff; }
.wal__c span { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.cobr { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); }
.earn { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fff4d0; color: #6e4c00; font-size: 13.5px; }
.paylogos { display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--mut); }
.paylogos .ic { width: 34px; height: 22px; }
/* 3D Secure + sonuç */
.s3d { width: min(420px, 100%); overflow: hidden; }
.s3d__hd { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #0e2a52; color: #fff; }
.s3d__bank { display: flex; align-items: center; gap: 10px; }
.s3d__v { display: flex; align-items: center; gap: 4px; }
.s3d__v .ic { width: 40px; height: 24px; }
.s3d__v small { font-size: 11px; opacity: .8; }
.s3d__bd { padding: 26px 22px 20px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.s3d__i { width: 64px; height: 64px; border-radius: 50%; background: #e8eef8; color: #0e2a52; display: grid; place-items: center; }
.s3d__i .ic { width: 30px; height: 30px; }
.s3d .btn { width: 100%; }
.res { width: min(460px, 100%); padding: 36px 28px 28px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.res__i { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--red-soft); color: var(--red); }
.res__i .ic { width: 42px; height: 42px; }
.res__i--ok { background: var(--leaf-soft); }
.res__i--ok svg { width: 64px; height: 64px; fill: none; stroke: var(--leaf); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.res__i--ok circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .8s var(--ease-o) forwards; }
.res__i--ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .5s var(--ease-o) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.res .row { width: 100%; }
.pin { display: grid; justify-items: center; gap: 2px; padding: 14px 26px; border-radius: 18px; background: var(--coal); color: #fff; }
.pin span { font-size: 12px; opacity: .7; }
.pin b { font-size: 34px; letter-spacing: .25em; padding-left: .25em; }
.pin small { font-size: 11.5px; opacity: .6; }
/* adres modalları */
.amod { width: min(520px, 100%); }
.amod__in { padding: 28px 24px 24px; display: grid; gap: 14px; }
.namod { width: min(860px, 100%); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.namod__map { position: relative; min-height: 460px; background: var(--bg-2); }
#namap { position: absolute; inset: 0; }
.namod__pin { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -100%); color: var(--red); pointer-events: none; transition: transform .25s var(--ease); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.namod__pin .ic { width: 46px; height: 46px; fill: var(--red); stroke: #fff; stroke-width: 1.5; }
.namod.is-mv .namod__pin { transform: translate(-50%, -120%); }
.namod__loc { position: absolute; right: 12px; top: 12px; z-index: 500; background: var(--paper); box-shadow: var(--sh-1); }
.namod__zone { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 500; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--leaf); color: #fff; font-size: 13px; font-weight: 650; }
.namod__zone.is-no { background: var(--red); }
.namod__f { padding: 26px 24px; display: grid; gap: 14px; align-content: start; }
@media (max-width: 720px) { .namod { grid-template-columns: 1fr; } .namod__map { min-height: 300px; } }

/* —— sipariş takip —— */
.trk { padding-top: var(--hd-h); }
.trk__g { display: grid; grid-template-columns: 1fr 440px; min-height: calc(100dvh - var(--hd-h)); }
.trk__map { position: relative; background: var(--bg-2); min-height: 420px; }
.trk__map > div { position: absolute; inset: 0; }
.trk__p { padding: 26px clamp(16px, 3vw, 30px) 40px; display: grid; gap: 16px; align-content: start; background: var(--bg); border-left: 1px solid var(--line); }
.trk__h { display: grid; gap: 8px; }
.trk__st { font-size: clamp(30px, 3vw, 40px); }
.trk__eta { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-l); background: var(--coal); color: #fff; }
.trk__eta b { font: 850 expanded 44px/1 var(--f-d); }
.trk__eta small { display: block; color: var(--on-dark-3); font-size: 13px; }
.trk__eta .pin { margin-left: auto; padding: 10px 16px; background: var(--red); }
.trk__eta .pin b { font-size: 24px; }
.tst { display: grid; gap: 0; }
.tst li { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; padding-bottom: 20px; color: var(--mut); }
.tst li::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.tst li:last-child::before { display: none; }
.tst li.is-done::before { background: var(--red); }
.tst i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); position: relative; z-index: 1; }
.tst i .ic { width: 16px; height: 16px; }
.tst b { display: block; color: var(--ink); font-size: 15px; }
.tst small { font-size: 12.5px; }
.tst time { font-size: 13px; font-family: var(--f-m); padding-top: 6px; }
.tst li.is-done i { background: var(--red); color: #fff; }
.tst li.is-now i { background: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(227, 30, 36, .18); }
.tst li.is-now i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--red); animation: pulse2 1.8s var(--ease) infinite; }
@keyframes pulse2 { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.tst li.is-now b { color: var(--red-ink); }
.crd { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); }
.crd b { display: block; }
.crd small { color: var(--mut); font-size: 13px; }
.crd .row { margin-left: auto; gap: 6px; }
.trk__sum { padding: 18px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 6px; }
.trk__look { max-width: 520px; margin: 40px auto; display: grid; gap: 16px; padding: 32px; }
.rate { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-l); background: var(--paper); border: 1.5px solid var(--red); }
.rate__s { display: flex; gap: 6px; }
.rate__s button { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #d9cfc9; transition: transform .2s, color .2s; }
.rate__s button.is-on { color: #f2a50c; }
.rate__s button.is-on .ic { fill: currentColor; }
.rate__s button:hover { transform: scale(1.1); }
@media (max-width: 980px) { .trk__g { grid-template-columns: 1fr; } .trk__map { min-height: 46vh; height: 46vh; position: sticky; top: var(--hd-h); z-index: 0; } .trk__p { border-left: 0; border-radius: 28px 28px 0 0; margin-top: -28px; position: relative; z-index: 2; box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .3); } }
.kpin { width: 50px !important; height: 50px !important; }

/* —— giriş —— */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.auth__v { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 60px); }
.auth__v > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.auth__v::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 17, .1), var(--coal)); }
.auth__q { position: relative; z-index: 1; display: grid; gap: 16px; max-width: 460px; }
.auth__f { padding: calc(var(--hd-h) + 40px) clamp(16px, 5vw, 72px) 60px; display: grid; align-content: center; }
.auth__c { width: min(440px, 100%); margin: 0 auto; display: grid; gap: 18px; }
.auth__c .tabs { margin-bottom: 4px; }
.auth__soc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth__or { display: flex; align-items: center; gap: 12px; color: var(--mut); font-size: 13px; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__demo { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__v { display: none; } }

/* —— hesabım —— */
.acp { padding-top: calc(var(--hd-h) + 32px); padding-bottom: 80px; }
.acg { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.acn { position: sticky; top: var(--stk); transition: top .5s var(--ease-o); display: grid; gap: 4px; padding: 16px; }
.acn__u { display: flex; align-items: center; gap: 12px; padding: 6px 6px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.acn__u b { display: block; }
.acn button, .acn a.acn__l { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-weight: 650; font-size: 15px; color: var(--ink-2); text-align: left; transition: background .2s, color .2s; }
.acn button:hover { background: var(--bg-2); }
.acn button.is-on { background: var(--coal); color: #fff; }
.acn button .n { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); }
.acn button.is-on .n { background: var(--red); color: #fff; }
.acm { display: grid; gap: 18px; min-width: 0; }
.ach { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.ach__c { padding: 22px; border-radius: var(--r-l); display: grid; gap: 10px; align-content: start; }
.ach__c--p { background: var(--coal); color: #fff; position: relative; overflow: hidden; }
.ach__c--p::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 30, 36, .5), transparent 65%); }
.ach__big { font: 850 expanded 40px/1 var(--f-d); }
.pbar { height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--ember), var(--red)); }
.ord { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-l); background: var(--paper); border: 1px solid var(--line); }
.ord__im { display: flex; }
.ord__im img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; border: 2px solid var(--paper); }
.ord__im img + img { margin-left: -18px; }
.ord__b b { display: block; }
.ord__b small { color: var(--mut); font-size: 13px; display: block; }
.ord__a { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1000px) { .acg { grid-template-columns: 1fr; } .acn { position: relative; top: 0; grid-auto-flow: column; overflow-x: auto; grid-auto-columns: max-content; padding: 8px; scrollbar-width: none; } .acn__u { display: none; } .ach { grid-template-columns: 1fr 1fr; } .ach__c--p { grid-column: 1 / -1; } }
@media (max-width: 620px) { .ord { grid-template-columns: 1fr; } .ord__a { justify-content: flex-start; } .ach { grid-template-columns: 1fr; } }
.acgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cardv { padding: 18px; border-radius: var(--r-l); color: #fff; aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #1a1f71, #0b0f4a); position: relative; }
.cardv--mastercard { background: linear-gradient(135deg, #e31e24, #7a0b10); }
.cardv .ic--b { width: 50px; height: 30px; }
.cardv .icb { position: absolute; right: 8px; top: 8px; color: #fff; }

/* —— QR masa —— */
.pg-qr { background: var(--coal); }
.qrw { display: grid; grid-template-columns: 1fr minmax(360px, 460px) 1fr; min-height: 100dvh; }
.qrw__side { grid-column: 1; padding: 40px clamp(20px, 3vw, 48px); display: grid; gap: 16px; align-content: center; justify-items: start; }
.qrw__logo { --lw: 100px; margin-bottom: 12px; }
.qrw__code { width: 180px; height: 180px; padding: 12px; background: #fff; border-radius: 18px; }
.qrw__code svg, .qrw__code img { width: 100%; height: 100%; }
.qrw__app { grid-column: 2; background: var(--bg); position: relative; min-height: 100dvh; box-shadow: 0 0 80px rgba(0, 0, 0, .5); }
@media (max-width: 1100px) { .qrw { grid-template-columns: 1fr minmax(360px, 460px); } }
@media (max-width: 820px) { .qrw { display: block; } .qrw__side { display: none; } .qrw__app { box-shadow: none; } }
.qa__hd { position: sticky; top: 0; z-index: 20; background: var(--coal); color: #fff; padding: 14px 16px 0; }
.qa__top { display: flex; align-items: center; gap: 10px; }
.qa__top .logo { --lw: 58px; }
.qa__tb { margin-left: auto; text-align: right; line-height: 1.15; }
.qa__tb small { display: block; font-size: 11.5px; color: var(--on-dark-3); }
.qa__tb b { font: 850 expanded 20px var(--f-d); }
.qa__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.qa__acts button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-weight: 650; font-size: 14px; transition: background .2s; }
.qa__acts button:hover, .qa__acts button.is-on { background: var(--red); }
.qa__tabs { display: flex; gap: 2px; }
.qa__tabs button { flex: 1; padding: 13px 4px; font-weight: 700; font-size: 14px; color: var(--on-dark-3); border-bottom: 3px solid transparent; display: flex; justify-content: center; align-items: center; gap: 6px; }
.qa__tabs button.is-on { color: #fff; border-color: var(--red); }
.qa__tabs .n { font-size: 11px; background: var(--red); color: #fff; border-radius: 99px; padding: 1px 7px; }
.qa__cats { position: sticky; top: 0; z-index: 10; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 12px 16px; background: rgba(246, 240, 230, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); touch-action: pan-x pan-y; }
.qa__cats::-webkit-scrollbar { display: none; }
.qa__cats .chip { flex: none; height: 38px; }
.qa__bd { padding: 16px 16px 120px; display: grid; gap: 22px; }
.qa__sec h2 { margin-bottom: 12px; }
.qi { display: grid; grid-template-columns: 1fr 132px; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.qi img { width: 132px; height: 132px; border-radius: 16px; object-fit: cover; }
.qi b { display: block; font-size: 15.5px; line-height: 1.25; }
.qi p { font-size: 13px; color: var(--mut); line-height: 1.45; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qi__m { position: relative; }
.qi__m .pc__add { position: absolute; right: -6px; bottom: -6px; width: 36px; height: 36px; border: 3px solid var(--bg); }
.qa__bar { position: sticky; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.qa__bar .btn { width: 100%; justify-content: space-between; }
.qbill { display: grid; gap: 12px; }
.qbill__h { display: flex; align-items: center; justify-content: space-between; }
.qline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.qline label { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; }
.qline b { font-size: 14.5px; display: block; }
.qline small { font-size: 12px; color: var(--mut); }
.qst { font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 99px; background: var(--bg-2); white-space: nowrap; }
.qst--hazirlaniyor { background: #fff1d6; color: #8a5a00; }
.qst--hazir, .qst--teslim { background: var(--leaf-soft); color: #1f5e35; }
.tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tips button { height: 48px; border-radius: 14px; border: 1.5px solid var(--line-2); font-weight: 700; font-size: 14px; }
.tips button.is-on { border-color: var(--red); background: #fff8f6; color: var(--red-ink); }
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.split button { padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--line); display: grid; justify-items: center; gap: 4px; font-size: 13px; font-weight: 650; }
.split button.is-on { border-color: var(--red); background: #fff8f6; color: var(--red-ink); }
.ppl { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.qcall { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: rgba(20, 16, 17, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: toastIn .4s var(--ease-o); }
.qcall__c { width: min(320px, calc(100% - 40px)); padding: 30px 24px; border-radius: 28px; background: var(--paper); text-align: center; display: grid; gap: 12px; justify-items: center; }
.qcall__i { width: 84px; height: 84px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; position: relative; }
.qcall__i::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--red); animation: pulse 1.6s var(--ease) infinite; }
.qcall__i .ic { width: 38px; height: 38px; }
/* ek: karşılama, şifre gücü, mesaj balonları, aktif sipariş kartı */
.qwel { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; }
.qwel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.qwel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 16, 17, .1), var(--coal) 62%); }
.qwel__in { position: relative; z-index: 1; padding: 28px 22px calc(28px + env(safe-area-inset-bottom)); display: grid; gap: 16px; width: 100%; }
.auth__lg { justify-self: start; }
.pws { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.pws i { height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.pws .on1 { background: var(--red); } .pws .on2 { background: #f59e0b; } .pws .on3 { background: #84cc16; } .pws .on4 { background: var(--leaf); }
.chatl { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 4px; }
.bub { justify-self: start; max-width: 80%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--bg-2); font-size: 14.5px; animation: toastIn .35s var(--ease-o); }
.bub--me { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--red); color: #fff; }
.card--act { border: 1.5px solid var(--red); background: #fff8f6; }
.mpin--k.is-wait > span::after { display: none; }
.qa__top .logo { --lw: 74px; }
.qrw__logo { --lw: 124px; }
.auth__lg .logo { --lw: 124px !important; }
.qwel .logo { --lw: 140px !important; }
.cpg > *, .cog > *, .cpg__m > *, .cog__m > *, .cpg__s > div > *, .cog__s > div > * { min-width: 0; }
.cl__f { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 560px) { .cls--l .cl { grid-template-columns: 72px 1fr; } .cls--l .cl img { width: 72px; height: 72px; border-radius: 16px; } .pays { grid-template-columns: repeat(2, 1fr); } }

/* —— geniş görseller: telefonda tek sütun kart, galeride her üçüncü kare tam genişlik —— */
@media (max-width: 560px) {
  .mgrid { grid-template-columns: 1fr; gap: 16px; }
  .mgrid .pc__d { display: -webkit-box; }
  .mgrid .pc__bd { padding: 16px; }
  .gal { grid-template-columns: 1fr 1fr; }
  .gal__i:nth-child(3n + 1) { grid-column: span 2; }
}

/* —— telefonda ana görsel: ilk ekranda en üstte, kenardan kenara et tantuni —— */
@media (max-width: 980px) {
  .hero { padding-top: 0; }
  .hero__in { gap: 26px; }
  .hero__in > .hero__vis { order: -1; margin: 0 calc(var(--gut) * -1); }
  .hero__stage { aspect-ratio: auto; height: min(52svh, 105vw); max-width: none; margin: 0; }
  .hero__badge { -webkit-mask: none; mask: none; clip-path: none; border-radius: 0 0 28px 28px; overflow: hidden; }
  .hs__s img, .hs__s.is-on img { transform: none; }
  .hero__ring, .hero__card { display: none; }
  .hs__dots { top: auto; bottom: 12px; z-index: 2; }
}