/* Barswear Public.Web — Utero override'ları için */
/* ═══════════════════════════════════════════
İÇİNDEKİLER
═══════════════════════════════════════════
0. RENK DEĞİŞKENLERİ — CSS custom properties (:root)
1. PHOTOSWIPE — Galeri ikon fix
2. ÜRÜN KARTI — Genel stiller (tüm sayfalarda)
3. BİLEŞENLER — Yeniden kullanılabilir form bileşenleri
4. ARAMA — Search popup override
5. HEADER — Logo, nav, badge, dropdown, tooltip
6. ÜRÜN DETAY — Breadcrumb, badge, sticky bar
7. MAĞAZA — Filtre, pagination, swatch, empty state
8. AUTH — Login / Register sayfası
9. HESABIM — Profil, adres, sidebar, floating label, Select2
10. ANASAYFA — Promo bar + Instagram + Features spacing
11. SEPET — Sepet sayfası + mini cart + kupon
12. FAVORİLER — Kalp toggle + wishlist sayfası
13. CHECKOUT — Ödeme sayfası
14. FOOTER — 4 kolon + accordion + copyright
15. VALİDASYON — Merkezi form validation (per-field error state)
16. TOAST NOTIFICATION — Merkezi bildirim sistemi (notifySuccess/Error/Warning)
17. ERROR MODAL — Merkezi hata popup sistemi (_showApiErrorModal)
18. ÜRÜN KARTI BEDEN — Size dropdown (glassmorphism, Zara pattern)
19. İADE TALEBİ — Return card, detail, form, timeline
20. YASAL SAYFALAR — Legal pages (KVKK, sözleşme, çerez vb.)
21. STICKY BEDEN DROPDOWN — Sticky bar beden seçim popup'ı
23. BARS-BOX-SELECT — Yeniden kullanılabilir seçim kutuları (ikon + metin)
24. COOKIE CONSENT BANNER — KVKK çerez onay bildirimi
25. CONFIRM POPUP — Onay popup'ı (sipariş iptal vb.)
26. SSS ACCORDION — Sıkça Sorulan Sorular açılır kapanır panel
27. KONSEPT CAROUSEL — Stacked carousel layout + line indicator (mobil)
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
0. RENK DEĞİŞKENLERİ
═══════════════════════════════════════════ */
:root {
/* Ana renk — teal: buton, link hover, aktif durum, seçili öğe */
--clr-teal: #304650;
/* Ana renk koyu tonu — buton hover/pressed durumu */
--clr-teal-dark: #1a2a32;
/* Metin hiyerarşisi (koyu → açık) */
--clr-text: #333; /* başlık, etiket, birincil metin */
--clr-text-soft: #666; /* açıklama, ikincil metin */
--clr-text-muted: #999; /* placeholder, devre dışı alan */
--clr-text-faint: #ccc; /* gölge metin, boş yıldız */
/* Kenarlık */
--clr-border: #e8e8e8; /* form, kart, tablo çizgisi */
--clr-border-light: #f0f0f0; /* bölüm ayracı, ince çizgi */
/* Zemin (beyaz → koyu) */
--clr-bg: #fff; /* sayfa / kart beyaz zemin */
--clr-bg-soft: #fafafa; /* form alanı, alternatif satır */
--clr-bg-muted: #f5f5f5; /* placeholder kutu, disabled alan */
/* Durum renkleri */
--clr-danger: #e74c3c; /* hata, silme, uyarı kırmızı */
--clr-success: #27ae60; /* başarı, onay, stok var */
--clr-warning: #f39c12; /* uyarı, yıldız puan */
--clr-info: #3498db; /* bilgi, link, nötr vurgu */
}
/* ═══════════════════════════════════════════
0. BARS-PUBLIC-BTN — Genel buton bileseni
═══════════════════════════════════════════
Kullanım:
Solid (primary)
Çerçeveli
Kırmızı çerçeveli
Küçük boyut
═══════════════════════════════════════════ */
/* Base */
.bars-public-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 22px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
text-decoration: none;
border-radius: 0;
border: 1px solid var(--clr-teal);
background: var(--clr-teal);
color: #fff;
cursor: pointer;
transition: all 0.2s;
line-height: 1.4;
box-sizing: border-box;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.bars-public-btn:hover {
background: var(--clr-teal-dark);
border-color: var(--clr-teal-dark);
color: #fff;
}
/* Primary — explicit class (base ile aynı, semantic kullanım için) */
.bars-public-btn.is-primary {
border-color: var(--clr-teal);
background: var(--clr-teal);
color: #fff;
}
.bars-public-btn.is-primary:hover {
background: var(--clr-teal-dark);
border-color: var(--clr-teal-dark);
color: #fff;
}
/* Outlined — çerçeveli, hover'da dolar */
.bars-public-btn.is-outlined {
background: transparent;
color: var(--clr-teal);
}
.bars-public-btn.is-outlined:hover {
background: var(--clr-teal);
color: #fff;
}
/* Danger */
.bars-public-btn.is-danger {
border-color: var(--clr-danger);
background: var(--clr-danger);
color: #fff;
}
.bars-public-btn.is-danger:hover {
border-color: #c0392b;
background: #c0392b;
color: #fff;
}
.bars-public-btn.is-danger.is-outlined {
background: transparent;
color: var(--clr-danger);
border-color: var(--clr-danger);
}
.bars-public-btn.is-danger.is-outlined:hover {
background: var(--clr-danger);
color: #fff;
}
/* Warning */
.bars-public-btn.is-warning {
border-color: var(--clr-warning);
background: var(--clr-warning);
color: #fff;
}
.bars-public-btn.is-warning:hover {
border-color: #e67e22;
background: #e67e22;
color: #fff;
}
.bars-public-btn.is-warning.is-outlined {
background: transparent;
color: var(--clr-warning);
border-color: var(--clr-warning);
}
.bars-public-btn.is-warning.is-outlined:hover {
background: var(--clr-warning);
color: #fff;
}
/* Info */
.bars-public-btn.is-info {
border-color: var(--clr-info);
background: var(--clr-info);
color: #fff;
}
.bars-public-btn.is-info:hover {
border-color: #2980b9;
background: #2980b9;
color: #fff;
}
.bars-public-btn.is-info.is-outlined {
background: transparent;
color: var(--clr-info);
border-color: var(--clr-info);
}
.bars-public-btn.is-info.is-outlined:hover {
background: var(--clr-info);
color: #fff;
}
/* Success */
.bars-public-btn.is-success {
border-color: var(--clr-success);
background: var(--clr-success);
color: #fff;
}
.bars-public-btn.is-success:hover {
border-color: #219a52;
background: #219a52;
color: #fff;
}
.bars-public-btn.is-success.is-outlined {
background: transparent;
color: var(--clr-success);
border-color: var(--clr-success);
}
.bars-public-btn.is-success.is-outlined:hover {
background: var(--clr-success);
color: #fff;
}
/* Cancel — gri iptal butonu (is-outlined ile birlikte kullanılır) */
.bars-public-btn.is-cancel {
border-color: #bbb;
background: #bbb;
color: #fff;
}
.bars-public-btn.is-cancel:hover {
border-color: #888;
background: #888;
color: #fff;
}
.bars-public-btn.is-cancel.is-outlined {
background: transparent;
color: #888;
border-color: #ccc;
}
.bars-public-btn.is-cancel.is-outlined:hover {
background: transparent;
border-color: #888;
color: #666;
}
/* Boyut modifier'ları — standart: 9px 22px / 13px */
.bars-public-btn.is-small {
padding: 6px 14px;
font-size: 12px;
}
.bars-public-btn.is-large {
padding: 12px 28px;
font-size: 15px;
}
/* ═══════════════════════════════════════════
1. PHOTOSWIPE — Galeri ikon fix
═══════════════════════════════════════════
theme.css'te iki çakışan PhotoSwipe CSS bloğu var:
v5 core (satır 8680) → .pswp__button:hover { background: none } ← sprite'ı siliyor
v4 skin (satır 8892) → .pswp__button { background: url(sprite) } ← sprite ekliyor
hover shorthand'ı background-image + background-position + background-size hepsini sıfırlıyor.
!important ile base rule'ların hover'ı ezmesi sağlanır.
--pswp-skin CSS custom property _PublicHead.cshtml'de CDN URL olarak set edilir. */
/* Sprite image + size — tüm butonlarda korunsun (hover dahil) */
.pswp__button {
background-image: var(--pswp-skin) !important;
background-size: 264px 88px !important;
background-repeat: no-repeat !important;
}
/* Buton bazlı sprite pozisyonları — hover shorthand'ın sıfırlamasını engelle */
.pswp__button--close {
background-position: 0 -44px !important;
}
.pswp__button--share {
background-position: -44px -44px !important;
}
.pswp__button--zoom {
background-position: -88px 0 !important;
}
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0 !important;
}
.pswp--fs .pswp__button--fs {
background-position: -44px 0 !important;
}
/* Ok butonları — sprite yalnızca :before pseudo-element'te,
butonun kendisinde background olmamalı */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
background-image: none !important;
}
/* ═══════════════════════════════════════════
2. ÜRÜN KARTI — Genel stiller (tüm sayfalarda)
═══════════════════════════════════════════ */
/* Simple Products: wishlist + tag görünür yap (theme.css display:none override) */
.simple-products .product-grid-item__wishlist,
.simple-products .product-grid-item__tag {
display: block;
}
/* Ürün kartı — resim alanı arka plan */
.product-grid-item__image {
background-color: #f2f2f2;
}
/* Ürün kartı içeriği ortalı — ad, fiyat, renk swatchleri (tüm sayfalarda) */
.product-grid-item {
text-align: center;
}
/* Tablet (768-991px): Action butonları hover'a bağlı değil, her zaman görünür.
Tablet'te hover yok (touch ekran) → theme.css'in hover kuralı çalışmaz.
theme.css 3 katmanlı gizleme: display:none + visibility:hidden + opacity:0.
Üçünü de override ediyoruz. Mobilde (≤767px) butonlar gizli kalır → karta
dokunarak ürün detay sayfasına gider, beden seçimi orada yapılır. */
@media (min-width: 768px) and (max-width: 991px) {
.product-grid-item__action {
display: flex;
opacity: 1;
visibility: visible;
}
}
/* ═══════════════════════════════════════════
3. BİLEŞENLER — Yeniden kullanılabilir form bileşenleri
═══════════════════════════════════════════ */
/* --- bars-public-select: Native