/* ===================================================================== ÇARŞI — tasarım dili (kalabalık çarşı / yapı market mağazası yerleşimi; kendi bileşen seti) Yalnız Çarşı paketinde () yüklenir (Services/Theme/ThemePresetRegistry). Klasik'e ve Mega ailesine etkisi yok. Dil: beyaz sayfa + sıcak açık gri/krem bantlar, marka tonunda paneller, yumuşak büyük köşeler, Rubik (yuvarlak, samimi), fiyat önde kartlar, pastel kategori monogramları. Sunucudan gelen token'lar (theme-tokens bloğu, ThemeResolver → BazaarPalette): --bz-font-heading / --bz-font-body, --bz-cta-bg/-fg/-hover, --bz-accent-text, --bz-accent-soft, --bz-tint(-strong), --bz-ink / --bz-on-ink / --bz-ink-muted / --bz-ink-line / --bz-ink-hover, --on-primary. Marka rengi (--primaryColor) tenant'ındır; burada TANIMLANMAZ. Kural: renk literal'i yalnız custom property tanımında; transition: all yok (lint-theme-css.mjs). Token'lar BİLEREK :root'ta (özgüllük 0,1,0) → sunucu theme-tokens bloğu ve tenant CSS'i (sonra yüklenir) ezebilir. ===================================================================== */ :root { /* Yüzey / metin / çerçeve */ --bz-page: #ffffff; --bz-surface: #ffffff; --bz-surface-2: #f7f6f3; --bz-surface-3: #efede8; --bz-cream: #fbf7ef; --bz-line: #eae7e1; --bz-line-strong: #d6d1c7; --bz-text: #1d2025; --bz-text-body: #3a3f47; --bz-text-muted: #666b72; --bz-overlay: rgba(29, 32, 37, .78); --bz-scrim: rgba(29, 32, 37, .06); /* Durum renkleri (beyaz üstünde ≥4.5:1) */ --bz-ok: #0f7a4a; --bz-ok-soft: #e6f5ec; --bz-bad: #b42318; --bz-bad-soft: #fdecea; --bz-warn: #9a4a06; --bz-warn-bg: #fff4e2; --bz-amber: #ffc53d; /* kampanya rozeti zemini (koyu yazıyla ≥10:1) */ /* WhatsApp yeşili (beyaz üstünde ≥4.5:1) ve açık tonu */ --bz-wa: #0d7a3e; --bz-wa-soft: #e3f5ea; /* Kayan logo kuşağının kenar maskesi (mask-image yalnız alfa okur) */ --bz-mask-solid: #000000; /* Üçlü liste tonları (ikon rozetleri; koyu yazı/ikon açık zeminde ≥4.5:1) */ --bz-hot: #b83a07; --bz-hot-soft: #fff0e6; --bz-new: #0a6b67; --bz-new-soft: #e2f5f3; /* Pastel kategori monogramları (zemin / yazı çiftleri, her biri ≥7:1) */ --bz-pastel-1-bg: #fde8e1; --bz-pastel-1-fg: #7c2a0f; --bz-pastel-2-bg: #e2effa; --bz-pastel-2-fg: #0d4470; --bz-pastel-3-bg: #e3f4e6; --bz-pastel-3-fg: #1b5a2d; --bz-pastel-4-bg: #f1e7fa; --bz-pastel-4-fg: #56287f; --bz-pastel-5-bg: #fcf1d2; --bz-pastel-5-fg: #6b4e00; --bz-pastel-6-bg: #ddf3f1; --bz-pastel-6-fg: #0b5752; /* Şekil ve derinlik */ --bz-radius-card: 16px; --bz-radius-media: 12px; --bz-radius-ctl: 10px; --bz-radius-pill: 999px; --bz-shadow-rest: 0 1px 2px rgba(29, 32, 37, .05); --bz-shadow-card: 0 2px 10px rgba(29, 32, 37, .05); --bz-shadow-hover: 0 16px 34px rgba(29, 32, 37, .12); --bz-shadow-pop: 0 22px 52px rgba(29, 32, 37, .18); --bz-shadow-sticky: 0 8px 22px rgba(29, 32, 37, .10); --bz-shadow-cta: 0 14px 26px -14px rgba(29, 32, 37, .45); --bz-ease: cubic-bezier(.2, .7, .2, 1); /* Fallback'ler (sunucu token'ı yoksa) */ --bz-font-heading: var(--site-font-family, system-ui, sans-serif); --bz-font-body: var(--site-font-family, system-ui, sans-serif); --bz-cta-bg: var(--primaryColor); --bz-cta-fg: var(--bz-surface); --bz-cta-hover: var(--bz-text); --bz-accent-text: var(--primaryColor); --bz-accent-soft: var(--bz-surface-3); --bz-tint: var(--bz-surface-2); --bz-tint-strong: var(--bz-surface-3); --bz-ink: var(--bz-text); --bz-on-ink: var(--bz-surface); --bz-ink-muted: #c3c6ca; --bz-ink-line: #3a3e45; --bz-ink-hover: #2c3036; /* Eski CSS'in bağlandığı token'lar */ --page-bg: var(--bz-page); --header-border: var(--bz-line); --header-hover: var(--bz-surface-2); } html[data-theme-kit="bazaar"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--bz-text-body); } /* --------------------------------------------------------------------- Tipografi ezmesi — app.css/custom.css "Bai Jamjuree"yi bu seçicilerde SABİT yazıyor (Mega ile aynı liste). Başlık/UI → --bz-font-heading, metin → --bz-font-body. "Kendi fontum" seçiliyse iki token da tenant fontuna bağlanır. --------------------------------------------------------------------- */ html[data-theme-kit="bazaar"] :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .eyebrow, .font-primary, .cus-btn, .cus-btn-2, .cus-btn-3, .coming-soon-cd ul li h2) { font-family: var(--bz-font-heading); } html[data-theme-kit="bazaar"] :is(p, .text-16, b, strong, .form-control, .input-group input, .info-card, .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a, .featured-product-card .image-box .sale-label, .featured-product-list .image-box .sale-label, .mega-nav-menu > li > a, .mega-nav-item span) { font-family: var(--bz-font-body); } /* --------------------------------------------------------------------- Butonlar — Bootstrap mavisi yerine marka rengi (--bz-cta-*: kırmızı zeminde BEYAZ yazı, dolgu 4.5:1). --------------------------------------------------------------------- */ html[data-theme-kit="bazaar"] .btn-primary { --bs-btn-bg: var(--bz-cta-bg); --bs-btn-border-color: var(--bz-cta-bg); --bs-btn-color: var(--bz-cta-fg); --bs-btn-hover-bg: var(--bz-cta-hover); --bs-btn-hover-border-color: var(--bz-cta-hover); --bs-btn-hover-color: var(--bz-cta-fg); --bs-btn-active-bg: var(--bz-cta-hover); --bs-btn-active-border-color: var(--bz-cta-hover); --bs-btn-active-color: var(--bz-cta-fg); border-radius: var(--bz-radius-ctl); font-weight: 600; } html[data-theme-kit="bazaar"] .btn-outline-primary { --bs-btn-color: var(--bz-accent-text); --bs-btn-border-color: var(--primaryColor); --bs-btn-hover-bg: var(--bz-cta-bg); --bs-btn-hover-border-color: var(--bz-cta-bg); --bs-btn-hover-color: var(--bz-cta-fg); border-radius: var(--bz-radius-ctl); font-weight: 600; } html[data-theme-kit="bazaar"] :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--bz-accent-text); outline-offset: 2px; } /* Ekran okuyucuya açık, görünmez metin */ .bz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html[data-theme-kit="bazaar"] *, html[data-theme-kit="bazaar"] *::before, html[data-theme-kit="bazaar"] *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }