/* --- css/front/variables.css --- */ :root { /* Colors - Dark Mode (default) */ --color-primary: #c8a97e; --color-primary-dark: #876f46; --color-primary-light: #e0cba8; --color-accent: #d4a574; /* İndirim (kampanyalı fiyat) aksanı — garnet/gül. Parlak kırmızı yerine premium bir "fırsat" tonu: marka altınıyla çatışmadan üstü-çizili + yeni fiyatı ayırır. Koyu tema (varsayılan): dark zemin üstünde okunur açık gül. Türev soft/edge tonları kullanıldıkları yerde temaya göre çözülür. */ --color-sale: #ef8fa3; --color-sale-soft: color-mix(in srgb, var(--color-sale) 14%, transparent); --color-sale-edge: color-mix(in srgb, var(--color-sale) 30%, transparent); --color-bg: #0f0f0f; --color-bg-card: rgba(255, 255, 255, 0.08); --color-bg-card-hover: rgba(255, 255, 255, 0.12); --color-bg-modal: rgba(15, 15, 15, 0.97); --color-bg-nav: rgba(15, 15, 15, 0.92); --color-bg-glass: rgba(255, 255, 255, 0.06); --color-bg-glass-strong: rgba(255, 255, 255, 0.20); /* Kart stili eksenleri (0229). Cam = mevcut cam değişkenleri; aşağıdakiler "Dolu" (opak yüzey) ve "Çerçeve" (belirgin kenarlık) için. Metin daima --color-text olduğundan kontrast tema-doğru kalır. */ --card-solid-bg: rgba(24, 27, 32, 0.90); --card-solid-border: rgba(255, 255, 255, 0.09); --card-outline-border: rgba(255, 255, 255, 0.42); --color-text: #ffffff; --color-text-secondary: rgba(255, 255, 255, 0.75); --color-text-muted: rgba(255, 255, 255, 0.4); --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.12); --color-success: #4caf50; --color-warning: #ff9800; --color-danger: #f44336; /* Typography */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --text-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem); --text-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); --text-base: clamp(0.875rem, 0.8rem + 0.25vw, 1rem); --text-lg: clamp(1rem, 0.9rem + 0.35vw, 1.125rem); --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); --text-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-3xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Border Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 50%; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-glow: 0 0 20px rgba(200, 169, 126, 0.15); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Motion — "İmza Hareket" sistemi. İmza eğri (premium yavaşlama) + dokunsal yay + süreler. motion.css bunları kullanır; token'lar her zaman tanımlı (motion kapalıyken de zararsız). */ --ease-sig: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --motion-fast: 190ms; --motion-base: 340ms; --motion-slow: 560ms; /* Layout */ --nav-height: 54px; --max-width: 480px; --safe-bottom: env(safe-area-inset-bottom, 0px); /* Backdrop blur */ --blur-sm: blur(10px); --blur-md: blur(20px); --blur-lg: blur(40px); } /* ============================================ Light Mode ============================================ */ body.theme-light { --color-bg: #fcfcfc; --color-bg-card: rgba(0, 0, 0, 0.03); --color-bg-card-hover: rgba(0, 0, 0, 0.06); --color-bg-modal: rgba(255, 255, 255, 0.98); --color-bg-nav: rgba(255, 255, 255, 0.95); --color-bg-glass: rgba(0, 0, 0, 0.03); --color-bg-glass-strong: rgba(255, 255, 255, 0.20); /* Kart stili eksenleri (0229) — açık tema karşılıkları. */ --card-solid-bg: rgba(255, 255, 255, 0.92); --card-solid-border: rgba(0, 0, 0, 0.06); --card-outline-border: rgba(0, 0, 0, 0.30); --color-text: #1a1a1a; --color-text-secondary: rgba(0, 0, 0, 0.75); --color-text-muted: rgba(0, 0, 0, 0.35); /* İndirim aksanı — light temada rafine garnet (beyaz üstünde okunur). */ --color-sale: #b23a52; --color-border: rgba(0, 0, 0, 0.08); --color-border-light: rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1); } /* --- css/front/app.css --- */ /* ============================================ QrMenum - Global Styles ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Reserve space for scrollbar so layout width stays constant whether content scrolls or not. Prevents "content shifts left on scroll" artifacts on desktop browsers. */ scrollbar-gutter: stable; } /* When loaded in an iframe (dashboard / settings preview), kill the native scrollbar entirely. Scrolling still works via wheel/touch; the layout width never changes so content cannot shift sideways. Flag is set from JS (preview-bridge.js) to avoid affecting direct browser visits. ÖNEMLİ: gerçek kaydırma konteyneri BODY'dir (overflow-y:auto), html değil. Bu yüzden body'nin scrollbar'ı da GİZLENMELİ — yoksa menü drawer'ı açılırken body{overflow:hidden} scroll-lock'u body scrollbar'ını kaldırır, viewport ~ yarım-scrollbar genişler ve position:fixed footer (MENÜ butonu) yana kayar. scrollbar-gutter:stable iframe'de kapalı olduğundan burada telafi edilmez; tek doğru çözüm scrollbar'ı hiç göstermemek (html + body). */ html.in-iframe, html.in-iframe body { scrollbar-gutter: auto; scrollbar-width: none; } html.in-iframe::-webkit-scrollbar, html.in-iframe body::-webkit-scrollbar { display: none; width: 0; height: 0; } body { font-family: var(--font-primary); background: var(--color-bg); color: var(--color-text); line-height: 1.5; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── iOS Safari alt adres-çubuğu uyumu (dock footer, <768px) ────────────── iPhone Safari, alt toolbar'ını sayfanın en-DİP-kenar rengiyle tentler. Kategori/detay sayfalarında beyaz içerik dibe ulaştığından toolbar beyaz kalıyor, koyu/renkli dock footer'ın altında bariz beyaz bir şerit oluşuyordu (ana sayfa tam-kaplama koyu hero zemini sayesinde zaten sorunsuzdu; ikon stili de footer-bg==sayfa-bg beyaz olduğunda gözükmüyordu). Çözüm: sayfanın DIŞ zemini (body) footer rengine eşitlenir → dip kenar = footer → toolbar footer rengine oturur ("adres çubuğu + altı footer'la aynı renk", ana sayfadaki gibi). İçerik kendi yüzeyini .page-wrap'ten alır (görünüm değişmez; beyaz footer'da hiçbir fark yok). body zemini canvas'a yayıldığından hem üst durum çubuğu hem kaydırma-ötesi de footer rengine oturur (iOS 26 krom tentini theme-color'dan DEĞİL sayfa kenar renginden örnekliyor; bu yüzden theme-color'a dokunmadık — Android üst çubuğu markalı secondary rengiyle kalır). Yalnız mobilde: ≥768px'te footer yüzen-cam kart + .page-wrap ortalı "cihaz" + .desktop-stage zemini korunur (dokunulmaz). */ @media (max-width: 767px) { body.footer-dock { background: var(--color-footer-bg); } body.footer-dock .page-wrap { background: var(--color-bg); } } /* ── iOS 26 yüzen alt çubuğu: "app shell" kaydırma modeli (<768px) ───────── ÖLÇÜM (iPhone 17 Pro / iOS 26.3, 2026-09-14): screen.height = 874pt ama innerHeight = visualViewport = 714pt Ekranın altında 160pt'lik bir bant var ve SAYFA VIEWPORT'U ORAYA ULAŞMIYOR. Safari o bandı sayfanın akan devam içeriğiyle boyuyor; koyu dock footer'ın altında beyaz menü içeriği görünüyordu. ⚠️ ŞUNLAR DENENDİ ve ÇALIŞMIYOR (tekrar deneme — hepsi simulator'da elendi): · Sabit footer'a taşan ::before/::after (bottom:-160px, z-index:9999 dahil) — fixed elemanlar viewport'ta KESİN olarak kırpılıyor, magenta test bloğu ekranda hiç görünmedi. · viewport-fit=cover — iOS 26'da bandı açmıyor: meta'da sunulsa bile innerHeight 714 kalıyor, env(safe-area-inset-bottom) = 0px. · theme-color — üç footer stilinde de aynı, fark yaratmıyor. · Yalnızca body zeminini footer rengine eşitlemek (yukarıdaki blok) — belgenin dip kenarını düzeltir ama bant MID-SCROLL akan içeriği gösterdiği için yetmez. ÇALIŞAN TEK ÇÖZÜM: belge hiç kaydırılmasın. Kaydırma .page-wrap'in içine alınınca Safari'nin banda basacak "devam içeriği" kalmaz; bant canvas'ı (body = footer rengi) gösterir ve dikişsiz olur. ⚠️ Bu bir KAYDIRMA MODELİ değişikliğidir. window.scrollY/scrollTo kullanan her yer kırılır — JS tarafı window.qmScrollRoot() / qmScrollTop() üzerinden iki modeli de destekleyecek şekilde yazıldı (bkz. app.js). Yeni kod yazarken window.scrollTo/scrollY KULLANMA, o yardımcıları kullan. Doğrulandı (aynı cihazda, gerçek sayfayla): IntersectionObserver'lar çalışıyor (3 observer / 32 tetik), kategori analitiği dwell üretiyor (beacon yükünde dwell_ms dolu), aktif sekme takibi ve position:sticky sekme şeridi sağlam. */ @media (max-width: 767px) { html { height: 100%; } body { height: 100dvh; overflow: hidden; } .page-wrap { height: 100dvh; min-height: 0; /* menu-panel.css'teki min-height:100dvh'yi ezer */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; /* lastik-bant sayfayı sürüklemesin */ } } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } button { background: none; border: none; color: inherit; cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } ul, ol { list-style: none; } /* Container */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } /* ============================================ Hero / Homepage ============================================ */ .hero { position: relative; width: 100%; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: var(--space-xl) var(--space-md); padding-bottom: calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom)); } /* Empty hero backdrop — used when the tenant has neither an outlet cover image nor a homepage media row. Without this rule the hero sits on the body's plain white/cream and the logo + buttons float on a blank canvas. The animated gradient uses the operator's brand colors so a freshly-set-up menu still feels designed, not empty. */ .hero--empty .hero__video-wrap { background: linear-gradient( 135deg, var(--color-primary, #c8a97e) 0%, var(--color-secondary, #1a1a2e) 50%, var(--color-primary, #c8a97e) 100% ); background-size: 200% 200%; animation: heroEmptyFlow 14s ease-in-out infinite; } @keyframes heroEmptyFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .hero--empty .hero__video-wrap { animation: none; } } .hero__video-wrap { position: fixed; inset: 0; /* Wrap TAM viewport'ta sabit durur — ASLA hareket etmez → altında beyaz açılmaz, video ekrandan taşmaz. Parallax/zoom yalnız içteki medyaya (.hero__video) uygulanır; overflow:hidden onu kırpar. own GPU layer. */ z-index: 0; overflow: hidden; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .hero__video { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; will-change: transform; } .hero__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.7) 100% ); } /* İşletme düzeyi Sayfa Arka Planı dolgusu (Vitrin + Zarif Liste) — tek renk / gradient. Sabit tam-ekran katman; hero__categories (z-index:1) üstünde akar. Aktifken varsayılan hero__video-wrap render edilmez → çakışma yok. Video seçeneği ayrı katman değildir; Medya'nın hero backdrop'unu kullanır. */ .hero__page-bg { position: fixed; inset: 0; /* wrap sabit — parallax içteki fill'e uygulanır */ z-index: 0; overflow: hidden; transform: translateZ(0); backface-visibility: hidden; } .hero__page-bg-fill { position: absolute; inset: 0; transform-origin: center center; will-change: transform; } .hero__logo { position: relative; z-index: 1; text-align: center; margin-bottom: var(--space-2xl); animation: fadeInDown 0.8s ease; background: var(--hero-glass-bg, #fef7e663); width: 100%; backdrop-filter: var(--hero-glass-blur, var(--blur-md)); -webkit-backdrop-filter: var(--hero-glass-blur, var(--blur-md)); border-radius: 12px; padding: 10px; } .hero__logo-img { max-width: 180px; max-height: 180px; margin: 0 auto; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)); } .hero__logo-text { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); letter-spacing: 0.02em; } /* Outlet name caption — sits BELOW the logo block (not inside) so the brand mark and the outlet name read as separate layers. Color + text-shadow come from inline style on the wrapper element (set in home/index.php from per-outlet DB columns); the rule below only defines size/spacing/weight. */ .hero__outlet { margin-top: 18px; text-align: center; z-index: 99; /* Inherit text-shadow set on the wrapper inline style so both the name and the tagline pick up the operator's shadow choice. */ } .hero__outlet-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: inherit; } .hero__outlet-tagline { font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.06em; opacity: 0.85; margin-top: 4px; text-shadow: inherit; } body.theme-light .hero__outlet-tagline { color: var(--color-text); text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5); } /* ── Logo altı slogan (migration 0091) ────────────────────────────── Font/boyut/renk/bg inline style ile gelir (Ayarlar > Tasarım). Buradaki kurallar yalnızca konum + okunabilirlik varsayılanları; inline değerler ezer. Typewriter modunda yanıp sönen caret eklenir. */ .hero__slogan { position: relative; margin-top: 12px; padding: 0 20px; text-align: center; z-index: 99; } /* Slogan varken: logo + (outlet) + slogan tek birim (.hero__head). Böylece .hero'nun space-around dağıtımı ikisini BİRLİKTE konumlar; logo↔slogan sıkı (margin), grup↔kartlar ferah. Eskiden slogan ayrı bir flex çocuğuydu → space-around onu logodan uzağa, kartlara bitişik itiyordu. */ .hero__head { display: flex; flex-direction: column; align-items: center; width: 100%; } .hero--has-slogan .hero__logo { margin-bottom: var(--space-md); } /* logo → slogan (grup içi) */ .hero--has-slogan .hero__slogan { margin-top: 0; } /* slogan logoya yaslı */ .hero--has-slogan .hero__head { margin-bottom: var(--space-2xl); } /* grup → kartlar min. ferahlık */ /* Ana sayfa kartları gizli (hide_homepage_cards) — hero tek başına: logo+slogan tam-ekran hero'da dikey ORTALANIR (space-around yerine center), kart boşluğu için eklenen head alt-payı sıfırlanır. Arka plan (video/görsel) fixed:inset:0 olduğu için tam ekran öne çıkar. Bu kural .hero--has-slogan'dan SONRA gelmeli (eşit özgüllük → kaynak sırası kazanır) ki head margin'i ezilsin. */ .hero--no-cards { justify-content: center; } .hero--no-cards .hero__head { margin-bottom: 0; } .hero__slogan-box { display: inline-block; max-width: 90%; } .hero__slogan-text { color: #ece3d2; line-height: 1.5; letter-spacing: 0.02em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } .hero__slogan-caret { display: inline-block; margin-left: 1px; color: #ece3d2; font-weight: 300; animation: heroSloganCaret 1s steps(1) infinite; } @keyframes heroSloganCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* Not: theme-light için koyu metin override'ı KALDIRILDI. Slogan her zaman hero medyası (koyu overlay) üzerinde durduğundan açık metin evrensel güvenli varsayılan; koyu metin isteyen operatör Ayarlar > Tasarım'dan rengi seçer (artık güvenilir kaydediliyor). Eski davranış açık temada koyu-üstüne-koyu soluk metne yol açıyordu. */ .hero__categories { position: relative; z-index: 1; width: 100%; max-width: var(--max-width); animation: fadeInUp 0.8s ease 0.2s both; } /* ============================================ Category Grid (Homepage) ============================================ */ .category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } /* Odd-count centering — when the operator has 1, 3, 5, ... cards the trailing card otherwise pins itself to the left half and looks misaligned. This rule spans the last card across both columns and caps its width at "one column" so it visually matches its siblings but centers horizontally instead of left-justifying. :nth-child(odd):last-child matches only when the total count is odd — even counts hit the default 2-col grid as before. */ .category-grid > .category-card:nth-child(odd):last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-md)) / 2); } .category-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); background: var(--card-glass-bg, var(--color-bg-glass)); backdrop-filter: var(--card-glass-blur, var(--blur-md)); -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition-base); text-align: center; min-height: 110px; } .category-card:active { transform: scale(0.97); background: var(--color-bg-glass-strong); } .category-card__icon { width: 75px; /* KARE kutu: yükseklik = genişlik. Eskiden yalnız width vardı → ikon height:100% değişken orana çözülüyordu (geniş ikon kısa, uzun ikon ~1.3× büyük) = orantısız. Sabit kareyle her ikon (viewBox oranı ne olursa olsun) aynı sınırda contain edilir → tutarlı boyut, kullanıcı hangi ikonu seçerse seçsin düzgün oturur. de-v2 masaüstü zaten kare kutu (34×34) kullanıyordu; klasik/mobil de aynı desende. */ height: 75px; display: flex; align-items: center; justify-content: center; opacity: 0.85; /* Drive `fill="currentColor"` paths via CSS color */ color: var(--color-bg); } .category-card__icon img, .category-card__icon svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; fill: var(--color-bg); } .category-card__name { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-bg); } /* ============================================ Category List (Homepage — yoğun, tek sütun) Tenant ayarı: businesses.homepage_layout = 'list' Grid'e alternatif. 10+ kategorili menülerde ekrana sığar. ============================================ */ .category-list { display: flex; flex-direction: column; gap: var(--space-sm); } .category-card--list { flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); min-height: 64px; text-align: left; } /* List modunda icon küçülür — satıra dengeli oturur, başlık öne çıkar */ .category-card--list .category-card__icon { width: 32px; height: 32px; /* kare kutu — base'in 75px height'ını ezer (orantı normalize) */ flex-shrink: 0; } .category-card--list .category-card__name { flex: 1; font-size: var(--text-base); letter-spacing: 0.05em; text-transform: none; text-align: left; } .category-card__chevron { flex-shrink: 0; color: var(--color-bg); opacity: 0.55; } .category-card--list:active .category-card__chevron { opacity: 0.85; transform: translateX(2px); } /* ============================================ Page Content Area ============================================ */ .page-content { position: relative; z-index: 1; min-height: 100dvh; background: var(--color-bg); max-width: 1180px; margin: auto; } /* Menu landing — reuses .hero__video-wrap (fixed-position video layer) so the menu's product-group picker gets the same brand mood as the home page. .page-content's solid background would hide the fixed video; transparent on this surface lets the video show through. The card block is vertically centered within the available viewport space below the header. */ body.page-menu .page-content { background: transparent; } .menu-hero { /* Take the viewport below the sticky header. Padding-bottom clears the bottom-nav so the bottom row of cards isn't covered. */ min-height: calc(100dvh - var(--header-height, 60px) - var(--nav-height, 64px)); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-lg) var(--space-md); padding-bottom: calc(var(--nav-height, 64px) + var(--space-xl) + var(--safe-bottom, 0px)); } .menu-hero__cards { width: 100%; max-width: var(--max-width); } .page-header { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); position: sticky; top: 0; z-index: 10; background: var(--color-bg); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); } .page-header__back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-bg-glass-strong); transition: background var(--transition-fast); } .page-header__back:active { background: var(--color-bg-card-hover); } .page-header__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; flex: 1; } /* ============================================ Modals Base ============================================ */ .search-modal, .info-modal, .lang-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; } .search-modal[hidden], .info-modal[hidden], .lang-modal[hidden] { display: none; } .search-modal__backdrop, .info-modal__backdrop, .lang-modal__backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } .search-modal__content { position: relative; width: 100%; max-width: var(--max-width); height: 100%; background: var(--color-bg-modal); display: flex; flex-direction: column; animation: slideUp 0.3s ease; } .info-modal__content, .lang-modal__content { position: relative; width: 100%; max-width: var(--max-width); max-height: 80vh; background: var(--color-bg-modal); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-lg); animation: slideUp 0.3s ease; overflow-y: auto; } .lang-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); } .lang-modal__header h3 { font-family: var(--font-display); font-size: var(--text-xl); } .info-modal__close, .lang-modal__close { opacity: 0.6; transition: opacity var(--transition-fast); } .info-modal__logo { text-align: center; margin-bottom: var(--space-md); } .info-modal__logo img { max-width: 120px; margin: 0 auto; } .info-modal__business-name { font-family: var(--font-display); font-size: var(--text-2xl); text-align: center; margin-bottom: var(--space-lg); } /* Language Modal */ .lang-modal__list { display: flex; flex-direction: column; gap: var(--space-sm); } .lang-modal__form { display: contents; } .lang-modal__item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); transition: background var(--transition-fast); width: 100%; text-align: left; } .lang-modal__item:active { background: var(--color-bg-glass-strong); } .lang-modal__item--active { background: var(--color-bg-glass); border: 1px solid var(--color-primary); } .lang-modal__flag { font-size: 1.5rem; } .lang-modal__name { flex: 1; font-weight: 500; } .lang-modal__check { color: var(--color-primary); } /* ============================================ Search Modal Specifics ============================================ */ .search-modal__header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-bottom: 1px solid var(--color-border); } .search-modal__input-wrap { flex: 1; position: relative; display: flex; align-items: center; } .search-modal__icon { position: absolute; left: var(--space-sm); width: 20px; height: 20px; opacity: 0.4; } .search-modal__input { width: 100%; padding: var(--space-md) var(--space-md); padding-left: 36px; background: var(--color-bg-glass); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--text-base); outline: none; transition: border-color var(--transition-fast); } .search-modal__input:focus { border-color: var(--color-primary); } .search-modal__input::placeholder { color: var(--color-text-muted); } .search-modal__clear { position: absolute; right: var(--space-sm); width: 24px; height: 24px; opacity: 0.5; } .search-modal__close { color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; padding: var(--space-sm); white-space: nowrap; } .search-modal__results { flex: 1; overflow-y: auto; padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); } /* ─── Search result row ────────────────────────────────────────────── Compact card-per-row list, mirrors the product-detail "similar products" list mode so customers see one consistent design language. Image slot is rendered only when the product actually has a cover; an empty placeholder reads as broken state. */ .search-result-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: background var(--transition-fast); } .search-result-card:active { background: var(--color-bg-card-hover); } body.theme-light .search-result-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .search-result-card__img { width: 60px; height: 60px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-glass-strong); } .search-result-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .search-result-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .search-result-card__name { font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.3; /* Wrap to 2 lines max so longer dish names ("Trüf Yağlı Parmesanlı Patates Tava") stay readable but never balloon the card. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-result-card__sub { font-size: 12px; color: var(--color-text-muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .search-result-card__price { flex: none; font-size: 14px; font-weight: 700; color: var(--color-primary); white-space: nowrap; } .search-modal__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-2xl); color: var(--color-text-muted); text-align: center; } .search-modal__empty[hidden] { display: none; } /* Search - Featured Products */ .search-featured { padding: var(--space-md); } .search-featured__title { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-md); } .search-featured__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .search-featured__item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); /* Hairline border defines each card so the text-only list (no image slot) reads as discrete tappable cards, not a loose run of text. --color-border is theme-aware: subtle on light, subtle on dark. */ border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: background var(--transition-fast); } .search-featured__item:active { background: var(--color-bg-glass); } .search-featured__img { width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--color-bg-glass); } .search-featured__img img { width: 100%; height: 100%; object-fit: cover; } .search-featured__info { min-width: 0; display: flex; flex-direction: column; } .search-featured__name { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-featured__price { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); margin-top: 2px; } /* ============================================ Animations ============================================ */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Scrollbar */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 2px; } /* ============================================ Powered By Badge ============================================ */ .powered-badge { display: flex; justify-content: flex-end; padding: var(--space-md) var(--space-md) calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom)); } .powered-badge__link { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; opacity: 0.75; transition: opacity 0.3s ease; text-decoration: none; } .powered-badge__link:hover, .powered-badge__link:active { opacity: 0.8; } .powered-badge__logo { height: 20px; width: auto; } /* ============================================ Light Mode Overrides ============================================ */ /* Hero overlay - lighter for light mode */ body.theme-light .hero__overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.85) 100% ); } /* Hero text needs dark color in light mode */ body.theme-light .hero__logo-text { color: var(--color-text); text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5); } body.theme-light .hero__logo-img { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1)); } /* Category cards - light glass */ body.theme-light .category-card { background: var(--card-glass-bg, rgba(217, 189, 150, 0.5)); backdrop-filter: var(--card-glass-blur, var(--blur-md)); -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md)); border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } body.theme-light .category-card:active { background: rgba(255, 255, 255, 0.9); } /* ── Kart stili (0229): body.card-solid | body.card-outline ────────────── Cam = varsayılan (.category-card + body.theme-light .category-card). Dolu = opak yüzey (arka plan görünmez); Çerçeve = şeffaf + belirgin kenarlık. Metin/ ikon daima --color-text → her iki temada kontrast korunur. Ana sayfa kategori kartlarını hedefler. ⚠️ Bu blok, eşit-specificity'li `body.theme-light .category-card` kuralından SONRA gelmeli (kaynak-sırası kazanır) — o yüzden dosyanın burasında; taşıMA. Cam seçilince (body class yok) yukarısı korunur. */ body.card-solid .category-card { background: var(--card-solid-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--card-solid-border); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5); } body.card-solid .category-card:active { background: var(--card-solid-bg); } /* Solid = opak tema-yüzeyi; metin/ikon `--color-bg` (cam şemasının ters rengi) yerine `--color-text` olmalı → açık temada koyu yüzey+koyu metin DEĞİL, açık yüzey+koyu metin; koyu temada koyu yüzey+açık metin. Kontrast her iki temada garanti (cam/çerçeve arka plan üstünde kaldığından dokunulmaz). */ body.card-solid .category-card__name, body.card-solid .category-card__icon { color: var(--color-text); } body.card-solid .category-card__icon svg, body.card-solid .category-card__icon img { fill: var(--color-text); } body.card-outline .category-card { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1.5px solid var(--card-outline-border); box-shadow: none; } body.card-outline .category-card:active { background: color-mix(in srgb, var(--color-text) 8%, transparent); } /* Page header */ body.theme-light .page-header { background: rgba(245, 245, 245, 0.9); } body.theme-light .page-header__back { background: rgba(0, 0, 0, 0.05); } /* Product section titles */ body.theme-light .product-section__title { color: var(--color-primary-dark); background: var(--color-bg); } /* Product card borders */ body.theme-light .product-card + .product-card { border-color: rgba(0, 0, 0, 0.06); } /* Search modal */ body.theme-light .search-modal__content { background: rgba(245, 245, 245, 0.98); } body.theme-light .search-modal__input { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.1); color: #1a1a1a; } /* Language modal */ body.theme-light .lang-modal__content { background: rgba(255, 255, 255, 0.98); color: #1a1a1a; } body.theme-light .lang-modal__item--active { background: rgba(0, 0, 0, 0.04); } /* Category tabs */ body.theme-light .category-tabs { background: var(--color-bg); border-color: rgba(0, 0, 0, 0.06); } body.theme-light .category-tab { background: rgba(0, 0, 0, 0.04); color: var(--color-text-secondary); } body.theme-light .category-tab--active { background: var(--color-primary); color: #fff; } /* Product detail - back button on image */ body.theme-light .page-content [style*="background: rgba(0,0,0,0.5)"] { background: rgba(255, 255, 255, 0.8) !important; color: #333; } /* Bottom nav icon colors for light footer */ body.theme-light .bottom-nav__icon { color: var(--color-footer-text, rgba(0, 0, 0, 0.5)); } /* ============================================ Desktop App Frame — tablet-feel column ============================================ Activates ONLY on laptop/desktop (≥1100px). Real tablets (768-1099px) keep their native full-width feel — it's their natural habitat. On big monitors the menu stays in a centered ~800px "tablet-like" column with theme-tinted gradient edges. */ @media (min-width: 1100px) { body { background: linear-gradient(135deg, var(--color-footer-bg, #1a1a1a) 0%, var(--color-primary-dark, #8a6f47) 50%, var(--color-footer-bg, #1a1a1a) 100%); background-attachment: fixed; min-height: 100dvh; } /* Constrain ONLY the always-visible chrome — header, bottom nav, hero bg, and the content column. Menu panel + modals stay full-viewport so their backdrop scrim darkens everything behind (including the gradient edges). */ .top-header, .bottom-nav-wrap, .hero__video-wrap, .hero__overlay { max-width: 800px; width: 100%; left: 50% !important; right: auto !important; transform: translateX(-50%); } /* Menu panel drawer: stays full-viewport for proper scrim, but the sliding drawer content anchors to the frame's left edge. The drawer's inner element (usually .menu-panel__content) keeps its own width. */ .menu-panel, .menu-panel-overlay, .search-modal, .info-modal, .lang-modal, .campaign-modal { /* no frame constraint — full viewport for backdrop */ } /* Inner modal content blocks: center them with tablet width */ .search-modal__content, .info-modal__content, .lang-modal__content, .campaign-modal__content { max-width: 800px !important; margin-left: auto; margin-right: auto; } /* Centered flow-layout column */ .page-wrap { max-width: 800px; margin: 0 auto; background: var(--color-bg); min-height: 100dvh; box-shadow: 0 0 80px rgba(0, 0, 0, 0.25); } /* Light theme: softer gradient, no heavy shadow */ body.theme-light { background: linear-gradient(135deg, #f5f5f0 0%, #e8e4d8 50%, #dbd6c5 100%); background-attachment: fixed; } body.theme-light .page-wrap { box-shadow: 0 0 60px rgba(0, 0, 0, 0.18); } } /* ============================================ Desktop Mockup Stage (≥1280px) ============================================ Turns the empty side stripes into a brand stage. The page-wrap becomes a "device" — rounded corners, generous shadow, floating margin — and a brand info card slides in on the left as a glass card with logo, today's hours, address with maps link, phone, and social icons. A fixed `.desktop-stage` div behind everything carries the tenant's cover image (with dark overlay) so the whole window feels like a marketing landing. Mobile/tablet (<1280px) ignore all of this — the .desktop-stage and .desktop-brand-card are display:none below the threshold. The 1280px threshold (vs 1100px for the existing tablet-feel column) is intentional: the brand card needs ~300px of breathing room and crowding it into 1100px produces a worse result than the gradient-only frame. */ /* Stage backdrop layer — hidden by default; revealed at 1280px. Inline style on the element supplies background-image. The dark overlay is applied as ::after on the same element. */ .desktop-stage { display: none; } @media (min-width: 1280px) { .desktop-stage { display: block; position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; /* Default fallback when no cover image — gradient using tenant theme colors (matches the previous 1100px frame gradient so brandless tenants don't regress). */ background-color: var(--color-footer-bg, #1a1a1a); background-image: linear-gradient(135deg, var(--color-footer-bg, #1a1a1a) 0%, var(--color-primary-dark, #8a6f47) 50%, var(--color-footer-bg, #1a1a1a) 100%); } /* Dark overlay on top of the cover image. Slightly blurred so busy food photos don't fight the foreground card legibility. Note: blur affects what's BEHIND ::after which is the stage's background-image — exactly what we want. */ .desktop-stage::after { content: ''; position: absolute; inset: 0; background: rgba(8, 10, 18, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* The "device" — rounded card floating on the stage. */ .page-wrap { position: relative; z-index: 2; max-width: 760px; margin: 32px auto; border-radius: 36px; overflow: hidden; min-height: calc(100dvh - 64px); box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.55), 0 12px 32px -8px rgba(0, 0, 0, 0.35); } /* Pinned chrome elements follow the new 760px rounded width and respect the rounded clip. */ .top-header, .bottom-nav-wrap, .hero__video-wrap, .hero__overlay { max-width: 760px; } .top-header { border-top-left-radius: 36px; border-top-right-radius: 36px; } .bottom-nav-wrap { border-bottom-left-radius: 36px; border-bottom-right-radius: 36px; } } /* Marka kartı + dbc-* stilleri ≥768 (tablet dahil) — de-v2 editoryal düzen tablette de marka kartını kullanır. Klasik masaüstünde kart <1280'de aşağıdaki guard (body:not(.de-v2)) ile gizli kalır → klasik tablet değişmez. */ @media (min-width: 768px) { /* ── Brand card (glass card) ─────────────────────────────── */ .desktop-brand-card { position: fixed; left: max(32px, calc((100vw - 760px) / 2 - 360px)); top: 50%; transform: translateY(-50%); width: 300px; max-height: calc(100dvh - 64px); overflow-y: auto; z-index: 3; /* Glass card surface */ background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; padding: 24px 22px; box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.95); font-family: var(--font-body, 'Inter'), sans-serif; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .desktop-brand-card::-webkit-scrollbar { width: 4px; } .desktop-brand-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 2px; } /* Logo — sits on a soft white tile so brand marks with a white stroke or transparent backgrounds stay readable on any cover. */ .dbc-logo { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.96); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3); } .dbc-logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; display: block; } .dbc-brand-name { font-family: var(--font-heading, 'Playfair Display'), serif; font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.01em; color: #fff; } /* Section blocks — separated by a faint divider for hierarchy. */ .dbc-block { margin: 0; padding: 14px 0; font-size: 13px; line-height: 1.5; border-top: 1px solid rgba(255, 255, 255, 0.10); } .dbc-block:first-of-type { border-top: none; padding-top: 0; } .dbc-block__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); margin-bottom: 6px; } /* "Bugün" hours block — the most important info, gets a brand-colored accent stripe on the left. */ .dbc-block--hours { position: relative; padding-left: 12px; } .dbc-block--hours::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--color-primary, #c8a97e); border-radius: 2px; } .dbc-block--hours:first-of-type { padding-left: 12px; } .dbc-block--hours:first-of-type::before { top: 0; } .dbc-hours { display: flex; flex-direction: column; gap: 2px; } .dbc-hours__day { font-weight: 600; font-size: 14px; color: #fff; } .dbc-hours__time { font-family: var(--font-body, 'Inter'), monospace; font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.02em; } /* Address block. */ .dbc-address-link, .dbc-phone-link { color: inherit; text-decoration: none; transition: color 0.15s; } .dbc-address-link { display: block; } .dbc-address-text { display: block; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); } .dbc-maps-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 10px; background: rgba(255, 255, 255, 0.10); border-radius: 999px; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.85); transition: background 0.15s; } .dbc-address-link:hover .dbc-maps-cta { background: rgba(255, 255, 255, 0.18); } /* Phone block — call-to-action style. */ .dbc-phone-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .dbc-phone-link:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .dbc-phone-link svg { opacity: 0.7; } /* Social icons row. */ .dbc-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.10); } .dbc-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.92); transition: background 0.15s, transform 0.15s, color 0.15s; } .dbc-social-icon:hover { background: var(--color-primary, #c8a97e); color: #fff; transform: translateY(-2px); } } /* Hide the brand card markup below the desktop threshold — server always renders it; CSS toggles visibility for free. */ @media (max-width: 767px) { /* <768: hiçbir düzende masaüstü kartı yok (de-v2 de ≥768'de başlar). */ .desktop-brand-card { display: none !important; } .desktop-stage { display: none !important; } } @media (min-width: 768px) and (max-width: 1279px) { /* Klasik masaüstü kartı yalnız ≥1280; de-v2 editoryal (≥768) gösterir → yalnız klasiği (body:not) gizle. */ body:not(.de-v2) .desktop-brand-card { display: none !important; } .desktop-stage { display: none !important; } } /* ───────────────────────────────────────────────────────────────────── Homepage "Vitrin" (showcase) düzeni — tam-genişlik foto/gradient/video kartlar. businesses.homepage_layout='showcase'. Kategori arka plan sistemini (image/gradient/video) bölüm bazında kullanır. ───────────────────────────────────────────────────────────────────── */ /* Masonry (CSS multicol): kartlar kendi en-boy oranında, boşluksuz paketlenir. Mobil tek sütun; tablet/PC 2 sütun (aşağıda). Oran, karta inline --sc-rm (mobil) / --sc-rt (tablet ops.) CSS değişkenleriyle gelir. */ .showcase-list { columns: 1; column-gap: 14px; padding: 2px; } .showcase-card { position: relative; display: block; width: 100%; break-inside: avoid; margin-bottom: 14px; aspect-ratio: var(--sc-rm, 3 / 2); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.28); -webkit-tap-highlight-color: transparent; transition: transform 120ms ease; } .showcase-card:active { transform: scale(0.985); } .showcase-card__media { position: absolute; inset: 0; z-index: 0; } .showcase-card__media img, .showcase-card__vid { width: 100%; height: 100%; object-fit: cover; display: block; } .showcase-card__media--brand { background: linear-gradient(135deg, var(--color-primary, #7c3aed), var(--color-secondary, #db2777)); } .showcase-card__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.05) 100%); } .showcase-card__body { position: absolute; left: 20px; right: 64px; bottom: 12px; z-index: 2; } .showcase-card__title { display: block; font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.5rem; line-height: 1.05; letter-spacing: .3px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); overflow-wrap: anywhere; } .showcase-card__count { display: inline-block; margin-top: 8px; font-size: .7rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 2px 8px; border-radius: 999px; } .showcase-card__go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { /* Tablet/PC: 2 sütun masonry, içerik genişliğine yayılı. Kart tablet oranı (--sc-rt) verilmişse onu, yoksa mobil oranı (--sc-rm) kullanır. */ .showcase-list { columns: 2; column-gap: 18px; } .showcase-card { margin-bottom: 18px; aspect-ratio: var(--sc-rt, var(--sc-rm, 3 / 2)); } .showcase-card__title { font-size: 1.9rem; } .showcase-card__body { left: 26px; right: 76px; bottom: 22px; } } /* Vitrin modunda hero backdrop yok → içerik üstten aksın ve ORTALANSIN. .hero__categories base max-width'i (telefon genişliği) showcase'te içerik genişliğine (1080px) çıkarılır; align-items:center ile ortalanır. */ .hero--showcase { min-height: auto; justify-content: flex-start; align-items: center; } .hero--showcase .hero__categories { width: 100%; max-width: min(1080px, 100%); margin-top: var(--space-md); margin-left: auto; margin-right: auto; } /* ============================================================ Zarif Liste (editorial) — ikon karosu + başlık + yandan eriyen kapak fotoğrafı. Accent'ler tenant token'larından: ikon karosu --color-secondary, ikon --color-primary. Kart zemini sıcak krem. ============================================================ */ .editorial-list { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: min(600px, calc(100vw - 30px)); margin: 0 auto; box-sizing: border-box; padding-left: 20px; /* dışa taşan ikon karosu için pay */ } .editorial-card { /* --ed-card head.php'de :root'ta set edilir (editorial_card_bg ?: #f6eddc). Yerel tanım YOK — aksi halde global değeri gölgeler. */ position: relative; display: flex; align-items: center; min-height: 92px; border-radius: 22px; overflow: visible; /* ikon karosu karttan taşabilsin */ background: var(--ed-card, #f6eddc); box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 14px 30px rgba(0, 0, 0, .20); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .editorial-card:active { transform: scale(.99); } /* Foto sağda; kart overflow:visible olduğu için foto kendi köşelerini yuvarlar+kırpar */ .editorial-card__photo { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; border-radius: 0 22px 22px 0; overflow: hidden; } .editorial-card__photo picture, .editorial-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .editorial-card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ed-card, #f6eddc) 6%, color-mix(in srgb, var(--ed-card, #f6eddc) 68%, transparent) 34%, transparent 72%); } .editorial-card__photo--brand { background: linear-gradient(135deg, color-mix(in srgb, var(--ed-gradient, var(--color-primary, #c8a97e)), #000 42%), var(--ed-gradient, var(--color-primary, #c8a97e))); } .editorial-card__photo--brand::after { display: none; } .editorial-card__icon { position: relative; z-index: 3; flex-shrink: 0; width: 72px; height: 72px; margin-left: -20px; /* karttan sola taşar (yüzen karo) */ border-radius: 20px; background: var(--ed-icon-bg, var(--color-secondary, #1c1a17)); color: var(--ed-icon-color, var(--color-primary, #c8a97e)); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .34), inset 0 0 0 1px color-mix(in srgb, var(--ed-icon-color, var(--color-primary, #c8a97e)) 22%, transparent); } /* İkon glyph — HER ikon türü (PNG/asset/yüklenen/SVG) tek-renk tint alır. Raster ikonlar mask ile boyanır (currentColor raster'ı boyayamaz), SVG'ler currentColor'a zorlanır. Böylece "İkon rengi" ayarı hepsinde çalışır. */ .editorial-card__glyph { display: block; width: 44px; height: 44px; background-color: var(--ed-icon-color, var(--color-primary, #c8a97e)); -webkit-mask: var(--ed-glyph) center / contain no-repeat; mask: var(--ed-glyph) center / contain no-repeat; } .editorial-card__glyph--svg { background: none; color: var(--ed-icon-color, var(--color-primary, #c8a97e)); display: flex; align-items: center; justify-content: center; } .editorial-card__glyph--svg svg { width: 44px; height: 44px; } /* Gömülü renkli SVG'leri de accent'e çek (line ikonları 'none' korur) */ .editorial-card__glyph--svg svg [fill]:not([fill="none"]) { fill: currentColor; } .editorial-card__glyph--svg svg [stroke]:not([stroke="none"]) { stroke: currentColor; } .editorial-card__icon > svg { width: 44px; height: 44px; } .editorial-card__body { position: relative; z-index: 3; padding-left: 16px; min-width: 0; flex: 1; } .editorial-card__title { display: block; font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.24rem; line-height: 1.08; letter-spacing: .2px; color: var(--ed-title-color, #241f1a); overflow-wrap: break-word; } .editorial-card__count { display: inline-block; margin-top: 7px; padding-top: 5px; border-top: 2px solid var(--ed-count-color, var(--color-primary, #c8a97e)); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ed-count-color, var(--color-primary, #c8a97e)); } .editorial-card__chev { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); z-index: 4; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); } @media (min-width: 768px) { /* Tablet portre: tek sütun, biraz daha büyük kart. İkon karosu kart yüksekliğini doldurmasın diye 80px (kart 104px → üst/alt nefes payı). */ .editorial-card { min-height: 104px; } .editorial-card__icon { width: 80px; height: 80px; } .editorial-card__title { font-size: 1.4rem; } } @media (min-width: 1024px) { /* Zarif Liste: masaüstü + yatay tablet iki sütun. Parent (.hero__categories) normalde telefon genişliğinde (--max-width) kısıtlı; showcase gibi burada genişletilir. Taşan ikon karosu için sol pay + sütun boşluğu; uzun başlık (ör. "Kahvaltı - Ekstralar") fotonun opak kısmının altına kaçmasın diye gövdeye sağ pay verilir → fotonun eriyen okunur alanında sarar. */ .hero--editorial .hero__categories { max-width: min(1040px, 100%); margin-left: auto; margin-right: auto; } .editorial-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 38px; row-gap: 22px; max-width: min(1040px, calc(100vw - 40px)); padding-left: 22px; } .editorial-card__photo { width: 48%; } .editorial-card__body { padding-right: 32%; } /* 2 sütunda gövde dar kalıyor → başlık daha küçük + orantılı; foto biraz daralıp gövdeye yer açtı → uzun Türkçe kelimeler kelime-ortası kırılmadan tek satıra sığar ("Başlangıçlar", "Zeytinyağlılar"). */ .editorial-card__title { font-size: 1.15rem; } } /* editorial_hide_icon: ikon karosu hiç render edilmez → karttan taşan karo payına gerek yok; gövde kendi sol payıyla hizalanır (mobil + masaüstü). */ .editorial-list--no-icon { padding-left: 0; } .editorial-list--no-icon .editorial-card__body { padding-left: 20px; } /* ============================================================ EDITORYAL MASAÜSTÜ — ÖNİZLEME (body.de-v2, ≥1280px) [geçici] ------------------------------------------------------------ Sinematik tam-ekran hero video + sol kimlik paneli (mevcut .desktop-brand-card) + sağ kategori indeksi (.dmenu-rail) + ortada odak. Koyu yönlü scrim her tenant videosunu normalize eder → koyu-cam paneller + beyaz metin evrensel okunur; aksan = --color-primary (tenant). Yalnız ?de=1 önizlemede eklenir; VARSAYILAN masaüstü hiç değişmez. Yön onaylanınca gerçek bir işletme ayarına bağlanacak. Kolay geri alınır: bu blok + partial + app.php'deki $deV2 kapısı. ============================================================ */ /* Ray varsayılan gizli — yalnız de-v2 (≥768) görünür. Frame <768'de display:contents ile "yok sayılır" → içindeki video mobil hero olarak normal davranır; bleed <768'de gizli. Böylece ?de=1 telefonda mobil düzeni bozmaz. */ .dmenu-rail { display: none; } .hero__frame { display: contents; } .hero__bleed { display: none; } /* Video-üstü logo varsayılan gizli — yalnız de-v2 + 768–1199px'de görünür (aşağıdaki dar-tablet media bloğu). ≥1200'de logo sol kartta kalır. */ .dev2-hero-logo { display: none; } /* Sağ-sütun logosu (de-v2 tablet 2-panel): varsayılan gizli — yalnız 768–1023'te görünür (marka kartı gizliyken logo sağ kartların üstüne biner). ≥1024'te logo sol kimlik panelinde, <768'de mobil klasik → burada gizli. */ .dev2-cards-logo { display: none; } /* de-v2 orta medya paneli — varsayılan gizli; yalnız de-v2 ≥768'de görünür. */ .dev2-center { display: none; } @media (min-width: 768px) { /* Tenant kapak backdrop'unu gizle — video sahnenin kendisi olacak. */ body.de-v2 .desktop-stage { display: none; } /* de-v2 sahne TABANI daima marka-tonlu KOYU — hero medyası olmayan (hero--empty; ör. Vitrin/az-medya) düzenlerde bile cam paneller + kartlar okunur kalsın (yoksa açık-tema body sızıp sahneyi beyazlatıyordu). Hero videosu/kapağı varsa .hero__bleed bunun ÜSTÜNE gelir. Ayrıca boş-hero backdrop'unu (açık) gizle. */ body.de-v2 { background: color-mix(in srgb, var(--color-primary, #c9a75c) 7%, #0c0f0e) !important; /* IMMERSIVE-OVERLAP kompozisyon değişkenleri (mockup onaylı): büyük merkez video + iki panelin videoya BİLİNÇLİ binmesi. Video-göreli konumlama → panellerin binme payı her genişlikte sabit, kompozisyon ortalı kalır. */ --dv2-vw: clamp(430px, 39vw, 600px); /* merkez video genişliği */ --dv2-overlap: 58px; /* panellerin videoya binme payı */ } body.de-v2 .hero--empty .hero__empty-bg, body.de-v2 .hero__page-bg { display: none !important; } /* Hero video/görsel → tam-ekran sinematik backdrop (760px clamp iptal). */ body.de-v2 .hero__video-wrap, body.de-v2 .hero__overlay { max-width: none !important; width: 100vw !important; left: 0 !important; right: auto !important; transform: none !important; border-radius: 0 !important; } /* Yönlü koyu scrim: kenarlar koyu (panel okunurluğu), orta daha açık (video odağı), alt koyu (dock). */ /* Ambient sahne: blurlu video tüm ekranı doldurur — üç bölüm de AYNI sahnede yüzer (blend). Yeterince görünür ki panellerin camı sahneyi yakalasın; yeterince koyu ki metin okunsun. */ body.de-v2 .hero__bleed { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3) brightness(0.6); transform: scale(1.18); pointer-events: none; } /* Scrim: merkez berrak (çerçeveli hero), kenarlar + alt koyu (panel + dock okunurluğu) — radial; sahneyi tamamen karartmaz. */ body.de-v2 .hero__overlay { z-index: 1; background: radial-gradient(125% 92% at 50% 46%, transparent 38%, rgba(6,8,13,.52) 100%), linear-gradient(180deg, rgba(6,8,13,.34) 0%, transparent 22%, transparent 64%, rgba(6,8,13,.72) 100%); } /* Klasik hero medyası (video-wrap) de-v2'de GİZLİ — orta medya artık desktop_center_media partial'ında (.dev2-center) server-side render edilir; böylece hero'nun bastırıldığı (Zarif/Vitrin, page_background dolgusu) düzenlerde de video/görsel KAYBOLMAZ. Eski JS-klon frame emekli. */ body.de-v2 .hero__video-wrap { display: none !important; } /* ═══ ORTA MEDYA PANELİ (.dev2-center) — split sahnenin merkezi ═══ Sol marka + ORTA büyük dikey video/görsel + sağ kategoriler. Video HER düzende daima görünür; yoksa marka gradyanı + logo. */ body.de-v2 .dev2-center { display: block; } /* Ambient: medyanın bulanık, koyu, tam-ekran kopyası → sinematik zemin. */ body.de-v2 .dev2-center__ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; filter: blur(46px) saturate(1.25) brightness(0.5); transform: scale(1.18); } body.de-v2 .dev2-center__ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 44%, transparent 34%, rgba(6, 8, 13, .5) 100%), linear-gradient(180deg, rgba(6, 8, 13, .4) 0%, transparent 22%, transparent 60%, rgba(6, 8, 13, .8) 100%); } /* Frame: büyük dikey sinematik kart — DAİMA merkez, DAİMA görünür. */ body.de-v2 .dev2-center__frame { position: fixed; z-index: 2; top: calc(50% - 30px); left: 50%; transform: translate(-50%, -50%); /* IMMERSIVE: büyük merkez video (sahnenin kalbi). Alt kenar mask ile sahneye ERİR → sert dikdörtgen yok; paneller kenarlarına biner. */ width: var(--dv2-vw); height: min(88dvh, 800px); /* sayfa üst/alt boşluğunu azalt (video daha dolu) */ border-radius: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,.34) 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0,0,0,.34) 92%, transparent 100%); /* Video/görsel yüklenene kadar (ya da yüklenemezse) çerçeve BOŞ KALMASIN: marka-tonlu koyu gradyan zemin daima altta durur. */ background: radial-gradient(120% 90% at 50% 22%, color-mix(in srgb, var(--color-primary, #c9a75c) 26%, transparent), transparent 68%), linear-gradient(160deg, color-mix(in srgb, var(--color-primary, #c9a75c) 16%, #12151b), #0b0e13); border: 1px solid color-mix(in srgb, var(--color-primary, #c9a75c) 42%, rgba(255, 255, 255, 0.4)); box-shadow: 0 50px 100px -34px rgba(0, 0, 0, 0.9), 0 0 90px -18px color-mix(in srgb, var(--color-primary, #c9a75c) 46%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } body.de-v2 .dev2-center__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Carousel slide crossfade (2+ arka plan medyası). Slide'lar üst üste biner (media zaten absolute inset-0); yalnız aktif olan opak, geçişte crossfade. Tek medyada da .is-active → opak (geçiş tetiklenmez → bugünkü gibi). */ body.de-v2 .dev2-center__slide { opacity: 0; transition: opacity 0.9s ease; } body.de-v2 .dev2-center__slide.is-active { opacity: 1; } /* Medya yoksa: marka gradyanı + ortalı logo (temiz, soyut fallback). */ body.de-v2 .dev2-center__frame--brand { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 25%, color-mix(in srgb, var(--color-primary, #c9a75c) 34%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--color-primary, #c9a75c) 22%, #12151b), #0c0f14); } body.de-v2 .dev2-center__logo { max-width: 62%; max-height: 40%; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .5)); } /* Cihaz çerçevesini çöz + hero içeriğini gizle (marka + kategoriler artık sol panel + sağ ray'de). .hero'yu GİZLEME — fixed video-wrap çocuğu da giderdi; yalnız içerik çocuklarını gizle. */ body.de-v2 .page-wrap { max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow: visible !important; /* KRİTİK (immersive): page-wrap taban z-index:1 bir stacking-context kurar; içindeki .hero__categories (z:3) bu bağlamda HAPSOLUR → merkez video (.dev2-center__frame, kök z:2) kartların ÜSTÜNDE kalır ("kartlar video arkasında"). page-wrap'ı videonun üstüne çıkar (z:3) → kartlar videoya BİNER (istenen). Marka kartı zaten kök z:4 (page-wrap dışında) → en üstte. de-v2 desktop-stage gizli olduğundan bu yükseltme klasik z-düzenini bozmaz. */ z-index: 3; } body.de-v2 .hero__head, body.de-v2 .hero__logo, body.de-v2 .hero__outlet, /* Slogan yalnız HERO içindeyken gizlenir; sol marka kartındaki .dbc-slogan (.hero'nun DIŞINDA) görünür kalır → slogan de-v2'de kaybolmaz, kimlik panelinde logo/isim altında yaşar. (home/index.php ?de=1'de hero slogan'ı zaten render etmez; bu kural savunma amaçlı kapsamlı.) */ body.de-v2 .hero .hero__slogan { display: none !important; } /* NOT: .hero__categories GİZLENMEZ → gerçek kategoriler TEK KAYNAK; aşağıda data-de-layout ailesine göre konumlanır (Kart/Liste rail, Zarif/Vitrin geniş). */ /* ── Sol kimlik paneli — ORTAK taban; konum/yükseklik ailelere göre ── KONUM: kompozisyon ortalı bir banda sabitlenir (max ~1480px). Geniş ekranda paneller ekran kenarlarına dağılıp aralarında dev boşluk bırakmasın diye sol panel bandın SOL kenarına oturur: max(48px, 50% - 740px) → ≤1576px'de 48px kenar, üstünde ortalı-band. */ body.de-v2 .desktop-brand-card { /* IMMERSIVE: sol panel videonun SOL kenarına --dv2-overlap kadar biner (right = video-göreli). Video üstünde (z-index) → panelin gölgesi video yüzeyine düşer = bilinçli float; ardındaki video cam blur'la yumuşar. */ right: calc(50% + (var(--dv2-vw) / 2) - var(--dv2-overlap)); left: auto; z-index: 4; /* OKUNURLUK (immersive kritik): KOYU-cam — beyaz %6 frost yalnız koyu videoda çalışıyordu; parlak videoda beyaz metin yıkanıyordu. Koyu tint arkasındaki neyse koyulaştırır → HER videoda (parlak dahil) okunur. Cam his blur ile korunur; aksan yeşili sol-kenar/ayraçlarda kalır. */ background: linear-gradient(158deg, rgba(20, 25, 22, 0.60), rgba(11, 15, 13, 0.52)) !important; padding: 30px 26px; border-radius: 26px; display: flex; flex-direction: column; max-height: none; } body.de-v2 .desktop-brand-card .dbc-socials { margin-top: auto; margin-bottom: 0; } body.de-v2 .dbc-phone-link { white-space: nowrap; } /* LOGO — panel cam-arka planına SAYGI (--hero-glass-bg); statik beyaz karo YOK. Aurora'da şeffaf → logo doğrudan cam panelde; koyu logolu tenant'ta varsayılan cream cam karo okunur kılar. Boyut logo geometrisinden (partial inline). */ body.de-v2 .dbc-logo { background: var(--hero-glass-bg, #fef7e663); box-shadow: none; } body.de-v2 .dbc-logo img { max-height: 76px; } /* ── Marka kartı — DAHA BÜTÜNLEŞİK / ŞIK ─────────────────────────── Sorun: saat bloğu yeşil dikey şerit için 12px İÇERİ kaymış (ADRES/telefon flush-left) → sol kenarlar hizalanmıyor, tek başına şerit orantısız duruyor. Çözüm: TÜM bilgiler hizalı (girinti + şerit kaldırıldı); divider'lar tutarlı YUMUŞAK hairline + eşit dikey ritim; etiketler daha ince/ferah. Saatin önemi tipografiden gelir (kalın, iri, tabular). Bütün kart tek dilde okunur. */ body.de-v2 .dbc-block { padding: 15px 0; border-top-color: rgba(255, 255, 255, 0.08); } body.de-v2 .dbc-block--hours { padding-left: 0; } body.de-v2 .dbc-block--hours::before { display: none; } body.de-v2 .dbc-block__label { color: rgba(255, 255, 255, 0.46); letter-spacing: 0.15em; margin-bottom: 8px; } body.de-v2 .dbc-hours__time { letter-spacing: 0.04em; } body.de-v2 .dbc-socials { padding-top: 16px; border-top-color: rgba(255, 255, 255, 0.08); } /* İnce marka dokunuşu — kategori kartlarındaki kısa yeşil accent diliyle BÜTÜNLEŞİK: saatin altında kısa marka-yeşili çizgi. HİZALI (içeriğin sol kenarından başlar, girinti YOK) → önceki orantısız şeridin yerine zarif, tutarlı bir vurgu. */ body.de-v2 .dbc-block--hours .dbc-hours::after { content: ''; display: block; width: 34px; height: 2px; margin-top: 11px; border-radius: 2px; background: var(--color-primary, #c8a97e); } /* Logo altı SLOGAN (dbc-slogan) — kimlik panelinde ZARİF tagline. Tenant'ın hero için seçtiği AÇIK CAM KUTU'yu koyu panelde bastır (kutu- içinde-kutu çirkin, estetik değil); ince italik serif + yumuşak ışık + harf aralığı → logonun altında zarif, sakin bir marka sözü. (Klasik hero kendi stilini korur; bu override yalnız de-v2 marka kartında.) */ body.de-v2 .dbc-slogan { width: 100%; margin: 15px 0 4px; text-align: center; } body.de-v2 .dbc-slogan .hero__slogan { margin: 0; padding: 0; z-index: auto; } body.de-v2 .dbc-slogan .hero__slogan-box { display: block; max-width: 100%; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; border-radius: 0 !important; } body.de-v2 .dbc-slogan .hero__slogan-text { font-family: var(--font-display, Georgia, 'Times New Roman', serif) !important; font-style: italic; font-size: 0.95rem !important; line-height: 1.55; letter-spacing: 0.015em; color: rgba(255, 255, 255, 0.62) !important; text-shadow: none; } /* Kategori sarıcı — ortak sıfırlama; konum ailelere göre aşağıda */ body.de-v2 .hero__categories { max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 3; } /* Marka kartı YÜKSEKLİĞİ — 4 düzende de orta-yükseklik, dikey ortalı (split sahne). */ body.de-v2 .desktop-brand-card { top: calc(50% - 30px); transform: translateY(-50%); width: clamp(280px, 22vw, 344px); height: min(600px, calc(100dvh - 190px)); } /* ═══ SAĞ KATEGORİ PANELİ — 4 DÜZENDE DE sağda, kaydırılabilir (split sahne) ═══ Kategori indeksi GERÇEK .hero__categories'ten (tek kaynak). Konum ortak; yalnız KART STİLİ homepage_layout'a göre değişir. */ body.de-v2 .hero__categories { /* IMMERSIVE: sağ panel videonun SAĞ kenarına --dv2-overlap kadar biner (left = video-göreli). z-index:3 (aşağıda) → video üstünde, gölge düşürür. */ position: fixed; left: calc(50% + (var(--dv2-vw) / 2) - var(--dv2-overlap)); right: auto; /* Dikey ortalama: transform DEĞİL → top/bottom + margin:auto. KRİTİK NEDEN: transform (VE aşağıda kaldırılan mask) bir "backdrop-root" oluşturuyordu → kartların backdrop-filter cam-blur'u arkadaki VİDEOYU göremiyor, video NET kalıyordu (kullanıcı bildirimi: "kategori kartlarında background'da blur yok"). İkisini de kaldırınca blur videoyu bulanıklaştırır. Ortalama bandı video/marka kartıyla aynı (50% - 30px = bottom:60 nudge). margin !important → yukarıdaki `margin:0 !important` sıfırlamasını EZER (yalnız dikey). Giriş animasyonu kapalı (fadeInUp translateY girişini istemeyiz). */ top: 0; bottom: 60px; margin-top: auto !important; margin-bottom: auto !important; animation: none !important; width: clamp(300px, 26vw, 400px); height: min(600px, calc(100dvh - 190px)); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; /* KART SAYISI SENARYOLARI: 'safe center' → kartlar panele SIĞIYORSA dikey ortalanır (marka kartıyla hizalı; 1-6 kart güzel durur); TAŞIYORSA üste yaslanıp (flex-start gibi) KAYDIRILIR → ilk kart tepede ERİŞİLEBİLİR, üstten/alttan kesilmez. Düz 'center' taşan içeriğin üstünü scroll ile erişilemez kılıyordu (ilk kart kalıcı kırpık) — asıl hata buydu. */ justify-content: safe center; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* NOT: eski üst/alt `mask-image` (kaydırma solması) KALDIRILDI — mask, kartların cam-blur'unu kıran bir backdrop-root oluşturuyordu. Blur önceliği (kullanıcı bildirimi). Çok-kart taşmasında kenar solması yok; scroll yeterli. */ } body.de-v2 .hero__categories::-webkit-scrollbar { width: 4px; } body.de-v2 .hero__categories::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 2px; } /* Tüm liste konteynerleri → tek-sütun dikey akış (sağ panel dar; kartlar mobil- first doğal biçiminde). Zarif/Vitrin'in ≥768 çok-sütun grid'i burada iptal. */ body.de-v2 .category-grid, body.de-v2 .category-list, body.de-v2 .editorial-list, body.de-v2 .showcase-list { display: flex; flex-direction: column; gap: 12px; grid-template-columns: none; columns: auto; max-width: none; margin: 0; /* Kart bloğuna üst/alt iç boşluk: panelin solma maskesi (14/18px) BOŞ payı soldursun, kartı değil → ilk kart "üstünde içerik var" yanılsaması vermez, son kart nefes alır. Az kartta (ortalı) etkisiz; çok kartta üste-yaslı panelde ilk/son kart maskeden temiz kalır. */ padding: 20px 0 22px; } /* de-v2 FIX: klasik `.category-grid > .category-card:nth-child(odd):last-child` (app.css ~336) 2-kolon grid'de son TEK kartı yarı genişliğe kısar (grid-column + justify-self + width:calc(half)). de-v2 `.category-grid`'i flex-column'a çevirdiği için grid-column/justify-self yok sayılır AMA width:calc(half) KALIR → TEK sayıda kartta son kart yarı/dar görünür (kullanıcı bildirimi). Tam genişliğe döndür → diğer kartlar gibi stretch. */ body.de-v2 .category-grid > .category-card:nth-child(odd):last-child { width: auto; } /* ── Kart/Liste: koyu-cam kompakt kart (marka ikonu beyaz + serif ad) ── */ body.de-v2[data-de-layout="grid"] .category-card, body.de-v2[data-de-layout="list"] .category-card { flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; min-height: 78px; padding: 15px 17px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 15px; /* KOYU-cam (beyaz frost DEĞİL) → parlak videoda da beyaz metin+ikon okunur. */ background: rgba(16, 20, 18, 0.52); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.7); color: #fff; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } body.de-v2[data-de-layout="grid"] .category-card { min-height: 92px; padding: 19px 18px; } body.de-v2[data-de-layout="grid"] .category-card:hover, body.de-v2[data-de-layout="list"] .category-card:hover { background: rgba(24, 29, 26, 0.62); border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 55%, transparent); box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.7), inset 0 0 0 1px color-mix(in srgb, var(--color-primary, #c9a75c) 22%, transparent); } body.de-v2[data-de-layout="grid"] .category-card__icon, body.de-v2[data-de-layout="list"] .category-card__icon { width: 34px; height: 34px; flex: 0 0 auto; margin: 0; display: inline-flex; align-items: center; justify-content: center; } body.de-v2[data-de-layout="grid"] .category-card__icon svg, body.de-v2[data-de-layout="grid"] .category-card__icon img, body.de-v2[data-de-layout="list"] .category-card__icon svg, body.de-v2[data-de-layout="list"] .category-card__icon img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); } body.de-v2[data-de-layout="grid"] .category-card__name, body.de-v2[data-de-layout="list"] .category-card__name { flex: 1; min-width: 0; text-align: left; margin: 0; font-family: var(--font-display, 'Playfair Display'), serif; font-size: 18px; letter-spacing: 0.02em; line-height: 1.2; color: #fff; } body.de-v2[data-de-layout="list"] .category-card__chevron { color: rgba(255, 255, 255, 0.4); flex: 0 0 auto; } /* ── Zarif Liste + Vitrin: GERÇEK kart korunur (—ed-* renkleri / kapak foto), sağ panelde TEK SÜTUN. Klasik kartlar mobil-first (dar sütun) tasarlandığı için sağ panelde doğal, test edilmiş biçiminde oturur; yalnız oran/min-boy panel genişliğine göre ayarlanır. ── */ /* ── Zarif Liste: ORİJİNAL yüzen-ikon estetiği KORUNUR — ikon karosu kartın sol kenarından dışarı taşar (referans görünüm). Dar sağ panelin overflow-x:hidden'ı bu taşmayı ve gölgeleri KESMESİN diye listeye sol iç-boşluk (padding-left) verilir → ikon panel kenarına yapışmaz/kesilmez; gölgeler panele göre kompakt (yatayda az taşan) tutulur; kart arası boşluk (gap) küçültülür. ── */ body.de-v2[data-de-layout="editorial"] .editorial-list { padding-left: 30px; /* taşan ikon + gölgesi için pay (kesilmeyi önler) */ padding-right: 4px; /* kartın sağ köşesi/gölgesi de kenara yapışmasın */ gap: 9px; /* daha derli toplu kolon */ } body.de-v2[data-de-layout="editorial"] .editorial-card { min-height: 84px; border-radius: 18px; box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 12px 26px -12px rgba(0, 0, 0, .55); } body.de-v2[data-de-layout="editorial"] .editorial-card__icon { margin-left: -18px; /* karttan sola taşan yüzen karo (orijinal görünüm) */ width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .5), inset 0 0 0 1px color-mix(in srgb, var(--ed-icon-color, var(--color-primary, #c9a75c)) 22%, transparent); } body.de-v2[data-de-layout="editorial"] .editorial-card__glyph, body.de-v2[data-de-layout="editorial"] .editorial-card__glyph--svg svg, body.de-v2[data-de-layout="editorial"] .editorial-card__icon > svg { width: 31px; height: 31px; } /* Başlığa daha çok yer: taban ≥1024 kuralı body'ye padding-right:32% veriyordu → dar panelde uzun Türkçe kelime ("Zeytinyağlılar") sığmayıp 'r'yi tek başına alt satıra atıyordu (bariz hata). 24% + biraz küçük font → geniş serif tenant fontunda bile tek satır. text-wrap:pretty: yine de taşarsa yetim-harf (kısa son satır) bırakmaz. */ body.de-v2[data-de-layout="editorial"] .editorial-card__body { padding-left: 15px; padding-right: 24%; } body.de-v2[data-de-layout="editorial"] .editorial-card__title { font-size: 1.05rem; letter-spacing: 0; text-wrap: pretty; } body.de-v2[data-de-layout="editorial"] .editorial-card__photo { width: 44%; } body.de-v2[data-de-layout="showcase"] .showcase-card { margin: 0; aspect-ratio: 16 / 10; min-height: 170px; break-inside: avoid; } /* ── Alt dock — koyu-cam ortalı pill ────────────────────────────── Beyaz kavisli SVG şeridi (.bottom-nav__shape) çok sırıtıyordu → gizle; nav satırını panellerle aynı dilde koyu-cam bir pill yap. Merkez menü düğmesi yükseltilmiş aksan daire; "MENU" etiketi kalkar (temiz ikon-yalnız), koyu bir halka ile pill'den ayrılır. */ body.de-v2 .bottom-nav-wrap { width: 100% !important; /* <1100'de klasik width:100% yok → şart, yoksa çöker */ max-width: 384px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: 22px; height: auto !important; } body.de-v2 .bottom-nav__shape { display: none; } /* Dock camı = panellerle AYNI beyaz-cam dil (tutarlılık); aksan yalnız merkez menü butonunda (kurumsal renk). */ body.de-v2 .bottom-nav { max-width: none; height: 60px; padding: 0 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 22px 54px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } body.de-v2 .bottom-nav__icon, body.de-v2 .bottom-nav__lang { color: rgba(255, 255, 255, 0.82); } body.de-v2 .bottom-nav__menu-label { display: none; } body.de-v2 .bottom-nav__menu-btn { bottom: 50px !important; } body.de-v2 .bottom-nav__menu-icon { width: 54px; height: 54px; box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--color-primary, #c9a75c) 55%, transparent), 0 0 0 4px rgba(10, 12, 18, 0.5); } /* ═══ Modallar (≥768) — yeni koyu-cam dile taşı ═══════════════════ 1) Token'ları modal KAPSAMINDA koyuya sabitle → tüm iç öğeler (kart, metin, kenarlık) açık-tema tenant'ta bile otomatik koyulaşır. 2) Mobil bottom-sheet / tam-ekran → merkezî cam panel. 3) Ortak backdrop (koyu+blur) + kapat düğmeleri beyaz. */ body.de-v2 .search-modal, body.de-v2 .info-modal, body.de-v2 .campaign-modal, body.de-v2 .lang-modal, body.de-v2 .product-modal { /* ── MARKA-TÜREVLİ koyu-cam paleti — TEK kaynak ────────────────── Yüzey/kart/kenarlık/aksan tümü --color-primary'den color-mix ile türer → jenerik slate DEĞİL: Aurora yeşil-siyah, Kara Kedi altın- siyah. Böylece modal, tenant kurumsal rengini yansıtır ve de-v2 sinematik-koyu sahnesiyle (blurlu video + koyu scrim) tutarlı olur. Metin 3 kademe açık mürekkep; aksan koyu zeminde okunur tona çekilir. */ --dm-surface: color-mix(in srgb, var(--color-primary, #c9a75c) 8%, #0f1217); --dm-card: color-mix(in srgb, var(--color-primary, #c9a75c) 14%, rgba(255, 255, 255, 0.05)); --dm-card-hi: color-mix(in srgb, var(--color-primary, #c9a75c) 20%, rgba(255, 255, 255, 0.08)); --dm-border: color-mix(in srgb, var(--color-primary, #c9a75c) 24%, rgba(255, 255, 255, 0.10)); --dm-hair: rgba(255, 255, 255, 0.08); --dm-ink: rgba(255, 255, 255, 0.96); --dm-ink-2: rgba(255, 255, 255, 0.64); --dm-ink-3: rgba(255, 255, 255, 0.42); --dm-accent: color-mix(in srgb, var(--color-primary, #c9a75c) 82%, #fff); /* Global token'ları --dm-* diline eşle → token-tabanlı öğeler (search .sr-* tamamı) hiç ekstra kural gerekmeden markaya uyar. */ --color-bg: var(--dm-surface); --color-bg-card: var(--dm-card); --color-bg-card-hover: var(--dm-card-hi); --color-bg-modal: var(--dm-surface); --color-bg-nav: var(--dm-surface); --color-bg-glass: rgba(255, 255, 255, 0.06); --color-bg-glass-strong: rgba(255, 255, 255, 0.14); --color-text: var(--dm-ink); --color-text-secondary: var(--dm-ink-2); --color-text-muted: var(--dm-ink-3); --color-border: var(--dm-border); --color-border-light: var(--dm-hair); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6); } body.de-v2 .search-modal, body.de-v2 .info-modal, body.de-v2 .lang-modal { align-items: center; justify-content: center; } body.de-v2 .search-modal__backdrop, body.de-v2 .info-modal__backdrop, body.de-v2 .campaign-modal__backdrop, body.de-v2 .lang-modal__backdrop { background: rgba(6, 8, 13, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Ortak içerik paneli — merkezî koyu-cam kart. */ body.de-v2 .search-modal__content, body.de-v2 .info-modal__sheet, body.de-v2 .lang-modal__content { position: relative; width: calc(100% - 48px); max-width: 440px; max-height: min(86vh, 760px); height: auto; margin: 0; border-radius: 24px; background: var(--dm-surface); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); border: 1px solid var(--dm-border); box-shadow: 0 44px 100px -30px rgba(0, 0, 0, 0.85), 0 0 64px -22px color-mix(in srgb, var(--color-primary, #c9a75c) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--dm-ink); animation: none; display: flex; flex-direction: column; overflow: hidden; } /* Arama biraz daha geniş (sonuç kartları). */ body.de-v2 .search-modal__content { max-width: 620px; } /* Kaydırılabilir iç gövdeler panel içinde scroll etsin. */ body.de-v2 .info-modal__scroll, body.de-v2 .search-body { flex: 1; min-height: 0; overflow-y: auto; } body.de-v2 .info-modal__handle { display: none; } /* masaüstünde sürükleme yok */ /* Kapat düğmeleri + arama input — beyaz/koyu-cam. */ body.de-v2 .search-modal__close, body.de-v2 .info-modal__close-btn, body.de-v2 .campaign-modal__close, body.de-v2 .lang-modal__close, body.de-v2 .lang-modal__header h3 { color: #fff; } /* Arama inputu — theme-light tenant'ta sızan beyaz zemini AÇIKÇA ez (yalnız color set etmek yetmiyordu → beyaz-üstü-beyaz). Sarmalayıcının (.search-modal__input-wrap) kendi zemini/kenarlığı YOK: input kendi koyu-cam yüzeyini taşır → çift halka olmaz. */ body.de-v2 .search-modal__input { background: var(--dm-card); border: 1px solid var(--dm-border); color: var(--dm-ink); } body.de-v2 .search-modal__input:focus { border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 55%, transparent); } body.de-v2 .search-modal__input::placeholder { color: var(--dm-ink-3); } /* search .sr-* tamamı token-tabanlı → yukarıdaki token remap markaya uyarlar; ayrıca ez GEREKMEZ (eski !important slate override'ı marka tint'ini eziyordu). */ /* ── info-modal — sabit-açık (cream) tasarımdan editoryal koyu-cam'a SİSTEMATİK yeniden derileme. Whitelist değil TAM kapsam: her yüzey, metin ve aksan --dm-* dilinden çözülür (yoksa beyaz kart / koyu-üstü- koyu etiket sızar — önceki "yüzeysel" sorun buydu). ── */ /* (1) Veri kartları → marka-tonlu koyu cam */ body.de-v2 .info-hours, body.de-v2 .info-address, body.de-v2 .info-phone, body.de-v2 .info-tk-card, body.de-v2 .info-wifi, body.de-v2 .info-survey-entry { background: var(--dm-card); border-color: var(--dm-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 34px -20px rgba(0, 0, 0, 0.7); } body.de-v2 .info-phone:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 42px -18px rgba(0, 0, 0, 0.8); } /* (2) "Not / hakkında" paneli — daha sakin brand-tint zemin */ body.de-v2 .info-block--notice, body.de-v2 .info-block:not([class*="--"]) { background: color-mix(in srgb, var(--color-primary, #c9a75c) 6%, rgba(255, 255, 255, 0.03)); border-color: var(--dm-border); box-shadow: 0 3px 22px -14px rgba(0, 0, 0, 0.7); } /* (3) WiFi iç hücreleri / QR / kopyala düğmesi + ayraçlar */ body.de-v2 .info-wifi__cell, body.de-v2 .info-wifi__nopass, body.de-v2 .info-wifi__qr { background: rgba(255, 255, 255, 0.04); border-color: var(--dm-hair); } body.de-v2 .info-wifi__act { background: rgba(255, 255, 255, 0.06); border-color: var(--dm-border); color: var(--dm-accent); } body.de-v2 .info-wifi__qr img { background: #fff; } /* QR taranabilirlik: beyaz kalmalı */ body.de-v2 .info-hours__row { border-bottom-color: var(--dm-hair); } body.de-v2 .info-block__text--rich hr { border-top-color: var(--dm-hair); } /* (4) Birincil metin (başlık / isim / değer) → açık mürekkep */ body.de-v2 .info-modal__brand-name, body.de-v2 .info-block__title, body.de-v2 .info-hours__day, body.de-v2 .info-address__label, body.de-v2 .info-phone__value, body.de-v2 .info-wifi__title, body.de-v2 .info-wifi__v, body.de-v2 .info-tk-card__value, body.de-v2 .info-survey-entry__title, body.de-v2 .info-block__text--rich h2, body.de-v2 .info-block__text--rich h3 { color: var(--dm-ink); } /* (5) İkincil metin (gövde / ipucu / mikro-etiket) → yumuşak açık */ body.de-v2 .info-block__text, body.de-v2 .info-block__text--sm, body.de-v2 .info-address__text, body.de-v2 .info-block__text--rich, body.de-v2 .info-block__text--rich p, body.de-v2 .info-block__text--rich li, body.de-v2 .info-wifi__qr-hint, body.de-v2 .info-wifi__nopass, body.de-v2 .info-wifi__k, body.de-v2 .info-phone__label, body.de-v2 .info-tk-card__label, body.de-v2 .info-survey-entry__sub { color: var(--dm-ink-2); } /* (6) Aksan öğeleri — cream tasarımda koyu-kahveye karışıyordu; koyu zeminde okunur marka tonuna çek. */ body.de-v2 .info-block__label, body.de-v2 .info-hours__time, body.de-v2 .info-address__link, body.de-v2 .info-address__icon, body.de-v2 .info-phone__chev, body.de-v2 .info-phone__icon, body.de-v2 .info-wifi__icon, body.de-v2 .info-wifi__qr-toggle, body.de-v2 .info-tk-card__icon, body.de-v2 .info-survey-entry__chev { color: var(--dm-accent); } /* (7) Kapat düğmesi zemini koyu-cam */ body.de-v2 .info-modal__close-btn { background: rgba(255, 255, 255, 0.08); } body.de-v2 .info-modal__close-btn:hover { background: rgba(255, 255, 255, 0.14); } /* NOT: .info-pwa-entry + .info-survey-entry__icon + .info-social-card__icon zaten MARKA GRADYAN/renk taşır (koyu zeminde doğru) → dokunulmaz. */ /* ── Dil modalı öğeleri — aynı --dm-* diliyle marka-tonlu koyu cam ── */ body.de-v2 .lang-modal__item { background: var(--dm-card); border: 1px solid var(--dm-border); color: var(--dm-ink); transition: background 0.15s ease, border-color 0.15s ease; } body.de-v2 .lang-modal__item:hover { background: var(--dm-card-hi); border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 50%, transparent); } body.de-v2 .lang-modal__item--active { background: color-mix(in srgb, var(--color-primary, #c9a75c) 20%, transparent); border-color: color-mix(in srgb, var(--color-primary, #c9a75c) 58%, transparent); color: #fff; } body.de-v2 .lang-modal__check { color: var(--dm-accent); } body.de-v2 .lang-modal__name { color: var(--dm-ink); } } /* ── de-v2 TABLET / DAR MASAÜSTÜ (768–1023px) — IMMERSIVE (masaüstüyle AYNI kurgu) ─ Eskiden ayrık 2-panel'di (video solda + kartlar sağda + marka gizli) → yeni immersive dile aykırı, "çok ayrık" duruyordu. Artık masaüstüyle aynı bütünlüklü sahne: info bloğu (marka kartı) SOL + video ARKADA (merkez, panellerin altında) + kartlar SAĞ, birbirine YAKIN. Tek fark: dar ekrana sığsın diye video + paneller küçülür (768'de bile 3'ü sığar). Marka kartı GERİ geldiği için logo orada → kartların üstündeki .dev2-cards-logo gizlenir. Taban immersive kuralları (frame merkez, brand right, cats left, page-wrap z:3) aynen geçerli; burada yalnız boyutlar küçülür. */ @media (min-width: 768px) and (max-width: 1023px) { /* Video = GENİŞ backdrop (ortalı, geniş, panellerin ALTINDA dolgun zemin); paneller video-göreli DEĞİL, EKRAN KENARLARINDAN konumlanır → daha GENİŞ paneller + geniş video, birbirine yakın, FERAH. (Önceki dar 3-kolon 768'e sığsın diye her şeyi kısıyordu → "zorlama" görünüyordu.) */ body.de-v2 { --dv2-vw: clamp(440px, 62vw, 620px); } body.de-v2 .desktop-brand-card { right: auto; left: clamp(28px, 4vw, 48px); width: clamp(286px, 35vw, 344px); padding: 26px 22px; } body.de-v2 .hero__categories { left: auto; right: clamp(28px, 4vw, 48px); width: clamp(296px, 37vw, 364px); } /* Logo marka kartında → üstteki over-cards logosu gizli. */ body.de-v2 .dev2-cards-logo { display: none; } } /* (Kaldırıldı) Eski 768–1199 "logo video üstüne" bloğu — kategori-duyarlı yeni mimaride logo daima sol kimlik panelinde; over-video partial emekli. */ /* --- css/front/components/header.css --- */ /* ============================================ Top Header — Logo (left) + nav cluster (right) ============================================ Layout was previously centered logo with back button top-left and outlet name absolute right. Reorganized so the brand mark anchors left (universal convention) and navigation context lives on the right (semantic + thumb-friendlier for right-handers). */ .top-header { position: relative; z-index: 50; background: var(--color-bg); box-shadow: rgb(51 48 48 / 20%) 0px 8px 24px; } .top-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 auto; padding: var(--space-sm) var(--space-md); height: 70px; } /* ─── Logo (anchored left) ──────────────────────────────────────── `min-width: 0` lets the logo column shrink when a long outlet name needs space on the right. `max-width` is a defensive ceiling so an oversized logo (e.g. wide horizontal wordmark) can't push the right cluster off-screen on narrow viewports. */ .top-header__logo { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 60%; text-decoration: none; } /* Explicit `height` (not just max-height) so SVG logos without an intrinsic width/height attribute still get sized — otherwise the browser renders them at 0×0 and the logo disappears from the bar while the DOM element stays present. `width: auto + max-width` keeps the aspect ratio + caps very wide wordmarks. */ .top-header__logo-img { height: 56px; width: auto; max-width: 140px; object-fit: contain; } body.theme-light .top-header__logo-img { filter: none; } body:not(.theme-light) .top-header__logo-img { filter: brightness(1.1); } .top-header__logo-text { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-header-fg, var(--color-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ─── Right cluster (outlet name + divider + back + cart) ──────── Inline flex row, gap-driven. Each child can disappear independently and the rest re-flow cleanly. */ .top-header__right { display: inline-flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; min-width: 0; } /* Outlet name — wraps to 2 lines for long names, right-aligned so it reads as the trailing context before the divider/back action. */ .top-header__outlet-name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; color: var(--color-header-fg, var(--color-text)); text-align: right; max-width: 50vw; /* Two-line clamp guards against "The Club Restaurant" eating the whole header on narrow viewports. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* Hairline divider between outlet name and back button. Rendered only when BOTH are present (see header.php logic) so the cluster reads as "context | action" instead of two unrelated items. `color-text-muted` is intentionally bolder than `color-border` — the divider needs to actually communicate separation, not whisper it. Height matches the back button's tighter footprint. */ .top-header__divider { display: inline-block; width: 1px; height: 24px; background: var(--color-text-muted); opacity: 0.35; flex-shrink: 0; } /* Back button — 36×36 visual footprint with a generous tap area via padding (touch-action). Compact so it doesn't crowd a long outlet name on narrow viewports; still well within iOS/Android tap-area guidelines because the surrounding flex gap adds breathing room. Edge-swipe gesture remains the primary back-navigation mechanism. */ .top-header__back { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 36px; border-radius: var(--radius-full); color: var(--color-header-fg, var(--color-text)); transition: background var(--transition-fast), transform 100ms ease; flex-shrink: 0; } body.theme-light .top-header__back { background: rgb(0 0 0 / 0%); } body.theme-light .top-header__back:hover, body.theme-light .top-header__back:active { background: rgb(0 0 0 / 5%); } body:not(.theme-light) .top-header__back { background: var(--color-bg-glass-strong); } body:not(.theme-light) .top-header__back:hover, body:not(.theme-light) .top-header__back:active { background: var(--color-bg-glass); } .top-header__back:active { transform: scale(0.92); } /* Labeled variant — shown when there's no outlet caption, so a lone chevron isn't the only affordance. Becomes an icon + "Geri" pill. */ .top-header__back--labeled { width: auto; gap: 5px; padding: 0 12px 0 8px; } .top-header__back-label { font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; } /* --- css/front/components/bottom-nav.css --- */ /* ============================================ Bottom Navigation - Curved SVG Background ============================================ */ .bottom-nav-wrap { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; pointer-events: none; /* Total height: SVG curve top + nav bar */ height: calc(var(--nav-height) + 2px); } .bottom-nav-wrap > * { pointer-events: auto; } /* ---- SVG Curved Shape ---- */ .bottom-nav__shape { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; z-index: 0; line-height: 0; } .bottom-nav__shape svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 -2px 12px rgba(0, 0, 0, 0.24)); } /* ---- Center Menu Button ---- Lives as a body-level sibling of .bottom-nav-wrap (see bottom_nav.php) so its z-index participates in the body's stacking context. That lets the button float ABOVE sticky overlays like the takeaway Sepete Ekle CTA without us having to fight the nav-wrap's own stacking. Position is `fixed` (not `absolute` like before, when it was nested in the wrap) — bottom:18px reproduces the prior visual offset. */ .bottom-nav__menu-btn { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-decoration: none; } .bottom-nav__menu-btn:active { transform: translateX(-50%) scale(0.93); } @media (hover: hover) { .bottom-nav__menu-icon:hover { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18), 0 4px 20px color-mix(in srgb, var(--color-primary) 40%, transparent); } } .bottom-nav__menu-icon { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: linear-gradient(var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-bg); width: 50px; height: 50px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 12px color-mix(in srgb, var(--color-primary) 30%, transparent); transition: all var(--transition-base); } .bottom-nav__menu-icon svg { width: 24px; height: 24px; } .bottom-nav__menu-label { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; font-family: var(--font-primary); /* Inherit the footer text color so a dark footer (default for the dark theme) gives a light label and a light footer (light theme or operator override) gives a dark label. The previous hardcoded #000 made the label vanish on dark footers. */ color: var(--color-footer-text, #000); } /* ---- Nav Bar (inside the shape) ---- */ .bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-md); padding-bottom: var(--safe-bottom); height: var(--nav-height); max-width: 1180px; margin: auto; } .bottom-nav__left, .bottom-nav__right { display: flex; align-items: center; gap: 2px; flex: 1; } .bottom-nav__right { justify-content: flex-end; } /* Center spacer to keep left/right balanced */ .bottom-nav__center-spacer { width: 72px; flex-shrink: 0; } /* ---- Icon Buttons ---- */ .bottom-nav__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 36px; border-radius: var(--radius-full); color: var(--color-footer-text, rgba(255, 255, 255, 0.7)); opacity: 0.7; transition: all var(--transition-fast); flex-shrink: 0; } .bottom-nav__icon svg { width: 20px; height: 20px; } /* Survey icon - soft RGB glow animation */ .survey-icon { animation: surveyGlow 6s ease-in-out infinite; opacity: 1 !important; } .survey-icon svg { width: 24px; height: 24px; } @keyframes surveyGlow { 0%, 100% { color: #9e702e; } 25% { color: #d8c7a8; } 50% { color: #7e4a4a; } 75% { color: #656565; } } .bottom-nav__icon:active { opacity: 1; transform: scale(0.9); } @media (hover: hover) { .bottom-nav__icon:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); } } /* ---- Language Button ---- */ .bottom-nav__lang { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-lg); color: var(--color-footer-text, var(--color-text)); transition: all var(--transition-fast); height: 36px; } .bottom-nav__lang:active { transform: scale(0.94); } @media (hover: hover) { .bottom-nav__lang:hover { background: rgba(255, 255, 255, 0.08); } } .bottom-nav__flag { /* Bayrak bir emoji: kutu, emojiyi FLEX ile ortalar → glyph merkezi kutu merkezine oturur ve yanındaki chevron ile tam hizalanır. Eski 28px font / 18px kutu uyumsuzluğu emojiyi kutudan taşırıp chevron'a göre ~yarım satır aşağı kaydırıyordu. Kardeş ikonlarla (20px) dengeli olması için boyut hafif küçültüldü. */ font-size: 23px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 23px; } .bottom-nav__lang-arrow { /* Dropdown chevron — daha büyük + net (eski 10px/0.5 çok küçük ve soluktu). flex-shrink:0 squish'i, display:block inline-baseline boşluğunu önler. */ width: 13px; height: 13px; opacity: 0.6; flex-shrink: 0; display: block; } /* ============================================ Info Button — Pulse Attractor ============================================ Subtle "look at me" cue on the info button. Auto-stops after first open (localStorage flag). Brand-colored, dual-ring, premium feel. */ .bottom-nav__info { position: relative; overflow: visible; } .bottom-nav__info .info-pulse, .bottom-nav__info .info-pulse::before { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: var(--color-primary, #c8a97e); opacity: 0; } .bottom-nav__info .info-pulse { animation: yqrInfoPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .bottom-nav__info .info-pulse::before { content: ''; animation: yqrInfoPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 1.2s; } /* Subtle glow under the icon itself */ .bottom-nav__info::after { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-primary, #c8a97e); opacity: 0.18; animation: yqrInfoGlow 2.4s ease-in-out infinite; pointer-events: none; z-index: -1; } .bottom-nav__info svg { position: relative; z-index: 1; } /* Stop everything once user has seen it */ .bottom-nav__info.info-seen .info-pulse, .bottom-nav__info.info-seen .info-pulse::before, .bottom-nav__info.info-seen::after { animation: none; display: none; } @keyframes yqrInfoPulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.55; } 70% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } } @keyframes yqrInfoGlow { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.28; } } /* Respect reduced-motion preference (accessibility) */ @media (prefers-reduced-motion: reduce) { .bottom-nav__info .info-pulse, .bottom-nav__info .info-pulse::before, .bottom-nav__info::after { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ A · AURA DOCK — geniş "Ara ya da Aura'ya sor" çubuğu + ince nav. Yalnız body.footer-dock modunda (şimdilik ?footer=dock önizlemesi; kalıcı panel ayarı B fazında). Clearance'ı (--nav-height) burada YÜKSELTİR → tüm içerik pad'leri (page-wrap, carousel, takeaway) otomatik uyum sağlar. Mevcut kavisli nav'a sıfır dokunuş. ═══════════════════════════════════════════════════════════════════════ */ body.footer-dock { --nav-height: 116px; } /* arama çubuğu 58 + gap 6 + slim-nav 44 + alt pad 8 */ body.footer-dock .bottom-nav-wrap--dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; gap: 6px; padding: 0 14px calc(8px + var(--safe-bottom)); max-width: 600px; margin: 0 auto; pointer-events: none; } body.footer-dock .bottom-nav-wrap--dock > * { pointer-events: auto; } /* İçeriği alt kroma'nın arkasında yumuşakça soldur (transparan ince nav içerik üstünde okunur kalsın) — tam-genişlik gradyan perde, sayfa zeminine iner. */ body.footer-dock .bottom-nav-wrap--dock::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: calc(100% + 4px); z-index: -1; pointer-events: none; /* Sıkı perde: dip solid, geçiş çubuğun civarında biter (yukarı yayılmaz). */ background: linear-gradient(to top, var(--color-footer-bg, #14181c) 62%, transparent 100%); } /* ── Footer KENDİ kontrast bağlamı (sayfa temasından DEĞİL) ────────────── Footer'ın iç elemanları (arama çubuğu + slim-nav) rengini footer ARKA PLANINA göre alır. Operatör footer-text'i footer-bg'ye zıt seçer → tüm türevler otomatik okunur kalır (koyu footer→beyaz mürekkep, açık footer→ koyu mürekkep). Böylece "temayla zıt footer rengi" seçilince kontrast çökmez. Aksan (MENU/arama): --color-footer-accent (head.php'de marka rengi footer'a zıtsa primary, değilse footer-text). */ .bottom-nav-wrap, .bottom-nav-wrap--dock { --footer-ink: var(--color-footer-text, #fff); --footer-ink-muted: color-mix(in srgb, var(--color-footer-text, #fff) 60%, transparent); --footer-surface: color-mix(in srgb, var(--color-footer-text, #fff) 10%, transparent); --footer-surface-strong: color-mix(in srgb, var(--color-footer-text, #fff) 16%, transparent); --footer-border: color-mix(in srgb, var(--color-footer-text, #fff) 20%, transparent); --footer-accent: var(--color-footer-accent, var(--color-primary)); } /* ── The dock: search command bar (opens Aura-first surface) ── */ .aura-dock { display: flex; align-items: center; gap: 10px; width: 100%; height: 58px; padding: 0 8px 0 20px; border: 1px solid var(--footer-border); border-radius: 32px; cursor: pointer; text-align: left; color: var(--footer-ink); /* Footer zeminine oturan hafif "yükseltilmiş" cam yüzey (footer-text türevi → koyu/açık footer'da otomatik görünür). */ background: linear-gradient(180deg, var(--footer-surface-strong), var(--footer-surface)); -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 16px 36px -16px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.14), inset 0 1px 0 color-mix(in srgb, var(--color-footer-text, #fff) 8%, transparent); transition: transform var(--motion-fast, 190ms) var(--ease-spring, ease), border-color var(--transition-fast); } .aura-dock:active { transform: scale(0.99); } @media (hover: hover) { .aura-dock:hover { border-color: color-mix(in srgb, var(--color-footer-text, #fff) 34%, transparent); } } .aura-dock__ph { flex: 1; min-width: 0; font-family: var(--font-primary); font-size: 15px; font-weight: 500; color: var(--footer-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aura-dock__mic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--footer-ink-muted); opacity: .9; } .aura-dock__mic svg { width: 16px; height: 16px; } /* ✦ Aura orb — jewel + net white spark + glow + subtle pulse (dikkat çeker) */ .aura-dock__orb { width: 40px; height: 40px; flex: none; position: relative; border-radius: 50%; background: radial-gradient(120% 120% at 30% 24%, color-mix(in srgb, var(--color-primary) 8%, #fff) 0%, color-mix(in srgb, var(--color-primary) 72%, #fff) 44%, var(--color-primary) 74%, color-mix(in srgb, var(--color-primary) 60%, #23104a) 100%); box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--color-primary) 55%, transparent), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 2px rgba(255,255,255,.5); } .aura-dock__orb::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--color-primary) 45%, transparent); animation: auraDockRing 3.2s ease-in-out infinite; pointer-events: none; } @keyframes auraDockRing { 0%,100%{transform:scale(1);opacity:.5} 55%{transform:scale(1.2);opacity:0} } .aura-dock__orb::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 5.2 4.3 8.7 9.5 9.6C16.3 12 12.9 15.5 12 20.7 11.1 15.5 7.7 12 2.5 11.2 7.7 10.3 11.1 6.8 12 1.6Z'/%3E%3C/svg%3E") center/48% 48% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 5.2 4.3 8.7 9.5 9.6C16.3 12 12.9 15.5 12 20.7 11.1 15.5 7.7 12 2.5 11.2 7.7 10.3 11.1 6.8 12 1.6Z'/%3E%3C/svg%3E") center/48% 48% no-repeat; filter: drop-shadow(0 1px 2px rgba(0,40,25,.4)); } /* ── Slim nav: info · menu · dil — etiket ikonun YANINDA (yatay), daha sleek ── */ .slim-nav { display: flex; align-items: stretch; justify-content: space-around; height: 44px; } .slim-nav__item { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; background: none; border: none; cursor: pointer; text-decoration: none; color: var(--footer-ink); font-family: var(--font-primary); font-size: 12px; font-weight: 600; letter-spacing: .01em; opacity: .82; transition: opacity var(--transition-fast), transform var(--motion-fast, 190ms) var(--ease-spring, ease); } .slim-nav__item svg { width: 18px; height: 18px; flex: none; } .slim-nav__item:active { transform: scale(0.94); } @media (hover: hover) { .slim-nav__item:hover { opacity: 1; } } /* MENU merkezde: orijinaldeki gibi DİKEY (ikon üstte, etiket altta) + hafif büyük ikon → merkez birincil eylemi öne çıkar; Bilgi/Dil yatay kalır. */ .slim-nav__item--menu { flex-direction: column; gap: 2px; font-size: 10px; letter-spacing: .08em; color: var(--footer-accent); opacity: 1; } .slim-nav__item--menu svg { width: 23px; height: 23px; } .slim-nav__flag { font-size: 17px; line-height: 1; width: 18px; height: 18px; display: grid; place-items: center; } /* Dil öğesi yalnız bayrak (etiket yok) → biraz büyüt, dengeli dursun */ .slim-nav__item--lang .slim-nav__flag { font-size: 22px; width: 26px; height: 26px; } @media (prefers-reduced-motion: reduce) { .aura-dock, .slim-nav__item, .aura-dock__orb::before { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ Tablet + masaüstü (≥768px): dock footer = YÜZEN CAM çubuk. Mobilin üstündeki HER genişlikte footer'ı tam-genişlik beyaz banttan çıkarıp ortalanmış, koyu-cam yüzen çubuğa çeviririz (macOS dock hissi; tasarım bütünleşir, ara çözünürlükte "gradient bant" görünümü kalkar). Kartın KENDİ koyu bağlamı vardır → iç mürekkep footer-bg'den bağımsız beyazdır (operatör hangi footer rengini seçerse seçsin okunur). Mobilde (<768px) dock aynen kalır. Ortalama: <1100px'te margin:auto (taban), ≥1100px'te app.css left:50%+translateX. Genişlik 600px !important — de-v2'nin ≥1100 384px kısıtını bilinçli geçer. */ @media (min-width: 768px) { body.footer-dock { --nav-height: 148px; } /* yüzen kart + alt boşluk clearance */ body.footer-dock .bottom-nav-wrap--dock { --footer-ink: #fff; --footer-ink-muted: rgba(255, 255, 255, .62); --footer-surface: rgba(255, 255, 255, .08); --footer-surface-strong: rgba(255, 255, 255, .13); --footer-border: rgba(255, 255, 255, .16); bottom: 24px; max-width: 600px !important; padding: 12px 12px calc(8px + var(--safe-bottom)); border-radius: 28px; background: linear-gradient(180deg, rgba(30, 34, 36, .62), rgba(16, 20, 22, .62)); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); } /* Tam-genişlik beyaz perde masaüstünde KALKAR — cam kartın kendisi zemin. */ body.footer-dock .bottom-nav-wrap--dock::before { display: none; } /* Arama çubuğu artık cam kartın içinde → ağır dış gölgeye gerek yok. */ body.footer-dock .bottom-nav-wrap--dock .aura-dock { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } } /* ═══════════════════════════════════════════════════════════════════════ B · HAP (pill) footer — kavisli nav KORUNUR; minik büyüteç yerine parlayan arama hapı (orb + "Ara ya da sor") solda, merkez MENU notch + bilgi/dil sağda. Kavisli nav aynı boy → --nav-height değişmez (dock'un aksine). ═══════════════════════════════════════════════════════════════════════ */ .nav-search-pill { display: flex; align-items: center; gap: 7px; padding: 5px 13px 5px 5px; border: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent); border-radius: 22px; cursor: pointer; color: var(--color-footer-text, rgba(255, 255, 255, 0.92)); background: color-mix(in srgb, var(--color-primary) 15%, transparent); box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--color-primary) 55%, transparent); transition: transform var(--motion-fast, 190ms) var(--ease-spring, ease), background var(--transition-fast), border-color var(--transition-fast); max-width: 100%; } .nav-search-pill:active { transform: scale(0.96); } @media (hover: hover) { .nav-search-pill:hover { background: color-mix(in srgb, var(--color-primary) 22%, transparent); } } .nav-search-pill__label { font-family: var(--font-primary); font-size: 12px; font-weight: 600; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* orb (jewel + spark + pulse) hap boyutunda */ .nav-search-pill__orb { width: 26px; height: 26px; } /* --- css/front/components/menu-panel.css --- */ /* ============================================ Menu Panel - Slide-in Side Navigation ============================================ */ /* Overlay */ .menu-panel-overlay { position: fixed; inset: 0; z-index: 200; /* Brand-tinted overlay (primary @ 40%) instead of flat black — the panel-open backdrop now carries tenant identity. */ background: color-mix(in srgb, var(--color-primary) 40%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .menu-panel-overlay[hidden] { display: block !important; opacity: 0; pointer-events: none; } .menu-panel-overlay.is-open { opacity: 1; pointer-events: auto; } /* Panel */ .menu-panel { position: fixed; top: 12px; left: 0; bottom: 12px; z-index: 210; width: 280px; max-width: 80vw; background: var(--color-bg); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; border-radius: 0 18px 18px 0; overflow: hidden; } .menu-panel[hidden] { display: flex !important; } .menu-panel.is-open { transform: translateX(0); } body.theme-light .menu-panel { background: #ffffff; box-shadow: 4px 0 32px rgba(0, 0, 0, 0.08); } body:not(.theme-light) .menu-panel { box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4); } /* Page push effect. NOT: `will-change: transform` BURADA (temel .page-wrap'te) OLAMAZ — kalıcı olarak `position:fixed` için containing-block yaratır ve tüm sabit arka plan /backdrop öğelerini viewport yerine .page-wrap'e bağlar (uzun içerikte scroll + gerilme). Bu yüzden yalnız menü itilirken (.is-pushed) veriliyor. */ .page-wrap { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s ease; position: relative; z-index: 1; min-height: 100dvh; } .page-wrap.is-pushed { /* Push the page 200px (panel = 280px). The panel's right ~80px still floats OVER the page, casting its shadow onto the visible page area — "elevated modal" feel, not a drawer that shoves the page aside. */ transform: translateX(200px) scale(0.94); will-change: transform; /* yalnız itilirken — animasyon ipucu, bitince kalkar */ /* Anchor the shrink at the top so the visible top edge stays put. Default origin (center) makes a tall page appear to shift DOWN when scaled. */ transform-origin: top center; border-radius: 16px; overflow: hidden; pointer-events: none; } body.theme-light .page-wrap.is-pushed { box-shadow: -4px 0 40px rgba(0, 0, 0, 0.08); } body:not(.theme-light) .page-wrap.is-pushed { box-shadow: -4px 0 40px rgba(0, 0, 0, 0.3); } /* ---- Panel Header ---- */ .menu-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-md); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } /* Explicit `height` (not just max-height) so SVG logos without an intrinsic width/height attribute still get sized — otherwise the browser renders them at 0×0 and the logo silently disappears from the sidebar while the DOM element stays present. Same fix we applied to .top-header__logo-img. */ .menu-panel__logo { height: 42px; width: auto; max-width: 160px; object-fit: contain; } .menu-panel__brand { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); } .menu-panel__close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-text-muted); transition: all var(--transition-fast); } .menu-panel__close:active { transform: scale(0.9); color: var(--color-text); } body.theme-light .menu-panel__close { background: rgba(0, 0, 0, 0.04); } body:not(.theme-light) .menu-panel__close { background: var(--color-bg-glass-strong); } /* ---- Scrollable Area ---- Holds ONLY the accordion list now. The featured rail moved out to be a sibling that anchors at the bottom of the panel — that way long category lists scroll independently without pushing the "Önerilen Ürünler" rail off-screen. */ .menu-panel__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-sm) 0; overscroll-behavior: contain; } /* Inner wrapper kept for layout symmetry — used to also constrain `margin-top:auto` on featured, but that's no longer needed since featured is a sibling. Left as a thin wrapper so the existing structure stays unchanged. */ .menu-panel__scroll-inner { display: flex; flex-direction: column; } /* ---- Accordion ---- */ .menu-accordion { border-bottom: 1px solid var(--color-border); } .menu-accordion:last-child { border-bottom: none; } /* Trigger button (or direct link for single-cat bölümler) */ .menu-accordion__trigger { display: flex; align-items: center; gap: var(--space-md); width: 100%; padding: var(--space-md) var(--space-lg); text-align: left; transition: background var(--transition-fast); color: var(--color-text); } /* Direct-link variant — used when a bölüm has exactly one visible category for the current outlet. Removed the accordion expansion (no chevron, no expandable content) and went straight to the category. Visual stripping: the .menu-accordion--direct gets the exact same row treatment as the accordion trigger, just acts as an anchor and carries an .is-active state when the customer is on its target category. */ .menu-accordion__trigger--link { text-decoration: none; } .menu-accordion__trigger--link.is-active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow: inset 3px 0 0 var(--color-primary); font-weight: 600; } .menu-accordion__trigger--link.is-active .menu-accordion__icon { color: var(--color-primary); } .menu-accordion__trigger:active { background: var(--color-bg-glass); } @media (hover: hover) { .menu-accordion__trigger:hover { background: var(--color-bg-glass); } } /* Icon */ .menu-accordion__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); opacity: 0.8; } .menu-accordion__icon img, .menu-accordion__icon svg { width: 100%; height: 100%; object-fit: contain; } /* Title */ .menu-accordion__title { flex: 1; font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.01em; } /* Arrow */ .menu-accordion__arrow { flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.3s ease; } .menu-accordion__trigger[aria-expanded="true"] .menu-accordion__arrow { transform: rotate(90deg); color: var(--color-primary); } /* ---- Accordion Content ---- */ .menu-accordion__content { overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; max-height: 0; opacity: 0; } .menu-accordion__content[hidden] { display: block !important; max-height: 0; opacity: 0; } .menu-accordion__content.is-open { opacity: 1; } /* Category items */ .menu-accordion__item { display: flex; align-items: center; gap: var(--space-sm); padding: 10px var(--space-lg) 10px calc(var(--space-lg) + 4px + var(--space-md)); font-size: var(--text-base); color: var(--color-text-secondary); text-decoration: none; transition: all var(--transition-fast); } .menu-accordion__item:active { color: var(--color-primary); background: var(--color-bg-glass); } @media (hover: hover) { .menu-accordion__item:hover { color: var(--color-primary); background: var(--color-bg-glass); } } .menu-accordion__dot { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-text-muted); flex-shrink: 0; transition: background var(--transition-fast); } /* Optional inline SVG icon shown next to a category name when the operator picked one from the icon library. Sized to occupy roughly the same horizontal slot as .menu-accordion__dot would, so rows with and without an icon align cleanly along the left gutter. */ .menu-accordion__item-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; } .menu-accordion__item-icon svg { width: 100%; height: 100%; } .menu-accordion__item:hover .menu-accordion__item-icon, .menu-accordion__item:active .menu-accordion__item-icon { color: var(--color-primary); } /* When the SVG markup has had its color codes stripped (paths with NO `fill` attribute), browsers fall back to the SVG default — solid black — so the icon ignores the container's `color`. Force-fill those uncoloured shapes with `currentColor` so they inherit the container's tenant primary. Shapes that DO declare a fill keep it, and stroke-only feather icons (fill="none" + stroke="currentColor") are matched by [fill] and left alone. */ .menu-accordion__icon svg :where(path, circle, rect, polygon, polyline, ellipse, line):not([fill]), .menu-accordion__item-icon svg :where(path, circle, rect, polygon, polyline, ellipse, line):not([fill]) { fill: currentColor; } .menu-accordion__item:hover .menu-accordion__dot, .menu-accordion__item:active .menu-accordion__dot { background: var(--color-primary); } /* Active item — JS adds `.is-active` to the menu item that matches the page the customer is currently on (category page, or the product detail's parent category). Tinted bar + primary-tinted text reads as "you are here" without needing a label. */ .menu-accordion__item.is-active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); box-shadow: inset 3px 0 0 var(--color-primary); font-weight: 600; } .menu-accordion__item.is-active .menu-accordion__dot, .menu-accordion__item.is-active .menu-accordion__item-icon { color: var(--color-primary); background: var(--color-primary); } .menu-accordion__item.is-active .menu-accordion__item-icon { background: transparent; } /* ---- Featured Products (carousel, anchored at panel bottom) ---- Sibling to `.menu-panel__scroll`, not a child of it — so the scroll above can grow / overflow without ever shifting this rail off-screen. `flex-shrink:0` is the lock that keeps it at its natural height regardless of the accordion content height. */ .menu-panel__featured { flex-shrink: 0; padding-top: var(--space-md); /* Alt boşluk — öneri kartları sidebar'ın en altına yapışmasın; mobil home-indicator (safe-area) için ekstra pay. */ padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); background: var(--color-bg); } .menu-panel__featured-title { font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 var(--space-lg) var(--space-sm); } .menu-panel__featured-scroll { display: flex; gap: 8px; padding: 0 var(--space-lg); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .menu-panel__featured-scroll::-webkit-scrollbar { display: none; } /* Yatay kart: gorsel solda, bilgi sagda - 2 kart gorunur */ .menu-panel__featured-card { flex-shrink: 0; width: calc(50% - 4px); scroll-snap-align: start; display: flex; align-items: center; gap: 8px; padding: 8px; /* Hairline border — keeps the "Önerilen Ürünler" cards here consistent with the search modal's featured list. */ border: 1px solid var(--color-border); border-radius: 10px; text-decoration: none; color: inherit; transition: background var(--transition-fast); } body.theme-light .menu-panel__featured-card { background: #f5f5f5; } body:not(.theme-light) .menu-panel__featured-card { background: var(--color-bg-glass); } .menu-panel__featured-card:active { opacity: 0.8; } .menu-panel__featured-img { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--color-bg-glass-strong); } .menu-panel__featured-img img { width: 100%; height: 100%; object-fit: cover; } .menu-panel__featured-info { flex: 1; min-width: 0; } .menu-panel__featured-name { display: block; font-size: 12px; font-weight: 500; color: var(--color-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .menu-panel__featured-price { display: block; font-size: 11px; font-weight: 600; color: var(--color-primary); margin-top: 2px; } /* --- css/front/components/product-card.css --- */ /* ============================================ Product Card ============================================ */ .product-card { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); transition: background var(--transition-fast); position: relative; text-decoration: none; color: inherit; } .product-card:active { background: var(--color-bg-glass); } .product-card + .product-card { border-top: 1px solid var(--color-border); } /* Product Image */ .product-card__image { flex-shrink: 0; width: 76px; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; /* background: var(--color-bg-glass); */ } .product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .product-card:active .product-card__image img { transform: scale(1.05); } .product-card__image--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); } /* Product Info */ .product-card__info { flex: 1; min-width: 0; } /* Head row: left main block (badges + name) | right price block. align-items:flex-start so the price stays flush at the top of the row even when badges + a wrapping name push the left side taller. */ .product-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: 2px; } /* Inner wrapper for the left column — stacks badges above the name. flex:1 + min-width:0 lets long product names wrap inside the row instead of pushing the price off-screen. */ .product-card__head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .product-card__name { font-size: var(--text-base); font-weight: 600; margin-bottom: 0; line-height: 1.3; min-width: 0; } /* Badges inside head-main — drop the legacy bottom margin so the parent's flex `gap` is the single source of vertical rhythm. */ .product-card__head-main .product-card__badges { margin-bottom: 0; } .product-card__description { /* Font boyutu tenant ayarına bağlı (body[data-desc-size]). Varsayılan medium = --text-sm (mevcut). Small/Large body attribute override eder. */ font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-xs); /* Subtle italic — separates the description (often a region tag like "URLA/TÜRKİYE" or an ingredient list) from the bold name and price chips above, and gives the listing a touch of menu typography instead of looking like a flat text dump. */ font-style: italic; } /* Breathing room ONLY when the description follows the variant chip strip — for non-variant cards the head row's 2px margin-bottom is enough, an extra 8px here would make the card feel airy/wrong. */ .product-card__variants + .product-card__description { margin-top: var(--space-sm); } /* Description is sanitized rich HTML (Quill). Strip nested block margins so the 2-line clamp stays tight; lists collapse to inline runs in the compact card view. The detail page shows full formatting normally. */ .product-card__description > p, .product-card__description > ul, .product-card__description > ol { margin: 0; padding-left: 0; } .product-card__description ul, .product-card__description ol { list-style: none; } .product-card__description li { display: inline; } .product-card__description li + li::before { content: " · "; color: var(--color-text-tertiary, #9ca3af); } .product-card__description strong { font-weight: 600; } .product-card__description a { color: var(--color-primary); text-decoration: none; } /* Badges */ .product-card__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-xs); } .product-badge { display: inline-flex; gap: 8px; padding: 4px 6px 4px; border-radius: 4px; font-size: 10px; font-weight: 600; /* text-transform: uppercase; */ /* letter-spacing: 0.03em; */ line-height: 10px; backdrop-filter: var(--card-glass-blur, var(--blur-md)); } .product-badge--new { background: var(--color-success); color: #ffffff; } .product-badge--popular { background: var(--color-warning);; color: #fff; } .product-badge--chef { color: #fff; background: var(--color-primary); } /* Menü etiketleri (tags) — kartta kompakt çip (ikon + ad), rengi inline --tag ile (tag.color). Rozetlerden ayrı; ürün adının hemen altında. */ .product-card__tags, .product-card-grid__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .product-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; line-height: 1.5; background: color-mix(in srgb, var(--tag, #c8a97e) 13%, transparent); color: var(--tag, #c8a97e); } .product-tag img { width: 11px; height: 11px; object-fit: contain; flex-shrink: 0; } body:not(.theme-light) .product-tag { background: color-mix(in srgb, var(--tag, #c8a97e) 24%, transparent); color: color-mix(in srgb, var(--tag, #c8a97e) 82%, #ffffff); } /* Meta satırı — kalori chip + alerjen ikonları aynı satırda. Operatör Settings'ten kalori gösterimi kapattıysa veya alerjen yoksa meta render edilmez. */ .product-card__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; } .product-card__kcal { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--color-primary) 30%, transparent); color: var(--color-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.4; /* Operatör geri bildirimi: chip çok göze çarpıyordu. 0.8 ile bilgi okunur kalır, vurgu yumuşar. */ opacity: 0.8; } /* Allergens */ .product-card__allergens { display: flex; gap: 4px; } .allergen-icon { width: 18px; height: 18px; border-radius: var(--radius-full); opacity: 0.6; } .allergen-icon img { width: 100%; height: 100%; object-fit: contain; } /* Price column inside the head row. Lives inline with the name now (instead of as a third column on the outer flex). The description below uses the FULL info width, no longer squeezed under a price-shaped gap. */ .product-card__price { flex-shrink: 0; text-align: right; min-width: 60px; } .product-card__price-value { font-size: var(--text-base); font-weight: 700; /* Dark theme: lift the brand color toward white so price reads cleanly on a black bg even when the brand primary is a low- contrast tone (deep brown, navy, etc.). Light theme overrides below restore the pure brand color. */ color: color-mix(in srgb, var(--color-primary) 40%, #fff); white-space: nowrap; } /* Variant chip strip — sits BELOW the head row as a full-width horizontal flex, replacing the old vertical-stack-in-the-right-slot pattern. Image-less bar/spirits cards (whisky/wine/cocktails) get a compact one-line price ladder; the same strip flex-wraps onto a second line for 5+ variants without breaking the layout. */ .product-card__variants { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } /* Variant badge — soft pill so label+price reads as one unit. Background + border are color-mixed against the tenant primary at low opacity so the badge picks up brand identity without shouting. 8px radius keeps it modern (vs full pill 999px). */ .product-card__variant { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--text-sm); padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--color-primary) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent); /* Stable min-width so a row of 3-4 small chips doesn't get cramped — but flex-wrap still kicks in for very long lists. */ min-width: 0; white-space: nowrap; } .product-card__variant-label { /* Use secondary (not muted) so the label keeps enough contrast on both light + dark themes — muted was washing out against the soft brand-tinted badge background. */ color: var(--color-text-secondary); font-size: 0.85em; font-weight: 600; } .product-card__variant-price { font-weight: 700; color: color-mix(in srgb, var(--color-primary) 40%, #fff); /* Tabular nums keep prices aligned vertically when the chip strip wraps to two rows — e.g. `1.300` and `20.000` line up cleanly. */ font-variant-numeric: tabular-nums; } /* ============================================ Product List Section ============================================ */ .product-section { margin-bottom: var(--space-lg); } .product-section__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; padding: var(--space-md) var(--space-md) var(--space-sm); color: var(--color-primary-light); position: sticky; top: 44px; /* Below category-tabs */ background: var(--color-bg); z-index: 5; } .product-list { display: flex; flex-direction: column; position: relative; background: var(--color-bg); } /* ============================================ Product Grid (alternative listing style) 2 columns on mobile, 3 columns ≥767px. Used when category.listing_style = 'grid'. ============================================ */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); padding: var(--space-md); position: relative; border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-left: var(--space-md); margin-right: var(--space-md); background: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); z-index: 2; } body:not(.theme-light) .category-sections .product-grid { box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15); background: linear-gradient(180deg,rgba(40, 40, 40, 1) 0%, rgba(40, 40, 40, 0) 100%); } @media (min-width: 767px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } } .product-card-grid { display: flex; flex-direction: column; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .product-card-grid:active { transform: scale(0.98); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10); border-color: var(--color-border-light); } .product-card-grid__image { position: relative; width: 100%; aspect-ratio: 1 / 1; /* her zaman kare; dikey/yatay görsel object-fit:cover ile kırpılır */ overflow: hidden; background: var(--color-bg-glass); } .product-card-grid__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .product-card-grid:active .product-card-grid__image img { transform: scale(1.05); } .product-card-grid__image--placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 8%, transparent) 100%); } .product-card-grid__badges { position: absolute; top: var(--space-sm); left: var(--space-sm); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; pointer-events: none; } .product-card-grid__info { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; } .product-card-grid__name { font-size: var(--text-base); font-weight: 600; line-height: 1.3; margin: 0; /* Two-line clamp keeps card heights even across the grid row. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card-grid__price { margin-top: auto; } .product-card-grid__price-value { font-size: var(--text-base); font-weight: 700; color: color-mix(in srgb, var(--color-primary) 40%, #fff); white-space: nowrap; } /* Light theme: restore pure brand primary for prices — black-on-white already reads fine and we want maximum brand presence. */ body.theme-light .product-card__price-value, body.theme-light .product-card__variant-price, body.theme-light .product-card-grid__price-value { color: var(--color-primary); } /* ══════════════════════════════════════════════ İndirim (kampanyalı fiyat) — liste + grid · v2 "zarif" Üstü çizili taban (ince, soluk) + rafine GARNET indirimli fiyat + hairline "−X ₺" tag + letter-spaced kampanya etiketi. Parlak kırmızı/gradient YOK: premium fırsat sinyali marka altınıyla çatışmaz. Renk --color-sale (garnet; koyu temada açık gül) variables.css'ten gelir → tek kaynak, temalı. ══════════════════════════════════════════════ */ .product-card__price--sale { flex-direction: column; align-items: flex-end; gap: 1px; display: flex; line-height: 1.1; } /* Grid: üstü çizili taban + indirimli fiyat YAN YANA (alt alta değil) — daha toplu, premium duruş. Baseline hizası ikisini tek satırda oturtur. */ .product-card-grid__price--sale { display: flex; flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.1; } /* Üstü çizili taban — ince strike, soluk, hafif; yeni fiyatın hemen üstünde. */ .product-card__price-old, .product-card-grid__price-old { font-size: 11px; color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); font-weight: 500; letter-spacing: .01em; line-height: 1.1; opacity: .85; } /* Sale fiyatı garnet — light temanın marka-rengi kuralını da ez (yüksek özgüllük). */ .product-card__price--sale .product-card__price-value, .product-card-grid__price--sale .product-card-grid__price-value, body.theme-light .product-card__price--sale .product-card__price-value, body.theme-light .product-card-grid__price--sale .product-card-grid__price-value { color: var(--color-sale); letter-spacing: -.01em; } /* (Kazanç "−X ₺" tag'ı kaldırıldı — kartta indirim tutarı gösterilmez; üstü çizili taban + indirimli fiyat yeterli. Detay/benzer yüzeyleriyle tutarlı.) */ /* İndirimli varyant çipi — sale fiyatı garnet + küçük üstü-çizili taban. */ .product-card__variant--sale .product-card__variant-price, body.theme-light .product-card__variant--sale .product-card__variant-price { color: var(--color-sale); } .product-card__variant-old { font-size: 0.8em; color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); opacity: .8; } /* Happy Hour / kampanya etiketi + saat satırı — rafine tag (liste + grid ortak). */ .product-offer { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; } .product-offer__badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-sale); background: var(--color-sale-soft); border: 1px solid var(--color-sale-edge); padding: 2.5px 8px; border-radius: 4px; } .product-offer__time { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: .01em; color: var(--color-text-secondary); } .product-offer__badge svg { width: 10px; height: 10px; flex-shrink: 0; } .product-offer__time svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .7; } /* ============================================ Similar Products (Horizontal Scroll) ============================================ */ .similar-products { padding: var(--space-lg) 0; } .similar-products__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; padding: 0 var(--space-md) var(--space-md); } .similar-products__scroll { display: flex; gap: var(--space-md); padding: 0 var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .similar-products__scroll::-webkit-scrollbar { display: none; } .similar-card { flex-shrink: 0; width: 140px; scroll-snap-align: start; text-decoration: none; color: inherit; } .similar-card__image { width: 140px; height: 140px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-glass); margin-bottom: var(--space-sm); } .similar-card__image img { width: 100%; height: 100%; object-fit: cover; } .similar-card__name { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .similar-card__price { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); margin-top: 2px; } /* Grid kart kalori chip — info alanının altına minimal şerit */ .product-card-grid__kcal { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--color-primary); opacity: 0.85; letter-spacing: 0.02em; } /* ═══ Ürün açıklaması font boyutu — tenant ayarı (migration 0087) ═══ body[data-desc-size="small|medium|large"] ile override. medium zaten varsayılan (yukarıdaki --text-sm), bu yüzden sadece small/large üzerine yazıyoruz. line-height ve clamp korunur. */ body[data-desc-size="small"] .product-card__description { font-size: calc(var(--text-sm) - 1px); line-height: 1.35; } body[data-desc-size="large"] .product-card__description { font-size: calc(var(--text-sm) + 2px); line-height: 1.5; } /* Grid kart varyantı için aynı kural */ body[data-desc-size="small"] .product-card-grid__description { font-size: calc(var(--text-xs) - 1px); } body[data-desc-size="large"] .product-card-grid__description { font-size: calc(var(--text-sm)); } /* --- css/front/components/product-detail.css --- */ /* ============================================ Product Detail Page ============================================ */ /* ---- Hero Image ---- */ .pd-hero { position: relative; width: 100%; aspect-ratio: 5/4; overflow: hidden; /* background: var(--color-bg-glass); */ } /* ─── Placeholder hero — when the product has no images ────────────── Renders in place of the photo carousel so a text-only menu doesn't feel "unfinished". Shorter aspect (5:2) than a real photo (5:4) so the actual product card gets primary screen real estate. Layered visual: 1. Multi-stop gradient using --color-primary + --color-secondary so each tenant looks like its own brand (not a stock template). 2. Two large blurred "color blob" radial gradients overlay for an organic mesh-gradient effect — keeps it from looking like a flat diagonal stripe. 3. Optional category icon watermark in the centre, low opacity, so the customer reads it as "this is a Pasta & Tatlı item" before even glancing at the breadcrumb. Header bar (with business logo) sits directly above this hero — by design we DON'T put the logo here too. The category icon avoids the "two logos stacked" amateur look. ─────────────────────────────────────────────────────────────────── */ .pd-hero--placeholder { /* Placeholder hero (no product image) is shorter than the photo hero — a tall gradient block above plain text feels like dead space, so we trim it down to 6/2. */ aspect-ratio: 6/2; background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--color-primary) 65%, transparent) 0%, transparent 55%), radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 70%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary, var(--color-primary)) 100%); display: flex; align-items: center; justify-content: center; } .pd-hero__watermark { width: 38%; max-width: 220px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); opacity: 0.18; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)); pointer-events: none; } .pd-hero__watermark > svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; } /* Emoji / single-character fallback when the category has no SVG icon but does have a text icon (often an emoji like 🍰). */ .pd-hero__watermark--text { font-size: clamp(56px, 14vw, 140px); line-height: 1; opacity: 0.28; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18)); } /* Light theme: tone watermark down a touch — fully white can look washed against lighter brand gradients. */ body.theme-light .pd-hero__watermark { color: rgba(255, 255, 255, 0.95); opacity: 0.22; } .pd-hero__carousel { position: relative; width: 100%; height: 100%; } .pd-hero__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pd-hero__track::-webkit-scrollbar { display: none; } .pd-hero__slide { flex-shrink: 0; width: 100%; height: 100%; scroll-snap-align: start; } .pd-hero__slide img { width: 100%; height: 100%; object-fit: cover; } .pd-hero__dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; } .pd-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: none; padding: 0; cursor: pointer; transition: all 0.2s; } .pd-hero__dot--active { background: #fff; width: 20px; border-radius: 4px; } /* Carousel gezinme okları — şık, minimal, frosted. Bullet'lar yeterince belirgin olmadığından misafirler ek görselleri fark etmiyordu. Yalnız çok-medyalı üründe render edilir; app.js uçlarda ilgili oku gizler. */ .pd-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #374151; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); cursor: pointer; opacity: 0.75; transition: opacity 0.2s ease, background 0.2s ease, transform 0.12s ease; } .pd-hero__nav:hover { opacity: 1; background: rgba(255, 255, 255, 0.7); } .pd-hero__nav:active { transform: translateY(-50%) scale(0.9); } .pd-hero__nav--prev { left: 9px; } .pd-hero__nav--next { right: 9px; } .pd-hero__nav svg { width: 15px; height: 15px; stroke-width: 2; } .pd-hero__nav--hidden { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .pd-hero__nav { transition: none; } } /* ══════════════════════════════════════════════════════════════════ Detay v2 — floating kontrol katmanı (header şeridi kaldırıldı) Hero tam-kanama üstte; üstüne frosted cam kontroller: logo sol-üst, geri/paylaş/beğen sağ-üst. YALNIZ page modunda render edilir (modal kendi kapatma chrome'una sahip). Fotoğraf üstünde okunurluk için üst gradient scrim + kontrollerde cam + yumuşak gölge. ══════════════════════════════════════════════════════════════════ */ .pd-hero__scrim { /* YALNIZ üst — kontrollerin (logo/geri/paylaş/beğen) fotoğraf üstünde okunması için. Alt kısımda koyultma YOK: kart kesişiminde muddy band oluşturuyordu (kartın kendi gölgesiyle üst üste binip opacity farkı). */ position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 100%); } .pd-hero__controls { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top, 0px)) 14px 14px; pointer-events: none; } .pd-hero__controls > * { pointer-events: auto; } /* Logo OLDUĞU GİBİ — kap/arkaplan/border/radius/gölge YOK. Yalnız yükseklikle ölçeklenir (operatörün logosu kendi formunda kalır; zorla yuvarlak+çerçeve yalnız yuvarlak-rozet logolara yakışır, wordmark/dikdörtgende amatör görünür). */ .pd-hero__brand { display: inline-flex; align-items: center; text-decoration: none; } .pd-hero__brand img { height: 48px; width: auto; max-width: 170px; object-fit: contain; display: block; } .pd-hero__spacer { width: 1px; height: 1px; } .pd-hero__actions { display: flex; gap: 9px; } /* Modal bağlamı: sağ-üstteki modal kapat (X) düğmesi absolute/z-6 ile hep görünür ve artık .pd-hero__btn ile aynı boyut/stilde (right:14px, 42px). Floating aksiyon kümesini (paylaş/beğen) X'in soluna, X'le AYNI 9px boşlukla kaydır → [paylaş] [beğen][X] eşit aralıklı tek küme. (14 sağ + 42 X + 9 boşluk = 65px.) "Geri" düğmesi modalda zaten gizli. */ .pd-hero__controls--modal { padding-right: 65px; } .pd-hero__btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #243028; text-decoration: none; background: rgba(255,255,255,.64); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 6px 16px rgba(20,30,20,.15); cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease; } .pd-hero__btn:active { transform: scale(.92); } .pd-hero__btn svg { width: 19px; height: 19px; } .pd-hero__btn--like.is-active { color: var(--color-sale, #b1495f); } .pd-hero__btn--like.is-active svg { fill: currentColor; stroke: currentColor; } .pd-hero__btn--cart { position: relative; } .pd-hero__cart-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-primary); color: #fff; line-height: 1; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .pd-hero__cart-badge.tk-cart-icon__badge--empty { display: none; } /* Paylaş fallback toast — "bağlantı kopyalandı" (native share yoksa). */ .pd-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 9999; pointer-events: none; background: rgba(20,22,20,.92); color: #fff; font-size: 13.5px; font-weight: 500; padding: 10px 18px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; transition: opacity .22s ease, transform .22s ease; } .pd-toast.is-in { opacity: 1; transform: translate(-50%, 0); } body:not(.theme-light) .pd-hero__btn { background: rgba(22,24,22,.52); color:#f0efe9; border-color: rgba(255,255,255,.16); } /* ---- Detail Card ---- */ .pd-card { position: relative; z-index: 3; margin: var(--space-lg) var(--space-md) 0; padding: var(--space-lg) var(--space-md) var(--space-md); background: var(--color-bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .pd-card--overlap { margin-top: -34px; } /* Page modunda kart üstünde bottom-sheet tutamacı (modal kendi grip'ine sahip → yalnız --page'de). Uygulama hissi verir. */ .pd-card--page { position: relative; } .pd-card--page::before { content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 4px; background: var(--color-border-light); opacity: .9; } /* Kart üst %62 OPAK (kesişimde temiz kenar) + yukarı-doğru yumuşak "lift" gölgesi. Muddy band'ı yaratan asıl unsur scrim'in alt koyultmasıydı (kaldırıldı); kartın kendi ince gölgesi kalır. Alt gradient içeriği sayfaya yumuşatır. */ body.theme-light .pd-card { background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, rgba(255, 255, 255, 0) 100%); box-shadow: 0px -20px 24px rgba(0, 0, 0, 0.06); } /* KOYU TEMA: gölge KOYU değil AYDINLIK olmalı — kara zeminde kara gölge görünmez. Beyaz, düşük-opak bir hale kartı hero'dan ayırır (kara gölge burada yanlıştı). */ body:not(.theme-light) .pd-card { box-shadow: 0px -20px 24px rgba(255, 255, 255, 0.07); } /* ---- Breadcrumb ---- Horizontal-scroll behaviour: long breadcrumb chains (deep group → category → product) used to wrap into 2-3 ugly lines on narrow viewports. Now they scroll horizontally as a single line — matches how mobile users already expect to interact with overflowing navigation chrome (Twitter, app store breadcrumbs, etc.). The scrollbar is hidden visually but the area is keyboard/touch scrollable, and scroll-snap nudges each segment into a comfortable resting position. Edge fade hints there's more content off-screen without adding visual noise (a shadow that masks itself when the scroll reaches either end). */ .pd-breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-md); font-size: 14px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ /* Negative inline margin + padding lets the scroll edge bleed past the parent padding so links flush to the visible edge when scrolled. */ margin-left: calc(var(--space-md) * -1); margin-right: calc(var(--space-md) * -1); padding-left: var(--space-md); padding-right: var(--space-md); /* Subtle fade on both sides when content overflows. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); } .pd-breadcrumb::-webkit-scrollbar { display: none; /* Chromium/Safari */ } .pd-breadcrumb__link { color: var(--color-text-muted); text-decoration: none; transition: color 0.2s; flex: none; /* never shrink — keeps each crumb on its own */ white-space: nowrap; scroll-snap-align: start; } .pd-breadcrumb__link:last-child { color: var(--color-primary); font-weight: 500; } .pd-breadcrumb__sep { color: var(--color-text-muted); opacity: 0.5; font-size: 10px; flex: none; } /* ---- Head: Name + Price ---- */ .pd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); } .pd-head__name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); line-height: 1.25; flex: 1; } /* ---- Price Badge ---- */ .pd-price-badge { flex-shrink: 0; padding: 8px 16px; background: var(--color-primary); color: var(--color-bg); font-size: var(--text-lg); font-weight: 800; border-radius: 12px; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* ---- Variant Prices ---- */ .pd-variants { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-md); } .pd-variant { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--color-border-light); } body.theme-light .pd-variant { background: #f9f9f9; } body:not(.theme-light) .pd-variant { background: var(--color-bg-glass); } .pd-variant__label { font-size: 13px; color: var(--color-text-secondary); } .pd-variant__price { font-size: 14px; font-weight: 700; color: var(--color-primary); } /* ---- İlaveler (add-ons) — v3: soft-gölge "SEÇENEK" kartları ---- Düz metin satır DEĞİL: her ilave, hafif yükseltili bir kart → seçilebilir "seçenek" hissi. Sol yeşil "+" tile, ad ortada, fiyat sağda. */ .pd-addons { margin-bottom: var(--space-md); } .pd-addons__title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--color-text-muted); margin-bottom: 12px; } .pd-addon { display: flex; align-items: center; gap: 13px; padding: 13px 15px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--color-border-light); transition: box-shadow .2s ease, transform .12s ease, border-color .2s ease; } .pd-addon:last-child { margin-bottom: 0; } body.theme-light .pd-addon { background: #ffffff; box-shadow: 0 2px 12px rgba(24,30,24,.06), 0 1px 3px rgba(24,30,24,.05); } body:not(.theme-light) .pd-addon { background: var(--color-bg-card); box-shadow: 0 3px 12px rgba(0,0,0,.20); } .pd-addon__plus { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 11%, transparent); } .pd-addon__plus svg { width: 16px; height: 16px; } .pd-addon__label { flex: 1; min-width: 0; color: var(--color-text); font-size: 15px; font-weight: 500; } .pd-addon__price { font-weight: 700; color: var(--color-primary); white-space: nowrap; letter-spacing: .01em; font-size: 15px; } /* İlave grubu alt-başlığı (grupsuz ilavelerde çıkmaz → zarif fallback). */ .pd-addons__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); padding: 4px 2px 8px; } /* ---- Feature Badges ---- */ .pd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); } .pd-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } /* Rozet ikonları — metin 11px kalırken ikonlar biraz daha iri (14px). CSS width/height, inline width="12" presentation attribute'ünü override eder. */ .pd-badge svg { flex-shrink: 0; width: 14px; height: 14px; } .pd-badge--new { background: #ecfdf5; color: #059669; } body:not(.theme-light) .pd-badge--new { background: rgba(5, 150, 105, 0.15); } .pd-badge--popular { background: #fff7ed; color: #ea580c; } body:not(.theme-light) .pd-badge--popular { background: rgba(234, 88, 12, 0.15); } .pd-badge--chef { background: rgba(200, 169, 126, 0.12); color: var(--color-primary); } .pd-badge--veg { background: #ecfdf5; color: #16a34a; } body:not(.theme-light) .pd-badge--veg { background: rgba(22, 163, 74, 0.15); } .pd-badge--gf { background: #f0fdf4; color: #15803d; } body:not(.theme-light) .pd-badge--gf { background: rgba(21, 128, 61, 0.12); } /* Sugar Free — sky-blue tone, distinct from gluten-free's green so the two health markers don't visually merge when both appear. */ .pd-badge--sf { background: #eff6ff; color: #1d4ed8; } body:not(.theme-light) .pd-badge--sf { background: rgba(29, 78, 216, 0.15); } .pd-badge--spicy { background: #fef2f2; color: #dc2626; } body:not(.theme-light) .pd-badge--spicy { background: rgba(220, 38, 38, 0.15); } /* Menü etiketleri (tags) — operatör-tanımlı çip; rengi inline --tag ile gelir (tag.color), tint'i color-mix üretir. İkonu ile birlikte alerjen sistemiyle aynı görsel dilde. */ .pd-badge--tag { background: color-mix(in srgb, var(--tag, #c8a97e) 13%, transparent); color: var(--tag, #c8a97e); } body:not(.theme-light) .pd-badge--tag { background: color-mix(in srgb, var(--tag, #c8a97e) 24%, transparent); color: color-mix(in srgb, var(--tag, #c8a97e) 82%, #ffffff); } .pd-badge__tagico { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; } /* Product code: monospace + neutral tone, reads like a SKU. */ .pd-badge--code { background: #f1f5f9; color: #475569; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; } body:not(.theme-light) .pd-badge--code { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; } /* Garsona Göster — looks like a chip but acts like a button. Brand-tinted to invite the tap; cursor + hover states distinguish it from the read-only chips above. */ .pd-badge--waiter { background: #fdf8f0; color: #8a6f47; border: 1px solid #f0d5a8; cursor: pointer; transition: background 150ms ease, transform 100ms ease; } .pd-badge--waiter:hover { background: #f9ecd8; transform: translateY(-1px); } body:not(.theme-light) .pd-badge--waiter { background: rgba(200, 169, 126, 0.15); color: #e4b872; border-color: rgba(200, 169, 126, 0.35); } /* Garsona Göster modal — centered card on a dim backdrop. */ .waiter-help-backdrop { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .waiter-help-backdrop[hidden] { display: none; } .waiter-help-backdrop.is-open { opacity: 1; pointer-events: auto; } .waiter-help-card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; background: #ffffff; color: #0f172a; border-radius: 20px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 8px 24px rgba(15, 23, 42, 0.12); transform: translateY(8px); transition: transform 240ms ease; } .waiter-help-backdrop.is-open .waiter-help-card { transform: translateY(0); } .waiter-help-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.85); color: #475569; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background 150ms ease; } .waiter-help-close:hover { background: #ffffff; color: #0f172a; } .waiter-help-photo { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f5f9; } .waiter-help-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .waiter-help-body { padding: 20px 22px 22px; } .waiter-help-section { padding: 4px 0; } .waiter-help-section--default { color: #475569; } .waiter-help-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .waiter-help-flag { font-size: 14px; } .waiter-help-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .waiter-help-name { font-size: 18px; font-weight: 700; margin: 0 0 8px 0; line-height: 1.3; letter-spacing: -0.01em; } .waiter-help-section--default .waiter-help-name { font-size: 16px; color: #334155; } .waiter-help-desc { font-size: 13.5px; line-height: 1.55; margin: 0; color: #475569; } .waiter-help-section--default .waiter-help-desc { color: #64748b; } .waiter-help-divider { border: none; border-top: 1px dashed #e2e8f0; margin: 14px 0; } .waiter-help-code-row { margin-top: 14px; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .waiter-help-code-label { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; } .waiter-help-code-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; color: #0f172a; letter-spacing: 0.04em; } @media (max-width: 480px) { .waiter-help-backdrop { padding: 12px; } .waiter-help-name { font-size: 17px; } .waiter-help-section--default .waiter-help-name { font-size: 15px; } } /* ---- Description (rich HTML via Quill, sanitized) ---- */ .pd-desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--space-md); } /* Tame nested block elements so the description reads as one fluid block. First/last children flush with the container; inner spacing is enough that bullets + paragraphs feel intentional. */ .pd-desc > :first-child { margin-top: 0; } .pd-desc > :last-child { margin-bottom: 0; } .pd-desc p { margin: 0 0 0.6em; } .pd-desc ul, .pd-desc ol { margin: 0 0 0.6em; padding-left: 1.4em; } .pd-desc li { margin-bottom: 0.2em; } .pd-desc strong { font-weight: 600; color: var(--color-text-primary, #1f2937); } .pd-desc a { color: var(--color-primary); text-decoration: underline; } /* ---- Meta (Calories, Prep) ---- */ .pd-meta { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); /* v3: legacy üst/alt border kaldırıldı — .pd-rule sistemi ile çakışıyordu (sade üründe kalori satırı çift-çizgi kutu gibi görünüyordu). Artık kalori/hazırlık meta satırı açıklamanın altına yalın oturur. */ } .pd-meta__item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); } .pd-meta__item svg { opacity: 0.5; } .pd-meta__basis { opacity: 0.6; font-size: 11px; margin-left: 2px; } /* ---- Nutrition card (Kalori + Yağ/Karb/Protein) ---- Shown when the product has at least one macro value. The grid sits between description and allergens; reuses the meta block's vertical rhythm but elevates each cell into a visible group so the values feel "label-like" rather than buried in a metadata strip. */ /* Bölüm ayracı — kutu yerine hairline (mockup ritmi). */ .pd-rule { height: 1px; background: var(--color-border-light); margin: var(--space-lg) 0; border: 0; } /* ---- Beslenme — v3: kutusuz inline serif istatistik + makro oran çubuğu ---- */ .pd-nutrition { margin-bottom: var(--space-lg); } .pd-nutrition__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: 14px; } .pd-nutrition__title { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.16em; margin: 0; } .pd-nutrition__basis { font-size: 11px; color: var(--color-text-muted); opacity: 0.8; font-weight: 500; letter-spacing: 0.02em; } .pd-nutrition__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .pd-nutrition__cell { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2px 6px; position: relative; } .pd-nutrition__cell + .pd-nutrition__cell::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--color-border-light); } .pd-nutrition__ic { height: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 7px; } .pd-nutrition__ic svg { width: 18px; height: 18px; } .pd-nutrition__value { font-family: var(--font-display, inherit); font-size: 23px; font-weight: 700; color: var(--color-text); line-height: 1; } .pd-nutrition__unit { font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-left: 1px; font-family: var(--font-primary); } .pd-nutrition__label { font-size: 10px; color: var(--color-text-muted); margin-top: 6px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; white-space: nowrap; } /* Makro etiketinde çubuk-eşleşen minik renkli nokta (ikon yerine; sayılar ↔ oran çubuğu bağı). */ .pd-nutrition__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; position: relative; top: -1px; } /* Makro oran çubuğu — yağ/karb/protein dağılımı (renkler markup'ta inline). */ .pd-macrobar { margin-top: 16px; } .pd-macrobar__track { height: 7px; border-radius: 6px; overflow: hidden; display: flex; gap: 2px; } .pd-macrobar__track span { display: block; height: 100%; border-radius: 2px; } .pd-macrobar__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; } .pd-macrobar__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); font-weight: 600; letter-spacing: .01em; } .pd-macrobar__legend i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .pd-nutrition__foot { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12.5px; color: var(--color-text-muted); letter-spacing: .01em; } .pd-nutrition__foot svg { opacity: 0.6; } /* ---- Alerjenler — v3: rafine çip (ikon tile + metin) ---- */ .pd-allergens { margin-bottom: var(--space-md); } .pd-allergens__title { font-size: 11.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 12px; } .pd-allergens__list { display: flex; flex-wrap: wrap; gap: 8px; } .pd-allergen { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 7px; border-radius: 12px; font-size: 13px; color: var(--color-text-secondary); } body.theme-light .pd-allergen { background: #f6f5f1; } body:not(.theme-light) .pd-allergen { background: var(--color-bg-glass); } .pd-allergen__ic { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-primary) 12%, transparent); } .pd-allergen img { width: 15px; height: 15px; } /* ---- Similar Products ---- */ .pd-similar { padding: var(--space-lg) 0; overflow: hidden; } .pd-similar__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); padding: 0 var(--space-md) var(--space-md); } .pd-similar__scroll { display: flex; gap: var(--space-md); /* Leading 16px only — aligns the first card with the section title (which also sits at --space-md) for design coherence. No trailing padding so the last visible card bleeds off the right edge, hinting "there's more". */ padding: 0 0 0 var(--space-md); overflow-x: auto; /* No scroll-snap here. Snapping — mandatory OR proximity — aligns the first card to the snapport edge and cancels the 16px padding inset (the browser scrolls past the padding to reach the snap point). Free scroll is the only way to get "16px at rest, 0 once scrolled", and it's the right feel for a small thumbnail carousel anyway. */ -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Start hidden, animate on scroll */ transform: translateX(80px); opacity: 0; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease; } .pd-similar__scroll.is-visible { transform: translateX(0); opacity: 1; } .pd-similar__scroll::-webkit-scrollbar { display: none; } .pd-similar__card { flex-shrink: 0; width: 130px; text-decoration: none; color: inherit; } .pd-similar__img { width: 130px; height: 130px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-glass); margin-bottom: 6px; } .pd-similar__img img { width: 100%; height: 100%; object-fit: cover; } /* Designed fallback for a carousel card whose product has no photo. Keeps every carousel card the same height and reads as intentional — a soft tinted tile carrying the section (category) icon as a watermark, not an empty grey box. Theme-aware via the glass tokens. */ .pd-similar__img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-bg-card-hover), var(--color-bg-glass)); color: var(--color-text-muted); } /* The icon sits at 0.3 — present as a watermark, not loud. Opacity is applied to the icon only so the tinted tile keeps its full tone. */ .pd-similar__img-fallback > svg, .pd-similar__img-fallback-text { opacity: 0.3; } .pd-similar__img-fallback > svg { width: 56px; height: 56px; stroke: currentColor; fill: none; stroke-width: 1.4; } .pd-similar__img-fallback-text { font-size: 44px; line-height: 1; } .pd-similar__name { font-size: 13px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pd-similar__price { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-top: 2px; display: block; } /* İndirimli benzer ürün — fiyat marka renginde kalır (tutarlı), üstünde üstü çizili taban. Ayrı kırmızı yok; struck + marka-renk fiyat = "indirim" sinyali. */ .pd-similar__price-old { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); font-weight: 500; font-size: 0.85em; margin-right: 3px; opacity: .85; } /* ─── List layout variant ──────────────────────────────────────────── Switches the carousel into vertical rows. Each card spans the full width, image (when present) sits left, name + price stack right. Designed to read cleanly even when images are disabled (--no-img). ─────────────────────────────────────────────────────────────────── */ .pd-similar--list .pd-similar__scroll { flex-direction: column; /* List mode is a vertical stack of independent cards — symmetric 16px gutters and an 8px gap between cards (no more shared hairline separators). Each row gets its own surface below. */ gap: var(--space-sm); overflow: visible; padding: 0 var(--space-md); } .pd-similar--list .pd-similar__card { /* Each row is now a self-contained card (image | content | price) with its own surface, border, and a touch of elevation — replaces the older plain hairline-separated rows that read as a text dump. */ display: flex; width: 100%; flex: none; flex-direction: row; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: background var(--transition-fast); } .pd-similar--list .pd-similar__card:active { background: var(--color-bg-card-hover); } .pd-similar--list .pd-similar__img { width: 60px; height: 60px; flex: none; margin: 0; border-radius: var(--radius-md); } /* The content column — name on top, optional subtitle below. Flex:1 lets it grow so the price stays right-aligned; min-width:0 lets the nested name/sub truncate cleanly when the row is narrow. */ .pd-similar--list .pd-similar__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pd-similar--list .pd-similar__name { margin: 0; text-align: left; -webkit-line-clamp: 1; line-clamp: 1; /* A touch bolder + larger than the carousel default so the row carries the visual weight a card surface deserves. */ font-size: 14px; font-weight: 600; } /* Subtitle line — region tag ("URLA/TÜRKİYE") or a short ingredient string lifted from the description. Italic + muted so it reads as secondary info, ellipsised to a single line. */ .pd-similar--list .pd-similar__sub { font-size: 12px; color: var(--color-text-muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .pd-similar--list .pd-similar__price { margin-top: 0; flex: none; /* Match the bolder name with a slightly heavier price — the card surface lets us afford the visual weight. */ font-size: 14px; font-weight: 700; } /* Variant range price — a touch smaller + italic so "1.150 – 3.500₺" visibly reads as a range, not a single number. Without this the wider text would muddle the right-aligned column. */ .pd-similar__price--range { font-size: 0.92em; font-style: italic; white-space: nowrap; } /* ─── No-image variant ────────────────────────────────────────────── */ /* Carousel mode without images: cards collapse to text-only chips. */ .pd-similar--no-img.pd-similar--carousel .pd-similar__card { padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border-radius: 10px; } /* No image-slot override needed for list mode anymore — the card has its own padding regardless of whether the image cell is rendered. */ body.theme-light .pd-similar--list .pd-similar__card { /* Pure white card on the page's off-white background, with a hairline border and a whisper of shadow for elevation. Matches the "card surface" feel the operator's reference design uses. */ background: #ffffff; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } body.theme-light .pd-similar--no-img.pd-similar--carousel .pd-similar__card { background: rgba(0, 0, 0, 0.03); } /* ─── Search featured: drop placeholder when no-img mode ─────────── */ .search-featured--no-img .search-featured__item { grid-template-columns: 1fr; } /* ─── Live search results: tighter row when no image slot ────────── */ .product-card--no-img { grid-template-columns: 1fr auto !important; } /* ══════════════════════════════════════════════ İndirim (kampanyalı fiyat) — detay · v3 editoryal (referans yönü) Fiyat MARKA renginde (ayrı kırmızı değil) + kutusuz büyük rakam; üstü çizili taban üstte; indirim etiketi İKONSUZ rose tag olarak fiyatın altında sağa yaslı. Ayrı "−X ₺" yok — üstü çizili + etiket yeterli. Rose aksan --color-sale, marka rengi --color-primary (variables.css). ══════════════════════════════════════════════ */ .pd-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; } .pd-price-old { font-size: var(--text-base); color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); font-weight: 500; opacity: .85; line-height: 1; } /* Sale: normal pill şeffaflaşır → kutusuz, MARKA renginde büyük rakam. */ .pd-price--sale .pd-price-badge { background: transparent; color: var(--color-primary); padding: 0; box-shadow: none; border: 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1; } .pd-price-save { display: none; } /* v3: ayrı kazanç etiketi yok */ /* Kampanya etiketi — ikonsuz rose tag + (varsa) saat penceresi altında. */ .pd-offer { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 4px; } .pd-offer__t { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-sale); background: var(--color-sale-soft); border: 1px solid var(--color-sale-edge); padding: 4px 9px; border-radius: 7px; } .pd-offer__s { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); letter-spacing: .01em; } /* Takeaway'de fiyat footer'da → etiket sola yaslı standalone. */ .pd-offer--standalone { align-items: flex-start; margin: 6px 0 2px; } /* İndirimli varyant — marka renginde fiyat + üstü çizili taban. */ .pd-variant--sale .pd-variant__price { color: var(--color-primary); font-weight: 700; } .pd-variant__old { font-size: 0.82em; color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); font-weight: 500; margin-right: 4px; opacity: .8; } /* --- css/front/components/product-modal.css --- */ /* ============================================================ Ürün Detay Modalı — bottom sheet (mobil) / ortalı modal (masaüstü) İçerik _detail fragment'i olarak JS ile #pdModalBody'e basılır. ============================================================ */ .pd-modal { position: fixed; inset: 0; z-index: 200; /* header (~50) + bottom-nav (~60) üstünde */ display: flex; align-items: flex-end; /* mobil: alttan yükselir */ justify-content: center; /* Kenarlarda + altta birkaç px boşluk → tam-ekran değil, yüzen "modal" hissi. env(safe-area) çentikli telefonlarda home-bar'a saygı duyar. */ padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); } .pd-modal[hidden] { display: none; } .pd-modal__backdrop { position: absolute; inset: 0; /* Buzlu cam: blur + saturate; düz siyah yerine alttan (sheet'in yükseldiği yönden) hafif marka-tonlu bir parıltı → premium his. */ background: radial-gradient(130% 92% at 50% 100%, color-mix(in srgb, var(--color-primary, #c8a97e) 24%, transparent) 0%, transparent 58%), rgba(8, 10, 16, 0.56); -webkit-backdrop-filter: blur(6px) saturate(1.12); backdrop-filter: blur(6px) saturate(1.12); opacity: 0; transition: opacity 0.34s ease; } .pd-modal.is-open .pd-modal__backdrop { opacity: 1; } .pd-modal__sheet { position: relative; width: 100%; max-width: 640px; max-height: 93dvh; background: var(--color-bg, #fff); border-radius: 24px; /* dört köşe yuvarlak (yüzen sheet) */ box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36), 0 2px 10px rgba(0, 0, 0, 0.20); display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform 0.40s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; outline: none; } /* İnce gradient kenar çizgisi — markadan (primary→secondary) türeyen, mask tekniğiyle 1.5px halka. İçeriği bozmaz; sadece kenarda parlar. */ .pd-modal__sheet::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #c8a97e) 92%, #fff) 0%, color-mix(in srgb, var(--color-primary, #c8a97e) 28%, transparent) 32%, transparent 50%, color-mix(in srgb, var(--color-secondary, var(--color-primary, #c8a97e)) 55%, transparent) 76%, color-mix(in srgb, var(--color-secondary, var(--color-primary, #c8a97e)) 88%, #fff) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 8; } .pd-modal.is-open .pd-modal__sheet { transform: translateY(0); } .pd-modal.is-dragging .pd-modal__sheet { transition: none; } /* Sürükleme tutamağı (mobil) */ .pd-modal__grip { position: absolute; top: 0; left: 0; right: 0; height: 28px; display: flex; align-items: center; justify-content: center; z-index: 5; cursor: grab; touch-action: none; } .pd-modal__grip span { width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* Kapat düğmesi (sağ üst) */ /* Kapat (X) — paylaş/beğen (.pd-hero__btn) ile AYNI aile: aynı boyut (42px), aynı açık frosted arka plan + koyu ikon + kenar + gölge, aynı üst/sağ hiza (kontrol kümesinin padding'iyle birebir). Böylece [paylaş][beğen][X] tek, tutarlı bir küme okur — "sonradan eklenmiş" koyu daire hissi gider. Koyu ikon kaydırınca (açık başlık şeridi üzerinde) da görünür kalır. */ .pd-modal__close { position: absolute; /* Hiza: paylaş/beğen kümesi hero'nun içinde ve hero, sheet tepesinden modal chrome (grip) yüzünden ~3px aşağıda başlar. X sheet'e sabitli olduğundan aynı efektif üst konuma gelmesi için controls padding'ine +3px eklenir (ölçümle: X 14px iken paylaş/beğen 17px → delta 0 için +3). */ top: calc(max(14px, env(safe-area-inset-top, 0px)) + 3px); right: 14px; z-index: 6; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #243028; background: rgba(255, 255, 255, 0.64); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 6px 16px rgba(20, 30, 20, 0.15); cursor: pointer; transition: background 0.2s ease, transform 0.12s ease; } .pd-modal__close svg { width: 19px; height: 19px; } .pd-modal__close:hover { background: rgba(255, 255, 255, 0.82); } .pd-modal__close:active { transform: scale(0.92); } /* Koyu tema — .pd-hero__btn koyu varyantı ile aynı */ body:not(.theme-light) .pd-modal__close { background: rgba(22, 24, 22, 0.52); color: #f0efe9; border-color: rgba(255, 255, 255, 0.16); } /* Kaydırınca beliren buzlu-cam başlık şeridi — ürün adı sabitlenir; mevcut kapat düğmesi (z üstte) bunun üzerinde durur. Tema-uyumlu (bg + text var). */ .pd-modal__topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; min-height: 54px; padding: 0 60px 0 20px; /* sağda kapat düğmesine yer */ border-radius: 24px 24px 0 0; background: color-mix(in srgb, var(--color-bg, #fff) 76%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--color-primary, #c8a97e) 26%, transparent); opacity: 0; transform: translateY(-8px); transition: opacity 0.24s ease, transform 0.24s ease; pointer-events: none; } .pd-modal.is-scrolled .pd-modal__topbar { opacity: 1; transform: translateY(0); pointer-events: auto; } .pd-modal__topbar-title { font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.02rem; line-height: 1.2; letter-spacing: 0.1px; color: var(--color-text, #1a1a1a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Kaydırınca sürükleme tutamağı solar (başlık şeridi devralır) */ .pd-modal__grip { transition: opacity 0.2s ease; } .pd-modal.is-scrolled .pd-modal__grip { opacity: 0; } .pd-modal__scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; /* Firefox — çubuk gizli, scroll açık */ -ms-overflow-style: none; /* eski Edge/IE */ } .pd-modal__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit/Blink */ .pd-modal__body { min-height: 60px; } /* Fetch sırasında spinner katmanı */ .pd-modal__spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-bg, #fff); z-index: 4; } .pd-modal.is-loaded .pd-modal__spinner { display: none; } .pd-modal__spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(128, 128, 128, 0.22); border-top-color: var(--color-primary, #c8a97e); animation: pdModalSpin 0.7s linear infinite; } @keyframes pdModalSpin { to { transform: rotate(360deg); } } /* Modal içindeki detay hero'su köşe kırpması sheet'e uyar. Detay kartı sayfadakiyle aynı .pd-* stillerini kullanır — ekstra override gerekmez. */ .pd-modal .pd-hero { border-radius: 0; } /* Sayfa scroll kilidi — modal açıkken body sabitlenir (top JS ile set edilir) */ body.pd-modal-open { position: fixed; width: 100%; overflow: hidden; } /* Garsona Göster modalı, ürün modalının üstünde kalsın (body'ye taşınır) */ body > #waiterHelpModal.waiter-help-backdrop { z-index: 260; } /* ── Masaüstü / geniş tablet: ortalı modal ─────────────────────────── */ @media (min-width: 768px) { .pd-modal { align-items: center; padding: 28px; } .pd-modal__sheet { max-width: 560px; max-height: 88dvh; border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42); transform: translateY(20px) scale(0.98); opacity: 0; transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease; } .pd-modal.is-open .pd-modal__sheet { transform: translateY(0) scale(1); opacity: 1; } .pd-modal.is-dragging .pd-modal__sheet { transition: none; } .pd-modal__grip { display: none; } /* masaüstünde sürükleme yok */ } /* ── Hareket azaltma tercihi ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .pd-modal__sheet, .pd-modal__backdrop { transition: opacity 0.18s ease; } .pd-modal__sheet { transform: none; opacity: 1; } .pd-modal:not(.is-open) .pd-modal__sheet { opacity: 0; } } /* --- css/front/components/category-hero.css --- */ /* ============================================ Category Hero Banner with Parallax ============================================ */ .category-sections { padding: 0; } /* ---- Hero Banner ---- */ .category-hero { position: relative; overflow: hidden; margin-top: var(--space-md); } /* With image - full width, no border-radius */ .category-hero.category-hero--media { height: 220px; margin-left: 0; margin-right: 0; border-radius: 0; /* Extra bottom space for the overlapping product list */ margin-bottom: -28px; } /* First hero: no top margin */ .product-section:first-child .category-hero { margin-top: 0; } /* Without image - simple title bar */ .category-hero:not(.category-hero--media) { padding: var(--space-lg) var(--space-md) var(--space-sm); border-radius: 0; } /* Image container */ .category-hero__image { position: absolute; inset: -20px; overflow: hidden; } .category-hero__image img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(1.08); } /* Gradient background layer — pure CSS, zero network cost. Fills the same full-bleed area as the image layer so the overlay + white title treatment (.category-hero--media) apply identically. Also serves as the poster/fallback bed behind a video (Faz 4). */ .category-hero__gradient { position: absolute; inset: 0; z-index: 0; } /* Video background layer — poster (via