/** * ═══════════════════════════════════════════════════════════════════════════ * @DOSYA public-app.css * @ETIKET GENEL — tüm QR public sayfalar (menü, ürün, iletişim, ana sayfa) * @YUKLENME layouts/public.php (Bootstrap’tan sonra, 1. sıra) * @ADMIN-RENK Ayarlar → Tema ve SEO → Ana / İkincil / Arka plan renkleri * (değişkenler: ThemeCssService → :root --qm-primary vb. inline) * @ADMIN-GORUNUM Ayarlar → Tema → Menü görünümü → body.menu-layout-{preset} * Bu dosyada: sayfa arka planı, --qm-radius, header varyantları * @DIGER-DOSYALAR menu-layouts*.css (kartlar), product-page.css (ürün detay) * @REHBER assets/css/CSS-REHBER.md * ═══════════════════════════════════════════════════════════════════════════ * * Ctrl+F önerileri: * [TEMA: PRESET] → menu-layout-card | modern | glass | bold | soft … * [ETIKET: HEADER] → Instagram ikonu (arama yanında, --qm-primary hover) * [ETIKET: OFFCANVAS]→ Sol kategori menüsü */ /* [FIX: TEMA-KAYNAK] Menü görünümü için tek kaynak body/public köküdür: . Aşağıdaki public preset kuralları bu yapıya göre çalışır. */ /* [ETIKET: GENEL] Yatay kayma / iOS taşma — tüm public sayfalar */ html { overflow-x: hidden; max-width: 100%; } :root { /* [TEMA: RENK] Varsayılan köşe/gölge — preset body sınıfı altta ezer (menu-layout-*) */ --qm-radius: 1.25rem; --qm-radius-sm: 0.875rem; /* Katmanlı, derinlik hissi veren çok daha yumuşak gölgeler */ --qm-shadow: 0 2px 8px -2px color-mix(in srgb, var(--qm-body-color) 8%, transparent), 0 4px 16px -4px color-mix(in srgb, var(--qm-body-color) 4%, transparent); --qm-shadow-hover: 0 16px 32px -4px color-mix(in srgb, var(--qm-body-color) 12%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--qm-primary) 10%, transparent); /* Akıcı, premium hissiyatlı animasyon eğrisi */ --qm-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* ─────────────────────────────────────────────────────────────────────────── [TEMA: PRESET] Menü görünümü — köşe yarıçapı (--qm-radius) Admin: Tema → Menü görünümü | HTML: vb. ─────────────────────────────────────────────────────────────────────────── */ .public-qm.menu-layout-card { /* [PRESET: card] Kart — dengeli */ --qm-radius: 1.05rem; --qm-radius-sm: 0.8rem; } .public-qm.menu-layout-list { /* [PRESET: list] Liste — satır hissi */ --qm-radius: 1rem; --qm-radius-sm: 0.75rem; } .public-qm.menu-layout-minimal { /* [PRESET: minimal] Minimal — çizgisel */ --qm-radius: 0.75rem; --qm-radius-sm: 0.5rem; } .public-qm.menu-layout-premium { /* [PRESET: premium] Premium — yumuşak derinlik */ --qm-radius: 1.15rem; --qm-radius-sm: 0.9rem; } .public-qm.menu-layout-modern { /* [PRESET: modern] Modern — keskin */ --qm-radius: 1rem; --qm-radius-sm: 0.7rem; } .public-qm.menu-layout-glass { /* [PRESET: glass] Cam — buğulu */ --qm-radius: 1.1rem; --qm-radius-sm: 0.85rem; } .public-qm.menu-layout-bold { /* [PRESET: bold] Vurgulu — kalın şerit */ --qm-radius: 1rem; --qm-radius-sm: 0.65rem; } .public-qm.menu-layout-soft { /* [PRESET: soft] Yumuşak — pastel & pill */ --qm-radius: 1.4rem; --qm-radius-sm: 1rem; } .public-qm.menu-layout-neon { /* [PRESET: neon] Cyber glow */ --qm-radius: 0.85rem; --qm-radius-sm: 0.55rem; } .public-qm.menu-layout-aurora { /* [PRESET: aurora] Kuzey ışıkları */ --qm-radius: 1.25rem; --qm-radius-sm: 0.95rem; } .public-qm.menu-layout-nexus { /* [PRESET: nexus] Hologrid */ --qm-radius: 0.65rem; --qm-radius-sm: 0.45rem; } /* [TEMA: PRESET] Sayfa atmosferi — viewport’a sabit (::before); kaydırmada gradyan tekrarlanmaz */ .public-qm::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--qm-bg); background-image: var(--qm-page-atmosphere, none); background-repeat: var(--qm-page-atmosphere-repeat, no-repeat); background-size: var(--qm-page-atmosphere-size, 100% 100%); } .public-qm.menu-layout-card { /* [PRESET: card] */ --qm-page-atmosphere: radial-gradient(ellipse 120% 80% at 100% -20%, color-mix(in srgb, var(--qm-primary) 9%, transparent), transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, color-mix(in srgb, var(--qm-secondary) 6%, transparent), transparent 50%); } .public-qm.menu-layout-premium { /* [PRESET: premium] */ --qm-page-atmosphere: radial-gradient(ellipse 90% 70% at 50% -15%, color-mix(in srgb, var(--qm-primary) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--qm-bg), color-mix(in srgb, var(--qm-bg) 92%, var(--qm-primary))); } .public-qm.menu-layout-modern { /* [PRESET: modern] — ince çizgili doku (desen viewport’ta sabit) */ --qm-page-atmosphere: linear-gradient(135deg, color-mix(in srgb, var(--qm-primary) 5%, var(--qm-bg)) 0%, var(--qm-bg) 42%), repeating-linear-gradient( -12deg, transparent, transparent 24px, color-mix(in srgb, var(--qm-body-color) 2%, transparent) 24px, color-mix(in srgb, var(--qm-body-color) 2%, transparent) 25px ); --qm-page-atmosphere-repeat: no-repeat, repeat; --qm-page-atmosphere-size: 100% 100%, auto; } .public-qm.menu-layout-glass { /* [PRESET: glass] */ --qm-page-atmosphere: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--qm-primary) 12%, transparent), transparent 40%), radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--qm-secondary) 10%, transparent), transparent 45%); } .public-qm.menu-layout-bold { /* [PRESET: bold] — sol primary şerit */ --qm-page-atmosphere: linear-gradient(90deg, color-mix(in srgb, var(--qm-primary) 11%, transparent) 0, transparent min(28vw, 9rem)); } .public-qm.menu-layout-soft { /* [PRESET: soft] — üstten pastel glow */ --qm-page-atmosphere: radial-gradient(ellipse 100% 80% at 50% 0%, color-mix(in srgb, var(--qm-primary) 16%, transparent), transparent 58%), radial-gradient(ellipse 70% 50% at 100% 80%, color-mix(in srgb, var(--qm-primary) 10%, transparent), transparent 50%); } .public-qm.menu-layout-minimal { /* [PRESET: minimal] — düz arka plan */ --qm-page-atmosphere: none; } .public-qm.menu-layout-list { /* [PRESET: list] */ --qm-page-atmosphere: linear-gradient( 180deg, color-mix(in srgb, var(--qm-bg) 96%, var(--qm-body-color)), var(--qm-bg) ); } .public-qm.menu-layout-neon { /* [PRESET: neon] */ --qm-page-atmosphere: radial-gradient(ellipse 90% 55% at 50% -10%, color-mix(in srgb, var(--qm-primary) 28%, transparent), transparent 55%), radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in srgb, var(--qm-secondary) 18%, transparent), transparent 50%), linear-gradient(180deg, color-mix(in srgb, var(--qm-bg) 88%, #0a0f1a), var(--qm-bg)); } .public-qm.menu-layout-aurora { /* [PRESET: aurora] */ --qm-page-atmosphere: radial-gradient(ellipse 80% 50% at 15% 0%, color-mix(in srgb, var(--qm-primary) 22%, transparent), transparent 50%), radial-gradient(ellipse 70% 45% at 85% 15%, color-mix(in srgb, var(--qm-secondary) 20%, transparent), transparent 48%), radial-gradient(ellipse 90% 60% at 50% 100%, color-mix(in srgb, var(--qm-primary) 14%, transparent), transparent 55%); } .public-qm.menu-layout-nexus { /* [PRESET: nexus] — grid desen viewport’ta sabit */ --qm-page-atmosphere: linear-gradient(color-mix(in srgb, var(--qm-bg) 94%, var(--qm-primary)), color-mix(in srgb, var(--qm-bg) 94%, var(--qm-primary))), repeating-linear-gradient( 0deg, transparent, transparent 23px, color-mix(in srgb, var(--qm-primary) 7%, transparent) 23px, color-mix(in srgb, var(--qm-primary) 7%, transparent) 24px ), repeating-linear-gradient( 90deg, transparent, transparent 23px, color-mix(in srgb, var(--qm-primary) 5%, transparent) 23px, color-mix(in srgb, var(--qm-primary) 5%, transparent) 24px ); --qm-page-atmosphere-repeat: no-repeat, repeat, repeat; --qm-page-atmosphere-size: 100% 100%, auto, auto; } .public-qm.menu-layout-neon .qm-header { box-shadow: 0 0 24px color-mix(in srgb, var(--qm-primary) 35%, transparent), 0 4px 20px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-aurora .qm-header { background: color-mix(in srgb, var(--qm-card-bg) 75%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .public-qm.menu-layout-nexus .qm-header { border-bottom: 1px solid color-mix(in srgb, var(--qm-primary) 22%, var(--qm-border)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } /* [TEMA: PRESET] Üst header — yalnızca bold / soft / modern / premium farklılaşır */ .public-qm.menu-layout-bold .qm-header { /* [PRESET: bold] */ border-left: 4px solid var(--qm-primary) !important; } .public-qm.menu-layout-soft .qm-header { /* [PRESET: soft] */ border-bottom-color: color-mix(in srgb, var(--qm-primary) 22%, var(--qm-border)) !important; box-shadow: 0 8px 32px color-mix(in srgb, var(--qm-primary) 12%, transparent); } .public-qm.menu-layout-modern .qm-header { /* [PRESET: modern] */ box-shadow: 0 4px 24px color-mix(in srgb, var(--qm-body-color) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent); } .public-qm.menu-layout-premium .qm-header { /* [PRESET: premium] */ background: color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)) !important; } /* ═══ [ETIKET: GENEL] 1. Tipografi & temel ayarlar — tüm preset’lerde ortak ═══ */ .public-qm { position: relative; z-index: 0; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* overflow-x: hidden sticky header’ı kırar — yatay taşma html’de kesilir */ overflow-x: visible; max-width: 100%; width: 100%; font-size: var(--qm-fs-body, 1rem); /* Sabit alt wmm çubuğu için kaydırma alanı */ padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); } .public-qm img { max-width: 100%; } .public-qm .container, .public-qm .container-fluid { max-width: 100%; } .public-qm .input-group > .form-control { min-width: 0; } .public-qm main.qm-main { min-width: 0; flex: 1 1 auto; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; /* Sabit header altında başlasın (Google Translate body padding sıfırlamaz) */ padding-top: calc( env(safe-area-inset-top, 0px) + var(--qm-header-sticky-h, 3.75rem) + clamp(0.75rem, 2vw, 1.25rem) ) !important; } .public-qm .qm-featured-scroll, .public-qm .qm-filter-scroll, .public-qm .qm-cat-scroll { max-width: 100%; box-sizing: border-box; } .public-qm .qm-featured-scroll { width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .public-qm h1, .public-qm h2, .public-qm h3, .public-qm .h1, .public-qm .h2, .public-qm .h3 { letter-spacing: -0.025em; font-weight: 600; line-height: 1.2; } /* ═══ [ETIKET: HEADER] 2. Üst çubuk & navigasyon — [TEMA: RENK] --qm-card-bg ═══ */ /* backdrop-filter burada yeni bir stacking context oluşturur; modal/offcanvas bu öğenin İÇİNDE olursa fixed backdrop yanlış katmanda kalır. Overlay markup’ı layouts/public.php içinde header dışına taşındı. */ .qm-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; width: 100%; z-index: 1030; isolation: isolate; box-sizing: border-box; background: color-mix(in srgb, var(--qm-card-bg) 92%, transparent) !important; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--qm-border) !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--qm-primary) 6%, transparent); } .qm-header .qm-brand { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; } .qm-header .container-fluid, .qm-header > .container { padding-top: var(--qm-header-shell-pad, 0.35rem); padding-bottom: var(--qm-header-shell-pad, 0.35rem); } .qm-header-toolbar { max-width: var(--qm-content-max, min(100%, 42rem)); margin-left: auto; margin-right: auto; min-height: var(--qm-header-row-min, 2.75rem); padding: var(--qm-header-inner-pad, 0.5rem) var(--qm-space-page); box-sizing: border-box; } /* Bootstrap .btn yok — yalnızca ikon */ .qm-header .qm-header-icon-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0.35rem; border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: none !important; background-color: transparent !important; color: var(--qm-body-color); line-height: 1; vertical-align: middle; cursor: pointer; text-decoration: none; --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-focus-shadow-rgb: transparent; } .qm-header .qm-header-icon-btn .bi { font-size: 1.2rem; line-height: 1; display: block; } .qm-header .qm-header-icon-btn:hover, .qm-header .qm-header-icon-btn:focus, .qm-header .qm-header-icon-btn:focus-visible, .qm-header .qm-header-icon-btn:active, .qm-header .qm-header-icon-btn.show { color: var(--qm-primary); border: 0 !important; outline: none !important; box-shadow: none !important; background: none !important; background-color: transparent !important; } .qm-header .qm-header-icon-btn:active { color: color-mix(in srgb, var(--qm-primary) 80%, var(--qm-body-color)); } /* [ETIKET: HEADER] Instagram (Tema → Instagram URL) — arama ile aynı ikon; marka gradient yok */ .qm-header-toolbar__actions, .qm-header-toolbar__slot--start { min-width: 0; gap: 0.65rem; } .qm-header-toolbar__actions .qm-header-icon-btn { flex-shrink: 0; } .qm-brand-mark__img { display: block; vertical-align: middle; } .qm-header .nav-pill { border-radius: 999px; padding: 0.45rem 1.1rem; font-weight: 500; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid transparent; transition: var(--qm-transition); } .qm-header .nav-pill:hover { transform: translateY(-2px); } .qm-header .nav-pill-outline-primary { border-color: color-mix(in srgb, var(--qm-primary) 20%, transparent); color: var(--qm-primary); background: color-mix(in srgb, var(--qm-primary) 5%, transparent); } .qm-header .nav-pill-outline-primary:hover { background: color-mix(in srgb, var(--qm-primary) 12%, transparent); border-color: color-mix(in srgb, var(--qm-primary) 40%, transparent); } .qm-header .nav-pill-outline-secondary { border-color: transparent; /* Minimalizm için border kaldırıldı */ color: var(--qm-body-color); opacity: 0.75; background: transparent; } .qm-header .nav-pill-outline-secondary:hover { opacity: 1; background: color-mix(in srgb, var(--qm-body-color) 4%, transparent); } /* ═══ [ETIKET: FOOTER] 3. Ana yerleşim, footer, wmm alt bant ═══ */ .qm-main { max-width: var(--qm-content-max, min(100%, 42rem)); margin: 0 auto; } .public-qm main.qm-main { padding-left: var(--qm-space-page); padding-right: var(--qm-space-page); } .qm-footer { border-top: 1px solid var(--qm-border) !important; background: var(--qm-card-bg); padding-top: 1.5rem; padding-bottom: 1.5rem; } .qm-footer a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: var(--qm-radius-sm); transition: var(--qm-transition); text-decoration: none; } .qm-footer a:hover { background: color-mix(in srgb, var(--qm-primary) 5%, transparent); color: var(--qm-primary); } .qm-footer-wmm { max-width: 28rem; margin: 0 auto; } .qm-footer-wmm-logo { display: inline-flex !important; align-items: center; padding: 0.25rem 0.5rem !important; border-radius: var(--qm-radius-sm); transition: var(--qm-transition); } .qm-footer-wmm-logo:hover { background: color-mix(in srgb, var(--qm-body-color) 4%, transparent) !important; } .qm-footer-wmm-img { display: block; max-height: 1.2rem; width: auto; object-fit: contain; opacity: 0.8; transition: var(--qm-transition); } .qm-footer-wmm-logo:hover .qm-footer-wmm-img { opacity: 1; } /* Alt bant: wmmill logosu görünür yüzeyde sabit (içerik üstüne binmesin diye body alt dolgusu) */ .qm-wmm-fixed-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1018; background: color-mix(in srgb, var(--qm-card-bg) 93%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid var(--qm-border) !important; box-shadow: 0 -4px 24px color-mix(in srgb, var(--qm-body-color) 6%, transparent); padding-bottom: env(safe-area-inset-bottom, 0px); } /* ═══ [ETIKET: KART-GENEL] 4. Hero & .qm-card — temel kart (preset: menu-layouts.css) ═══ */ .qm-hero { border-radius: var(--qm-radius); border: 1px solid var(--qm-border); box-shadow: var(--qm-shadow); /* Daha soft ve modern bir gradient */ background: linear-gradient(135deg, var(--qm-card-bg) 0%, color-mix(in srgb, var(--qm-card-bg) 95%, var(--qm-primary)) 100%); overflow: hidden; padding: 2rem 1.5rem; } .qm-hero-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; background: var(--qm-card-bg); color: var(--qm-primary); font-size: 1.5rem; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05); border: 1px solid var(--qm-border); } .qm-card { border-radius: var(--qm-radius); border: 1px solid var(--qm-border); box-shadow: var(--qm-shadow); background: var(--qm-card-bg); transition: var(--qm-transition); overflow: hidden; display: flex; flex-direction: column; } a.text-decoration-none:hover .qm-card { box-shadow: var(--qm-shadow-hover); transform: translateY(-2px); border-color: color-mix(in srgb, var(--qm-primary) 15%, transparent); } .qm-card .card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .qm-product-thumb { width: 100%; height: 100%; min-height: 8rem; object-fit: cover; background: color-mix(in srgb, var(--qm-body-color) 3%, var(--qm-card-bg)); transition: var(--qm-transition); } a.text-decoration-none:hover .qm-product-thumb { transform: scale(1.03); /* Hover durumunda görsele çok hafif bir zoom */ } .qm-price { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--qm-primary); margin-top: auto; /* Fiyatı her zaman alta iter */ } .qm-badge-soft { font-weight: 600; padding: 0.4em 0.8em; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.02em; } /* ═══ [ETIKET: MENU-ARAC] 5. Menü araç çubuğu & filtre chip’leri ═══ */ .qm-menu-toolbar { border-radius: var(--qm-radius); border: 1px solid var(--qm-border); background: var(--qm-card-bg); box-shadow: var(--qm-shadow); padding: 0.5rem; /* Daha kompakt */ display: flex; gap: 0.5rem; } .qm-menu-toolbar .form-control, .qm-menu-toolbar .btn { border-radius: var(--qm-radius-sm); border: none; background: color-mix(in srgb, var(--qm-body-color) 3%, var(--qm-card-bg)); } .qm-menu-toolbar .form-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qm-primary) 15%, transparent); background: var(--qm-card-bg); } .qm-filter-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--qm-border); background: var(--qm-card-bg); cursor: pointer; user-select: none; transition: var(--qm-transition); } .qm-filter-chip:hover { background: color-mix(in srgb, var(--qm-body-color) 2%, var(--qm-card-bg)); } .qm-filter-chip:has(input:checked) { border-color: transparent; background: var(--qm-primary); color: #ffffff; /* Primary rengin zıttı beyaz varsayıldı */ box-shadow: 0 4px 12px color-mix(in srgb, var(--qm-primary) 30%, transparent); } .qm-filter-chip .form-check-input { width: 1rem; height: 1rem; margin: 0; border-radius: 0.3rem; border-color: currentColor; } /* ═══ [ETIKET: KATEGORI] 6. Kategori pill şeridi & bölüm başlıkları ═══ */ .qm-cat-scroll { scrollbar-width: none; /* Scrollbar'ı gizle, daha temiz görünüm */ padding-bottom: 0.5rem; -ms-overflow-style: none; } .qm-cat-scroll::-webkit-scrollbar { display: none; } .qm-cat-pill { border-radius: 999px; padding: 0.55rem 1.15rem; min-height: 2.75rem; font-weight: 500; font-size: 0.875rem; border: 1px solid var(--qm-border); color: var(--qm-body-color); background: var(--qm-card-bg); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--qm-transition); white-space: nowrap; } .qm-cat-pill:hover { border-color: color-mix(in srgb, var(--qm-primary) 30%, transparent); color: var(--qm-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03); } .qm-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--qm-body-color); } .qm-section-title i { color: var(--qm-primary); background: color-mix(in srgb, var(--qm-primary) 10%, transparent); padding: 0.4rem; border-radius: 0.5rem; font-size: 1rem; } /* ═══ [ETIKET: ILETISIM] 7. Breadcrumb, iletişim satırları, detay meta ═══ */ /* Breadcrumb */ .public-qm .breadcrumb { --bs-breadcrumb-divider: '/'; font-size: 0.85rem; padding: 0.6rem 1rem; border-radius: 999px; /* Pill tasarımı */ background: color-mix(in srgb, var(--qm-body-color) 3%, transparent); border: none; } .public-qm .breadcrumb-item a { text-decoration: none; color: var(--qm-secondary); font-weight: 500; transition: var(--qm-transition); } .public-qm .breadcrumb-item a:hover { color: var(--qm-primary); } /* Ürün Detay Hero */ .qm-product-hero { border-radius: var(--qm-radius); overflow: hidden; border: 1px solid var(--qm-border); box-shadow: var(--qm-shadow); background: var(--qm-card-bg); } .qm-product-hero img { width: 100%; display: block; max-height: 320px; object-fit: cover; } .qm-detail-meta { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; font-size: 0.9rem; padding: 1rem 0; } .qm-detail-meta span { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--qm-secondary); font-weight: 500; } /* İletişim Satırları */ .qm-contact-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--qm-border); transition: var(--qm-transition); } .qm-contact-row:hover { padding-left: 0.5rem; /* Hoverda hafif sağa kayma efekti */ } .qm-contact-row:last-child { border-bottom: 0; } .qm-contact-row .qm-ci { width: 3rem; height: 3rem; border-radius: 50%; /* Tam yuvarlak ikon arka planı */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--qm-primary) 8%, transparent); color: var(--qm-primary); font-size: 1.25rem; } /* ═══ [ETIKET: BUTON] 8. .btn-primary vb. — [TEMA: RENK] --qm-primary ═══ */ .public-qm .btn-primary { font-weight: 600; border-radius: var(--qm-radius-sm); padding: 0.6rem 1.5rem; border: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--qm-primary) 30%, transparent); transition: var(--qm-transition); } .public-qm .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--qm-primary) 40%, transparent); } .public-qm .btn-lg { border-radius: var(--qm-radius); padding: 0.8rem 1.75rem; font-size: 1.05rem; } .public-qm .sticky-cat { top: calc(env(safe-area-inset-top, 0px) + var(--qm-header-sticky-h, 3.75rem)); z-index: 1010; background: var(--qm-card-bg); /* Şeffaf yapmadan okumayı kolaylaştırır */ padding-top: 0.5rem; } /* Eski sınıflar: en-boy oranı kapsayıcıda tutulur; img tek başına aspect-ratio almaz (bozulmayı önler) */ .qm-product-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Menü görünüm düzenleri: assets/css/menu-layouts.css */ /* ═══ [ETIKET: OFFCANVAS] 9. Sol kategori çekmecesi & sticky filtreler ═══ */ .public-qm { --qm-header-inner-pad: 0.5rem; --qm-header-row-min: 2.75rem; --qm-header-shell-pad: 0.35rem; /* toolbar + iç padding + container-fluid dikey boşluk */ --qm-header-sticky-h: calc( var(--qm-header-row-min) + (var(--qm-header-inner-pad) * 2) + (var(--qm-header-shell-pad) * 2) ); } @media (min-width: 768px) { .public-qm { --qm-header-row-min: 3rem; --qm-header-shell-pad: 0.45rem; } } .public-qm .qm-cat-drawer-btn { color: var(--qm-body-color); background: color-mix(in srgb, var(--qm-body-color) 4%, transparent); } .public-qm .qm-cat-drawer-btn:hover { background: color-mix(in srgb, var(--qm-primary) 10%, transparent); color: var(--qm-primary); } .public-qm .qm-cat-pill.active { border-color: var(--qm-primary); background: color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)); color: var(--qm-primary); font-weight: 600; } .public-qm .qm-cat-offcanvas { --bs-offcanvas-width: min(20rem, 88vw); /* * Bootstrap .nav-link → QR menüde yalnızca restoran ana rengi (--qm-primary). */ --bs-nav-link-color: var(--qm-primary); --bs-nav-link-hover-color: color-mix(in srgb, var(--qm-primary) 90%, #000000); --bs-nav-link-disabled-color: color-mix(in srgb, var(--qm-primary) 45%, transparent); } /* * Bootstrap .nav varsayılanı flex-wrap: wrap; flex-column + sabit yükseklikte * kategori linkleri yan sütuna taşar. Tek sütun + dikey kaydırma için nowrap şart. */ .public-qm .qm-cat-offcanvas .qm-cat-offcanvas-nav.nav.flex-column { flex-wrap: nowrap !important; flex-direction: column !important; } .public-qm .qm-cat-offcanvas .qm-cat-drawer-link.nav-link { width: 100%; max-width: 100%; flex: 0 0 auto; /* Yalnızca tema ana rengi (Bootstrap !important çakışmalarına karşı) */ color: var(--qm-primary) !important; text-decoration: none; background-color: transparent; transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .public-qm .qm-cat-offcanvas .qm-cat-drawer-link.nav-link:visited { color: var(--qm-primary) !important; } .public-qm .qm-cat-offcanvas .qm-cat-drawer-link.nav-link:hover { background: color-mix(in srgb, var(--qm-primary) 6%, transparent); color: var(--qm-primary) !important; } .public-qm .qm-cat-offcanvas .qm-cat-drawer-link.nav-link:focus { color: var(--qm-primary) !important; } .public-qm .qm-cat-offcanvas .qm-cat-drawer-link.nav-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--qm-primary) 42%, transparent); outline-offset: -2px; } .public-qm .qm-cat-offcanvas .qm-cat-drawer-link.nav-link.active { background: color-mix(in srgb, var(--qm-primary) 10%, transparent); color: var(--qm-primary) !important; font-weight: 600; } .public-qm .qm-cat-drawer-link { font-weight: 500; border-color: var(--qm-border) !important; } /* Sticky arama + filtre bloğu (kategori şeridinin altında) */ .public-qm.qm-page-menu .qm-sticky-filters { position: sticky; z-index: 1008; padding-top: 0.35rem; padding-bottom: 0.65rem; margin-top: 0.15rem; background: linear-gradient( 180deg, var(--qm-bg) 0%, var(--qm-bg) 78%, color-mix(in srgb, var(--qm-bg) 40%, transparent) 100% ); } .public-qm.qm-page-menu.qm-has-cat-strip .qm-sticky-filters { top: calc(env(safe-area-inset-top, 0px) + var(--qm-header-sticky-h) + var(--qm-cat-bar-h)); } .public-qm.qm-page-menu:not(.qm-has-cat-strip) .qm-sticky-filters { top: calc(env(safe-area-inset-top, 0px) + var(--qm-header-sticky-h)); } .qm-filter-toggles { scrollbar-width: none; -ms-overflow-style: none; } .qm-filter-toggles::-webkit-scrollbar { display: none; } .qm-flt { cursor: pointer; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; } .qm-flt-inner { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--qm-border); background: var(--qm-card-bg); color: var(--qm-body-color); transition: var(--qm-transition); white-space: nowrap; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .qm-flt:hover .qm-flt-inner { border-color: color-mix(in srgb, var(--qm-primary) 28%, transparent); background: color-mix(in srgb, var(--qm-primary) 5%, var(--qm-card-bg)); } .qm-flt input:focus-visible + .qm-flt-inner { outline: 2px solid var(--qm-primary); outline-offset: 2px; } .qm-flt input:checked + .qm-flt-inner { border-color: transparent; background: linear-gradient( 140deg, color-mix(in srgb, var(--qm-primary) 92%, #0a0a0a) 0%, var(--qm-primary) 100% ); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--qm-primary) 32%, transparent); } .qm-flt input:checked + .qm-flt-inner i { opacity: 0.95; } /* ═══ [ETIKET: MENU-KART] 10. .qm-menu-tile — mobil karusel (preset: menu-layouts.css) ═══ */ .qm-header-nav-mobile-btn { background: color-mix(in srgb, var(--qm-body-color) 5%, var(--qm-card-bg)) !important; color: var(--qm-body-color); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset; } .qm-header-nav-mobile-btn:hover { background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)) !important; color: var(--qm-primary); } .public-qm .qm-header .dropdown-menu { border: 1px solid var(--qm-border); } .public-qm .qm-header .dropdown-item:active { background: color-mix(in srgb, var(--qm-primary) 12%, transparent); color: var(--qm-primary); } .qm-menu-tile-link { display: block; -webkit-tap-highlight-color: transparent; } .qm-menu-tile-link:focus-visible { outline: none; } .qm-menu-tile-link:focus-visible .qm-menu-tile { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qm-primary) 35%, transparent); } /* Token’sız sayfalarda yedek; menü/kategori preset ORTAK kuralları menu-layouts.css’te */ .qm-menu-tile { display: flex; flex-direction: column; border-radius: var(--qm-radius); overflow: hidden; background: var(--qm-tile-bg, var(--qm-card-bg)); border: var(--qm-tile-border, 1px solid color-mix(in srgb, var(--qm-body-color) 8%, var(--qm-border))); box-shadow: var(--qm-tile-shadow, var(--qm-shadow)); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease; } .qm-menu-tile__cover { position: relative; width: 100%; aspect-ratio: var(--product-aspect, 4 / 3); background: color-mix(in srgb, var(--qm-body-color) 5%, transparent); overflow: hidden; isolation: isolate; } .qm-menu-tile__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .qm-menu-tile__body { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; gap: 0.4rem; } /* Sol menü çekmecesi: özellik filtreleri */ .qm-drawer-filters { flex-shrink: 0; } .qm-drawer-filters__title { opacity: 0.85; } .qm-drawer-filters__clear { font-size: 0.8rem; font-weight: 500; color: var(--qm-primary); } .qm-drawer-flt { cursor: pointer; padding: 0.35rem 0.5rem; margin: 0 -0.5rem; border-radius: 0.5rem; transition: background 0.15s ease; } .qm-drawer-flt:hover { background: color-mix(in srgb, var(--qm-primary) 8%, transparent); } .qm-drawer-flt .form-check-input { border-color: color-mix(in srgb, var(--qm-body-color) 28%, transparent); } .qm-product-grid--modern .qm-menu-tile, .qm-product-grid--modern .qm-product-card { border-radius: 1rem; } .qm-menu-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; } .qm-menu-tile__title { flex: 1; min-width: 0; font-size: var(--qm-fs-title, 1.05rem); font-weight: 650; line-height: 1.3; letter-spacing: -0.02em; color: var(--qm-body-color); margin: 0; } .qm-menu-tile__price { flex-shrink: 0; text-align: right; font-size: var(--qm-fs-price, 0.95rem); line-height: 1.25; } .qm-menu-tile__price .qm-price { font-weight: 700; color: var(--qm-primary); font-size: 1.05rem; white-space: nowrap; } .qm-menu-tile__price .qm-menu-price-old { font-size: 0.78rem; } .qm-menu-tile__desc, .qm-menu-tile__cat { font-size: 0.875rem; line-height: 1.45; color: var(--bs-secondary-color, #64748b); margin: 0; } .qm-menu-tile__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .qm-menu-tile__badges { margin-top: 0.35rem; } .qm-menu-tile-link:hover .qm-menu-tile { border-color: color-mix(in srgb, var(--qm-primary) 28%, var(--qm-border)); box-shadow: 0 14px 36px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } .qm-menu-tile-link:active .qm-menu-tile { transform: scale(0.992); } @media (max-width: 360px) { .qm-cat-drawer-label { display: none; } } /* ═══ [ETIKET: URUN-ESKI] 11. .qm-product-modern — eski .qm-detail-* (yeni: product-page.css) ═══ */ .qm-product-modern { max-width: 100%; overflow-x: hidden; } /* * Bireysel ürün: Bootstrap --bs-primary / link mavisi sayfa içinde tema (--qm-primary) ile sabitlenir. */ .public-qm .qm-product-page { --bs-primary: var(--qm-primary); --bs-link-color: var(--qm-primary); --bs-link-hover-color: color-mix(in srgb, var(--qm-primary) 82%, #0f172a); --bs-focus-ring-color: color-mix(in srgb, var(--qm-primary) 38%, transparent); } .public-qm .qm-product-page .qm-accent-price { color: var(--qm-primary) !important; } .public-qm .qm-product-page .btn-primary { --bs-btn-bg: var(--qm-primary); --bs-btn-border-color: var(--qm-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--qm-primary) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--qm-primary) 88%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--qm-primary) 82%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--qm-primary) 82%, #000); } .public-qm .qm-product-page .qm-product-page__toolbar-btn { color: var(--qm-body-color); background: var(--qm-card-bg); border-color: var(--qm-border); } .public-qm .qm-product-page .qm-product-page__toolbar-btn:hover { color: var(--qm-primary); border-color: color-mix(in srgb, var(--qm-primary) 28%, var(--qm-border)); background: color-mix(in srgb, var(--qm-primary) 6%, var(--qm-card-bg)); } .public-qm .qm-product-page .qm-product-page__toolbar-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--qm-primary) 42%, transparent); outline-offset: 2px; } .qm-product-page__title-row { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } @media (min-width: 768px) { .qm-product-page__title-row { flex-direction: row; align-items: flex-start; gap: 1.25rem; justify-content: space-between; } .qm-product-page__price-panel { text-align: right; } } .qm-product-page__prose { line-height: 1.75; } .qm-product-modern .qm-detail-hero { overflow: hidden; border: 1px solid color-mix(in srgb, var(--qm-body-color) 8%, var(--qm-border)); border-radius: calc(var(--qm-radius) + 2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--qm-body-color) 8%, transparent); background: var(--qm-card-bg); } .qm-product-modern .qm-detail-hero--no-media { border-radius: var(--qm-radius); } .qm-product-modern .qm-detail-hero--no-media .qm-detail-hero-body { padding-top: 1.35rem; } .qm-product-modern .qm-detail-cover { position: relative; width: 100%; aspect-ratio: var(--product-aspect, 4 / 3); max-height: min(46vh, 20rem); min-height: 0; background: linear-gradient( 160deg, color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-body-color) 6%, var(--qm-card-bg)) ); overflow: hidden; isolation: isolate; } .qm-product-modern .qm-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; } .qm-product-modern .qm-product-page__figure { margin: 0; padding: 0; } .qm-product-modern .qm-detail-hero-body { padding: 1.25rem; } @media (min-width: 576px) { .qm-product-modern .qm-detail-hero-body { padding: 1.5rem; } } .qm-product-modern .qm-detail-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--qm-body-color) 5%, var(--qm-card-bg)); color: var(--bs-secondary-color, #64748b); flex-shrink: 0; } .qm-product-modern .qm-detail-section-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; color: var(--qm-body-color); margin: 0; } .qm-product-modern .qm-price-panel { border: 1px solid var(--qm-border); border-radius: var(--qm-radius-sm); overflow: hidden; background-color: color-mix(in srgb, var(--qm-primary) 6%, var(--qm-card-bg)); background-clip: padding-box; } .qm-product-modern .qm-price-panel--stack { width: 100%; min-width: 0; } @media (min-width: 768px) { .qm-product-modern .qm-price-panel--stack { width: auto; min-width: 11rem; } } .qm-product-modern .qm-price-old { color: var(--bs-secondary-color, #6c757d); font-size: 0.9rem; text-decoration: line-through; } .qm-product-modern .qm-soft-chip { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--qm-border); background: color-mix(in srgb, var(--qm-body-color) 4%, var(--qm-card-bg)); color: var(--qm-body-color); border-radius: 999px; padding: 0.45rem 0.85rem; font-size: 0.82rem; font-weight: 500; text-decoration: none; } .qm-product-modern .qm-detail-badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.28rem 0.65rem; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--qm-border); background: color-mix(in srgb, var(--qm-body-color) 4%, var(--qm-card-bg)); color: var(--qm-body-color); } .qm-product-modern .qm-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .qm-product-modern .qm-info-tile { border: 1px solid var(--qm-border); border-radius: var(--qm-radius-sm); padding: 0.85rem; overflow: hidden; background-color: color-mix(in srgb, var(--qm-body-color) 3%, var(--qm-card-bg)); background-clip: padding-box; min-width: 0; } .qm-product-modern .qm-list-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--qm-border); min-width: 0; } .qm-product-modern .qm-list-row:last-child { border-bottom: 0; } .qm-product-modern .qm-list-row span { min-width: 0; overflow-wrap: anywhere; } .qm-product-modern .qm-sticky-actions { position: sticky; bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); z-index: 40; border: 1px solid var(--qm-border); background: color-mix(in srgb, var(--qm-card-bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--qm-shadow); } .qm-product-modern .qm-mobile-topbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } @media (min-width: 768px) { .qm-product-modern .qm-mobile-topbar { display: none; } } @media (max-width: 575.98px) { .qm-product-modern .qm-info-grid { grid-template-columns: 1fr; } /* * Mobil: görsel alanı kart içinde makul yükseklikte tut (svh ile viewport’a bağlı). * Menü görünümündeki ürün kutusu hissiyle uyumlu; devasa tam ekran kaplamaz. */ .qm-product-modern .qm-detail-cover { aspect-ratio: var(--product-aspect, 4 / 3); max-height: min(28svh, 11.25rem); } .qm-product-modern .qm-sticky-actions { flex-direction: column; align-items: stretch !important; } .qm-product-modern .qm-sticky-actions .btn { justify-content: center; } } .public-qm .qm-card, .public-qm .qm-menu-tile { overflow-wrap: anywhere; } /* ═══ [ETIKET: DIL] Google Translate — widget çalışır, banner/tooltip gizli ═══ */ /* Host: display:none DEĞİL — combo burada; sadece ekran dışı */ #qm-gtranslate-host { position: fixed !important; left: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; z-index: -1 !important; } #qm-gtranslate-host .goog-te-gadget { font-size: 0 !important; line-height: 0 !important; } #qm-gtranslate-host .goog-te-gadget-icon, #qm-gtranslate-host .goog-logo-link { display: none !important; } .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, #goog-gt-tt, #goog-gt-vt, .goog-te-balloon-frame, .goog-te-menu-frame, .goog-te-spinner-pos, .goog-te-ftab, body.public-qm > .goog-te-banner-frame, body.public-qm > iframe.goog-te-banner-frame { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* “Şu dile çevrildi” / Translated to — Google UI (span + div, host hariç) */ body.public-qm .VIpgJd-ZVi9od-ORHb-bN97Pc, body.public-qm .VIpgJd-ZVi9od-xl07Ob-lTBxed, body.public-qm .VIpgJd-yAWNEb-L7lbkb, body.public-qm span[class*="VIpgJd"]:not(#qm-gtranslate-host *), body.public-qm div[class*="VIpgJd"]:not(#qm-gtranslate-host):not(#qm-gtranslate-host *), body.public-qm [id^=":0.finish"], body.public-qm [id^=":1.finish"], body.public-qm [id*="finishTargetLang"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; max-height: 0 !important; width: 0 !important; overflow: hidden !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; clip: rect(0, 0, 0, 0) !important; } body.public-qm, body.public-qm.translated-ltr, body.public-qm.translated-rtl { top: 0 !important; margin-top: 0 !important; position: static !important; } .qm-lang-option { text-align: left; padding: 0.85rem 1rem; border-radius: var(--qm-radius-sm); } .qm-lang-option .bi-check2 { opacity: 0; } .qm-lang-option.btn-primary .bi-check2 { opacity: 1; } .public-qm.menu-layout-neon .qm-menu-tile__price .qm-price { text-shadow: 0 0 18px color-mix(in srgb, var(--qm-primary) 45%, transparent); } .public-qm.menu-layout-aurora .qm-menu-tile__price .qm-price { color: var(--qm-primary); text-shadow: 0 2px 16px color-mix(in srgb, var(--qm-secondary) 35%, transparent); } .public-qm.menu-layout-nexus .qm-menu-tile__cover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qm-primary) 14%, transparent); } .public-qm.menu-layout-neon .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-neon .qm-menu-modern .qm-soft-chip, .public-qm.menu-layout-neon .qm-category-modern .qm-soft-chip, .public-qm.menu-layout-aurora .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-aurora .qm-menu-modern .qm-soft-chip, .public-qm.menu-layout-aurora .qm-category-modern .qm-soft-chip, .public-qm.menu-layout-nexus .qm-menu-modern .qm-menu-chip, .public-qm.menu-layout-nexus .qm-menu-modern .qm-soft-chip, .public-qm.menu-layout-nexus .qm-category-modern .qm-soft-chip { border: var(--qm-chip-border); background: var(--qm-chip-bg); }