/** * ═══════════════════════════════════════════════════════════════════════════ * @DOSYA menu-layouts-product.css * @ETIKET URUN-SAYFA-PRESET — bireysel ürün detay preset katmanı * @YUKLENME layouts/public.php (product-page.css sonrası) * @ADMIN-GORUNUM * @HEDEF .qm-product-page__hero, .qm-product-page__card, * .qm-product-page__price-box, .qm-product-page__icon, * .qm-product-page__badge, .qm-product-page__info-tile * @PRESETLER card | list | minimal | premium | modern | glass | bold | soft | neon | aurora | nexus * @NOT Ana görünüm qm-preset-tokens.css (--qm-product-*) + product-page.css; burada ince ayar * ═══════════════════════════════════════════════════════════════════════════ */ /* [ETIKET: ORTAK] Ürün detay — token tabanlı yüzeyler (product-page.css) üzerine geçişler */ .public-qm[class*="menu-layout-"] .qm-product-page__hero, .public-qm[class*="menu-layout-"] .qm-product-page__card, .public-qm[class*="menu-layout-"] .qm-product-page__price-box, .public-qm[class*="menu-layout-"] .qm-product-page__back, .public-qm[class*="menu-layout-"] .qm-product-page__share { transition: box-shadow 0.32s ease, border-color 0.32s ease, background 0.32s ease, border-radius 0.32s ease; } .public-qm[class*="menu-layout-"] .qm-product-page__hero, .public-qm[class*="menu-layout-"] .qm-product-page__card, .public-qm[class*="menu-layout-"] .qm-product-page__price-box, .public-qm[class*="menu-layout-"] .qm-product-page__icon, .public-qm[class*="menu-layout-"] .qm-product-page__badge, .public-qm[class*="menu-layout-"] .qm-product-page__info-tile, .public-qm[class*="menu-layout-"] .qm-product-page__list-row, .public-qm[class*="menu-layout-"] .qm-product-page__notice { transition: box-shadow 0.32s ease, border-color 0.32s ease, background 0.32s ease, border-radius 0.32s ease; } .public-qm[class*="menu-layout-"] .qm-product-page__cover { background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); } /* ── [PRESET: card] Kart — dengeli ── */ .public-qm.menu-layout-card .qm-product-page__hero, .public-qm.menu-layout-card .qm-product-page__card { border: 1px solid color-mix(in srgb, var(--qm-body-color) 8%, var(--qm-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--qm-card-bg) 94%, #fff), var(--qm-card-bg)); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--qm-body-color) 13%, transparent); } .public-qm.menu-layout-card .qm-product-page__price-box, .public-qm.menu-layout-card .qm-product-page__icon, .public-qm.menu-layout-card .qm-product-page__badge, .public-qm.menu-layout-card .qm-product-page__info-tile, .public-qm.menu-layout-card .qm-product-page__list-row { border-color: color-mix(in srgb, var(--qm-primary) 18%, var(--qm-border)); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); } /* ── [PRESET: list] Liste — daha düz, okunaklı ── */ .public-qm.menu-layout-list .qm-product-page { max-width: 980px; } .public-qm.menu-layout-list .qm-product-page__hero, .public-qm.menu-layout-list .qm-product-page__card { border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); background: var(--qm-card-bg); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-list .qm-product-page__price-box, .public-qm.menu-layout-list .qm-product-page__icon, .public-qm.menu-layout-list .qm-product-page__badge, .public-qm.menu-layout-list .qm-product-page__info-tile, .public-qm.menu-layout-list .qm-product-page__list-row { border-color: color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); background: color-mix(in srgb, var(--qm-body-color) 5%, var(--qm-card-bg)); } @media (min-width: 992px) { .public-qm.menu-layout-list .qm-product-page__hero { grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.8fr); } } /* ── [PRESET: minimal] Minimal — çizgisel, gölgesiz ── */ .public-qm.menu-layout-minimal .qm-product-page__hero, .public-qm.menu-layout-minimal .qm-product-page__card { border-radius: 0.75rem; border: 1px solid var(--qm-border); background: color-mix(in srgb, var(--qm-card-bg) 94%, transparent); box-shadow: none; } .public-qm.menu-layout-minimal .qm-product-page__price-box, .public-qm.menu-layout-minimal .qm-product-page__icon, .public-qm.menu-layout-minimal .qm-product-page__badge, .public-qm.menu-layout-minimal .qm-product-page__info-tile, .public-qm.menu-layout-minimal .qm-product-page__list-row, .public-qm.menu-layout-minimal .qm-product-page__notice { border: 1px solid var(--qm-border); background: transparent; box-shadow: none; } .public-qm.menu-layout-minimal .qm-product-page__eyebrow { background: transparent; border-color: var(--qm-border); } /* ── [PRESET: premium] Premium — ambient derinlik ── */ .public-qm.menu-layout-premium .qm-product-page__hero, .public-qm.menu-layout-premium .qm-product-page__card { border: none; background: radial-gradient( 110% 80% at 50% -10%, color-mix(in srgb, var(--qm-card-bg) 94%, #fff) 0%, var(--qm-card-bg) 62% ); box-shadow: 0 20px 52px -14px color-mix(in srgb, var(--qm-body-color) 16%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--qm-primary) 14%, transparent); } .public-qm.menu-layout-premium .qm-product-page__price-box { border: none; background: radial-gradient( 120% 80% at 50% 0%, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-primary) 6%, var(--qm-card-bg)) ); box-shadow: 0 14px 36px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-premium .qm-product-page__icon, .public-qm.menu-layout-premium .qm-product-page__badge, .public-qm.menu-layout-premium .qm-product-page__info-tile, .public-qm.menu-layout-premium .qm-product-page__list-row { border: none; background: color-mix(in srgb, var(--qm-body-color) 5%, var(--qm-card-bg)); box-shadow: 0 10px 28px color-mix(in srgb, var(--qm-body-color) 9%, transparent); } /* ── [PRESET: modern] Modern — keskin rim + primary vurgu ── */ .public-qm.menu-layout-modern .qm-product-page__hero, .public-qm.menu-layout-modern .qm-product-page__card { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, transparent); background: var(--qm-card-bg); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--qm-body-color) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent); } .public-qm.menu-layout-modern .qm-product-page__price-box, .public-qm.menu-layout-modern .qm-product-page__icon, .public-qm.menu-layout-modern .qm-product-page__badge, .public-qm.menu-layout-modern .qm-product-page__info-tile, .public-qm.menu-layout-modern .qm-product-page__list-row { border-color: color-mix(in srgb, var(--qm-primary) 26%, transparent); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } /* ── [PRESET: glass] Cam — buğulu küçük yüzeyler ── */ .public-qm.menu-layout-glass .qm-product-page__hero, .public-qm.menu-layout-glass .qm-product-page__card { border-radius: 1.1rem; border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); background: linear-gradient( 160deg, color-mix(in srgb, var(--qm-card-bg) 78%, #fff), color-mix(in srgb, var(--qm-card-bg) 92%, #fff) ); backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px); box-shadow: 0 18px 44px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-glass .qm-product-page__price-box, .public-qm.menu-layout-glass .qm-product-page__icon, .public-qm.menu-layout-glass .qm-product-page__badge, .public-qm.menu-layout-glass .qm-product-page__info-tile, .public-qm.menu-layout-glass .qm-product-page__list-row { border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); background: color-mix(in srgb, var(--qm-card-bg) 86%, #fff); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .public-qm.menu-layout-glass .qm-product-page__hero, .public-qm.menu-layout-glass .qm-product-page__card, .public-qm.menu-layout-glass .qm-product-page__price-box { background: color-mix(in srgb, var(--qm-card-bg) 96%, var(--qm-primary)); } } /* ── [PRESET: bold] Vurgulu — primary sol şerit ── */ .public-qm.menu-layout-bold .qm-product-page__hero, .public-qm.menu-layout-bold .qm-product-page__card { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); border-left: 6px solid var(--qm-primary); background: var(--qm-card-bg); box-shadow: 0 16px 40px color-mix(in srgb, var(--qm-body-color) 14%, transparent); } .public-qm.menu-layout-bold .qm-product-page__price-box { border: 2px solid color-mix(in srgb, var(--qm-primary) 35%, transparent); border-left-width: 5px; border-left-color: var(--qm-primary); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); } .public-qm.menu-layout-bold .qm-product-page__icon, .public-qm.menu-layout-bold .qm-product-page__badge, .public-qm.menu-layout-bold .qm-product-page__info-tile, .public-qm.menu-layout-bold .qm-product-page__list-row { border: 2px solid color-mix(in srgb, var(--qm-primary) 28%, transparent); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); } /* ── [PRESET: soft] Yumuşak — pastel & pill ── */ .public-qm.menu-layout-soft .qm-product-page__hero, .public-qm.menu-layout-soft .qm-product-page__card { border-radius: 1.4rem; border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, var(--qm-border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)), var(--qm-card-bg) ); box-shadow: 0 18px 46px color-mix(in srgb, var(--qm-primary) 24%, transparent), 0 8px 24px color-mix(in srgb, var(--qm-body-color) 8%, transparent); } .public-qm.menu-layout-soft .qm-product-page__price-box, .public-qm.menu-layout-soft .qm-product-page__icon, .public-qm.menu-layout-soft .qm-product-page__badge, .public-qm.menu-layout-soft .qm-product-page__info-tile, .public-qm.menu-layout-soft .qm-product-page__list-row { border-radius: 1.15rem; border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); box-shadow: 0 12px 32px color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-soft .qm-product-page__eyebrow, .public-qm.menu-layout-soft .qm-product-page__badge { border-radius: 999px; } /* ── [PRESET: neon] Cyber glow — ürün detay sayfası ── */ .public-qm.menu-layout-neon .qm-product-page__hero, .public-qm.menu-layout-neon .qm-product-page__card { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-primary) 42%, var(--qm-border)); background: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 96%, #0a0f1a) ); box-shadow: 0 0 32px color-mix(in srgb, var(--qm-primary) 28%, transparent), 0 16px 40px -12px color-mix(in srgb, var(--qm-body-color) 16%, transparent); } .public-qm.menu-layout-neon .qm-product-page__price-box, .public-qm.menu-layout-neon .qm-product-page__icon, .public-qm.menu-layout-neon .qm-product-page__badge, .public-qm.menu-layout-neon .qm-product-page__info-tile, .public-qm.menu-layout-neon .qm-product-page__list-row, .public-qm.menu-layout-neon .qm-product-page__notice { border-color: color-mix(in srgb, var(--qm-primary) 38%, var(--qm-border)); background: color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)); box-shadow: 0 0 18px color-mix(in srgb, var(--qm-primary) 18%, transparent); } .public-qm.menu-layout-neon .qm-product-page__price-box { border: 1px solid color-mix(in srgb, var(--qm-primary) 48%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-primary) 16%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-card-bg) 96%, #0a0f1a) ); box-shadow: 0 0 28px color-mix(in srgb, var(--qm-primary) 26%, transparent); } .public-qm.menu-layout-neon .qm-product-page__eyebrow { border: 1px solid color-mix(in srgb, var(--qm-primary) 35%, transparent); background: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); } /* ── [PRESET: aurora] Kuzey ışıkları — ürün detay sayfası ── */ .public-qm.menu-layout-aurora .qm-product-page__hero, .public-qm.menu-layout-aurora .qm-product-page__card { border-radius: var(--qm-radius); border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, var(--qm-border)); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-secondary)) ); box-shadow: 0 18px 48px color-mix(in srgb, var(--qm-primary) 18%, transparent), 0 24px 56px -14px color-mix(in srgb, var(--qm-secondary) 14%, transparent); } .public-qm.menu-layout-aurora .qm-product-page__price-box, .public-qm.menu-layout-aurora .qm-product-page__icon, .public-qm.menu-layout-aurora .qm-product-page__badge, .public-qm.menu-layout-aurora .qm-product-page__info-tile, .public-qm.menu-layout-aurora .qm-product-page__list-row, .public-qm.menu-layout-aurora .qm-product-page__notice { border-radius: var(--qm-radius-sm); border-color: color-mix(in srgb, var(--qm-primary) 22%, transparent); background: linear-gradient( 145deg, color-mix(in srgb, var(--qm-primary) 10%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 8%, var(--qm-card-bg)) ); box-shadow: 0 12px 32px color-mix(in srgb, var(--qm-primary) 14%, transparent); } .public-qm.menu-layout-aurora .qm-product-page__price-box { border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 10%, var(--qm-card-bg)) ); } .public-qm.menu-layout-aurora .qm-product-page__eyebrow, .public-qm.menu-layout-aurora .qm-product-page__badge { border-radius: 999px; } /* ── [PRESET: nexus] Hologrid — ürün detay sayfası ── */ .public-qm.menu-layout-nexus .qm-product-page__hero, .public-qm.menu-layout-nexus .qm-product-page__card { border-radius: var(--qm-radius-sm); border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 12%, transparent), 0 16px 36px color-mix(in srgb, var(--qm-body-color) 12%, transparent); } .public-qm.menu-layout-nexus .qm-product-page__price-box, .public-qm.menu-layout-nexus .qm-product-page__icon, .public-qm.menu-layout-nexus .qm-product-page__badge, .public-qm.menu-layout-nexus .qm-product-page__info-tile, .public-qm.menu-layout-nexus .qm-product-page__list-row, .public-qm.menu-layout-nexus .qm-product-page__notice { border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, var(--qm-border)); background: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent); } .public-qm.menu-layout-nexus .qm-product-page__cover { border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .public-qm.menu-layout-nexus .qm-product-page__hero, .public-qm.menu-layout-nexus .qm-product-page__card, .public-qm.menu-layout-nexus .qm-product-page__price-box, .public-qm.menu-layout-nexus .qm-product-page__info-tile { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--qm-card-bg) 96%, var(--qm-primary)); } } /* [ETIKET: A11Y] Hareket azaltma */ @media (prefers-reduced-motion: reduce) { .public-qm[class*="menu-layout-"] .qm-product-page__hero, .public-qm[class*="menu-layout-"] .qm-product-page__card, .public-qm[class*="menu-layout-"] .qm-product-page__price-box, .public-qm[class*="menu-layout-"] .qm-product-page__icon, .public-qm[class*="menu-layout-"] .qm-product-page__badge, .public-qm[class*="menu-layout-"] .qm-product-page__info-tile, .public-qm[class*="menu-layout-"] .qm-product-page__list-row, .public-qm[class*="menu-layout-"] .qm-product-page__notice { transition: none !important; } }