/* ========================================================================== Builder siteleri: component'lerin temel görünümü. KURAL: burada sabit renk/font/boşluk yok; her şey tema token'larından (CSS değişkenleri) gelir. Token'lar sayfa 'inde tema motorunca (src/builder/theme.js) üretilir. Kullanıcının component bazlı ayarları (.b-) bu dosyadan SONRA yüklenir ve buradaki varsayılanları ezer. ========================================================================== */ body.bx-site { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height); -webkit-font-smoothing: antialiased; } .bx-site *, .bx-site *::before, .bx-site *::after { box-sizing: border-box; } .bx-site img { max-width: 100%; display: block; } /* :where() → özgüllük 0: bu genel kurallar component kurallarını (buton/link rengi, paragraf boşluğu) EZMEZ. Önceden ".bx-site a" buton yazılarını üst öğenin rengine çeviriyor, koyu buton üstünde koyu yazı oluşuyordu. */ :where(.bx-site) a { color: inherit; } :where(.bx-site) p { margin: 0 0 .8em; } :where(.bx-site) p:last-child { margin-bottom: 0; } /* Başlık ölçeği: temel boyut × ölçek^n. Mobilde clamp ile ekran genişliğine sığar */ .bx-site { --h4: calc(var(--font-size-base) * var(--heading-scale)); --h3: calc(var(--h4) * var(--heading-scale)); --h2: calc(var(--h3) * var(--heading-scale)); --h1: calc(var(--h2) * var(--heading-scale)); } .bx-heading, :where(.bx-site) h1, :where(.bx-site) h2, :where(.bx-site) h3 { margin: 0 0 .45em; font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-tracking); line-height: 1.12; color: var(--heading-color, inherit); } /* Görsel üstündeki başlıklar (hero/slider) okunaklı kalsın: tema başlık rengi yerine beyaz */ .bx-hero[data-has-image] .bx-heading, .bx-slide.has-image .bx-slide-title { color: #fff; } .bx-image, .bx-gallery-tile, .bx-card-media, .bx-cat-media { border-radius: var(--radius-image, 0); } h1.bx-heading { font-size: clamp(2rem, 6vw, var(--h1)); } h2.bx-heading { font-size: clamp(1.6rem, 4.4vw, var(--h2)); } h3.bx-heading { font-size: var(--h3); } h4.bx-heading, p.bx-heading { font-size: var(--h4); } .bx-heading[data-size="xl"] { font-size: clamp(2.4rem, 8vw, calc(var(--h1) * 1.35)); } .bx-heading[data-size="lg"] { font-size: clamp(2rem, 5vw, min(var(--h1), 3.4rem)); } .bx-heading[data-size="md"] { font-size: clamp(1.4rem, 3.6vw, var(--h3)); } .bx-heading[data-size="sm"] { font-size: var(--h4); } .bx-text { max-width: 72ch; } .bx-text a { color: var(--color-primary); text-underline-offset: 3px; } /* ---------- Yerleşim ---------- */ .bx-section { position: relative; padding-block: var(--section-y); } .bx-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--spacing-md); } .bx-container[data-width="narrow"] { max-width: 780px; } .bx-container[data-width="wide"] { max-width: calc(var(--container) + 240px); } .bx-container[data-width="full"] { max-width: none; } /* Sütunlar oran ile büyür (flex-grow = yüzde) → aradaki boşluk düşüldükten sonra %40/%60 tam oranlı */ .bx-row { display: flex; gap: var(--spacing-md); } .bx-column { flex: 50 1 0; min-width: 0; } .bx-column[data-size="25"] { flex-grow: 25; } .bx-column[data-size="33"] { flex-grow: 33; } .bx-column[data-size="40"] { flex-grow: 40; } .bx-column[data-size="50"] { flex-grow: 50; } .bx-column[data-size="60"] { flex-grow: 60; } .bx-column[data-size="66"] { flex-grow: 66; } .bx-column[data-size="75"] { flex-grow: 75; } .bx-column[data-size="100"] { flex-grow: 100; } .bx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-md); } .bx-stack { display: flex; flex-direction: column; gap: var(--spacing-sm); } .bx-spacer { height: var(--spacing-lg); } .bx-divider { border: 0; border-top: var(--border-width, 1px) solid var(--color-border); margin: var(--spacing-md) 0; } @media (max-width: 1024px) { .bx-row[data-stack="tablet"] { flex-direction: column; } } @media (max-width: 640px) { .bx-row[data-stack="mobile"], .bx-row[data-stack="tablet"] { flex-direction: column; } .bx-container { padding-inline: var(--spacing-sm); } } /* ---------- Butonlar ---------- */ .bx-button, .bx-nav-cta, .bx-btn-main, .bx-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--btn-pad-y) var(--btn-pad-x); border: var(--border-width) solid transparent; border-radius: var(--btn-radius); font: var(--btn-weight) 1rem/1.1 var(--font-body); text-transform: var(--btn-case); text-decoration: none; cursor: pointer; transition: transform var(--duration) var(--easing), background-color .2s, color .2s, border-color .2s, box-shadow .2s; } .bx-button .icon, .bx-btn-main .icon, .bx-card-btn .icon { width: 1.1em; height: 1.1em; } /* Ana buton: tema token'ı "Ana buton stili" (dolu/çerçeveli/yumuşak/renk geçişli) bu üç değişkeni belirler */ .bx-button[data-variant="primary"], .bx-nav-cta, .bx-btn-main, .bx-card-btn { background: var(--btn-bg, var(--color-primary)); color: var(--btn-fg, var(--color-primary-text)); border-color: var(--btn-border, transparent); } .bx-button[data-variant="secondary"] { background: var(--color-secondary); color: var(--color-background); } .bx-button[data-variant="outline"], .bx-btn-alt { background: transparent; color: var(--color-text); border-color: currentColor; } .bx-button[data-variant="ghost"] { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); } .bx-button[data-variant="link"] { padding-inline: 0; background: none; color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; } .bx-button[data-size="sm"] { padding: calc(var(--btn-pad-y) * .7) calc(var(--btn-pad-x) * .7); font-size: .9rem; } .bx-button[data-size="lg"] { padding: calc(var(--btn-pad-y) * 1.25) calc(var(--btn-pad-x) * 1.3); font-size: 1.08rem; } .bx-button:hover, .bx-nav-cta:hover, .bx-btn-main:hover { transform: translateY(-1px); filter: brightness(1.06); } .bx-btn-alt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: calc(var(--btn-pad-y) * .85) var(--btn-pad-x); border: var(--border-width) solid color-mix(in srgb, var(--color-text) 30%, transparent); border-radius: var(--btn-radius); font: var(--btn-weight) .95rem var(--font-body); text-decoration: none; cursor: pointer; } .bx-btn-alt[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); } /* ---------- Temel ---------- */ .bx-icon { display: inline-grid; place-items: center; color: var(--color-primary); } .bx-icon .icon { width: 28px; height: 28px; } .bx-icon[data-shape="square"], .bx-icon[data-shape="circle"] { width: 56px; height: 56px; background: var(--color-primary); color: var(--color-primary-text); border-radius: var(--radius-sm); } .bx-icon[data-shape="circle"] { border-radius: 50%; } .bx-image { margin: 0; overflow: hidden; } .bx-image img { width: 100%; height: 100%; object-fit: inherit; border-radius: inherit; } .bx-image figcaption { margin-top: 8px; color: var(--color-muted); font-size: .9em; } .bx-placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 140px; padding: 20px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-muted); font-size: .9rem; } .bx-logo, .bx-nav-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: var(--heading-weight) 1.15rem var(--font-heading); letter-spacing: var(--heading-tracking); } .bx-logo img, .bx-nav-logo img { height: 40px; width: auto; max-width: 180px; object-fit: contain; } .bx-logo-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-text); font-weight: 800; } .bx-social { display: flex; flex-wrap: wrap; gap: 10px; } .bx-social a { display: inline-flex; align-items: center; gap: 8px; min-width: 42px; height: 42px; padding: 0 12px; justify-content: center; border: var(--border-width) solid var(--color-border); border-radius: 999px; text-decoration: none; } .bx-social a:hover { background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); } /* ---------- Hero ---------- */ .bx-hero { position: relative; display: flex; align-items: center; overflow: hidden; padding-block: var(--section-y); isolation: isolate; } /* Ekran yüksekliğine göre, ama çok uzun ekranlarda aşırı büyümesin diye üst sınırlı */ .bx-hero[data-height="md"] { min-height: min(60vh, 640px); } .bx-hero[data-height="lg"] { min-height: min(80vh, 820px); } .bx-hero[data-height="full"] { min-height: min(100svh, 1000px); } .bx-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .bx-hero-overlay { position: absolute; inset: 0; background: #000; z-index: -1; } .bx-hero[data-has-image] { color: #fff; } .bx-hero-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-sm); } .bx-hero[data-align="center"] .bx-hero-inner { align-items: center; text-align: center; } .bx-hero[data-align="center"] .bx-row { justify-content: center; } .bx-hero .bx-text { font-size: 1.15em; opacity: .85; } /* ---------- Slider ---------- Scroll-snap: JS olmadan da parmakla/tekerle slayt slayt kayar; site.js oklar/noktalar/otomatik geçiş ekler */ .bx-slider { position: relative; overflow: hidden; } .bx-slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; } .bx-slider-track::-webkit-scrollbar { display: none; } .bx-slide { position: relative; display: flex; align-items: center; min-height: min(60vh, 640px); scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; isolation: isolate; background: var(--color-surface); } .bx-slider[data-height="sm"] .bx-slide { min-height: min(40vh, 440px); } .bx-slider[data-height="lg"] .bx-slide { min-height: min(80vh, 820px); } .bx-slider[data-height="full"] .bx-slide { min-height: min(100svh, 1000px); } .bx-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .bx-slide-overlay { position: absolute; inset: 0; background: #000; z-index: -1; } .bx-slide.has-image { color: #fff; } .bx-slide-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--spacing-xl) calc(var(--spacing-md) + 48px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .bx-slider[data-align="center"] .bx-slide-inner { align-items: center; text-align: center; } .bx-slide-title { margin: 0; font: var(--heading-weight) clamp(2rem, 5.5vw, var(--h1)) / 1.1 var(--font-heading); text-transform: var(--heading-case); letter-spacing: var(--heading-tracking); max-width: 18ch; } .bx-slide-text { max-width: 52ch; font-size: 1.12em; opacity: .9; margin: 0; } .bx-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-background) 85%, transparent); color: var(--color-text); cursor: pointer; box-shadow: var(--shadow); } .bx-slider-btn.prev { left: 16px; } .bx-slider-btn.next { right: 16px; } .bx-slider-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 8px; } .bx-slider-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; transition: width .25s, background .25s; } .bx-slider-dots button[aria-current="true"] { width: 28px; background: var(--color-primary); } @media (max-width: 640px) { .bx-slider-btn { display: none; } .bx-slide-inner { padding: var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) + 20px); } } /* ---------- Medya / etkileşim ---------- */ .bx-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-sm); } .bx-gallery-tile { padding: 0; border: 0; overflow: hidden; border-radius: var(--radius-sm); cursor: zoom-in; background: var(--color-surface); } .bx-gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration) var(--easing); } .bx-gallery-tile:hover img { transform: scale(1.04); } .bx-accordion details { border-bottom: var(--border-width) solid var(--color-border); } .bx-accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: var(--spacing-sm) 0; font-weight: 600; cursor: pointer; list-style: none; } .bx-accordion summary::-webkit-details-marker { display: none; } .bx-accordion summary .icon { transition: transform .2s; flex: none; } .bx-accordion details[open] summary .icon { transform: rotate(180deg); } .bx-acc-body { padding-bottom: var(--spacing-sm); color: var(--color-muted); } .bx-tabs [role="tablist"] { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--spacing-sm); } .bx-tabs [role="tab"] { padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-muted); font: 600 1rem var(--font-body); cursor: pointer; margin-bottom: -1px; } .bx-tabs [role="tab"][aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-primary); } .bx-tabs.is-ready [data-tab-hidden] { display: none; } .bx-countdown { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .bx-countdown span { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: var(--spacing-sm); background: var(--color-surface); border-radius: var(--radius-md); } .bx-countdown strong { font: var(--heading-weight) 2rem/1 var(--font-heading); font-variant-numeric: tabular-nums; } .bx-countdown small { color: var(--color-muted); } .bx-video .video { border-radius: var(--radius-lg); } /* ---------- Ürün kartları (Product Card Builder ayarlarıyla) ---------- */ .bx-productGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); } .bx-productGrid[data-layout="list"] { grid-template-columns: minmax(0, 1fr) !important; } .bx-productGrid[data-layout="list"] .bx-card { flex-direction: row; align-items: center; } .bx-productGrid[data-layout="list"] .bx-card-link { flex-direction: row; min-width: 0; } /* Liste görünümü: buton kartın altında şerit değil, sağda kompakt */ .bx-productGrid[data-layout="list"] .bx-card-actions { flex: none; margin: 0; padding: 0 var(--card-padding) 0 0; padding-right: max(var(--card-padding), 14px); } .bx-productGrid[data-layout="list"] .bx-card-btn { flex: none; } @media (max-width: 640px) { .bx-productGrid[data-layout="list"] .bx-card { flex-direction: column; align-items: stretch; } .bx-productGrid[data-layout="list"] .bx-card-actions { padding: 0 12px 12px; } .bx-productGrid[data-layout="list"] .bx-card-media { width: 110px; } } .bx-productGrid[data-layout="list"] .bx-card-media { width: 180px; flex: none; } .bx-productGrid[data-layout="carousel"] { display: block; position: relative; } .bx-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--spacing-md)) / 4); gap: var(--spacing-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .bx-carousel-track::-webkit-scrollbar { display: none; } .bx-carousel-track > * { scroll-snap-align: start; } .bx-carousel-btn { position: absolute; top: 35%; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-background); color: var(--color-text); box-shadow: var(--shadow); cursor: pointer; } .bx-carousel-btn.prev { left: -14px; } .bx-carousel-btn.next { right: -14px; } @media (max-width: 1024px) { .bx-carousel-track { grid-auto-columns: calc((100% - var(--spacing-md)) / 2.3); } } .bx-empty { color: var(--color-muted); } .bx-card { display: flex; flex-direction: column; overflow: hidden; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-md); box-shadow: var(--card-shadow); transition: transform var(--duration) var(--easing), box-shadow var(--duration) var(--easing); } .bx-card:hover { transform: translateY(var(--card-hover-y)); } .bx-card[data-align="center"] { text-align: center; } .bx-card[data-align="center"] .bx-card-price, .bx-card[data-align="center"] .bx-card-actions { justify-content: center; } .bx-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; } .bx-card-media { position: relative; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface)); color: var(--color-muted); } .bx-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--duration) * 1.4) var(--easing); } .bx-card-media[data-fit="contain"] img { object-fit: contain; padding: 8%; background: #fff; } .bx-card:hover .bx-card-media img { transform: scale(var(--card-hover-scale)); } .bx-card-body { display: flex; flex-direction: column; gap: 4px; padding: var(--card-padding); padding-top: max(var(--card-padding), 12px); } .bx-card-meta { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); } .bx-card-name { font-weight: 600; line-height: 1.35; } .bx-card-desc { color: var(--color-muted); font-size: .9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bx-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .bx-price { font-weight: 700; font-variant-numeric: tabular-nums; } .bx-price.ask { font-weight: 500; color: var(--color-muted); font-size: .9em; } .bx-old-price { color: var(--color-muted); font-size: .85em; } .bx-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--color-primary); color: var(--color-primary-text); } .bx-badge[data-kind="sale"] { background: var(--color-accent); color: #fff; } .bx-badge[data-kind="out"] { background: var(--color-text); color: var(--color-background); } .bx-productPrice .bx-badge { position: static; } .bx-card-actions { display: flex; gap: 8px; padding: 0 var(--card-padding) var(--card-padding); margin-top: auto; } .bx-card[data-align] .bx-card-actions:only-child { padding-top: var(--card-padding); } .bx-card-btn { flex: 1; padding: calc(var(--btn-pad-y) * .7) 12px; font-size: .88rem; } .bx-card-icon { width: 38px; flex: none; display: grid; place-items: center; border: var(--border-width) solid var(--color-border); border-radius: var(--btn-radius); background: transparent; color: var(--color-text); cursor: pointer; } .bx-card-icon[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-text); } /* Kategoriler */ .bx-categoryGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); } .bx-categoryGrid[data-style="chips"] { display: flex; flex-wrap: wrap; gap: 8px; } .bx-cat { display: flex; flex-direction: column; overflow: hidden; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-md); box-shadow: var(--card-shadow); text-decoration: none; transition: transform var(--duration) var(--easing); } .bx-cat:hover { transform: translateY(var(--card-hover-y)); } .bx-cat-media { display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); } .bx-cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--duration) * 1.4) var(--easing); } .bx-cat-media .icon { width: 36px; height: 36px; } .bx-cat:hover .bx-cat-media img { transform: scale(var(--card-hover-scale)); } .bx-cat-body { display: flex; flex-direction: column; gap: 4px; padding: var(--card-padding); padding-top: max(var(--card-padding), 12px); } .bx-cat-body strong { font: var(--heading-weight) 1.1rem var(--font-heading); text-transform: var(--heading-case); } .bx-cat-body span, .bx-cat-body small { color: var(--color-muted); } .bx-categoryGrid[data-style="tiles"] .bx-cat { position: relative; } .bx-categoryGrid[data-style="tiles"] .bx-cat-body { position: absolute; inset: auto 0 0 0; padding: var(--spacing-md); background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; } .bx-categoryGrid[data-style="tiles"] .bx-cat-body span, .bx-categoryGrid[data-style="tiles"] .bx-cat-body small { color: rgba(255,255,255,.8); } .bx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: var(--border-width) solid var(--color-border); border-radius: 999px; text-decoration: none; font-weight: 500; } .bx-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .bx-chip small { color: var(--color-muted); } /* Arama */ .bx-search { position: relative; display: flex; gap: 8px; max-width: 560px; } .bx-search-field { position: relative; flex: 1; display: flex; align-items: center; } .bx-search-field .icon { position: absolute; left: 14px; color: var(--color-muted); pointer-events: none; } .bx-search input { width: 100%; height: 48px; padding: 0 14px 0 42px; border: var(--border-width) solid var(--color-border); border-radius: var(--btn-radius); background: var(--color-background); color: var(--color-text); font: 1rem var(--font-body); } .bx-search input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } .bx-search button { padding: 0 18px; border: 0; border-radius: var(--btn-radius); background: var(--color-primary); color: var(--color-primary-text); font: var(--btn-weight) 1rem var(--font-body); cursor: pointer; } .bx-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; padding: 6px; background: var(--color-background); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow); } .bx-suggest a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; } .bx-suggest a:hover, .bx-suggest a:focus { background: var(--color-surface); outline: none; } .bx-suggest img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); } .bx-suggest small { display: block; color: var(--color-muted); } /* Breadcrumb */ .bx-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--color-muted); } .bx-breadcrumb li + li::before { content: '/'; margin-right: 6px; opacity: .5; } .bx-breadcrumb a { text-decoration: none; } .bx-breadcrumb a:hover { color: var(--color-text); } .bx-breadcrumb [aria-current] { color: var(--color-text); } /* Ürün sayfası parçaları */ .bx-productGallery .pd-main { background: var(--color-surface); border: var(--card-border); border-radius: var(--radius-lg); } .bx-productGallery[data-fit="cover"] .pd-main img { object-fit: cover; } .bx-productPrice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font: var(--heading-weight) 1.8rem var(--font-heading); } .bx-productPrice .bx-old-price { font-size: 1rem; font-weight: 400; } .bx-productStock { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; } .bx-productStock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; } .bx-productStock[data-stock="low_stock"]::before { background: #f59e0b; } .bx-productStock[data-stock="out_of_stock"]::before { background: #dc2626; } .bx-productStock[data-stock="preorder"]::before { background: var(--color-primary); } .bx-actions-main, .bx-actions-alt { display: flex; flex-wrap: wrap; gap: 10px; } .bx-actions-main { margin-bottom: 10px; } .bx-actions-main .bx-btn-main { flex: 1; min-height: 50px; } .bx-actions-alt > * { flex: 1; } .bx-productActions .qty { height: 50px; border-color: var(--color-border); border-radius: var(--btn-radius); } .bx-productSpecs { width: 100%; border-collapse: collapse; } .bx-productSpecs th, .bx-productSpecs td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: var(--border-width) solid var(--color-border); } .bx-productSpecs th { width: 40%; color: var(--color-muted); font-weight: 500; } .bx-productSpecs[data-striped="true"] tr:nth-child(odd) { background: var(--color-surface); } /* ---------- Navbar ---------- */ /* --navbar-bg / --navbar-fg: component'in kendi renk ayarı (Navbar → Zemin/Yazı rengi); yoksa tema token'ı */ .bx-navbar { position: relative; z-index: 40; background: var(--navbar-bg, var(--nav-bg)); color: var(--navbar-fg, inherit); border-bottom: var(--nav-border); box-shadow: var(--nav-shadow); } .bx-navbar[data-mode="sticky"] { position: sticky; top: 0; } .bx-navbar[data-mode="fixed"] { position: fixed; top: 0; left: 0; right: 0; } .bx-navbar[data-mode="transparent"] { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; color: #fff; } .bx-nav-inner { display: flex; align-items: center; gap: var(--spacing-md); min-height: var(--nav-height); max-width: var(--container); margin-inline: auto; padding-inline: var(--spacing-md); } .bx-nav-links { display: flex; align-items: center; gap: var(--spacing-md); margin-left: auto; } .bx-navbar[data-layout="center"] .bx-nav-links { margin-inline: auto; } .bx-navbar[data-layout="stacked"] .bx-nav-inner { flex-wrap: wrap; justify-content: center; padding-block: 12px; } .bx-navbar[data-layout="stacked"] .bx-nav-links { order: 3; width: 100%; justify-content: center; margin: 0; } .bx-nav-links > a { text-decoration: none; font-weight: 500; opacity: .8; } .bx-nav-links > a:hover, .bx-nav-links > a[aria-current] { opacity: 1; } .bx-nav-links > a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } /* Navbar görünüm varyantları (Navbar → Görünüm) */ .bx-navbar[data-upper] .bx-nav-links > a { text-transform: uppercase; letter-spacing: .08em; font-size: .85em; } .bx-navbar[data-logo="sm"] .bx-nav-logo img, .bx-navbar[data-logo="sm"] .bx-logo-mark { height: 30px; } .bx-navbar[data-logo="sm"] .bx-logo-mark { width: 30px; } .bx-navbar[data-logo="lg"] .bx-nav-logo img { height: 56px; max-width: 240px; } .bx-navbar[data-logo="lg"] .bx-logo-mark { width: 52px; height: 52px; font-size: 1.3rem; } /* Hap: bulunulan sayfa ve hover dolu kapsül */ .bx-navbar[data-variant="pill"] .bx-nav-links { gap: 4px; } .bx-navbar[data-variant="pill"] .bx-nav-links > a { padding: 8px 14px; border-radius: 999px; opacity: .85; } .bx-navbar[data-variant="pill"] .bx-nav-links > a:hover { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; } .bx-navbar[data-variant="pill"] .bx-nav-links > a[aria-current] { background: var(--color-primary); color: var(--color-primary-text); text-decoration: none; opacity: 1; } /* Alt çizgi: hover'da soldan açılan çizgi */ .bx-navbar[data-variant="underline"] .bx-nav-links > a { position: relative; padding-block: 6px; text-decoration: none; } .bx-navbar[data-variant="underline"] .bx-nav-links > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--easing); } .bx-navbar[data-variant="underline"] .bx-nav-links > a:hover::after, .bx-navbar[data-variant="underline"] .bx-nav-links > a[aria-current]::after { transform: scaleX(1); } /* Ortalanmış logo: logo ortada, menü solda, aksiyonlar sağda */ @media (min-width: 901px) { .bx-navbar[data-variant="centered"] .bx-nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; } .bx-navbar[data-variant="centered"] .bx-nav-logo { grid-column: 2; grid-row: 1; justify-self: center; } .bx-navbar[data-variant="centered"] .bx-nav-links { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; } .bx-navbar[data-variant="centered"] .bx-nav-actions { grid-column: 3; grid-row: 1; justify-self: end; } } /* Yüzen: sayfadan ayrık, köşeli ve gölgeli bir kutu */ .bx-navbar[data-variant="floating"] { background: transparent; border: 0; box-shadow: none; padding: 12px var(--spacing-md) 0; } .bx-navbar[data-variant="floating"] .bx-nav-inner { background: var(--navbar-bg, var(--color-background)); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding-inline: var(--spacing-md); } /* Minimal: çizgisiz, gölgesiz, ince */ .bx-navbar[data-variant="minimal"] { border: 0; box-shadow: none; } .bx-navbar[data-variant="minimal"] .bx-nav-cta { background: none; color: inherit; border-color: currentColor; } /* Duyuru şeridi (navbar'ın üstünde) */ .bx-nav-announce { display: block; padding: 8px var(--spacing-md); background: var(--color-primary); color: var(--color-primary-text); text-align: center; font-size: .88rem; font-weight: 500; text-decoration: none; } a.bx-nav-announce:hover { text-decoration: underline; } .bx-nav-actions { display: flex; align-items: center; gap: 10px; } .bx-navbar[data-layout="split"] .bx-nav-links + .bx-nav-actions { margin-left: 0; } .bx-nav-icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); text-decoration: none; } .bx-nav-icon:hover { background: color-mix(in srgb, currentColor 10%, transparent); } .bx-nav-cta { padding: calc(var(--btn-pad-y) * .75) var(--btn-pad-x); font-size: .92rem; } .bx-nav-toggle, .bx-nav-close { display: none; width: 40px; height: 40px; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; } @media (max-width: 900px) { .bx-nav-toggle { display: grid; } .bx-nav-cta { display: none; } .bx-nav-links { display: none; } .bx-nav-links[data-open] { display: flex; } /* Açılır panel: sağdan gelen tam yükseklik menü */ .bx-nav-links[data-mobile="drawer"] { position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(320px, 86vw); flex-direction: column; align-items: stretch; gap: 0; padding: 64px var(--spacing-md) var(--spacing-md); background: var(--color-background); color: var(--color-text); box-shadow: var(--shadow); } .bx-nav-links[data-mobile="dropdown"] { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--spacing-md) var(--spacing-md); background: var(--color-background); color: var(--color-text); border-bottom: var(--border-width) solid var(--color-border); } .bx-nav-links[data-open] > a { padding: 14px 4px; border-bottom: 1px solid var(--color-border); opacity: 1; } .bx-nav-links[data-mobile="drawer"] .bx-nav-close { display: grid; position: absolute; top: 12px; right: 12px; } .bx-nav-actions { margin-left: auto; } } /* ---------- Footer ---------- */ .bx-footer { background: var(--color-surface); border-top: var(--border-width) solid var(--color-border); padding-top: var(--spacing-xl); } .bx-foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); max-width: var(--container); margin-inline: auto; padding-inline: var(--spacing-md); } .bx-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .bx-foot-brand p { color: var(--color-muted); max-width: 40ch; } .bx-foot-social { display: flex; gap: 8px; } .bx-foot-social a { width: 40px; height: 40px; display: grid; place-items: center; border: var(--border-width) solid var(--color-border); border-radius: 50%; } .bx-foot-col { display: flex; flex-direction: column; gap: 10px; } .bx-foot-col h2 { margin: 0 0 6px; font: 600 .78rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); } .bx-foot-col a, .bx-foot-col span { display: inline-flex; align-items: flex-start; gap: 10px; text-decoration: none; overflow-wrap: anywhere; } .bx-foot-col .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--color-muted); flex: none; } .bx-foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; } .bx-foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: var(--container); margin: var(--spacing-xl) auto 0; padding: var(--spacing-md); border-top: var(--border-width) solid var(--color-border); color: var(--color-muted); font-size: .85rem; } .bx-foot-bottom a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .bx-foot-bottom .icon { width: 14px; height: 14px; } @media (max-width: 900px) { .bx-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bx-foot-brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .bx-foot-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- Animasyon motoru ---------- İçerik JS yüklenmeden de görünür: gizleme sadece site.js 'e bx-anim-ready ekleyince başlar. Sadece transform/opacity/filter animasyonu (GPU dostu, yerleşimi yeniden hesaplatmaz). */ .bx-anim-ready [data-anim] { transition: opacity var(--anim-duration, 600ms) var(--anim-easing, ease) var(--anim-delay, 0ms), transform var(--anim-duration, 600ms) var(--anim-easing, ease) var(--anim-delay, 0ms), filter var(--anim-duration, 600ms) var(--anim-easing, ease) var(--anim-delay, 0ms); } .bx-anim-ready [data-anim]:not(.is-in) { opacity: 0; } .bx-anim-ready [data-anim="slide-up"]:not(.is-in) { transform: translateY(32px); } .bx-anim-ready [data-anim="slide-left"]:not(.is-in) { transform: translateX(40px); } .bx-anim-ready [data-anim="slide-right"]:not(.is-in) { transform: translateX(-40px); } .bx-anim-ready [data-anim="scale"]:not(.is-in) { transform: scale(.92); } .bx-anim-ready [data-anim="blur"]:not(.is-in) { filter: blur(12px); } .bx-anim-ready [data-anim="reveal"]:not(.is-in) { clip-path: inset(0 0 100% 0); } .bx-anim-ready [data-anim="reveal"] { transition-property: opacity, clip-path; } @media (prefers-reduced-motion: reduce) { .bx-anim-ready [data-anim] { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } } /* Erişilebilirlik */ .bx-site :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .bx-site .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bx-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-primary); color: var(--color-primary-text); border-radius: var(--radius-sm); } .bx-skip:focus { top: 12px; } @media (max-width: 1024px) { .bx-productGrid, .bx-categoryGrid, .bx-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .bx-productGrid, .bx-categoryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); } .bx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-grid { grid-template-columns: minmax(0, 1fr); } }