/* =====================================================================
   Menurant QR Menu v6 - mobil oncelikli tasarim
   Temalar: .t-aydinlik | .t-gece | .t-krem | .t-minimal
   Duzenler: .d-list | .d-grid | .d-big       Vurgu rengi: --accent
   ===================================================================== */
:root {
    --accent: #ff6b57; --accent-ink: #fff; --accent-rgb: 255,107,87;
    --bg-glass: rgba(245,246,250,.9); --surface-glass: rgba(255,255,255,.94); --ok-soft: rgba(22,163,74,.12); --off-soft: rgba(220,38,38,.1);
    --bg: #f5f6fa; --surface: #ffffff; --surface-2: #f3f4f8; --text: #111827; --muted: #6b7280; --faint: #9ca3af; --border: #eceef3;
    --radius: 18px; --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
    --shadow-lg: 0 24px 60px rgba(16,24,40,.18);
    --heading: var(--font);
    --ok: #16a34a; --off: #dc2626;
    --dock-h: 66px;
    --wrap: 1180px;
}
.t-gece { --bg: #0b0f17; --surface: #141a25; --surface-2: #1c2433; --text: #f1f5f9; --muted: #9aa7bb; --faint: #64748b; --border: #253047; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.6); --ok: #4ade80; --off: #f87171; --bg-glass: rgba(11,15,23,.9); --surface-glass: rgba(20,26,37,.94); --ok-soft: rgba(74,222,128,.12); --off-soft: rgba(248,113,113,.14); }
.t-krem { --bg: #f6f0e6; --surface: #fffcf6; --surface-2: #f3eadb; --text: #2b2118; --muted: #7a6a5a; --faint: #a8998a; --border: #e9dcc8; --heading: 'Playfair Display', Georgia, serif; --shadow: 0 1px 2px rgba(60,40,20,.05), 0 10px 26px rgba(60,40,20,.08); --bg-glass: rgba(246,240,230,.92); --surface-glass: rgba(255,252,246,.95); }
.t-minimal { --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f7f9; --text: #0f172a; --muted: #64748b; --border: #e7e9ee; --shadow: none; --radius: 14px; --bg-glass: rgba(255,255,255,.92); --surface-glass: rgba(255,255,255,.96); }

/* Vurgu renginde yazilan metinler icin okunur ton: isletme hangi rengi secerse secsin (sari gibi acik renkler
   dahil) metin rengiyle yarim yarima karisarak okunakli kalir. Tema sinifi body'de oldugu icin body'de tanimlanir. */
body { --accent-text: var(--accent); }
@supports (color: color-mix(in srgb, red 50%, blue)) { body { --accent-text: color-mix(in srgb, var(--accent) 50%, var(--text)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; }
body {
    margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
    font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .55); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Ust bantlar ---------- */
.notice-bar, .preview-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; font-size: .86rem; font-weight: 600; text-align: center; background: #fef2f2; color: #b91c1c; }
.notice-bar.warn { background: #fffbeb; color: #92400e; }
.preview-bar { background: #1e293b; color: #e2e8f0; }
.t-gece .notice-bar { background: #3b1414; color: #fecaca; } .t-gece .notice-bar.warn { background: #3b2a0c; color: #fde68a; }

/* ---------- Hero ---------- */
.hero { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 14px 14px 0; }
.hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 150px; background-color: var(--accent); background-image: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.28), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(0,0,0,.28), transparent 60%); border-radius: 0 0 28px 28px; }
.hero.has-cover::before { display: none; }
.hero-cover { width: 100%; height: 210px; object-fit: cover; border-radius: 22px; background: var(--surface-2); }
.hero.has-cover::after { content: ''; position: absolute; inset: 14px 14px auto; height: 210px; border-radius: 22px; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%); pointer-events: none; }
.hero-top { position: absolute; top: 24px; inset-inline-end: 24px; display: flex; gap: 8px; z-index: 3; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px; justify-content: center; border-radius: 14px; border: 1px solid rgba(255,255,255,.35); background: rgba(15,23,42,.35); color: #fff; font-weight: 700; font-size: .82rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.icon-btn:hover { background: rgba(15,23,42,.5); }
.hero-card { position: relative; z-index: 2; display: flex; gap: 14px; align-items: center; margin: -46px 10px 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); }
.hero:not(.has-cover) .hero-card { margin-top: 70px; }
.hero-logo { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; background: var(--surface-2); border: 3px solid var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,.12); flex-shrink: 0; }
.hero-text { min-width: 0; }
.hero-text h1 { margin: 0; font-family: var(--heading); font-size: 1.32rem; line-height: 1.2; letter-spacing: -.01em; }
.hero-slogan { margin: 3px 0 0; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 30px; font-size: .74rem; font-weight: 700; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--ok); background: var(--ok-soft); }
.chip.off { color: var(--off); background: var(--off-soft); }

/* ---------- Baglanti hapleri ---------- */
.links { max-width: var(--wrap); margin: 14px auto 0; padding: 0 14px 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.links::-webkit-scrollbar { display: none; }
.link-pill { --c: var(--accent); flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; font-size: .84rem; font-weight: 600; color: var(--text); white-space: nowrap; box-shadow: var(--shadow); }
.link-pill i { color: var(--c); font-size: 1rem; }
.link-pill.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.link-pill.accent i { color: var(--accent-ink); }

/* ---------- Yapiskan gezinti ---------- */
.sticky-nav { position: sticky; top: 0; z-index: 40; margin-top: 12px; padding: 10px 0 8px; background: var(--bg-glass); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.sticky-nav.stuck { box-shadow: 0 6px 18px rgba(0,0,0,.06); border-bottom: 1px solid var(--border); }
.search-row, .cats, .filters { max-width: var(--wrap); margin: 0 auto; padding: 0 14px; }
.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.search i { color: var(--faint); }
/* Yazi alanlari en az 16px: iPhone daha kucuk yazili alana dokununca sayfayi kendiliginden yakinlastirir */
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; -webkit-appearance: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search button { border: 0; background: var(--surface-2); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.cats { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.cats::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
.cat { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: .86rem; white-space: nowrap; color: var(--text); transition: background-color .2s, color .2s, border-color .2s; }
.cat i { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; background: var(--surface-2); color: var(--accent); }
.cat img { width: 26px; height: 26px; border-radius: 9px; object-fit: cover; }
.cat.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 16px rgba(var(--accent-rgb), .35); }
.cat.on i { background: rgba(255,255,255,.22); color: var(--accent-ink); }
.filters { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }
.filter { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px dashed var(--border); background: transparent; font-size: .78rem; font-weight: 600; color: var(--muted); }
.filter.on { border-style: solid; border-color: var(--accent); color: var(--accent-text); background: rgba(var(--accent-rgb), .1); }

/* ---------- Bolumler ve urunler ---------- */
.menu { max-width: var(--wrap); margin: 0 auto; padding: 4px 14px 10px; }
.section { padding-top: 18px; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; font-family: var(--heading); font-size: 1.18rem; letter-spacing: -.01em; }
.section-title small { font-family: var(--font); font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 2px 9px; border-radius: 20px; }
.items { display: grid; gap: 12px; }
.item { position: relative; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; }
.item:active { transform: scale(.985); }
@media (hover: hover) { .item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.item-media { position: relative; flex-shrink: 0; background: var(--surface-2); }
.item-media img { width: 100%; height: 100%; object-fit: cover; }
.item-media.ph { display: grid; place-items: center; color: var(--accent); background: radial-gradient(120% 120% at 20% 10%, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .05) 60%), var(--surface-2); }
.item-media.ph > i { font-size: 2.1rem; opacity: .8; filter: drop-shadow(0 6px 12px rgba(var(--accent-rgb), .25)); }
.d-big .item-media.ph > i { font-size: 3rem; }
.item.soldout .item-media.ph { background: var(--surface-2); }
.item.soldout .item-media.ph > i { filter: grayscale(1); opacity: .45; }
.item-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 0; flex: 1; }
/* Menuler cogunlukla telefondan acilir: urun adi, aciklamasi ve etiketleri hicbir gorunumde kesilmez;
   aciklamadaki satir sonlari isletmenin yazdigi gibi korunur, uzun kelimeler tasmaz. */
.item-title { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.item-desc { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.item-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: .7rem; font-weight: 600; }
.tag i { color: var(--accent); font-size: .72rem; }
.item-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
/* ---------- Fiyat etiketi ----------
   Her isletmenin renginde okunakli: tutar daima tema metin renginde (en yuksek kontrast); vurgu rengi yalnizca
   kurus ve para biriminde, metin rengiyle karistirilmis okunur tonda kullanilir (sari gibi acik renkler koyulasir,
   koyu temada acilir). Zemin notr, vurgudan cok hafif ton alir. Izgara ve vitrinde etiket urun gorselinin ustunde
   buzlu camdir; listede kartin altindadir. */
.price {
    --fv: var(--text);
    display: inline-flex; align-items: baseline; gap: 1px; padding: 7px 12px 6px 13px; border-radius: 999px;
    background: var(--surface-2); color: var(--text); line-height: 1; white-space: nowrap;
    font-variant-numeric: lining-nums; direction: ltr; unicode-bidi: isolate;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    /* %50 vurgu + %50 metin: en acik vurgu renginde (sari) bile 4,5:1 uzeri kontrast; koyu temada acik ton */
    .price { --fv: color-mix(in srgb, var(--accent) 50%, var(--text)); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
}
/* Tutar buyuk ve kalin; kurus tutarin parcasi oldugu icin ayni renkte, kucuk ve ustte; ₺ rakamla ayni taban
   cizgisinde, rakam boyunun ~%80'i, bir kademe ince ve vurgu tonunda (glif assets/css/tl-isareti.css'ten gelir). */
.price b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.025em; }
.price sup { position: static; vertical-align: baseline; align-self: flex-start; font-size: .64rem; font-weight: 800; line-height: 1; margin: 1px 0 0 1px; }
.price i { font-style: normal; font-size: .88rem; font-weight: 700; line-height: 1; margin-inline-start: 2px; color: var(--fv); }
.t-krem .price b { font-family: var(--heading); font-weight: 700; letter-spacing: 0; }
.t-minimal .price { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); }
.price.is-off, .item.soldout .price { --fv: var(--muted); color: var(--muted); }
.price.is-off b, .item.soldout .price b { text-decoration: line-through; text-decoration-thickness: 2px; }
/* Gorselin ustunde: fiyat (sol alt) ve ekle dugmesi (sag alt) */
.media-foot { position: absolute; z-index: 2; inset-inline: 8px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.media-foot .price { background: var(--surface-glass); box-shadow: 0 6px 18px rgba(15,23,42,.18); -webkit-backdrop-filter: saturate(170%) blur(10px); backdrop-filter: saturate(170%) blur(10px); }
.t-minimal .media-foot .price { box-shadow: 0 4px 14px rgba(15,23,42,.14), inset 0 0 0 1px var(--border); }
.media-foot .add { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface-glass), 0 8px 18px rgba(15,23,42,.25); }
.rating { font-size: .74rem; font-weight: 700; color: var(--ok); white-space: nowrap; }
.add { margin-inline-start: auto; width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(var(--accent-rgb), .4); transition: transform .15s; }
.add:active { transform: scale(.9); }
.soldout-text { margin-inline-start: auto; font-size: .74rem; font-weight: 700; color: var(--off); }
.soldout-tag { position: absolute; inset-inline-start: 8px; top: 8px; padding: 3px 9px; border-radius: 8px; background: rgba(15,23,42,.8); color: #fff; font-size: .7rem; font-weight: 700; }
.item.soldout .item-media img { filter: grayscale(.9); opacity: .6; }

/* Liste duzeni */
.d-list .item { flex-direction: row-reverse; }
.d-list .item-media { width: 104px; margin: 10px; margin-inline-start: 0; border-radius: 14px; overflow: hidden; align-self: flex-start; aspect-ratio: 1; }
.d-list .item.noimg .item-media { display: none; }
/* Izgara duzeni */
.d-grid .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.d-grid .item { flex-direction: column; }
.d-grid .item-media { aspect-ratio: 1; width: 100%; }
.d-grid .item-body { padding: 10px 12px 12px; gap: 4px; }
.d-grid .item-title { font-size: .9rem; }
.d-grid .item-desc { font-size: .8rem; }
.d-grid .item-tags { gap: 4px; margin-top: 2px; }
.d-grid .tag { font-size: .66rem; padding: 2px 6px; border-radius: 7px; }
.d-grid .media-foot { inset-inline: 7px; bottom: 7px; }
.d-grid .price { padding: 6px 10px 5px 11px; }
.d-grid .price b { font-size: 1rem; }
.d-grid .price i { font-size: .8rem; }
.d-grid .price.uzun b { font-size: .86rem; }
.d-grid .price.uzun i { font-size: .7rem; }
.d-grid .media-foot .add { width: 36px; height: 36px; font-size: .9rem; }
/* Vitrin duzeni */
.d-big .item { flex-direction: column; }
.d-big .item-media { aspect-ratio: 16 / 10; width: 100%; }
.d-big .item-body { padding: 14px 16px 16px; }
.d-big .item-title { font-size: 1.08rem; }
.d-big .media-foot { inset-inline: 12px; bottom: 12px; }
.d-big .price { padding: 9px 15px 8px 16px; }
.d-big .price b { font-size: 1.32rem; }
.d-big .price sup { font-size: .76rem; margin-top: 2px; }
.d-big .price i { font-size: 1.05rem; }
.d-big .media-foot .add { width: 46px; height: 46px; font-size: 1.05rem; }

/* ---------- Bos durum ---------- */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty i { font-size: 2.2rem; color: var(--faint); margin-bottom: 10px; display: block; }
.empty p { margin: 0; }

/* ---------- Alt bilgi ---------- */
.foot { max-width: var(--wrap); margin: 22px auto 0; padding: 0 14px 18px; display: grid; gap: 10px; text-align: center; color: var(--muted); font-size: .8rem; }
.hours { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-align: start; overflow: hidden; }
.hours summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 13px 16px; font-weight: 700; color: var(--text); font-size: .9rem; }
.hours summary::-webkit-details-marker { display: none; }
.hours summary .chip { margin-inline-start: auto; }
.hours ul { list-style: none; margin: 0; padding: 0 16px 10px; }
.hours li { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px dashed var(--border); font-size: .86rem; }
.hours li.today { color: var(--accent-text); font-weight: 700; }
.addr { margin: 0; }
.note { margin: 0; font-size: .74rem; }
.powered { color: var(--faint); text-decoration: none; font-size: .74rem; }
.powered b { color: var(--muted); }

/* ---------- Alt islem cubugu ---------- */
.dock { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); width: min(560px, calc(100% - 20px)); height: var(--dock-h); display: flex; gap: 4px; padding: 6px; background: var(--surface-glass); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); }
.dock-btn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; border-radius: 16px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.dock-btn i { font-size: 1.15rem; }
.dock-btn:hover, .dock-btn:focus-visible { background: var(--surface-2); color: var(--text); }
.dock-btn.cart { background: var(--accent); color: var(--accent-ink); }
.dock-btn.disabled { opacity: .45; }
.dock-btn .badge { position: absolute; top: 4px; inset-inline-end: calc(50% - 26px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: .68rem; display: grid; place-items: center; }

/* ---------- Alt pencereler ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(2,6,23,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .2s ease; }
.sheet-card { position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: var(--shadow-lg); animation: slideUp .28s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom); }
.sheet-card::before { content: ''; position: sticky; top: 8px; display: block; width: 44px; height: 5px; margin: 8px auto -13px; border-radius: 5px; background: var(--border); z-index: 3; }
.sheet-close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.15); display: grid; place-items: center; }
.sheet-body { padding: 22px 20px 22px; }
.sheet-body.center { text-align: center; }
.sheet-body h3 { margin: 4px 0 8px; font-family: var(--heading); font-size: 1.25rem; line-height: 1.25; }
.sheet-icon { width: 58px; height: 58px; border-radius: 18px; margin: 4px auto 12px; display: grid; place-items: center; font-size: 1.5rem; background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.sheet-body > h3 + .muted, .sheet-icon + h3 { text-align: center; }
.muted { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.detail-media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; border-radius: 26px 26px 0 0; }
.detail-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-desc { color: var(--muted); margin: 0 0 12px; white-space: pre-line; }
.detail-price { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.detail-price .price { padding: 9px 16px 8px 17px; }
.detail-price .price b { font-size: 1.5rem; }
.detail-price .price sup { font-size: .84rem; margin-top: 3px; }
.detail-price .price i { font-size: 1.2rem; }
.opt-group { border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin: 14px 0 0; }
.opt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-weight: 700; font-size: .92rem; }
.opt-head span { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.opt-head span.req { background: rgba(var(--accent-rgb), .14); color: var(--accent-text); }
.opt-group.err { border-color: var(--off); }
.opt { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px dashed var(--border); cursor: pointer; font-size: .9rem; }
.opt:first-of-type { border-top: 0; }
.opt input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.opt em { margin-inline-start: auto; font-style: normal; color: var(--muted); font-weight: 600; font-size: .84rem; }
#urunSiparis textarea, .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--border); background: var(--surface-2); border-radius: 14px; padding: 12px 14px; font-size: 16px; outline: none; resize: vertical; }
#urunSiparis textarea { margin-top: 14px; min-height: 52px; }
#urunSiparis textarea:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--surface); }
.detail-buy { display: flex; gap: 10px; align-items: center; margin-top: 12px; position: sticky; bottom: 0; padding: 10px 0 2px; background: var(--surface); }
.qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); flex-shrink: 0; }
.qty button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: var(--surface); font-size: 1.15rem; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.qty span { min-width: 28px; text-align: center; font-weight: 800; }
.btn-primary { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .95rem; text-decoration: none; box-shadow: 0 10px 22px rgba(var(--accent-rgb), .35); }
.btn-primary:disabled { opacity: .6; }
.buy-btn .ayrac { opacity: .7; }
.buy-btn span, .buy-btn b { white-space: nowrap; }
/* Telefonlarda "Sepete ekle" ile tutar dugme icinde alt alta durur: uzun tutarlarda (12.500,50₺) bile tasmaz,
   yazi ortadan kirilmaz. Genis ekranda tek satir. */
@media (max-width: 480px) {
    .buy-btn { flex-direction: column; gap: 2px; padding: 6px 12px; line-height: 1.15; min-width: 0; }
    .buy-btn > i, .buy-btn .ayrac { display: none; }
    .buy-btn b { font-size: .86rem; opacity: .92; }
    .detail-buy .qty button { width: 34px; height: 34px; }
}
.btn-primary.block { width: 100%; margin-top: 14px; }
.vote { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); font-size: .86rem; }
.vote div { display: flex; gap: 8px; }
.vote button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.vote button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.options button { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font-weight: 600; font-size: .86rem; text-align: start; }
.options button i { color: var(--accent); }
.options button.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.field { display: block; margin-top: 12px; }
.field > span { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.hint { font-size: .78rem; color: var(--muted); text-align: center; margin: 10px 0 0; }
.cart { display: grid; gap: 8px; margin-top: 6px; }
.cart-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.cart-row .ci { flex: 1; min-width: 0; }
.cart-row .ci b { display: block; font-size: .9rem; }
.cart-row .ci small { display: block; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.cart-row .qty button { width: 32px; height: 32px; font-size: 1rem; }
.cart-empty { text-align: center; color: var(--muted); padding: 22px 10px; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-weight: 700; }
.cart-total strong { font-size: 1.15rem; }
.langs { display: grid; gap: 8px; margin-top: 10px; }
.lang { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; font-weight: 600; }
.lang .flag { width: 34px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); font-size: .72rem; font-weight: 800; color: var(--muted); }
.lang.on { border-color: var(--accent); color: var(--accent-text); }
.lang i { margin-inline-start: auto; }
.qr { display: grid; place-items: center; margin: 6px auto 14px; min-height: 40px; }
.qr canvas, .qr img { border-radius: 12px; padding: 10px; background: #fff; }
.wifi-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); margin-top: 8px; text-align: start; }
.wifi-row span { color: var(--muted); font-size: .82rem; min-width: 70px; }
.wifi-row b { flex: 1; word-break: break-all; }
.mini { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 6px 10px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
/* Siparis oncesi e-posta dogrulamasi */
.verify { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); text-align: start; }
.verify h4 { margin: 0 0 6px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.verify h4 i { color: var(--accent); }
.verify p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.verify .field input { background: var(--surface); }
.verify-code { text-align: center; letter-spacing: .45em; font-size: 1.35rem !important; font-weight: 800; font-variant-numeric: tabular-nums; }
.verify-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.link-btn { border: 0; background: none; padding: 4px 0; color: var(--accent-text); font-weight: 700; font-size: .82rem; cursor: pointer; }
.link-btn:disabled { color: var(--muted); cursor: default; }
.verify .verify-note { margin-top: 12px; font-size: .74rem; }
.verify-note a { color: var(--accent-text); font-weight: 600; }
.verified { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: .8rem; color: var(--muted); }
.verified i { color: #16a34a; }
.verified span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo .sheet-body { text-align: center; }

/* ---------- Bildirim ---------- */
.toast { position: fixed; z-index: 200; left: 50%; bottom: calc(var(--dock-h) + 26px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: #0f172a; color: #fff; font-weight: 600; font-size: .88rem; box-shadow: var(--shadow-lg); transition: opacity .25s, transform .25s; display: flex; align-items: center; gap: 8px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #b91c1c; }
.toast.ok i { color: #4ade80; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---------- Buyuk ekranlar ---------- */
@media (min-width: 640px) {
    .sheet { align-items: center; padding: 24px; }
    .sheet-card { border-radius: 26px; max-height: 88vh; }
    .sheet-card::before { display: none; }
    .hero-cover, .hero.has-cover::after { height: 280px; }
    .hero-card { margin: -60px 22px 0; padding: 20px 22px; }
    .hero-logo { width: 88px; height: 88px; border-radius: 24px; }
    .hero-text h1 { font-size: 1.6rem; }
    .d-list .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-grid .items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .d-big .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
    body { font-size: 15.5px; }
    .hero-cover, .hero.has-cover::after { height: 320px; }
    .d-grid .items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .d-big .items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Sagdan sola (Arapca) ---------- */
.rtl .hero-top { inset-inline-end: 24px; }
.rtl .d-list .item { flex-direction: row-reverse; }