/** * ??????????????????????????????????????????????????????????????????????????? * @DOSYA menu-layouts.css * @ETIKET MENU-KART ? men? & kategori sayfas?ndaki ?r?n kutular? * @YUKLENME layouts/public.php (public-app.css sonras?) * @ADMIN-GORUNUM Ayarlar ? Tema ? Men? g?r?n?m? (menu_layout) * @HTML-SINIF * .qm-menu-modern / .qm-category-modern / .qm-product-modern * Preset art?k wrapper ?zerinde de?il public k?kte aran?r. * @PRESETLER card | list | minimal | premium | modern | glass | bold | soft | neon | aurora | nexus * @NOT Sayfa zemini/header ? public-app.css | Hero/chip ? menu-layouts-surfaces.css * @REHBER assets/css/CSS-REHBER.md ? Ctrl+F: [PRESET: modern] * ??????????????????????????????????????????????????????????????????????????? */ /** * [FIX: BODY-SCOPED PRESET] * Bu dosya, menu_layout s?n?f?n? wrapper ?zerinde de?il public k?kte bekler: * * B?ylece public-app.css ile menu-layouts*.css ayn? kaynak s?n?ftan ?al???r. */ /* [ETIKET: ORTAK] T?m preset?ler ? kart ge?i? animasyonu & kapak hover */ .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-menu-tile, .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-product-card, .public-qm[class*="menu-layout-"] .qm-category-modern .qm-menu-tile, .public-qm[class*="menu-layout-"] .qm-category-modern .qm-product-card, .public-qm[class*="menu-layout-"] .qm-product-modern .qm-card { transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.32s ease, background 0.32s ease, filter 0.32s ease; } .public-qm[class*="menu-layout-"] .qm-menu-modern a, .public-qm[class*="menu-layout-"] .qm-category-modern a { -webkit-tap-highlight-color: transparent; } /* Kapak: ?o?u d?zende hafif hover kararmas? (g?rsel derinlik) */ .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-menu-tile__cover::after, .public-qm[class*="menu-layout-"] .qm-category-modern .qm-menu-tile__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--qm-body-color) 18%, transparent) 100% ); } .public-qm[class*="menu-layout-"] .qm-menu-modern a:hover .qm-menu-tile__cover::after, .public-qm[class*="menu-layout-"] .qm-category-modern a:hover .qm-menu-tile__cover::after { opacity: 1; } .public-qm.menu-layout-minimal .qm-menu-modern .qm-menu-tile__cover::after, .public-qm.menu-layout-minimal .qm-category-modern .qm-menu-tile__cover::after { opacity: 0 !important; } /* [ETIKET: ORTAK] Kartlar ? token kayna??: qm-preset-tokens.css (body.menu-layout-*) */ .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-menu-tile, .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-product-card, .public-qm[class*="menu-layout-"] .qm-category-modern .qm-menu-tile, .public-qm[class*="menu-layout-"] .qm-category-modern .qm-product-card { border-radius: var(--qm-radius) !important; border: var(--qm-tile-border) !important; background: var(--qm-tile-bg) !important; box-shadow: var(--qm-tile-shadow) !important; backdrop-filter: var(--qm-tile-backdrop); -webkit-backdrop-filter: var(--qm-tile-backdrop); } .public-qm[class*="menu-layout-"] .qm-menu-modern a:hover .qm-menu-tile, .public-qm[class*="menu-layout-"] .qm-menu-modern a:hover .qm-product-card, .public-qm[class*="menu-layout-"] .qm-category-modern a:hover .qm-menu-tile, .public-qm[class*="menu-layout-"] .qm-category-modern a:hover .qm-product-card { transform: translateY(var(--qm-hover-lift, -3px)) scale(var(--qm-hover-scale, 1)); border: var(--qm-tile-border-hover, var(--qm-tile-border)) !important; box-shadow: var(--qm-tile-shadow-hover) !important; } .public-qm.menu-layout-minimal .qm-menu-modern a:hover .qm-menu-tile, .public-qm.menu-layout-minimal .qm-menu-modern a:hover .qm-product-card, .public-qm.menu-layout-minimal .qm-category-modern a:hover .qm-menu-tile, .public-qm.menu-layout-minimal .qm-category-modern a:hover .qm-product-card { background: var(--qm-card-bg) !important; } .public-qm[class*="menu-layout-"] .qm-product-modern .qm-card { border-radius: var(--qm-radius); border: var(--qm-tile-border); background: var(--qm-tile-bg); box-shadow: var(--qm-tile-shadow); } .public-qm[class*="menu-layout-"] .qm-product-modern .qm-detail-hero { border-radius: var(--qm-radius); border: var(--qm-hero-border); box-shadow: var(--qm-hero-shadow); } .public-qm.menu-layout-bold .qm-product-modern .qm-detail-hero { border-left: var(--qm-hero-border-left, 6px solid var(--qm-primary)); } /* ?? [PRESET: list] Liste ? ?erit / yatay g?rsel ? .menu-layout-list ?? */ .public-qm.menu-layout-list .qm-menu-modern .qm-product-grid, .public-qm.menu-layout-list .qm-category-modern .qm-product-grid { gap: 0.65rem; max-width: 40rem; } @media (min-width: 768px) { .public-qm.menu-layout-list .qm-menu-modern .qm-product-grid, .public-qm.menu-layout-list .qm-category-modern .qm-product-grid { grid-template-columns: 1fr; max-width: 34rem; } } @media (min-width: 576px) { .public-qm.menu-layout-list .qm-menu-modern .qm-menu-tile--has-photo, .public-qm.menu-layout-list .qm-category-modern .qm-menu-tile--has-photo { flex-direction: row; align-items: stretch; } .public-qm.menu-layout-list .qm-menu-modern .qm-menu-tile--has-photo .qm-menu-tile__cover, .public-qm.menu-layout-list .qm-category-modern .qm-menu-tile--has-photo .qm-menu-tile__cover { width: 40%; max-width: 11.25rem; flex-shrink: 0; align-self: stretch; min-height: 7rem; aspect-ratio: var(--product-aspect, 4 / 3); border-radius: 0.85rem !important; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qm-body-color) 8%, transparent); } .public-qm.menu-layout-list .qm-menu-modern .qm-menu-tile--has-photo .qm-menu-tile__body, .public-qm.menu-layout-list .qm-category-modern .qm-menu-tile--has-photo .qm-menu-tile__body { flex: 1; min-width: 0; justify-content: center; padding: 1rem 1.2rem; } } /* [PRESET: glass] hover y?zeyi (token d??? ince ayar) */ .public-qm.menu-layout-glass .qm-menu-modern a:hover .qm-menu-tile, .public-qm.menu-layout-glass .qm-menu-modern a:hover .qm-product-card, .public-qm.menu-layout-glass .qm-category-modern a:hover .qm-menu-tile, .public-qm.menu-layout-glass .qm-category-modern a:hover .qm-product-card { background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 78%, #fff) 0%, color-mix(in srgb, var(--qm-card-bg) 90%, #fff) 100% ) !important; border-color: color-mix(in srgb, var(--qm-primary) 42%, transparent) !important; } /* [PRESET: neon] hover ? glow art??? */ .public-qm.menu-layout-neon .qm-menu-modern a:hover .qm-menu-tile, .public-qm.menu-layout-neon .qm-menu-modern a:hover .qm-product-card, .public-qm.menu-layout-neon .qm-category-modern a:hover .qm-menu-tile, .public-qm.menu-layout-neon .qm-category-modern a:hover .qm-product-card { background: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 88%, var(--qm-primary)) 0%, color-mix(in srgb, var(--qm-card-bg) 94%, #0a0f1a) 100% ) !important; border-color: color-mix(in srgb, var(--qm-primary) 65%, transparent) !important; filter: brightness(1.03); } .public-qm.menu-layout-neon .qm-menu-modern .qm-menu-tile__cover::after, .public-qm.menu-layout-neon .qm-category-modern .qm-menu-tile__cover::after { background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--qm-primary) 35%, transparent) 100% ); } /* [PRESET: aurora] hover */ .public-qm.menu-layout-aurora .qm-menu-modern a:hover .qm-menu-tile, .public-qm.menu-layout-aurora .qm-menu-modern a:hover .qm-product-card, .public-qm.menu-layout-aurora .qm-category-modern a:hover .qm-menu-tile, .public-qm.menu-layout-aurora .qm-category-modern a:hover .qm-product-card { background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 86%, var(--qm-primary)) 0%, color-mix(in srgb, var(--qm-card-bg) 88%, var(--qm-secondary)) 100% ) !important; border-color: color-mix(in srgb, var(--qm-secondary) 32%, var(--qm-primary)) !important; } /* [PRESET: nexus] hover ? cam panel */ .public-qm.menu-layout-nexus .qm-menu-modern a:hover .qm-menu-tile, .public-qm.menu-layout-nexus .qm-menu-modern a:hover .qm-product-card, .public-qm.menu-layout-nexus .qm-category-modern a:hover .qm-menu-tile, .public-qm.menu-layout-nexus .qm-category-modern a:hover .qm-product-card { background: color-mix(in srgb, var(--qm-card-bg) 88%, var(--qm-primary)) !important; border-color: color-mix(in srgb, var(--qm-primary) 38%, transparent) !important; } .public-qm.menu-layout-neon .qm-product-modern .qm-detail-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 42%, var(--qm-border)); box-shadow: 0 0 28px color-mix(in srgb, var(--qm-primary) 28%, transparent), var(--qm-hero-shadow); } .public-qm.menu-layout-aurora .qm-product-modern .qm-detail-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)), var(--qm-card-bg) ); box-shadow: var(--qm-hero-shadow); } .public-qm.menu-layout-nexus .qm-product-modern .qm-detail-hero { border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)); backdrop-filter: var(--qm-tile-backdrop); -webkit-backdrop-filter: var(--qm-tile-backdrop); box-shadow: var(--qm-hero-shadow); } .public-qm.menu-layout-neon .qm-product-modern .qm-price-panel, .public-qm.menu-layout-neon .qm-product-modern .qm-info-tile { box-shadow: 0 0 20px color-mix(in srgb, var(--qm-primary) 22%, transparent); } .public-qm.menu-layout-aurora .qm-product-modern .qm-price-panel { border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 8%, var(--qm-card-bg)) ); } .public-qm.menu-layout-nexus .qm-product-modern .qm-card, .public-qm.menu-layout-nexus .qm-product-modern .qm-price-panel, .public-qm.menu-layout-nexus .qm-product-modern .qm-info-tile { backdrop-filter: var(--qm-tile-backdrop); -webkit-backdrop-filter: var(--qm-tile-backdrop); } /* [ETIKET: ORTAK] ?ne ??kan / ?r?n kapak k??e yuvarlakl??? ? preset?e g?re */ .public-qm.menu-layout-minimal .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-minimal .qm-product-modern .qm-detail-cover { border-radius: 0.7rem !important; } .public-qm.menu-layout-card .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-card .qm-product-modern .qm-detail-cover { border-radius: 1rem !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qm-body-color) 7%, transparent); } .public-qm.menu-layout-premium .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-modern .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-premium .qm-product-modern .qm-detail-cover, .public-qm.menu-layout-modern .qm-product-modern .qm-detail-cover { border-radius: 1.12rem !important; } .public-qm.menu-layout-list .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-list .qm-product-modern .qm-detail-cover { border-radius: 1rem !important; } .public-qm.menu-layout-soft .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-soft .qm-product-modern .qm-detail-cover { border-radius: 1.35rem !important; box-shadow: 0 12px 32px color-mix(in srgb, var(--qm-primary) 22%, transparent); } .public-qm.menu-layout-bold .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-bold .qm-product-modern .qm-detail-cover { border-radius: 1rem !important; border: 2px solid transparent; background: linear-gradient(var(--qm-card-bg), var(--qm-card-bg)) padding-box, linear-gradient(135deg, var(--qm-primary), color-mix(in srgb, var(--qm-primary) 55%, var(--qm-secondary))) border-box; } .public-qm.menu-layout-glass .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-glass .qm-product-modern .qm-detail-cover { border-radius: 1.08rem !important; border: 1px solid color-mix(in srgb, var(--qm-card-bg) 72%, #fff); box-shadow: 0 14px 36px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-neon .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-neon .qm-product-modern .qm-detail-cover { border-radius: var(--qm-radius-sm) !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 45%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--qm-primary) 30%, transparent); } .public-qm.menu-layout-aurora .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-aurora .qm-product-modern .qm-detail-cover { border-radius: var(--qm-radius) !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--qm-primary) 22%, transparent), 0 20px 48px -8px color-mix(in srgb, var(--qm-secondary) 14%, transparent); } .public-qm.menu-layout-nexus .qm-menu-modern .qm-featured-media, .public-qm.menu-layout-nexus .qm-product-modern .qm-detail-cover { border-radius: var(--qm-radius-sm) !important; border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 12%, transparent), 0 12px 32px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-neon .qm-product-modern .qm-detail-cover, .public-qm.menu-layout-aurora .qm-product-page__cover, .public-qm.menu-layout-neon .qm-product-page__cover { border: 1px solid color-mix(in srgb, var(--qm-primary) 38%, transparent); } .public-qm.menu-layout-aurora .qm-product-page__cover { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--qm-primary) 18%, transparent); } /* [ETIKET: A11Y] prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .qm-menu-modern a:hover .qm-menu-tile, .qm-menu-modern a:hover .qm-product-card, .qm-category-modern a:hover .qm-menu-tile, .qm-category-modern a:hover .qm-product-card { transform: none !important; } .public-qm[class*="menu-layout-"] .qm-menu-modern .qm-menu-tile__cover::after, .public-qm[class*="menu-layout-"] .qm-category-modern .qm-menu-tile__cover::after { opacity: 0 !important; } }