/* ════════════════════════════════════════════════════════════════════ HT01 TEMA KATMANI — tek özel stil dosyası (6 Tem 2026 konsolidasyonu) İçerik: (1) modern bileşenler (htm-/fg- ekleri, unified oklar, toast) (2) tasarım sistemi (cm- tokenlar + bileşenler; eski adı cecotec-minimal — tema ht01 altında birleştirildi) Sıralama önemli: tokenlar bileşenlerden önce gelir. ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ CECOTEC MINIMAL — tasarım sistemi (F0) Kaynak dil: sepet cross-sell kartları (kullanıcı onaylı). Kurallar: gölge YOK (hover = cyan kenarlık + hafif kalkış), Montserrat, beyaz kanvas, ince çizgiler, tek vurgu rengi. Tüm sınıflar cm- önekli — legacy CSS kaskadından tamamen izole. ════════════════════════════════════════════════════════════════════ */ :root { /* Renk */ --cm-canvas: #ffffff; --cm-ink: #101418; --cm-text: #1d242b; --cm-muted: #9aa3ad; --cm-soft: #5a6570; --cm-brand: #00aacc; --cm-brand-deep: #008fab; --cm-accent: #e53e3e; --cm-line: #e2e8ee; /* belirgin kart çizgisi (revize: daha görünür) */ --cm-line-strong: #d7dfe6; --cm-blue-tint: #f5f9fc; /* hafif mavimsi beyaz (vitrin arka planı) */ --cm-tint: #f7f9fb; /* Biçim — radius sistemi: her bileşen sınıfı tek karardan */ --cm-r-card: 16px; /* ürün/görsel kartları */ --cm-r-cover: 20px; /* büyük medya kartları, paneller, vitrin */ --cm-r-ui: 12px; /* buton, input */ --cm-r-chip: 8px; /* rozet */ --cm-r-pill: 999px; /* hap: sekme, ok konteyneri, CTA pill */ /* Hareket — tek eğri, tek süre */ --cm-ease: cubic-bezier(.2, .6, .2, 1); --cm-fast: .18s; /* Ritim */ --cm-section: 84px; --cm-section-m: 54px; } /* ─── Bölüm iskeleti ─── */ .cm-section { padding: var(--cm-section) 0; background: var(--cm-canvas); } .cm-section + .cm-section { padding-top: 0; } .cm-section--tight { padding-bottom: 44px; } /* küme içi bölümler (ör. fırsatlar + son gezilenler) */ @media (max-width: 767px) { .cm-section--tight { padding-bottom: 30px; } } .cm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .cm-title { font-size: 21px; font-weight: 800; color: var(--cm-ink); letter-spacing: -.015em; margin: 0; line-height: 1.2; } .cm-sub { font-size: 13.5px; color: var(--cm-muted); margin: 5px 0 0; font-weight: 500; } .cm-nav { display: flex; gap: 8px; flex: 0 0 auto; } @media (max-width: 767px) { .cm-section { padding: var(--cm-section-m) 0; } .cm-title { font-size: 17px; } .cm-sub { font-size: 12px; } } /* ─── Ok (daire) ─── */ .cm-arrow { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1.5px solid var(--cm-line-strong); color: var(--cm-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, background .2s, color .2s; padding: 0; -webkit-tap-highlight-color: transparent; } .cm-arrow i { font-size: 13px; line-height: 1; } .cm-arrow:hover { background: var(--cm-brand); border-color: var(--cm-brand); color: #fff; } .cm-arrow:active { filter: brightness(.94); } .cm-arrow.swiper-button-disabled { opacity: .3; pointer-events: none; } @media (max-width: 767px) { .cm-arrow { width: 36px; height: 36px; } .cm-arrow i { font-size: 11px; } } /* ─── Ürün kartı (referans bileşen) ─── */ .cm-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-r-card); padding: 14px 12px 16px; text-align: center; text-decoration: none; height: 100%; transition: border-color var(--cm-fast) var(--cm-ease), transform var(--cm-fast) var(--cm-ease); } .cm-card:hover { border-color: rgba(0,170,204,.55); transform: translateY(-2px); } .cm-card .cm-chip { position: absolute; top: 10px; left: 10px; z-index: 2; } .cm-card img { width: 100%; aspect-ratio: 1/1; max-width: 150px; margin: 0 auto 10px; object-fit: contain; } .cm-card strong { font-size: 12.5px; color: var(--cm-text); font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 8px; flex: 1; } .cm-card .cm-now { font-size: 14.5px; font-weight: 800; color: var(--cm-brand); line-height: 1.25; font-variant-numeric: tabular-nums; } .cm-card .cm-old { font-size: 12px; color: var(--cm-muted); text-decoration: line-through; line-height: 1.25; } @media (max-width: 767px) { .cm-card img { max-width: 124px; } .cm-card strong { font-size: 11.5px; } .cm-card .cm-now { font-size: 13px; } } /* ─── Görsel kart (kategori/koleksiyon: görsel + altında ad) ─── */ .cm-tile { display: block; text-decoration: none; } .cm-tile .cm-tile-img { border: 1px solid var(--cm-line); border-radius: var(--cm-r-card); overflow: hidden; background: var(--cm-tint); transition: border-color .25s; } .cm-tile .cm-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; } .cm-tile:hover .cm-tile-img { border-color: rgba(0,170,204,.55); } .cm-tile:hover .cm-tile-img img { transform: scale(1.05); } .cm-tile .cm-tile-name { font-size: 13.5px; font-weight: 700; color: var(--cm-ink); margin: 11px 2px 0; line-height: 1.35; transition: color .2s; } .cm-tile:hover .cm-tile-name { color: var(--cm-brand); } @media (max-width: 767px) { .cm-tile .cm-tile-name { font-size: 12px; margin-top: 8px; } } /* ─── Çip / rozet ─── */ .cm-chip { display: inline-flex; align-items: center; background: var(--cm-accent); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: var(--cm-r-chip); padding: 4px 8px; line-height: 1; letter-spacing: .02em; } .cm-chip--ink { background: var(--cm-ink); } .cm-chip--brand { background: var(--cm-brand); } .cm-timer { display: inline-flex; align-items: center; gap: 7px; background: var(--cm-ink); color: #fff; border-radius: var(--cm-r-pill); padding: 7px 14px; font-size: 12.5px; font-weight: 700; } .cm-timer i { color: #4dd7ef; font-size: 12px; } .cm-timer span { font-variant-numeric: tabular-nums; } /* ─── Buton ─── */ .cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--cm-r-ui); padding: 12px 26px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; line-height: 1.2; } .cm-btn--brand { background: var(--cm-brand); color: #fff; } .cm-btn--brand:hover { background: var(--cm-brand-deep); color: #fff; transform: translateY(-1px); } .cm-btn--ink { background: var(--cm-ink); color: #fff; } .cm-btn--ink:hover { background: var(--cm-brand); color: #fff; } .cm-btn--ghost { background: #fff; color: var(--cm-ink); border: 1.5px solid var(--cm-line-strong); } .cm-btn--ghost:hover { border-color: var(--cm-ink); color: var(--cm-ink); } .cm-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--cm-brand); text-decoration: none; border: 1.5px solid var(--cm-brand); border-radius: var(--cm-r-pill); padding: 8px 18px; transition: all .2s; white-space: nowrap; } .cm-link:hover { background: var(--cm-brand); color: #fff; } .cm-link i { font-size: 10px; } /* ─── Sekmeler (segmented) ─── */ .cm-tabs-wrap { display: flex; justify-content: center; margin-bottom: 24px; } .cm-tabs { display: inline-flex; gap: 4px; background: #fff; border: 1.5px solid var(--cm-line-strong); border-radius: var(--cm-r-pill); padding: 4px; list-style: none; margin: 0; } .cm-tab { border: none; background: transparent; font-family: inherit; padding: 9px 20px; border-radius: var(--cm-r-pill); font-size: 13.5px; font-weight: 600; color: var(--cm-soft); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; } .cm-tab:hover { color: var(--cm-ink); } .cm-tab.on { background: var(--cm-ink); color: #fff; } .cm-tab:focus-visible { outline: 2px solid var(--cm-brand); outline-offset: 2px; } .cm-tabs-mob { display: none; } @media (max-width: 767px) { .cm-tabs-wrap { display: none; } .cm-tabs-mob { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1.5px solid var(--cm-line-strong); border-radius: var(--cm-r-pill); padding: 4px 6px; margin-bottom: 18px; } .cm-tabs-mob button { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--cm-tint); color: var(--cm-ink); font-size: 19px; line-height: 1; cursor: pointer; padding: 0; } .cm-tabs-mob button:active { background: var(--cm-ink); color: #fff; } .cm-tabs-mob .lbl { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--cm-ink); } } /* ─── Panel / girinti ─── */ .cm-panel { background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-r-cover); padding: 20px; } .cm-hairline { border: 0; border-top: 1px solid var(--cm-line); margin: 0; } /* ─── Form ─── */ .cm-input { width: 100%; border: 1.5px solid var(--cm-line-strong); border-radius: var(--cm-r-ui); padding: 12px 14px; font-size: 14px; color: var(--cm-ink); background: #fff; outline: none; transition: border-color .2s; } .cm-input:focus { border-color: var(--cm-brand); } .cm-input::placeholder { color: var(--cm-muted); } /* ─── Medya bandı (hero/garanti görselleri) ─── */ .cm-media { display: block; line-height: 0; } .cm-media img { width: 100%; height: auto; display: block; } .cm-media--rounded img { border-radius: var(--cm-r-card); } /* ─── Overlay kart (video/kampanya) ─── */ .cm-cover { position: relative; border-radius: var(--cm-r-cover); overflow: hidden; background: var(--cm-tint); } .cm-cover img, .cm-cover video { width: 100%; display: block; } .cm-cover .cm-cover-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: linear-gradient(to top, rgba(8,12,16,.72), transparent); } .cm-cover .cm-cover-title { color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; text-shadow: 0 1px 6px rgba(0,0,0,.45); } @media (max-width: 767px) { .cm-cover .cm-cover-body { padding: 16px; } .cm-cover .cm-cover-title { font-size: 1rem; } } /* ─── Bölünmüş vitrin: sol büyük medya + sağda 2 eşit kart (masaüstünde eşit yükseklik) ─── */ .cm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } .cm-split .cm-split-main { display: flex; } .cm-split .cm-split-main .cm-cover { flex: 1; display: flex; flex-direction: column; } @media (min-width: 992px) { .cm-split .cm-split-main .cm-cover { aspect-ratio: 4/3; } } /* yükseklik kaynağı: sol kart (çökme guard'ı) */ .cm-split .cm-split-main .cm-cover video { flex: 1; object-fit: cover; height: 100%; } .cm-split .cm-split-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-width: 0; } .cm-split .cm-split-side .cm-cover { height: 100%; } .cm-split .cm-split-side .cm-cover img { height: 100%; object-fit: cover; } @media (max-width: 991px) { .cm-split { grid-template-columns: 1fr; gap: 14px; } .cm-split .cm-split-main .cm-cover video { height: auto; } .cm-split .cm-split-side { grid-template-rows: none; gap: 14px; } .cm-split .cm-split-side .cm-cover img { height: 190px; } } /* ─── Swiper taşma güvenliği ─── */ .cm-swiper { overflow: hidden; } /* ─── Yardımcılar ─── */ .cm-only-d { display: block; } .cm-only-m { display: none; } @media (max-width: 767px) { .cm-only-d { display: none; } .cm-only-m { display: block; } } .cm-as-1x1 { aspect-ratio: 1/1; } .cm-as-4x3 { aspect-ratio: 4/3; } .cm-as-3x4 { aspect-ratio: 3/4; } .cm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 991px) { .cm-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ─── Vitrin bandı (görsel + içerik yan yana) ─── */ .cm-showcase { display: flex; border: 1.5px solid var(--cm-line-strong); border-radius: var(--cm-r-cover); overflow: hidden; margin-bottom: 20px; background: var(--cm-blue-tint); } .cm-showcase .cm-sc-img { flex: 0 0 42%; } .cm-showcase .cm-sc-img img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; display: block; } .cm-showcase .cm-sc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 26px 34px; } .cm-showcase .cm-sc-body h3 { font-size: 21px; font-weight: 800; color: var(--cm-ink); margin: 0; letter-spacing: -.01em; } .cm-showcase .cm-sc-body p { font-size: 13.5px; color: var(--cm-soft); font-weight: 500; line-height: 1.55; margin: 0; } @media (max-width: 767px) { .cm-showcase { flex-direction: column; } .cm-showcase .cm-sc-img img { min-height: 0; height: 180px; } .cm-showcase .cm-sc-body { align-items: center; text-align: center; padding: 18px 16px 20px; gap: 8px; } .cm-showcase .cm-sc-body h3 { font-size: 16.5px; } .cm-showcase .cm-sc-body p { font-size: 12.5px; } } /* ─── Odak halkaları (klavye erişimi — premium a11y) ─── */ .cm-arrow:focus-visible, .cm-btn:focus-visible, .cm-link:focus-visible, .cm-card:focus-visible, .cm-tile:focus-visible { outline: 2px solid var(--cm-brand); outline-offset: 2px; border-radius: inherit; } /* ─── Alt açıklama ölçüsü (okunabilir satır genişliği) ─── */ .cm-sub { max-width: 560px; } /* ─── Hareket azaltma tercihi ─── */ @media (prefers-reduced-motion: reduce) { .cm-card, .cm-tile .cm-tile-img img, .cm-btn, .cm-arrow { transition: none !important; } .cm-card:hover, .cm-btn--brand:hover { transform: none !important; } .cm-tile:hover .cm-tile-img img, .cm-card:hover { transform: none !important; } } /* ══════════════ (eski ht01-modern.css içeriği) ══════════════ */ /* ============================================================ ht01-modern.css — Cecotec TR modern bileşen seti (OC4) Namespace: .htm-* (legacy htstyle/vvsstyle ile çakışmaz) Marka: cyan #00AACC, koyu #14181d, Montserrat ============================================================ */ :root { --htm-brand: #00AACC; --htm-brand-dark: #0090ad; --htm-brand-soft: #e6f7fb; --htm-ink: #14181d; --htm-ink-2: #3d444d; --htm-muted: #6b7280; --htm-line: #e8ecef; --htm-bg: #f6f8fa; --htm-danger: #e53e3e; --htm-radius: 16px; --htm-radius-sm: 10px; --htm-shadow: 0 1px 2px rgba(20,24,29,.05); --htm-shadow-hover: 0 12px 28px rgba(20,24,29,.12); --htm-font: 'Montserrat', -apple-system, 'Segoe UI', sans-serif; } /* ---------- Breadcrumb ---------- */ .htm-breadcrumb { font-family: var(--htm-font); padding: 14px 0 6px; } .htm-breadcrumb ol { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; font-size: 13px; } .htm-breadcrumb ol::-webkit-scrollbar { display: none; } .htm-breadcrumb li { display: flex; align-items: center; gap: 10px; color: var(--htm-ink); font-weight: 600; } .htm-breadcrumb li + li::before { content: '/'; color: #c3c9cf; font-weight: 400; } .htm-breadcrumb a { color: var(--htm-muted); text-decoration: none; font-weight: 500; transition: color .15s; } .htm-breadcrumb a:hover { color: var(--htm-brand); } /* ---------- Kategori açıklaması (slider) taşma koruması ---------- */ .htm-category-desc { overflow: hidden; } .htm-category-desc img { max-width: 100%; height: auto; } /* ---------- Bölüm başlığı ---------- */ .htm-section { font-family: var(--htm-font); padding: 8px 0 40px; } .htm-title { font-family: var(--htm-font); font-size: 24px; font-weight: 800; color: var(--htm-ink); letter-spacing: -.02em; margin: 0; text-wrap: balance; } @media (min-width: 992px) { .htm-title { font-size: 28px; } } /* ---------- Alt kategori kartları ---------- */ .htm-subcats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; } .htm-subcats::-webkit-scrollbar { display: none; } @media (min-width: 992px) { .htm-subcats { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } } .htm-subcat { scroll-snap-align: start; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--htm-line); border-radius: var(--htm-radius); padding: 10px 14px; min-height: 76px; text-decoration: none; color: var(--htm-ink); box-shadow: var(--htm-shadow); transition: border-color .18s, box-shadow .18s, transform .18s; } .htm-subcat:hover { border-color: var(--htm-brand); box-shadow: var(--htm-shadow-hover); transform: translateY(-2px); color: var(--htm-ink); } .htm-subcat img { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; } .htm-subcat h6 { font-family: var(--htm-font); font-size: 13.5px; font-weight: 700; margin: 0; line-height: 1.35; } /* ---------- Kontrol barı (filtre / başlık / sırala) ---------- */ .htm-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 18px; } .htm-controls .htm-title { flex: 1; text-align: center; } @media (max-width: 991.98px) { .htm-controls { flex-wrap: wrap; } .htm-controls .htm-title { flex: 1 0 100%; order: -1; text-align: left; padding-bottom: 10px; } } .htm-btn-filter { display: inline-flex; align-items: center; gap: 8px; font-family: var(--htm-font); font-size: 14px; font-weight: 600; color: var(--htm-ink); background: #fff; border: 1px solid var(--htm-line); border-radius: 999px; padding: 10px 18px; min-height: 44px; text-decoration: none; transition: border-color .15s, background .15s; } .htm-btn-filter:hover { border-color: var(--htm-brand); color: var(--htm-brand); } /* Sırala dropdown */ .htm-sort { position: relative; font-family: var(--htm-font); } .htm-sort-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--htm-ink); background: #fff; border: 1px solid var(--htm-line); border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; transition: border-color .15s; } .htm-sort-btn:hover { border-color: var(--htm-brand); } .htm-sort-btn .htm-chev { transition: transform .18s; font-size: 11px; color: var(--htm-muted); } .htm-sort.open .htm-sort-btn { border-color: var(--htm-brand); } .htm-sort.open .htm-chev { transform: rotate(180deg); } .htm-sort-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; z-index: 1050; background: #fff; border: 1px solid var(--htm-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(20,24,29,.14); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; } .htm-sort.open .htm-sort-menu { opacity: 1; visibility: visible; transform: translateY(0); } .htm-sort-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--htm-ink-2); border-radius: 9px; padding: 10px 12px; cursor: pointer; transition: background .12s, color .12s; } .htm-sort-item:hover { background: var(--htm-bg); color: var(--htm-ink); } .htm-sort-item.active { color: var(--htm-brand); font-weight: 700; } .htm-sort-item.active::after { content: '✓'; font-size: 13px; } /* ---------- Ürün grid + kart ---------- */ .htm-grid { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; } @media (min-width: 768px) { .htm-grid { --bs-gutter-x: 1.1rem; --bs-gutter-y: 1.1rem; } } .htm-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--htm-line); border-radius: var(--htm-radius); box-shadow: var(--htm-shadow); overflow: hidden; font-family: var(--htm-font); transition: border-color .18s, box-shadow .18s, transform .18s; } .htm-card:hover { border-color: #d5dbe1; box-shadow: var(--htm-shadow-hover); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .htm-card, .htm-card:hover, .htm-subcat:hover { transition: none; transform: none; } } .htm-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--htm-brand); border-radius: 999px; padding: 5px 10px; } .htm-badge--soldout { background: var(--htm-danger); } .htm-card-media { position: relative; aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; } .htm-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s ease; } .htm-card:hover .htm-card-media img { transform: scale(1.04); } .htm-card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--htm-line); } .htm-card-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; margin: 0; min-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .htm-card-title a { color: var(--htm-ink); text-decoration: none; } .htm-card-title a:hover { color: var(--htm-brand); } .htm-card-title a::after { content: ''; position: absolute; inset: 0; } .htm-price { display: flex; flex-direction: column; gap: 2px; margin-top: auto; } .htm-price-now { font-size: 17px; font-weight: 800; color: var(--htm-ink); font-variant-numeric: tabular-nums; } .htm-price-old { font-size: 13px; font-weight: 500; color: var(--htm-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; } .htm-price--deal .htm-price-now { color: var(--htm-danger); } .htm-card-actions { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; } .htm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--htm-font); font-size: 13.5px; font-weight: 700; border-radius: 12px; padding: 11px 14px; min-height: 44px; cursor: pointer; text-decoration: none; text-align: center; transition: background .15s, color .15s, border-color .15s; border: 1px solid transparent; width: 100%; } .htm-btn--primary { background: var(--htm-ink); color: #fff; } .htm-btn--primary:hover { background: var(--htm-brand); color: #fff; } .htm-btn--primary:disabled { opacity: .65; cursor: default; } .htm-btn--ghost { background: #fff; color: var(--htm-ink); border-color: var(--htm-line); } .htm-btn--ghost:hover { border-color: var(--htm-brand); color: var(--htm-brand); } .htm-btn--brand { background: var(--htm-brand); color: #fff; } .htm-btn--brand:hover { background: var(--htm-brand-dark); color: #fff; } /* Stokta yok durumu */ .htm-card--soldout .htm-card-media img { filter: grayscale(1); opacity: .55; } .htm-card--soldout .htm-price-now { color: var(--htm-muted); } .htm-card--soldout .htm-btn--primary { background: #ced4da; color: #495057; cursor: default; } /* ---------- Sayfalama ---------- */ .htm-pagination { display: flex; justify-content: center; padding: 26px 0 6px; font-family: var(--htm-font); } .htm-pagination .pagination { gap: 6px; margin: 0; } .htm-pagination .page-link { border: 1px solid var(--htm-line); border-radius: 12px !important; color: var(--htm-ink); font-weight: 600; font-size: 14px; min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s, background .15s; } .htm-pagination .page-link:hover { border-color: var(--htm-brand); color: var(--htm-brand); background: #fff; box-shadow: none; } .htm-pagination .page-item.active .page-link { background: var(--htm-ink); border-color: var(--htm-ink); color: #fff; } .htm-results { text-align: center; font-size: 12.5px; color: var(--htm-muted); font-family: var(--htm-font); padding-bottom: 8px; } /* ---------- Boş durum ---------- */ .htm-empty { text-align: center; padding: 60px 16px; font-family: var(--htm-font); } .htm-empty p { color: var(--htm-muted); font-size: 15px; margin-bottom: 18px; } .htm-empty .htm-btn { width: auto; } /* ---------- Sepet başarı modalı ---------- */ .htm-modal { position: fixed; inset: 0; z-index: 100001; display: none; font-family: var(--htm-font); } .htm-modal.show { display: block; } .htm-modal-overlay { position: absolute; inset: 0; background: rgba(15,18,22,.55); backdrop-filter: blur(2px); } .htm-modal-content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100vw - 32px)); background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.25); padding: 26px 24px 22px; animation: htmModalIn .22s ease; } @media (max-width: 575.98px) { .htm-modal-content { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); animation: htmSheetIn .25s ease; } } @keyframes htmModalIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes htmSheetIn { from { transform: translateY(40px); opacity: .6; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .htm-modal-content { animation: none; } } .htm-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--htm-bg); color: var(--htm-ink); font-size: 18px; line-height: 1; cursor: pointer; } .htm-modal-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; } .htm-modal-head h3 { font-size: 16.5px; font-weight: 800; color: var(--htm-ink); margin: 0; } .htm-check { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--htm-brand-soft); display: flex; align-items: center; justify-content: center; } .htm-check svg { width: 24px; height: 24px; stroke: var(--htm-brand); stroke-width: 3; fill: none; stroke-dasharray: 30; stroke-dashoffset: 30; animation: htmCheck .45s .15s ease forwards; } @keyframes htmCheck { to { stroke-dashoffset: 0; } } .htm-modal-product { display: flex; gap: 14px; align-items: center; background: var(--htm-bg); border-radius: 14px; padding: 12px; } .htm-modal-product img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 10px; flex: 0 0 auto; } .htm-modal-product h4 { font-size: 13.5px; font-weight: 600; color: var(--htm-ink); margin: 0 0 4px; } .htm-modal-product .htm-mp-price { font-size: 14px; font-weight: 800; color: var(--htm-ink); margin: 0; } .htm-modal-total { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--htm-ink-2); padding: 14px 4px 16px; } .htm-modal-total strong { color: var(--htm-ink); font-variant-numeric: tabular-nums; } .htm-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .htm-modal-actions .htm-btn--ghost { grid-column: 1 / -1; } /* ---------- Filtre offcanvas ---------- */ .htm-filter-canvas { font-family: var(--htm-font); } .htm-filter-canvas .offcanvas-header { border-bottom: 1px solid var(--htm-line); } .htm-filter-canvas .offcanvas-title { font-weight: 800; font-size: 16px; color: var(--htm-ink); } /* ============================================================ ANA SAYFA ============================================================ */ .htm-home-section { padding: 26px 0 8px; font-family: var(--htm-font); } .htm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; } /* Kampanya banner */ .htm-hero-banner { padding: 14px 0 6px; } .htm-hero-banner a { display: block; border-radius: var(--htm-radius); overflow: hidden; box-shadow: var(--htm-shadow); } .htm-hero-banner img { display: block; width: 100%; height: auto; } /* Kategori vitrin tile'ları */ .htm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 576px) { .htm-tiles { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .htm-tiles { grid-template-columns: repeat(4, 1fr); gap: 14px; } } .htm-tile { position: relative; display: block; border-radius: var(--htm-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--htm-bg); text-decoration: none; box-shadow: var(--htm-shadow); } .htm-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .htm-tile:hover img { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .htm-tile img, .htm-tile:hover img { transition: none; transform: none; } } .htm-tile span { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 26px 14px 12px; font-family: var(--htm-font); font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(10,14,18,.78), rgba(10,14,18,0)); } /* En Çok Satanlar showcase */ .htm-showcase-nav { display: flex; gap: 8px; } .htm-nav-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--htm-line); background: #fff; color: var(--htm-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, color .15s; } .htm-nav-btn:hover { border-color: var(--htm-brand); color: var(--htm-brand); } .htm-nav-btn:disabled, .htm-nav-btn.swiper-button-disabled { opacity: .4; cursor: default; } .htm-show-card { display: block; border-radius: var(--htm-radius); overflow: hidden; background: #fff; border: 1px solid var(--htm-line); box-shadow: var(--htm-shadow); text-decoration: none; color: var(--htm-ink); height: 100%; transition: box-shadow .18s, transform .18s; } .htm-show-card:hover { box-shadow: var(--htm-shadow-hover); transform: translateY(-3px); color: var(--htm-ink); } .htm-show-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .htm-show-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .htm-show-body h3 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.01em; } .htm-show-body p { font-size: 13px; color: var(--htm-muted); margin: 0 0 8px; } .htm-show-body .htm-btn { width: auto; padding: 9px 18px; min-height: 40px; font-size: 13px; } /* Öne çıkan ürünler (featured modül çıktısını modernize et) */ .htm-home-products #content h3, .htm-home-products h3 { font-family: var(--htm-font); font-size: 24px; font-weight: 800; color: var(--htm-ink); letter-spacing: -.02em; padding-bottom: 14px; margin: 0; } @media (min-width: 992px) { .htm-home-products #content h3, .htm-home-products h3 { font-size: 28px; } } /* ============================================================ ÜRÜN DETAY ============================================================ */ .htm-product { padding: 6px 0 10px; font-family: var(--htm-font); } .htm-product-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 992px) { .htm-product-grid { grid-template-columns: minmax(0, 54%) minmax(0, 1fr); gap: 38px; align-items: start; } } /* Galeri */ .htm-gallery { position: relative; } .htm-gallery .htm-badge { top: 14px; left: 14px; } .htm-gallery-main { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--htm-line); border-radius: var(--htm-radius); aspect-ratio: 1 / 1; padding: 22px; overflow: hidden; cursor: zoom-in; } .htm-gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; } .htm-gallery--soldout img { filter: grayscale(1); opacity: .6; } .htm-gallery-thumbs { display: flex; gap: 8px; padding-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .htm-gallery-thumbs::-webkit-scrollbar { display: none; } .htm-gthumb { flex: 0 0 auto; width: 68px; height: 68px; padding: 6px; background: #fff; border: 1px solid var(--htm-line); border-radius: 12px; cursor: pointer; transition: border-color .15s; } .htm-gthumb img { width: 100%; height: 100%; object-fit: contain; } .htm-gthumb.active, .htm-gthumb:hover { border-color: var(--htm-brand); } /* Satın alma paneli */ .htm-buy { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .htm-buy-title { font-size: 22px; font-weight: 800; color: var(--htm-ink); letter-spacing: -.02em; line-height: 1.3; margin: 0; text-wrap: balance; } @media (min-width: 992px) { .htm-buy-title { font-size: 26px; } } .htm-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--htm-muted); font-weight: 500; } .htm-meta a { color: var(--htm-brand); text-decoration: none; font-weight: 600; } .htm-meta i { font-size: 8px; vertical-align: 2px; margin-right: 4px; } .htm-meta-in { color: #16a34a; font-weight: 600; } .htm-meta-out { color: var(--htm-danger); font-weight: 600; } .htm-rating { display: flex; align-items: center; gap: 3px; font-size: 14px; color: #f5a623; } .htm-rating a { font-size: 12.5px; color: var(--htm-muted); margin-left: 8px; text-decoration: none; } .htm-rating a:hover { color: var(--htm-brand); } .htm-buy-price { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--htm-bg); border-radius: 14px; } .htm-buy-now { font-size: 28px; font-weight: 800; color: var(--htm-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .htm-price--deal .htm-buy-now { color: var(--htm-danger); } .htm-buy-old { font-size: 15px; color: var(--htm-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; } .htm-buy-tax { font-size: 12px; color: var(--htm-muted); } .htm-discounts { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--htm-ink-2); } .htm-discounts li { padding: 2px 0; } .htm-opts .form-label { font-family: var(--htm-font); font-size: 13px; font-weight: 700; color: var(--htm-ink); } .htm-opts .form-select, .htm-opts .form-control { border-radius: 12px; border-color: var(--htm-line); font-family: var(--htm-font); font-size: 14px; padding: 10px 14px; } .htm-opts .form-select:focus, .htm-opts .form-control:focus { border-color: var(--htm-brand); box-shadow: 0 0 0 3px rgba(0,170,204,.15); } .htm-opts-title { font-size: 15px; font-weight: 800; color: var(--htm-ink); margin: 0 0 10px; } .htm-buy-row { display: flex; gap: 10px; align-items: stretch; } .htm-qty { display: inline-flex; align-items: center; border: 1px solid var(--htm-line); border-radius: 12px; background: #fff; overflow: hidden; flex: 0 0 auto; } .htm-qty-btn { width: 42px; min-height: 48px; border: 0; background: transparent; font-size: 18px; color: var(--htm-ink); cursor: pointer; transition: background .12s; } .htm-qty-btn:hover { background: var(--htm-bg); } .htm-qty-input { width: 44px; border: 0; text-align: center; font-family: var(--htm-font); font-weight: 700; font-size: 15px; color: var(--htm-ink); outline: none; } .htm-buy-btn { flex: 1; min-height: 48px; font-size: 15px; } .htm-note { font-size: 12.5px; color: var(--htm-muted); padding-top: 8px; } .htm-note i { color: var(--htm-brand); } .htm-buy-extra { display: flex; gap: 8px; } .htm-mini-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--htm-font); font-size: 12.5px; font-weight: 600; color: var(--htm-ink-2); background: #fff; border: 1px solid var(--htm-line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: border-color .15s, color .15s; } .htm-mini-btn:hover { border-color: var(--htm-brand); color: var(--htm-brand); } .htm-buy-perks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; font-size: 12px; color: var(--htm-muted); font-weight: 500; } .htm-buy-perks i { color: var(--htm-brand); margin-right: 5px; } /* Açıklama + bölüm başlıkları */ .htm-prose-wrap { padding: 30px 0 8px; } .htm-prose-head { padding-bottom: 16px; } .htm-prose { overflow: hidden; } .htm-prose img { max-width: 100%; height: auto; } /* Teknik özellikler */ .htm-specs { padding: 26px 0 8px; font-family: var(--htm-font); } .htm-specs-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 768px) { .htm-specs-grid { grid-template-columns: repeat(2, 1fr); } } .htm-specs-card { background: #fff; border: 1px solid var(--htm-line); border-radius: var(--htm-radius); padding: 18px 20px; } .htm-specs-card h6 { font-size: 13px; font-weight: 800; color: var(--htm-brand); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; } .htm-specs-card dl { margin: 0; } .htm-specs-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--htm-bg); font-size: 13.5px; } .htm-specs-card dl > div:last-child { border-bottom: 0; } .htm-specs-card dt { color: var(--htm-muted); font-weight: 500; } .htm-specs-card dd { margin: 0; color: var(--htm-ink); font-weight: 600; text-align: right; } /* Değerlendirmeler + ilgili ürünler */ .htm-reviews { padding: 26px 0 8px; font-family: var(--htm-font); } .htm-related { padding: 26px 0 8px; font-family: var(--htm-font); } .htm-related h3 { font-family: var(--htm-font); font-size: 24px; font-weight: 800; color: var(--htm-ink); letter-spacing: -.02em; padding-bottom: 14px; margin: 0; } /* Mobil sabit satın alma barı */ .htm-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; align-items: center; gap: 12px; background: #fff; border-top: 1px solid var(--htm-line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(20,24,29,.08); font-family: var(--htm-font); } .htm-stickybar-price { display: flex; flex-direction: column; line-height: 1.2; flex: 0 0 auto; } .htm-stickybar-price strong { font-size: 16px; color: var(--htm-ink); font-variant-numeric: tabular-nums; } .htm-stickybar-price s { font-size: 12px; color: var(--htm-muted); } .htm-stickybar .htm-btn { flex: 1; min-height: 46px; } @media (max-width: 991.98px) { body:has(.htm-stickybar) { padding-bottom: 76px; } } /* Avantaj stripi */ .htm-perks { background: var(--htm-bg); margin-top: 34px; padding: 26px 0; font-family: var(--htm-font); } .htm-perks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } @media (min-width: 992px) { .htm-perks-grid { grid-template-columns: repeat(4, 1fr); } } .htm-perk { display: flex; align-items: flex-start; gap: 12px; } .htm-perk i { font-size: 20px; color: var(--htm-brand); margin-top: 2px; } .htm-perk h6 { font-size: 13.5px; font-weight: 700; color: var(--htm-ink); margin: 0 0 2px; } .htm-perk p { font-size: 12px; color: var(--htm-muted); margin: 0; line-height: 1.4; } /* ---------- Toast bölgesi (çekirdek common.js alert'leri) ---------- */ .htm-toast-region { position: fixed; top: 14px; right: 14px; z-index: 100002; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 28px)); font-family: var(--htm-font); } .htm-toast-region .alert { border: 1px solid var(--htm-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20,24,29,.14); font-size: 13.5px; padding: 12px 40px 12px 14px; margin: 0; background: #fff; color: var(--htm-ink); animation: htmModalIn .2s ease; position: relative; } .htm-toast-region .alert-success { border-left: 4px solid #16a34a; } .htm-toast-region .alert-danger { border-left: 4px solid var(--htm-danger); } .htm-toast-region .alert .btn-close { position: absolute; top: 10px; right: 10px; } /* ============================================================ URUN SAYFASI POLISH (fg- scope, OC3 gorunumune premium dokunus) ============================================================ */ #fg-product-detail, .fg-product-detail-tabs, .fg-similar-products-section, .fg-recently-viewed-section { font-family: 'Montserrat', sans-serif; } /* Sekme nav: mobilde yatay kaydirma, dokunma hedefleri */ .fg-product-detail-tab-nav { gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .fg-product-detail-tab-nav::-webkit-scrollbar { display: none; } .fg-product-detail-tab-button { white-space: nowrap; font-family: 'Montserrat', sans-serif; font-weight: 600; } /* Sekme icerigi: kart hissi */ .fg-product-detail-tab-content { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 28px 22px; margin-top: 16px; } .fg-product-detail-tab-title { font-weight: 800; letter-spacing: -.02em; } /* Aciklama tipografisi (sekme ici duz metin) */ #description-short, #description-full { font-size: 14.5px; line-height: 1.75; color: #3d444d; } #description-short p, #description-full p { margin-bottom: 12px; } #read-more-btn { border-radius: 10px; font-weight: 600; font-size: 13.5px; padding: 10px 22px; } /* Ozellik maddeleri: onay ikonlu */ .fg-features { list-style: none; padding: 0; margin: 0 0 6px; } .fg-features > li { position: relative; padding: 5px 0 5px 26px; font-size: 13.5px; line-height: 1.55; color: #3d444d; } .fg-features > li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free','FontAwesome'; font-weight: 900; position: absolute; left: 0; top: 6px; font-size: 12px; color: #00AACC; } /* Yorum formu: premium kart */ .fg-review-form-box { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 22px; } .fg-review-form-heading { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .fg-review-form-heading i { color: #00AACC; } .fg-form-control { border-radius: 10px !important; border: 1.5px solid #e0e0e0 !important; font-size: 14px; } .fg-form-control:focus { border-color: #00AACC !important; box-shadow: none !important; } .fg-form-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; } .fg-btn-submit-review { background: #1a1a1a; color: #fff; border-radius: 10px; font-weight: 600; padding: 11px 24px; } .fg-btn-submit-review:hover { background: #00AACC; color: #fff; } /* Yorum listesi (cekirdek review.list ciktisi) */ .fg-reviews-list .table { border: 0; } .fg-reviews-list .table td { border: 0; padding: 14px 16px; background: #f8f9fa; border-radius: 12px; font-size: 13.5px; } .fg-reviews-list .table tr { display: block; margin-bottom: 10px; } .fg-reviews-list p.text-center { color: #888; font-size: 14px; padding: 8px 0; } /* Benzer / son goruntulenen kartlari */ .fg-rec-product-card { border: 1px solid #ececec; border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; height: 100%; } .fg-rec-product-card:hover { box-shadow: 0 12px 28px rgba(20,24,29,.10); transform: translateY(-3px); } .fg-rec-product-btn { border-radius: 10px; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .fg-rec-product-card, .fg-rec-product-card:hover { transition: none; transform: none; } } /* ============================================================ HESAP SAYFALARI (tum account/* — id^=account- kapsayici) ============================================================ */ [id^="account-"].container { font-family: 'Montserrat', sans-serif; padding-top: 10px; padding-bottom: 60px; } [id^="account-"] h1 { font-size: 24px; font-weight: 800; color: #14181d; letter-spacing: -.02em; margin-bottom: 20px; } [id^="account-"] h2 { font-size: 17px; font-weight: 700; color: #14181d; margin: 22px 0 12px; } [id^="account-"] .breadcrumb { font-size: 13px; padding: 12px 0 6px; } [id^="account-"] .breadcrumb a { color: #6b7280; text-decoration: none; font-weight: 500; } [id^="account-"] .breadcrumb a:hover { color: #00AACC; } [id^="account-"] .breadcrumb-item.active, [id^="account-"] .breadcrumb li:last-child a { color: #14181d; font-weight: 600; } /* Formlar: kart */ [id^="account-"] #content > form, [id^="account-"] #content fieldset { background: #fff; border: 1px solid #e8ecef; border-radius: 16px; padding: 24px; margin-bottom: 16px; } [id^="account-"] #content fieldset { border: 1px solid #e8ecef !important; } [id^="account-"] #content > form fieldset { border: 0 !important; padding: 0; margin-bottom: 8px; background: transparent; } [id^="account-"] legend { font-size: 16px; font-weight: 800; border: 0; margin-bottom: 14px; } [id^="account-"] .form-label { font-size: 12.5px; font-weight: 700; color: #3d444d; text-transform: uppercase; letter-spacing: .03em; } [id^="account-"] .form-control, [id^="account-"] .form-select { border-radius: 10px; border: 1.5px solid #e0e0e0; font-size: 14px; padding: 11px 14px; font-family: 'Montserrat', sans-serif; box-shadow: none; } [id^="account-"] .form-control:focus, [id^="account-"] .form-select:focus { border-color: #00AACC; box-shadow: 0 0 0 3px rgba(0,170,204,.12); } /* Butonlar */ [id^="account-"] .btn-primary { background: #14181d; border: 0; border-radius: 12px; font-weight: 700; font-size: 14px; padding: 12px 28px; min-height: 46px; } [id^="account-"] .btn-primary:hover { background: #00AACC; } [id^="account-"] .btn-light { border-radius: 10px; border: 1.5px solid #ddd; font-weight: 600; background: #fff; } [id^="account-"] .btn-light:hover { border-color: #14181d; } /* Tablolar (sipariş listesi vb.) */ [id^="account-"] .table { background: #fff; font-size: 13.5px; } [id^="account-"] .table thead td, [id^="account-"] .table thead th { background: #f6f8fa; border: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; padding: 12px; } [id^="account-"] .table tbody td { border-color: #f0f2f4; padding: 12px; vertical-align: middle; } [id^="account-"] .table-responsive { background: #fff; border: 1px solid #e8ecef; border-radius: 14px; padding: 6px; } /* Login iki kolon kartları */ #account-login .col-sm-6 > div, #account-login .well { background: #fff; border: 1px solid #e8ecef; border-radius: 16px; padding: 24px; height: 100%; } /* Hesabım panel kartları */ .fg-acc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 576px) { .fg-acc-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .fg-acc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } .fg-acc-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e8ecef; border-radius: 16px; padding: 18px; text-decoration: none; color: #14181d; transition: border-color .18s, box-shadow .18s, transform .18s; } .fg-acc-card:hover { border-color: #00AACC; box-shadow: 0 12px 28px rgba(20,24,29,.10); transform: translateY(-2px); color: #14181d; } .fg-acc-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: #e9f5fa; color: #00AACC; display: flex; align-items: center; justify-content: center; font-size: 18px; } .fg-acc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fg-acc-body strong { font-size: 14px; font-weight: 700; } .fg-acc-body small { font-size: 12px; color: #6b7280; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .fg-acc-card, .fg-acc-card:hover { transition: none; transform: none; } } /* ============================================================ BILGI-ILETISIM SAYFALARI (information/* ) ============================================================ */ #information-information.container, #information-contact.container, #information-sitemap.container { font-family: 'Montserrat', sans-serif; padding-top: 10px; padding-bottom: 60px; max-width: 1000px; } #information-information h1, #information-contact h1 { font-size: 26px; font-weight: 800; color: #14181d; letter-spacing: -.02em; margin-bottom: 18px; } #information-information #content { background: #fff; border: 1px solid #e8ecef; border-radius: 16px; padding: 30px; font-size: 14.5px; line-height: 1.8; color: #3d444d; } #information-information #content h2, #information-information #content h3 { color: #14181d; font-weight: 700; margin: 18px 0 10px; } #information-information #content p { margin-bottom: 12px; } #information-contact form, #information-contact .card { background: #fff; border: 1px solid #e8ecef; border-radius: 16px; padding: 24px; } #information-contact .form-control { border-radius: 10px; border: 1.5px solid #e0e0e0; font-size: 14px; padding: 11px 14px; } #information-contact .form-control:focus { border-color: #00AACC; box-shadow: 0 0 0 3px rgba(0,170,204,.12); } #information-contact .btn-primary { background: #14181d; border: 0; border-radius: 12px; font-weight: 700; padding: 12px 28px; } #information-contact .btn-primary:hover { background: #00AACC; } /* ============================================================ FIRSAT-VIDEO-DIGER (ana sayfa v2 + success/404/arama) ============================================================ */ .htm-deals-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .htm-deals-timer { display: inline-flex; align-items: center; gap: 7px; background: #fdecec; color: #e53e3e; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 7px 14px; font-variant-numeric: tabular-nums; } .htm-deal-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--htm-line); border-radius: var(--htm-radius); overflow: hidden; text-decoration: none; color: var(--htm-ink); transition: box-shadow .18s, transform .18s; } .htm-deal-card:hover { box-shadow: var(--htm-shadow-hover); transform: translateY(-3px); color: var(--htm-ink); } .htm-deal-card .htm-badge { background: var(--htm-danger); } .htm-deal-media { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 14px; background: #fff; } .htm-deal-media img { max-width: 100%; max-height: 100%; object-fit: contain; } .htm-deal-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-top: 1px solid var(--htm-line); flex: 1; } .htm-deal-body strong { font-size: 13px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.8em; } /* Video vitrin */ .htm-video-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 992px) { .htm-video-grid { grid-template-columns: 2fr 1fr; gap: 14px; } } .htm-video-card { position: relative; border-radius: var(--htm-radius); overflow: hidden; background: #000; min-height: 280px; } .htm-video-card video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/9; } .htm-video-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 22px; background: linear-gradient(to top, rgba(5,8,12,.75), transparent); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .htm-video-overlay h3 { color: #fff; font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.01em; } .htm-video-overlay .htm-btn { width: auto; padding: 10px 20px; min-height: 42px; font-size: 13px; } .htm-video-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (min-width: 992px) { .htm-video-side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .htm-video-side .htm-tile { aspect-ratio: auto; height: 100%; } } /* Sipariş başarı + 404 + arama */ #common-success.container, #error-not-found.container, #product-search.container { font-family: 'Montserrat', sans-serif; padding-top: 10px; padding-bottom: 60px; } #common-success h1, #error-not-found h1, #product-search h1 { font-size: 24px; font-weight: 800; color: #14181d; letter-spacing: -.02em; } #common-success #content { background: #fff; border: 1px solid #e8ecef; border-radius: 16px; padding: 34px; text-align: center; max-width: 640px; margin: 20px auto; font-size: 14.5px; line-height: 1.7; } #common-success #content h1::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; display: block; font-size: 44px; color: #16a34a; margin-bottom: 12px; } #common-success .btn-primary, #error-not-found .btn-primary { background: #14181d; border: 0; border-radius: 12px; font-weight: 700; padding: 12px 30px; } #common-success .btn-primary:hover, #error-not-found .btn-primary:hover { background: #00AACC; } #error-not-found #content { text-align: center; padding: 50px 20px; } #product-search .form-control, #product-search .form-select { border-radius: 10px; border: 1.5px solid #e0e0e0; font-family: 'Montserrat', sans-serif; } #product-search .btn-primary { background: #14181d; border: 0; border-radius: 10px; font-weight: 700; } /* ═══════════════════════════════════════════════════════════ FG UNIFIED SLIDER ARROWS (site geneli — galeri, benzer ürünler, yorumlar; ana sayfa okları aynı dili home.twig'de kullanır) ═══════════════════════════════════════════════════════════ */ .fg-slider-arrow, .fg-rv-arrow { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.94) !important; color: #1a1a1a !important; border: 1px solid rgba(17, 17, 17, 0.08) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; z-index: 10 !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s !important; user-select: none; -webkit-tap-highlight-color: transparent; } /* Swiper bundle'ın kendi ok/ikonunu tamamen kapat (çift ok fix) */ .fg-slider-arrow:after, .fg-rv-arrow:after { content: none !important; display: none !important; } .fg-slider-arrow svg.swiper-navigation-icon, .fg-rv-arrow svg.swiper-navigation-icon { display: none !important; } .fg-slider-arrow i, .fg-rv-arrow i { font-size: 15px !important; line-height: 1 !important; } .fg-slider-arrow:hover, .fg-rv-arrow:hover { background: #00aacc !important; border-color: #00aacc !important; color: #fff !important; box-shadow: 0 6px 22px rgba(0, 170, 204, 0.35) !important; } .fg-slider-arrow:active, .fg-rv-arrow:active { filter: brightness(.93); } .fg-slider-arrow.swiper-button-disabled, .fg-rv-arrow.swiper-button-disabled { opacity: .3 !important; pointer-events: none !important; } .swiper-button-lock { display: none !important; } /* Galeri ana görsel okları: kenardan nefes payı */ #fg-main-prev { left: 14px !important; } #fg-main-next { right: 14px !important; } #fg-thumb-prev { left: 4px !important; } #fg-thumb-next { right: 4px !important; } @media (max-width: 767px) { .fg-slider-arrow, .fg-rv-arrow { width: 38px !important; height: 38px !important; } .fg-slider-arrow i, .fg-rv-arrow i { font-size: 13px !important; } #fg-main-prev { left: 8px !important; } #fg-main-next { right: 8px !important; } } /* ═══ Gölge temizliği (istek: ok kenar gölgeleri + kart hover gölgesi kötü) ═══ */ .fg-slider-arrow, .fg-rv-arrow { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: #e3e7eb !important; } .fg-slider-arrow:hover, .fg-rv-arrow:hover { box-shadow: none !important; } .fg-rec-product-card { box-shadow: none !important; border: 1px solid #edf0f3 !important; } .fg-rec-product-card:hover { box-shadow: none !important; transform: translateY(-2px) !important; border-color: rgba(0,170,204,.55) !important; } /* Benzer / son gezilen — mobil polish */ @media (max-width: 575px) { .fg-rec-product-card { border-radius: 12px !important; } .fg-rec-product-name { font-size: 12px !important; line-height: 1.35 !important; } .fg-rec-price-current { font-size: 13px !important; } .fg-rec-price-old { font-size: 11px !important; } .fg-rec-product-btn { font-size: 12px !important; padding: 8px 10px !important; border-radius: 10px !important; } .fg-rec-product-info { padding: 10px !important; gap: 6px !important; } .fg-section-title { font-size: 18px !important; } .fg-section-title i { font-size: 15px !important; } } /* ═══ Masaüstünde alt bar yok → body alt padding kaldır (footer altı boşluk fix) ═══ */ @media (min-width: 992px) { body.scrolled-past-bottom-fixed { padding-bottom: 0 !important; } } /* ════════════════════════════════════════════════════════════════════ FOUC ÖNLEMİ — Swiper init olana dek slaytlar dikey yığılmasın: yatay şerit iskeleti (init sonrası Swiper kendi inline stillerini basar). ════════════════════════════════════════════════════════════════════ */ /* yalnız çok-slaytlı LİSTE şeritleri — ürün galerisi (tek slayt) HARİÇ, yoksa galeri görselleri init öncesi 272px'e sıkışıp üst üste biniyordu */ #fg-homecat-swiper:not(.swiper-initialized) .swiper-wrapper, #fg-deals-swiper:not(.swiper-initialized) .swiper-wrapper, #fg-offer-swiper:not(.swiper-initialized) .swiper-wrapper, #fg-discover-swiper:not(.swiper-initialized) .swiper-wrapper, #cm-homerv-swiper:not(.swiper-initialized) .swiper-wrapper, #fg-cartdeals-swiper:not(.swiper-initialized) .swiper-wrapper, #fg-cartrv-swiper:not(.swiper-initialized) .swiper-wrapper, .fg-similar-products-swiper:not(.swiper-initialized) .swiper-wrapper, .fg-recently-viewed-swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; } #fg-homecat-swiper:not(.swiper-initialized) .swiper-slide, #fg-deals-swiper:not(.swiper-initialized) .swiper-slide, #fg-offer-swiper:not(.swiper-initialized) .swiper-slide, #fg-discover-swiper:not(.swiper-initialized) .swiper-slide, #cm-homerv-swiper:not(.swiper-initialized) .swiper-slide, #fg-cartdeals-swiper:not(.swiper-initialized) .swiper-slide, #fg-cartrv-swiper:not(.swiper-initialized) .swiper-slide, .fg-similar-products-swiper:not(.swiper-initialized) .swiper-slide, .fg-recently-viewed-swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 auto; width: 272px; margin-right: 14px; } @media (max-width: 767px) { #fg-homecat-swiper:not(.swiper-initialized) .swiper-slide, #fg-deals-swiper:not(.swiper-initialized) .swiper-slide, #fg-offer-swiper:not(.swiper-initialized) .swiper-slide, #fg-discover-swiper:not(.swiper-initialized) .swiper-slide, #cm-homerv-swiper:not(.swiper-initialized) .swiper-slide, #fg-cartdeals-swiper:not(.swiper-initialized) .swiper-slide, #fg-cartrv-swiper:not(.swiper-initialized) .swiper-slide, .fg-similar-products-swiper:not(.swiper-initialized) .swiper-slide, .fg-recently-viewed-swiper:not(.swiper-initialized) .swiper-slide { width: 46vw; margin-right: 10px; } } /* ════════════ (taşındı: template/checkout/cart.twig) ════════════ */ /* SEPET SAYFASI — eski (canlı 1:1) editorial tasarım; mobil rötuşlu. */ .fg-cart-page { padding: 40px 0 80px; background: #f8f9fa; min-height: 60vh; } .fg-cart-page .container { max-width: 1100px; } .fg-cart-header { margin-bottom: 32px; } .fg-cart-header h1 { font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0; letter-spacing: -0.02em; } .fg-cart-header .fg-cart-count { font-size: 15px; color: #888; font-weight: 400; margin-left: 8px; } .fg-cart-items { background: #fff; border-radius: 14px; border: 1px solid #e8e8e8; overflow: hidden; margin-bottom: 24px; } .fg-cart-item { display: grid; grid-template-columns: 100px 1fr auto auto; align-items: center; gap: 22px; padding: 28px; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; } .fg-cart-item:last-child { border-bottom: none; } .fg-cart-item:hover { background: #fafbfc; } .fg-cart-item-image { width: 100px; height: 100px; border-radius: 10px; overflow: hidden; background: #f5f5f5; flex-shrink: 0; } .fg-cart-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .fg-cart-item-info { min-width: 0; } .fg-cart-item-name { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; line-height: 1.4; } .fg-cart-item-name a { color: inherit; text-decoration: none; transition: color 0.2s; } .fg-cart-item-name a:hover { color: #00AACC; } .fg-cart-item-model { font-size: 12px; color: #999; margin-bottom: 6px; } .fg-cart-item-options { font-size: 12px; color: #777; line-height: 1.5; } .fg-cart-item-stock-warning { display: inline-block; background: #fff0f0; color: #e53935; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin-top: 4px; } .fg-cart-qty { display: flex; align-items: center; gap: 6px; } .fg-cart-qty-input { width: 52px; height: 40px; text-align: center; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-weight: 600; color: #333; outline: none; transition: border-color 0.2s; -moz-appearance: textfield; background: #fff; pointer-events: none; } .fg-cart-qty-input:focus { border-color: #00AACC; } .fg-cart-qty-input::-webkit-outer-spin-button, .fg-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fg-cart-qty-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 13px; padding: 0; } .fg-cart-qty-remove { background: #fff0f0; color: #e53935; } .fg-cart-qty-remove:hover { background: #e53935; color: #fff; } .fg-cart-qty-step { background: #f0f2f4; color: #1a1a1a; font-size: 20px; font-weight: 700; line-height: 1; user-select: none; } .fg-cart-qty-step:hover { background: #1a1a1a; color: #fff; } .fg-cart-item-total { text-align: right; font-size: 16px; font-weight: 700; color: #1a1a1a; min-width: 110px; } .fg-cart-modules { background: #fff; border-radius: 14px; border: 1px solid #e8e8e8; padding: 32px; margin-bottom: 24px; } .fg-cart-modules h2 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; } .fg-cart-modules > p { font-size: 14px; color: #888; margin-bottom: 20px; } .fg-cart-modules .accordion-item { border: 1px solid #eee !important; border-radius: 10px !important; margin-bottom: 10px !important; overflow: hidden !important; background: #fff !important; } .fg-cart-modules .accordion-button { background-color: #fff !important; color: #1a1a1a !important; font-size: 14px !important; font-weight: 600 !important; padding: 14px 18px !important; box-shadow: none !important; border-radius: 0 !important; } .fg-cart-modules .accordion-button:not(.collapsed) { background-color: #fff !important; color: #1a1a1a !important; box-shadow: none !important; border-bottom: 1px solid #eee !important; } .fg-cart-modules .accordion-button::after { filter: brightness(0) !important; } .fg-cart-modules .accordion-body { padding: 18px !important; background: #fff !important; } .fg-cart-totals-wrapper { display: flex; justify-content: flex-end; margin-bottom: 32px; } .fg-cart-totals { background: #fff; border-radius: 14px; border: 1px solid #e8e8e8; padding: 28px 32px; min-width: 340px; } .fg-cart-total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #555; } .fg-cart-total-row:last-child { border-bottom: none; padding-top: 14px; margin-top: 4px; border-top: 2px solid #1a1a1a; font-size: 18px; font-weight: 700; color: #1a1a1a; } .fg-cart-total-label { font-weight: 600; } .fg-cart-total-value { text-align: right; } .fg-cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; } .fg-cart-btn-continue { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: #fff; color: #1a1a1a; border: 1.5px solid #ddd; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; } .fg-cart-btn-continue:hover { border-color: #1a1a1a; color: #1a1a1a; text-decoration: none; } .fg-cart-btn-checkout { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; background: #1a1a1a; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.25s; } .fg-cart-btn-checkout:hover { background: #00AACC; color: #fff; text-decoration: none; } .fg-cart-table-header { display: grid; grid-template-columns: 100px 1fr auto auto; gap: 20px; padding: 14px 24px; background: #fafbfc; border-bottom: 1px solid #e8e8e8; font-size: 12px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; } .fg-cart-th-right { text-align: right; } @media (max-width: 991px) { .fg-cart-item { grid-template-columns: 80px 1fr auto; gap: 14px; padding: 20px; } .fg-cart-item-total { grid-column: 3; grid-row: 1 / 3; align-self: center; } .fg-cart-qty { grid-column: 2 / 4; } .fg-cart-table-header { display: none; } .fg-cart-totals { min-width: 280px; } } @media (max-width: 576px) { .fg-cart-page { padding: 24px 0 64px; } .fg-cart-header { margin-bottom: 18px; } .fg-cart-header h1 { font-size: 22px; display: flex; flex-direction: column; gap: 4px; } .fg-cart-header .fg-cart-count { margin-left: 0; font-size: 14px; } .fg-cart-item { display: grid; grid-template-columns: 80px 1fr; grid-template-areas: "image info" "qty qty" "total total"; gap: 14px; padding: 20px; } .fg-cart-item-image { grid-area: image; width: 80px; height: 80px; } .fg-cart-item-info { grid-area: info; } .fg-cart-item-name { font-size: 13.5px; } .fg-cart-qty { grid-area: qty; margin-top: 8px; } .fg-cart-qty-btn { width: 44px; height: 44px; } .fg-cart-qty-input { width: 56px; height: 44px; } .fg-cart-item-total { grid-area: total; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f0f0f0; margin-top: 4px; min-height: 40px; font-size: 15px; } .fg-cart-item-total::before { content: 'Tutar'; font-size: 13px; font-weight: 500; color: #888; } .fg-cart-totals-wrapper { justify-content: stretch; } .fg-cart-totals { width: 100%; min-width: unset; } .fg-cart-actions { flex-direction: column-reverse; gap: 12px; } .fg-cart-btn-continue, .fg-cart-btn-checkout { width: 100%; justify-content: center; min-height: 50px; } .fg-cart-modules { padding: 24px 20px; } } /* ════════════ (taşındı: template/product/allproducts.twig) ════════════ */ .fg-catgrid { padding: 24px 0 40px; } .fg-catgrid-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 991px) { .fg-catgrid-row { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (max-width: 575px) { .fg-catgrid { overflow: hidden; } .fg-catgrid-row { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; } .fg-catgrid-row::-webkit-scrollbar { display: none; } .fg-catgrid-row .fg-catgrid-item { flex: 0 0 44vw; min-width: 44vw; scroll-snap-align: start; } } .fg-catgrid-item { position: relative; display: block; border-radius: 16px; overflow: hidden; text-decoration: none; background: #111; aspect-ratio: 3/4; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: transform 0.25s, box-shadow 0.25s; } .fg-catgrid-item:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); text-decoration: none; } .fg-catgrid-img { position: absolute; inset: 0; } .fg-catgrid-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; opacity: 0.85; } .fg-catgrid-item:hover .fg-catgrid-img img { transform: scale(1.06); } .fg-catgrid-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, transparent 100%); } .fg-catgrid-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 16px; font-size: 17px; font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(0,0,0,0.4); } @media (max-width: 575px) { .fg-catgrid-item { border-radius: 12px; } .fg-catgrid-name { font-size: 14px; padding: 14px 12px; } } .fgcat-pagination { display: flex; justify-content: center; padding: 8px 0 4px; } .fgcat-pagination .page-link { border-radius: 10px !important; margin: 0 3px; color: #1a1a1a; font-weight: 600; border-color: #e8e8e8; } .fgcat-pagination .page-item.active .page-link { background: #1a1a1a; border-color: #1a1a1a; } .fg-pagination-info { text-align: center; font-size: 13px; color: #888; padding: 4px 0 40px; } /* ════════════ (taşındı: template/product/category.twig) ════════════ */ .fgcat-product-badge { background: #00AACC !important; color: #fff !important; border-color: #00AACC !important; font-weight: 700 !important; } .fgcat-product-badge.bg-danger { background: #e53e3e !important; border-color: #e53e3e !important; color: #fff !important; } .fgcat-product-price { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; margin-bottom: 14px !important; } .fgcat-price-current { display: block !important; white-space: nowrap !important; font-size: 18px !important; font-weight: 800 !important; color: #5C0F1A !important; line-height: 1.2 !important; } .fgcat-price-old { display: block !important; white-space: nowrap !important; font-size: 15px !important; color: #6b7480 !important; font-weight: 600 !important; text-decoration: line-through !important; text-decoration-color: #e5484d !important; text-decoration-thickness: 2px !important; line-height: 1.2 !important; } @media (max-width: 767px) { .fgcat-price-current { font-size: 15px !important; } .fgcat-price-old { font-size: 13px !important; } } @media (max-width: 575px) { .fgcat-price-current { font-size: 13px !important; } .fgcat-price-old { font-size: 11px !important; } .fgcat-product-body { padding: 10px !important; } .fgcat-product-price { margin-bottom: 8px !important; } } /* Sayfalama (tek sayfada görünmez; çok sayfada zarif) */ .fgcat-pagination { display: flex; justify-content: center; padding: 24px 0 4px; } .fgcat-pagination .page-link { border-radius: 10px !important; margin: 0 3px; color: #1a1a1a; font-weight: 600; border-color: #e8e8e8; transition: border-color .18s var(--cat-ease), color .18s var(--cat-ease), background-color .18s var(--cat-ease); -webkit-tap-highlight-color: transparent; } .fgcat-pagination .page-item.active .page-link { background: #1a1a1a; border-color: #1a1a1a; } /* [FG 14 Ağu] Sayfalamanın hover'ı YOKTU (Bootstrap varsayılanı gri dolgu basıyordu — tema dışı). Arşivin geri kalanıyla aynı dil: saç teli marka kenarlığı + marka metin, zemin beyaz kalır. */ @media (hover: hover) and (pointer: fine) { .fgcat-pagination .page-item:not(.active) .page-link:hover { border-color: var(--cat-border-hover) !important; color: var(--cat-primary) !important; background: #fff !important; } } .fgcat-pagination .page-link:focus-visible { outline: 2px solid var(--cat-primary); outline-offset: 2px; box-shadow: none !important; } /* ═══ Filtre offcanvas — premium panel ═══ */ .canvas-filter { width: 340px !important; max-width: 88vw; border: none; box-shadow: 8px 0 40px rgba(0,0,0,.12); } .canvas-filter .canvas-wrapper { display: flex; flex-direction: column; height: 100%; } .canvas-filter .canvas-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eef0f3; } .canvas-filter .canvas-header .title { font-size: 18px; font-weight: 800; color: #111; margin: 0; } .canvas-filter .canvas-header .icon-close-popup { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f2f4f7; color: #333; cursor: pointer; transition: background .2s, color .2s; font-size: 15px; } .canvas-filter .canvas-header .icon-close-popup:hover { background: #00aacc; color: #fff; } .canvas-filter .canvas-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; } .canvas-filter .canvas-body .list-group { display: flex; flex-direction: column; gap: 8px; border: none; border-radius: 0; margin: 0 0 14px; } .canvas-filter .canvas-body .list-group-item { border: 1px solid #e8ebef !important; border-radius: 12px !important; padding: 12px 14px; font-size: 14px; font-weight: 600; color: #333; background: #fff; text-decoration: none; transition: border-color .2s, color .2s, background .2s; display: flex; align-items: center; } .canvas-filter .canvas-body .list-group-item:hover { border-color: #00aacc !important; color: #00aacc; } .canvas-filter .canvas-body .list-group-item.active { background: #eaf8fb; border-color: #00aacc !important; color: #007b94; } .canvas-filter .canvas-body .card, .canvas-filter .canvas-body .card-header { border: none; background: transparent; padding-left: 0; padding-right: 0; } .canvas-filter .canvas-body h5, .canvas-filter .canvas-body .card-header { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #8a919c; margin: 6px 0 10px; } .canvas-filter .canvas-body .form-check { padding: 9px 12px 9px 38px; border: 1px solid #e8ebef; border-radius: 12px; margin-bottom: 8px; transition: border-color .2s; } .canvas-filter .canvas-body .form-check:hover { border-color: #00aacc; } .canvas-filter .canvas-body .form-check-input { margin-left: -26px; } .canvas-filter .canvas-body #button-filter, .canvas-filter .canvas-body .btn-primary { width: 100%; background: #00aacc; border-color: #00aacc; border-radius: 12px; font-weight: 700; padding: 11px; } /* ════════════ (taşındı: template/common/header.twig) ════════════ */ :root { --fgrootcolor: #333; } /* Anti-FOUC: Hide elements instantly before Bootstrap/JS loads */ .fg-desktop-cmenu a[href*="servis-noktalari"] { display: none !important; } @media (max-width: 991.98px) { .fg-desktop-cmenu { display: none !important; } .fg-desktop-header-search-form { display: none !important; } } /* ════════════ (taşındı: template/common/header.twig) ════════════ */ .fg-account-menu { position: relative; } .fg-account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: #fff; border: 1px solid #eef0f2; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 100000; } .fg-account-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .fg-account-menu:hover .fg-account-dropdown, .fg-account-menu:focus-within .fg-account-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .fg-account-dropdown a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1a1f26; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .fg-account-dropdown a:hover { background: #f4f6f8; color: #00aacc; } .fg-account-dropdown a.fg-account-logout { color: #e53e3e; margin-top: 6px; padding-top: 12px; border-top: 1px solid #f0f2f4; border-radius: 0; } .fg-account-dropdown a.fg-account-logout:hover { background: #fdecec; color: #e53e3e; } /* ═══ Mini-sepet (hover önizleme — masaüstü) ═══ */ .fg-header-cart-wrap { position: relative; } .fg-minicart { position: absolute; top: calc(100% + 10px); right: -8px; width: 370px; background: #fff; border: 1px solid #e8ebef; border-radius: 16px; box-shadow: 0 18px 50px rgba(16,20,24,.16); padding: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 10050; display: none; } .fg-minicart::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } @media (min-width: 992px) { .fg-minicart { display: block; } .fg-header-cart-wrap:hover .fg-minicart, .fg-header-cart-wrap:focus-within .fg-minicart { opacity: 1; visibility: visible; transform: translateY(0); } } .fg-minicart-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid #f0f2f4; font-weight: 800; font-size: 15px; color: #101418; } .fg-minicart-count { font-size: 12.5px; font-weight: 600; color: #7c8692; } .fg-minicart-items { max-height: 320px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; } .fg-minicart-item { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; transition: background .15s; } .fg-minicart-item:hover { background: #f7f9fb; } .fg-minicart-img { flex: 0 0 54px; } .fg-minicart-img img { width: 54px; height: 54px; object-fit: contain; border-radius: 10px; border: 1px solid #eef1f4; background: #fff; display: block; } .fg-minicart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fg-minicart-name { font-size: 12.5px; font-weight: 600; color: #1d242b; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .fg-minicart-name:hover { color: #00aacc; } .fg-minicart-opt { font-size: 11px; color: #9aa3ad; } .fg-minicart-qty { font-size: 12px; color: #7c8692; } .fg-minicart-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .fg-minicart-total { font-size: 13px; font-weight: 800; color: #101418; white-space: nowrap; } .fg-minicart-remove { width: 24px; height: 24px; border: none; border-radius: 50%; background: #f2f4f7; color: #7c8692; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s; padding: 0; } .fg-minicart-remove:hover { background: #fdecec; color: #e53e3e; } .fg-minicart-totals { border-top: 1px solid #f0f2f4; padding: 12px 18px 4px; } .fg-minicart-total-row { display: flex; justify-content: space-between; font-size: 13px; color: #5a6570; padding: 3px 0; } .fg-minicart-grand { font-weight: 800; color: #101418; font-size: 14.5px; padding-top: 6px; } .fg-minicart-actions { display: flex; gap: 10px; padding: 14px 18px 18px; } .fg-minicart-btn { flex: 1; text-align: center; padding: 11px 10px; border-radius: 12px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: all .2s; line-height: 1.2; } .fg-minicart-btn-outline { border: 1.5px solid #d6dbe1; color: #1d242b; } .fg-minicart-btn-outline:hover { border-color: #101418; color: #101418; } .fg-minicart-btn-solid { background: #00aacc; color: #fff; } .fg-minicart-btn-solid:hover { background: #008fab; color: #fff; } .fg-minicart-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 18px; color: #9aa3ad; } .fg-minicart-empty p { margin: 0; font-size: 13.5px; font-weight: 600; } .fg-minicart-empty .fg-minicart-btn { flex: none; width: 100%; } .fg-mobile-menu-links a.fg-mobile-logout { color: #e53e3e !important; font-weight: 700; } /* ════════════ (birleşik: category_premium.css — fgcat kart/liste sistemi) ════════════ */ /* ═══════════════════════════════════════════════════════════════ PREMIUM CATEGORY PAGE — Cecotec Brand Design System Clean, Minimalist, Professional with #00aacc accent ═══════════════════════════════════════════════════════════════ */ /* ─── 1. DESIGN TOKENS ─── */ :root { --cat-primary: #00aacc; --cat-primary-hover: #0097b2; --cat-primary-light: rgba(0, 170, 204, 0.06); --cat-primary-shadow: rgba(0, 170, 204, 0.18); --cat-dark: #1a1a1a; --cat-dark-hover: #111; --cat-text: #333; --cat-text-muted: #777; --cat-bg: #fff; --cat-bg-subtle: #f8f9fa; --cat-border: #eaeaea; --cat-border-light: #f0f0f0; --cat-radius: 14px; --cat-radius-sm: 10px; /* [FG 14 Ağu] KATMANLI GÖLGE SİSTEMİ — arşiv sayfası hover'larının temeli. ESKİSİ: tek katman `0 12px 32px rgba(0,0,0,.1)`. Tek katmanlı büyük-bulanık gölge kartın ÇEVRESİNE eşit yayılıp köşelerde görünür bir hale/kenar bırakıyordu ("gölgenin köşeleri belli oluyor"). YENİSİ: 3 katman + NEGATİF yayılım (spread) — küçük katman temas çizgisini, orta katman gövdeyi, büyük katman ortam ışığını verir; negatif spread büyük katmanı şeklin dibinde tutar → köşe izi YOK, yükseklik fiziksel okunur (Apple/Dyson elevation mantığı). RENK NÖTR mürekkep (#101828 tonu): markalı cyan glow "neon/yapay" duruyordu. Marka rengi hover'da yalnız SAÇ TELİ kenarlıkta ve metinde kullanılır — tek vurgu, dağınık değil. */ --cat-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px -1px rgba(16, 24, 40, .04); --cat-shadow-hover: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 18px -8px rgba(16, 24, 40, .07), 0 26px 44px -20px rgba(16, 24, 40, .13); --cat-shadow-soft: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 16px -8px rgba(16, 24, 40, .07), 0 18px 30px -18px rgba(16, 24, 40, .10); /* Hover kenarlığı: kart dinlenirken de kenarlıklı → hover'da RENK değişir, KAYBOLMAZ (eski `border-color:transparent` kenarı bir anda yok edip 1px "sıçrama" yaratıyordu). */ --cat-border-hover: rgba(0, 170, 204, .38); /* Tek yumuşama eğrisi: hızlı çıkış + yumuşak oturma (iOS "ease-out" hissi). */ --cat-ease: cubic-bezier(.22, .61, .36, 1); --cat-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --cat-price-color: #5C0F1A; } /* ═══════════════════════════════════════════════════════════════ 2. BREADCRUMB — Refined ═══════════════════════════════════════════════════════════════ */ .fg-product-detail-breadcrumb { background: var(--cat-bg) !important; border-bottom: 1px solid var(--cat-border-light); padding: 16px 0 !important; } .fg-product-detail-breadcrumb ol { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 13px; font-family: var(--cat-font); } .fg-product-detail-breadcrumb ol li { display: flex; align-items: center; gap: 8px; color: var(--cat-text-muted); } .fg-product-detail-breadcrumb ol li a { color: var(--cat-text-muted); text-decoration: none; transition: color 0.2s; } .fg-product-detail-breadcrumb ol li a:hover { color: var(--cat-primary); } /* Breadcrumb separator — do not add extra, theme already has one */ .fg-product-detail-breadcrumb ol li:not(:last-child)::after { display: none; } .fg-product-detail-breadcrumb ol li:last-child { color: var(--cat-dark); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ 3. SECTION HEADER ═══════════════════════════════════════════════════════════════ */ .fgcat-section { background-color: var(--cat-bg) !important; padding: 48px 0 0 0 !important; } .fgcat-section-title { font-family: var(--cat-font) !important; font-size: 32px !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 16px !important; color: var(--cat-dark) !important; letter-spacing: -0.02em !important; } /* ═══════════════════════════════════════════════════════════════ 4. SUBCATEGORY GRID — Premium Cards ═══════════════════════════════════════════════════════════════ */ .fgsubcat-list { padding: 40px 0 60px 0 !important; } .fgsubcat-list .row { row-gap: 16px !important; } .fg-gray-subcat { background: var(--cat-bg) !important; border: 1.5px solid var(--cat-border) !important; border-radius: var(--cat-radius) !important; padding: 24px !important; min-height: 120px !important; /* `all` yerine SAYILI özellik: `all` yazı rengi/arka plan dahil her şeyi animasyonlar, tarayıcı gereksiz katman hesaplar ve geçiş "sulanır". */ transition: transform .26s var(--cat-ease), box-shadow .26s var(--cat-ease), border-color .26s var(--cat-ease) !important; align-items: center !important; gap: 16px !important; box-shadow: var(--cat-shadow) !important; -webkit-tap-highlight-color: transparent; } /* [FG 14 Ağu] ESKİSİ AYNI ANDA 5 ŞEY DEĞİŞTİRİYORDU: cyan kenarlık + cyan zemin dolgusu + cyan GLOW gölge + zıplama + %8 ikon büyümesi. Sonuç "neon/AI" görünümü ve hover'ın seçili durumdan ayırt edilememesi. YENİSİ tek vurgu ilkesi: zemin BEYAZ kalır (dolgu = seçili durumun işi), gölge NÖTR katmanlı, marka rengi yalnız saç teli kenarlıkta + başlıkta. */ @media (hover: hover) and (pointer: fine) { .fg-gray-subcat:hover { border-color: var(--cat-border-hover) !important; box-shadow: var(--cat-shadow-soft) !important; transform: translateY(-2px); } .fg-gray-subcat:hover img { transform: scale(1.04); } } .fg-gray-subcat img { width: 80px !important; height: 80px !important; object-fit: contain !important; flex-shrink: 0; transition: transform .3s var(--cat-ease); } .fg-gray-subcat h6 { color: var(--cat-dark) !important; font-family: var(--cat-font) !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.4 !important; margin: 0 !important; transition: color 0.2s; } @media (hover: hover) and (pointer: fine) { .fg-gray-subcat:hover h6 { color: var(--cat-primary) !important; } } /* ═══════════════════════════════════════════════════════════════ 5. SHOP CONTROLS — Filter & Sort Bar ═══════════════════════════════════════════════════════════════ */ .fgcat-shop-control { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 32px !important; padding: 16px 24px !important; background: var(--cat-bg) !important; border: 1px solid var(--cat-border) !important; border-radius: var(--cat-radius) !important; flex-wrap: wrap !important; } .fgcat-btn-filter { display: inline-flex !important; align-items: center !important; gap: 10px !important; border: 1.5px solid var(--cat-border) !important; border-radius: 999px !important; padding: 10px 20px !important; font-family: var(--cat-font) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--cat-dark) !important; text-decoration: none !important; transition: border-color .2s var(--cat-ease), color .2s var(--cat-ease), background-color .2s var(--cat-ease), box-shadow .2s var(--cat-ease) !important; background: var(--cat-bg) !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .fgcat-btn-filter:hover { border-color: var(--cat-border-hover) !important; color: var(--cat-primary) !important; background: var(--cat-primary-light) !important; box-shadow: var(--cat-shadow) !important; } } .fgcat-btn-filter .fa { font-size: 13px !important; } /* Sort Dropdown */ .fgcat-dropdown-sort { position: relative !important; border: 1.5px solid var(--cat-border) !important; border-radius: var(--cat-radius-sm) !important; padding: 0 !important; background: var(--cat-bg) !important; transition: border-color .2s var(--cat-ease), box-shadow .2s var(--cat-ease) !important; } /* Filtrele butonuyla AYNI dil (ikisi de aynı kontrol çubuğunda yan yana duruyor). */ @media (hover: hover) and (pointer: fine) { .fgcat-dropdown-sort:hover, .fgcat-dropdown-sort.open { border-color: var(--cat-border-hover) !important; box-shadow: var(--cat-shadow) !important; } } .fgcat-dropdown-sort .btn-select { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 10px 18px !important; border-radius: var(--cat-radius-sm) !important; background: var(--cat-bg) !important; color: var(--cat-dark) !important; min-width: 200px !important; cursor: pointer !important; font-family: var(--cat-font) !important; font-weight: 600 !important; font-size: 14px !important; border: none !important; } .fgcat-dropdown-sort .text-sort-value { font-family: var(--cat-font) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--cat-dark) !important; } /* Dropdown kapalıyken gizle, .open class'ı ile göster */ .fgcat-dropdown-sort .dropdown-menu { display: none !important; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; margin-top: 4px !important; border-radius: var(--cat-radius-sm) !important; border: 1px solid var(--cat-border) !important; box-shadow: var(--cat-shadow-hover) !important; padding: 8px !important; min-width: 220px !important; z-index: 99999 !important; background: var(--cat-bg) !important; } .fgcat-dropdown-sort.open .dropdown-menu { display: block !important; } .fgcat-dropdown-sort .select-item { padding: 10px 14px !important; border-radius: 8px !important; font-family: var(--cat-font) !important; font-weight: 500 !important; font-size: 14px !important; color: var(--cat-text) !important; transition: all 0.15s ease !important; } .fgcat-dropdown-sort .select-item:hover, .fgcat-dropdown-sort .select-item:focus { background: var(--cat-primary-light) !important; color: var(--cat-primary) !important; } .fgcat-dropdown-sort .select-item.active { background: var(--cat-primary) !important; color: #fff !important; } .fgcat-control-sorting p.h6 { font-family: var(--cat-font) !important; font-weight: 500 !important; font-size: 14px !important; color: var(--cat-text-muted) !important; } /* ═══════════════════════════════════════════════════════════════ 6. PRODUCT CARD — Premium Design (matching recently viewed) ═══════════════════════════════════════════════════════════════ */ .fgcat-product-card { background: var(--cat-bg) !important; border-radius: var(--cat-radius) !important; overflow: hidden !important; transition: transform .28s var(--cat-ease), box-shadow .28s var(--cat-ease), border-color .28s var(--cat-ease) !important; height: 100% !important; display: flex !important; flex-direction: column !important; padding: 0 !important; box-shadow: var(--cat-shadow) !important; border: 1px solid var(--cat-border-light) !important; /* Dokunmada tarayıcının gri flaş katmanını kaldır (tema dışı görünüyor). */ -webkit-tap-highlight-color: transparent; } /* [FG 14 Ağu] HOVER YALNIZ GERÇEK İMLEÇTE. Dokunmatikte :hover TAKILI KALIR (parmak kalktıktan sonra kart havada asılı durur, geri dönmek için başka yere dokunmak gerekir) — mobilde "bozuk" görünmenin ana sebebi buydu. `hover:hover + pointer:fine` = fare/trackpad; telefon/tablet bu bloğu HİÇ okumaz. */ @media (hover: hover) and (pointer: fine) { .fgcat-product-card:hover { /* -6px fazla "zıplatıyordu"; -4px + doğru gölge daha ağır/premium bir yükselme verir. */ transform: translateY(-4px) !important; box-shadow: var(--cat-shadow-hover) !important; border-color: var(--cat-border-hover) !important; } } /* [FG 14 Ağu] Kartta TIKLAMA/BASMA EFEKTİ YOK (kullanıcı kararı: kart tıklanınca küçülmesin). Geri bildirim zaten hover + sayfa geçişiyle veriliyor; ölçek animasyonu fazlaydı. */ /* Badge */ .fgcat-product-badge { position: absolute !important; top: 16px !important; left: 16px !important; background: #00AACC !important; color: #fff !important; padding: 5px 14px !important; border-radius: 999px !important; font-family: var(--cat-font) !important; font-size: 12px !important; font-weight: 700 !important; border: 1px solid #00AACC !important; z-index: 2 !important; letter-spacing: 0.02em !important; } .fgcat-product-badge.bg-danger { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fca5a5 !important; } /* Image */ .fgcat-product-image { position: relative !important; width: 100% !important; padding-top: 100% !important; background: var(--cat-bg) !important; overflow: hidden !important; border-bottom: 1px solid var(--cat-border-light) !important; } .fgcat-product-image img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 24px !important; transition: transform .5s var(--cat-ease) !important; } @media (hover: hover) and (pointer: fine) { /* 1.06 → 1.04: ürün fotoğrafı kırpılmadan "yaklaşır"; büyük ölçek ucuz banner efekti gibi duruyordu. */ .fgcat-product-card:hover .fgcat-product-image img { transform: scale(1.04) !important; } } /* Body */ .fgcat-product-body { padding: 20px 24px 24px !important; flex-grow: 1 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } /* Title — max 2 lines (line-clamp applied via inline style in template) */ .fgcat-product-title { font-family: var(--cat-font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--cat-dark) !important; margin-bottom: 12px !important; line-height: 1.5 !important; text-align: left !important; min-height: 45px !important; overflow: hidden !important; } .fgcat-product-title a { color: inherit !important; text-decoration: none !important; transition: color 0.2s !important; } @media (hover: hover) and (pointer: fine) { .fgcat-product-card:hover .fgcat-product-title a { color: var(--cat-primary) !important; } } /* Description — HIDDEN */ .fgcat-product-desc { display: none !important; } /* Price — left aligned, stacked */ .fgcat-product-price { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; margin-bottom: 18px !important; /* İndirimli/indirimsiz ürünlerde fiyat satırı yüksekliğini eşitle: eski fiyat satırı opsiyonel olduğundan, iki satırlık alan (güncel + üzeri çizili) hep rezerve edilir → kartlar satırlar arasında da aynı yükseklikte kalır. */ min-height: 42px !important; } .fgcat-price-current { font-family: var(--cat-font) !important; font-size: 18px !important; font-weight: 800 !important; color: var(--cat-price-color) !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } .fgcat-price-old { font-family: var(--cat-font) !important; font-size: 14px !important; color: #999 !important; text-decoration: line-through !important; line-height: 1.2 !important; } /* Actions — blue primary button */ .fgcat-product-actions { display: flex !important; gap: 10px !important; } .fgcat-product-actions .btn { flex: 1 !important; padding: 11px 16px !important; font-family: var(--cat-font) !important; font-size: 13px !important; font-weight: 600 !important; border-radius: var(--cat-radius-sm) !important; transition: background-color .2s var(--cat-ease), border-color .2s var(--cat-ease), color .2s var(--cat-ease), box-shadow .2s var(--cat-ease) !important; letter-spacing: 0.01em !important; /* Dokunmada 300ms tıklama gecikmesini kaldırır + tarayıcı gri flaşını kapatır. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .fgcat-product-actions .btn.btn-dark { background: var(--cat-primary) !important; border-color: var(--cat-primary) !important; color: #fff !important; } @media (hover: hover) and (pointer: fine) { .fgcat-product-actions .btn.btn-dark:hover { background: var(--cat-primary-hover) !important; border-color: var(--cat-primary-hover) !important; /* Kartın kendisi zaten yükseliyor; butonun da zıplaması iki katmanlı hareket = huzursuz. Buton yalnızca RENK koyulaşır + markalı gölgeyle "basılabilir" hissi verir. */ box-shadow: 0 2px 6px -1px var(--cat-primary-shadow), 0 8px 16px -6px var(--cat-primary-shadow) !important; } .fgcat-product-actions .fgcat-btn-outline:hover { border-color: var(--cat-border-hover) !important; color: var(--cat-primary) !important; background: var(--cat-primary-light) !important; } } .fgcat-product-actions .fgcat-btn-outline { background: var(--cat-bg) !important; color: var(--cat-dark) !important; border: 1.5px solid var(--cat-border) !important; } /* Klavye erişilebilirliği: fare hover'ı taklit etmek yerine net bir odak halkası (.cm-arrow standardıyla aynı: 2px marka + 2px boşluk). */ .fgcat-product-actions .btn:focus-visible, .fgcat-btn-filter:focus-visible, .fg-gray-subcat:focus-visible, .fgcat-product-title a:focus-visible { outline: 2px solid var(--cat-primary) !important; outline-offset: 2px !important; border-radius: var(--cat-radius-sm); } /* [FG 14 Ağu] Hareket azaltma tercihi — arşiv bileşenleri (sitedeki .cm-* konvansiyonunun eşi). Sistemde "hareketi azalt" açıksa yükselme/ölçekleme yapılmaz; RENK ve GÖLGE geri bildirimi kalır → kullanıcı yine hangi kartın üzerinde olduğunu görür, erişilebilirlik kaybı olmaz. */ @media (prefers-reduced-motion: reduce) { .fgcat-product-card, .fgcat-product-image img, .fg-gray-subcat, .fg-gray-subcat img, .fgcat-product-actions .btn, .fgcat-btn-filter, .fgcat-dropdown-sort, .fgcat-pagination .page-link { transition: none !important; } .fgcat-product-card:hover, .fgcat-product-card:hover .fgcat-product-image img, .fg-gray-subcat:hover, .fg-gray-subcat:hover img { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ 7. OUT OF STOCK OVERLAY ═══════════════════════════════════════════════════════════════ */ .outofstock .fgcat-product-image img { opacity: 0.4 !important; filter: grayscale(0.6); } .outofstock .fgcat-product-actions .btn.btn-dark { background: #ddd !important; border-color: #ddd !important; color: #999 !important; cursor: not-allowed !important; pointer-events: none; } /* Hide the duplicate outofstock-class img tag in the template */ .fgcat-product-image img.outofstock { display: none !important; } /* ═══════════════════════════════════════════════════════════════ 8. PRODUCT LISTING CONTAINER — Match filter bar width ═══════════════════════════════════════════════════════════════ */ /* Make the product grid container match .container width */ .container-fluid.py-30 { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 12px 60px !important; background-color: var(--cat-bg) !important; } .container-fluid.py-30 > .row { margin: 0 !important; padding: 0 !important; } /* Aynı satırdaki kartlar eşit yükseklikte olsun: kolonlar en uzun karta göre uzasın (.fgcat-product-card zaten height:100%). Bootstrap varsayılanı stretch'tir; garanti için açık. */ .container-fluid.py-30 > .row, #content .row { align-items: stretch !important; } /* Product grid content area */ #content { padding: 0 !important; } /* ═══════════════════════════════════════════════════════════════ 8b. FILTER OFFCANVAS — Match Kategoriler popup style ═══════════════════════════════════════════════════════════════ */ /* Offcanvas panel */ #filterShop.offcanvas { max-width: 320px !important; border-right: 1px solid var(--cat-border) !important; } /* Header — position relative so close button positions inside */ #filterShop .canvas-header { position: relative !important; padding: 20px 24px !important; padding-right: 60px !important; border-bottom: 1px solid var(--cat-border) !important; } #filterShop .canvas-header .title { font-family: var(--cat-font) !important; font-weight: 700 !important; font-size: 18px !important; color: var(--cat-dark) !important; } /* Close button — use global .icon-close-popup system, positioned top-right */ #filterShop .canvas-header .icon-close-popup { top: 16px !important; right: 16px !important; } /* Hide the Font Awesome fa-close × (keep only the circular icon-close-popup) */ #filterShop .canvas-header .icon-close-popup.fa::before, #filterShop .canvas-header .icon-close-popup.fa-close::before { display: none !important; content: none !important; } /* Offcanvas body */ #filterShop .canvas-body { padding: 16px !important; } /* ═══════════════════════════════════════════════════════════════ 9. EMPTY STATE ═══════════════════════════════════════════════════════════════ */ .fgcat-section p:only-child { text-align: center; color: var(--cat-text-muted); font-family: var(--cat-font); font-size: 16px; padding: 60px 0; } /* ═══════════════════════════════════════════════════════════════ 10. LEFT SIDEBAR — Premium Category Filter Panel ═══════════════════════════════════════════════════════════════ */ /* Sidebar container — only as tall as its content */ #column-left { padding-top: 0 !important; align-self: flex-start !important; position: sticky !important; top: 20px !important; } #column-left .canvas-wrapper { background: var(--cat-bg) !important; border: 1px solid var(--cat-border) !important; border-radius: var(--cat-radius) !important; box-shadow: none !important; overflow: hidden !important; } #column-left .canvas-body { padding: 0 !important; overflow: visible !important; border-radius: 0 !important; } #column-left .border-radius-12 { border-radius: var(--cat-radius) !important; } /* Facet header — "Kategoriler" title */ .widget-facet { padding: 0 !important; } .widget-facet .facet-title { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--cat-border-light) !important; cursor: pointer !important; background: transparent !important; } .widget-facet .facet-title .h4 { font-family: var(--cat-font) !important; font-weight: 700 !important; font-size: 15px !important; color: var(--cat-dark) !important; margin: 0 !important; letter-spacing: -0.01em !important; } .widget-facet .facet-title .fa { font-size: 12px !important; color: var(--cat-text-muted) !important; transition: transform 0.25s ease !important; } /* Category list container */ .filter-group-check.group-category { list-style: none !important; padding: 8px 12px 12px !important; margin: 0 !important; } /* Each category item */ .filter-group-check .list-item { margin: 0 !important; padding: 0 !important; } .filter-group-check .list-item .link { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 9px 12px !important; font-family: var(--cat-font) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--cat-text) !important; text-decoration: none !important; border-radius: 8px !important; transition: all 0.2s ease !important; line-height: 1.4 !important; } .filter-group-check .list-item .link:hover { background: var(--cat-bg-subtle) !important; color: var(--cat-dark) !important; } /* Active parent category */ .filter-group-check .list-item .link.active { background: var(--cat-dark) !important; color: #fff !important; font-weight: 600 !important; } /* Product count badge */ .filter-group-check .list-item .link .count { font-size: 11px !important; font-weight: 600 !important; background: var(--cat-bg-subtle) !important; color: var(--cat-text-muted) !important; padding: 2px 8px !important; border-radius: 999px !important; min-width: 24px !important; text-align: center !important; flex-shrink: 0 !important; } .filter-group-check .list-item .link.active .count { background: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.9) !important; } /* Subcategory list — indented children */ .fg-sub-cats-sidebar { list-style: none !important; padding: 2px 0 2px 12px !important; margin: 0 !important; border-left: 2px solid var(--cat-border-light) !important; margin-left: 20px !important; } .fg-sub-cats-sidebar .list-item .link { padding: 7px 12px !important; font-size: 13px !important; font-weight: 400 !important; color: var(--cat-text-muted) !important; } .fg-sub-cats-sidebar .list-item .link:hover { color: var(--cat-dark) !important; background: var(--cat-bg-subtle) !important; } .fg-sub-cats-sidebar .list-item .link.active { background: var(--cat-primary-light) !important; color: var(--cat-primary) !important; font-weight: 600 !important; border-left: none !important; } .fg-sub-cats-sidebar .list-item .link.active .count { background: var(--cat-primary-light) !important; color: var(--cat-primary) !important; } /* Hide bullet icons from subcategory */ .fg-sub-cats-sidebar .fa-circle { display: none !important; } /* Mobile filter offcanvas */ .canvas-filter .canvas-header { padding: 20px 24px !important; border-bottom: 1px solid var(--cat-border) !important; } .canvas-filter .canvas-header .title { font-family: var(--cat-font) !important; font-weight: 700 !important; font-size: 18px !important; color: var(--cat-dark) !important; } .canvas-filter .canvas-body { padding: 16px !important; } /* ═══════════════════════════════════════════════════════════════ 11. CART SUCCESS MODAL — BİLEREK OVERRIDE YOK "Ürün Sepete Eklendi!" modalı ve butonları (.btn-go-cart / .btn-checkout) TÜM sayfalarda tek tasarımla görünsün diye burada EZİLMİYOR. Tek kaynak: css/style.css (.cart-modal* kuralları). Buraya modal override EKLEMEYİN — yoksa kategori/arşiv sayfasındaki "Sepete Git" butonu ürün sayfasından farklı görünür (kullanıcının bildirdiği tutarsızlık buydu). ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 12. RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991px) { .fgcat-section-title { font-size: 26px !important; } .fgcat-shop-control { padding: 12px 16px !important; border-radius: var(--cat-radius-sm) !important; } .fgsubcat-list { padding: 24px 0 40px 0 !important; } } @media (max-width: 767px) { .fgcat-section { padding: 32px 0 0 0 !important; } .fgcat-section-title { font-size: 22px !important; margin-bottom: 12px !important; } .fg-gray-subcat { padding: 16px !important; min-height: 90px !important; border-radius: var(--cat-radius-sm) !important; } .fg-gray-subcat img { width: 56px !important; height: 56px !important; } .fg-gray-subcat h6 { font-size: 13px !important; } .fgcat-product-image { padding-top: 100% !important; } .fgcat-product-image img { padding: 16px !important; } .fgcat-product-body { padding: 14px 16px !important; } .fgcat-product-title { font-size: 14px !important; min-height: 42px !important; } .fgcat-price-current { font-size: 16px !important; } .fgcat-price-old { font-size: 12px !important; } .fgcat-product-actions { flex-direction: column !important; gap: 8px !important; } .fgcat-product-actions .btn { font-size: 12px !important; padding: 10px 12px !important; } .fgcat-shop-control { margin-bottom: 20px !important; } } @media (max-width: 575px) { /* Subcategory cards — single column on mobile */ .fgsubcat-list .col-lg-3 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* Product cards — 2 columns on mobile (category: col-lg-4, search: col-lg-3) */ .col-12.col-md-6.col-lg-4.col-xl-4, .col-12.col-md-6.col-lg-3.col-xl-3 { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; padding-left: 6px !important; padding-right: 6px !important; } /* Match the row margins to the 6px column padding */ #content .row { margin-left: -6px !important; margin-right: -6px !important; } /* Adjustments for smaller product cards on mobile */ .fgcat-product-body { padding: 10px !important; } .fgcat-product-title { font-size: 12px !important; min-height: 36px !important; } .fgcat-product-price { margin-bottom: 10px !important; min-height: 32px !important; } .fgcat-price-current { font-size: 13px !important; white-space: nowrap !important; } .fgcat-price-old { font-size: 11px !important; white-space: nowrap !important; } .fgcat-product-actions .btn { font-size: 11px !important; padding: 8px 6px !important; } .fgcat-product-badge { padding: 3px 8px !important; font-size: 10px !important; } /* Hide left sidebar on mobile */ #column-left { display: none !important; } /* Full width content on mobile */ #content.col-md-9 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* Make filter and sort controls side-by-side on mobile using perfect Grid */ .fgcat-shop-control { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 12px 14px !important; } .fgcat-control-filter, .fgcat-control-sorting { width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* Guarantee hidden elements don't affect grid */ .fgcat-title-desktop, .fgcat-control-layout { display: none !important; } .fgcat-btn-filter { width: 100% !important; justify-content: center !important; padding: 10px 8px !important; font-size: 13px !important; gap: 6px !important; border-radius: var(--cat-radius-sm) !important; height: 100% !important; } .fgcat-dropdown-sort { height: 100% !important; } .fgcat-dropdown-sort .btn-select { width: 100% !important; min-width: 0 !important; padding: 10px 8px !important; justify-content: center !important; gap: 8px !important; height: 100% !important; } .fgcat-dropdown-sort .text-sort-value { font-size: 13px !important; } } /* ═══════════════════════════════════════════════════════════════ 13. DESKTOP TITLE CENTERING ═══════════════════════════════════════════════════════════════ */ @media (min-width: 992px) { .fgcat-shop-control { position: relative !important; } .fgcat-title-desktop { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: max-content !important; z-index: 10 !important; } } /* ════════════ MOBİL DIŞ BOŞLUK GARANTİSİ (tüm sayfalar) ════════════ Kenara yapışık içerik şikâyeti: mobilde container gutter'ı 16px'e sabitle. (Bootstrap gutter'ı bazı bileşimlerde eziliyordu; !important ile netleşir.) */ @media (max-width: 767.98px) { .container { padding-left: 16px !important; padding-right: 16px !important; } /* Sepet: zemin/kart kontrastı — beyaz kart gri zeminde ayrışır */ .fg-cart-page { background: #eef2f6; } } /* Sepet içindeki cross-sell bölümleri: beyaz bant olmasın, gri zemine karışsın */ .fg-cart-page .cm-section { background: transparent; } @media (max-width: 767.98px) { .fg-cart-page { min-height: auto; } /* boş sepette dev boşluk fix */ } /* ════════════ BOOTSTRAP MODAL KAT DÜZENİ RESTORASYONU ════════════ Legacy .modal-backdrop{z-index:100050} perdeyi DİALOG'UN ÜSTÜNE bindirip tüm modalları kilitliyordu (sözleşme, video, bilgi). Bootstrap düzeni: */ .modal-backdrop { z-index: 1050 !important; } .modal { z-index: 1055 !important; } /* ═══════════════════════════════════════════════════════════════ BİLGİ + İLETİŞİM SAYFALARI (information/information + contact) — ht01 temalı (Hakkımızda, Mağazalarımız, yasal metinler, iletişim). cm-/acc- diliyle uyumlu. ═══════════════════════════════════════════════════════════════ */ .fg-info-page { padding: 26px 0 56px; } .fg-info-card { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid #e2e8ee; border-radius: 16px; padding: 40px 44px; } .fg-info-title { font-size: 30px; font-weight: 800; color: #101418; margin: 0 0 22px; letter-spacing: -0.01em; text-wrap: balance; } .fg-info-body { font-size: 15.5px; line-height: 1.75; color: #2b333c; } .fg-info-body h1, .fg-info-body h2, .fg-info-body h3, .fg-info-body h4 { font-weight: 700; color: #101418; margin: 26px 0 12px; line-height: 1.3; } .fg-info-body h2 { font-size: 21px; } .fg-info-body h3 { font-size: 18px; } .fg-info-body p { margin: 0 0 14px; } .fg-info-body a { color: #00aacc; text-decoration: none; } .fg-info-body a:hover { text-decoration: underline; } .fg-info-body img { max-width: 100%; height: auto; border-radius: 10px; } .fg-info-body ul, .fg-info-body ol { margin: 0 0 14px; padding-left: 22px; } .fg-info-body li { margin: 0 0 6px; } .fg-info-body table { max-width: 100%; } /* İletişim: mağaza bilgi bloğu */ .fg-contact-store { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; padding: 4px 0 8px; } .fg-contact-store-img { width: 160px; max-width: 40%; border-radius: 12px; border: 1px solid #e2e8ee; } .fg-contact-store-info { flex: 1; min-width: 220px; font-size: 15px; line-height: 1.7; color: #2b333c; } .fg-contact-store-name { display: block; font-size: 17px; font-weight: 700; color: #101418; margin-bottom: 4px; } .fg-contact-store-info address { font-style: normal; margin: 0 0 10px; color: #4a555f; } .fg-contact-line { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: #2b333c; } .fg-contact-line i { color: #00aacc; width: 16px; text-align: center; } .fg-contact-line a { color: #2b333c; text-decoration: none; } .fg-contact-comment { margin-top: 8px; color: #6b7683; font-size: 14px; } .fg-contact-map-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 16px; background: #f5f9fc; border: 1px solid #d6e2ea; border-radius: 12px; color: #00879c; font-weight: 600; font-size: 13.5px; text-decoration: none; transition: border-color .18s, transform .18s; } .fg-contact-map-btn:hover { border-color: #00aacc; transform: translateY(-2px); } /* İletişim: ek lokasyonlar (native
) */ .fg-contact-locations { margin: 8px 0 6px; } .fg-contact-loc { border: 1px solid #e2e8ee; border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .fg-contact-loc summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: #101418; list-style: none; background: #f7fafc; } .fg-contact-loc summary::-webkit-details-marker { display: none; } .fg-contact-loc[open] summary { border-bottom: 1px solid #e2e8ee; } .fg-contact-loc-body { display: flex; gap: 18px; padding: 16px 18px; flex-wrap: wrap; } /* İletişim: form */ .fg-contact-subtitle { font-size: 18px; font-weight: 700; color: #101418; margin: 30px 0 16px; } .fg-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fg-cfield { margin-bottom: 16px; } .fg-cfield label { display: block; font-size: 13px; font-weight: 600; color: #4a555f; margin-bottom: 6px; } .fg-cfield.required label::after { content: " *"; color: #e53e3e; } .fg-contact-form .form-control { width: 100%; min-height: 46px; padding: 11px 14px; font-size: 15px; color: #101418; background: #fff; border: 1.5px solid #e2e8ee; border-radius: 12px; transition: border-color .18s; } .fg-contact-form textarea.form-control { min-height: auto; resize: vertical; } .fg-contact-form .form-control:focus { outline: none; border-color: #00aacc; box-shadow: none; } .fg-contact-form .form-control.is-invalid { border-color: #e53e3e; } .fg-contact-form .invalid-feedback { display: none; color: #e53e3e; font-size: 12px; margin-top: 5px; } .fg-contact-form .invalid-feedback.d-block { display: block; } .fg-contact-actions { text-align: right; margin-top: 8px; } .fg-contact-submit { display: inline-flex; align-items: center; gap: 9px; padding: 13px 30px; background: #101418; color: #fff; border: none; border-radius: 12px; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .18s, transform .18s; } .fg-contact-submit:hover { background: #00aacc; transform: translateY(-2px); } @media (max-width: 767px) { .fg-info-card { padding: 26px 20px; border-radius: 14px; } .fg-info-title { font-size: 24px; } .fg-contact-grid { grid-template-columns: 1fr; } .fg-contact-actions { text-align: stretch; } .fg-contact-submit { width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════ ÜRÜN YORUMLARI — yapılan yorumların kart tasarımı + form geri bildirimi (#review içine review_list.twig ile yüklenir; form product.twig'de) ═══════════════════════════════════════════════════════════════ */ .fg-review-cards { display: flex; flex-direction: column; gap: 14px; } .fg-review-card { background: #fff; border: 1px solid #e6ebf0; border-radius: 14px; padding: 20px 22px; transition: border-color .18s, transform .18s; } .fg-review-card:hover { border-color: #cfe0e8; } .fg-review-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .fg-review-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: linear-gradient(135deg, #00aacc, #0090b0); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; text-transform: uppercase; } .fg-review-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; } .fg-review-author { font-size: 15px; font-weight: 700; color: #101418; line-height: 1.2; } .fg-review-date { font-size: 12.5px; color: #9aa3ad; margin-top: 2px; } .fg-review-stars { display: inline-flex; gap: 2px; font-size: 14px; color: #f5a623; white-space: nowrap; } .fg-review-stars .fa-regular { color: #d6dce2; } .fg-review-text { margin: 0; font-size: 14.5px; line-height: 1.65; color: #384049; word-break: break-word; } .fg-review-empty { text-align: center; padding: 40px 20px; color: #9aa3ad; } .fg-review-empty i { font-size: 40px; color: #cfd7de; display: block; margin-bottom: 12px; } .fg-review-empty p { margin: 0; font-size: 15px; } .fg-review-pagination { margin-top: 18px; display: flex; justify-content: center; } .fg-review-pagination .pagination { margin: 0; } /* Form geri bildirimi (başarı/hata) — gönder butonunun hemen üstünde */ .fg-review-alert { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500; } .fg-review-alert-success { background: #e8f7ee; border: 1px solid #bfe6cd; color: #1c7a42; } .fg-review-alert-danger { background: #fdecec; border: 1px solid #f5c6c6; color: #c0392b; } @media (max-width: 767px) { .fg-review-card { padding: 16px 16px; border-radius: 12px; } .fg-review-card-head { gap: 10px; } .fg-review-avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; } } /* ═══════════════════════════════════════════════════════════════ MAĞAZALARIMIZ — eski site tasarımı birebir (information_id=19, information.twig 'fg-stores-page' içerince tam-genişlik render eder) ═══════════════════════════════════════════════════════════════ */ .fg-stores-page { padding: 60px 0 80px; background: #f8f9fa; min-height: 60vh; } .fg-stores-page .container { max-width: 1100px; } .fg-stores-page-title { font-size: 32px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.02em; margin-bottom: 8px; } .fg-stores-page-subtitle { font-size: 15px; color: #888; margin-bottom: 48px; } .fg-stores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } @media (max-width: 991px) { .fg-stores-grid { grid-template-columns: 1fr; gap: 24px; } .fg-stores-page { padding: 40px 0 60px; } .fg-stores-page-title { font-size: 26px; } } @media (max-width: 576px) { .fg-stores-page { padding: 24px 0 40px; } } .fg-store-card { background: #fff; border-radius: 20px; border: 1px solid #e8e8e8; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: box-shadow 0.3s; } .fg-store-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .fg-store-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px; gap: 3px; background: #eee; } @media (max-width: 576px) { .fg-store-gallery { grid-template-rows: 180px 110px; } } .fg-store-gallery-item { overflow: hidden; position: relative; } .fg-store-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .fg-store-gallery-item:hover img { transform: scale(1.05); } .fg-store-info { padding: 28px 28px 24px; } .fg-store-badge { display: inline-flex; align-items: center; gap: 6px; background: #e8f7fb; color: #00AACC; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; } .fg-store-name { font-size: 20px; font-weight: 800; color: #1a1a1a; margin: 0 0 18px 0; letter-spacing: -0.01em; line-height: 1.3; } .fg-store-details { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .fg-store-detail-row { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #444; line-height: 1.5; } .fg-store-detail-row i { color: #00AACC; font-size: 15px; flex-shrink: 0; margin-top: 2px; width: 18px; text-align: center; } .fg-store-actions { display: flex; gap: 10px; flex-wrap: wrap; } .fg-store-btn-map { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: #1a1a1a; color: #fff; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; white-space: nowrap; } .fg-store-btn-map:hover { background: #000; color: #fff; text-decoration: none; transform: translateY(-1px); } .fg-store-btn-phone { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: #e8f7fb; color: #00AACC; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; white-space: nowrap; } .fg-store-btn-phone:hover { background: #00AACC; color: #fff; text-decoration: none; transform: translateY(-1px); } .fg-store-card-soon { background: #fff; border-radius: 20px; border: 2px dashed #e0e0e0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 40px; min-height: 480px; color: #aaa; } .fg-store-card-soon i { font-size: 40px; color: #ddd; margin-bottom: 16px; } .fg-store-card-soon h3 { font-size: 18px; font-weight: 700; color: #bbb; margin-bottom: 8px; } .fg-store-card-soon p { font-size: 14px; color: #ccc; } /* İletişim — Müşteri Hizmetleri / Destek Merkezi bölümü */ .fg-contact-cs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 8px; padding: 20px 22px; background: #f5f9fc; border: 1px solid #d6e2ea; border-radius: 14px; } .fg-contact-cs-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: #00aacc; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; } .fg-contact-cs-body { flex: 1; min-width: 220px; } .fg-contact-cs-body strong { display: block; font-size: 15.5px; font-weight: 700; color: #101418; margin-bottom: 3px; } .fg-contact-cs-body p { margin: 0; font-size: 13.5px; color: #5a6570; line-height: 1.5; } .fg-contact-cs-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 12px 22px; background: #101418; color: #fff; border-radius: 12px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background .18s, transform .18s; } .fg-contact-cs-btn:hover { background: #00aacc; color: #fff; transform: translateY(-2px); } @media (max-width: 600px) { .fg-contact-cs-btn { width: 100%; justify-content: center; } } /* ════════════════════════════════════════════════════════════════════ [FG 2026-07-18] SEPET KARTLARI: iç boşluk + font bir kademe (kullanıcı geri bildirimi — checkout kartlarıyla uyumlu). ════════════════════════════════════════════════════════════════════ */ .fg-cart-item { padding: 32px; } .fg-cart-item-name { font-size: 16px; } .fg-cart-total-row { font-size: 15px; } .fg-cart-total-row:last-child { font-size: 19px; } .fg-cart-totals { padding: 30px 34px; } @media (max-width: 991px) { .fg-cart-item { padding: 24px; } } @media (max-width: 576px) { .fg-cart-item { padding: 24px 22px; } .fg-cart-item-name { font-size: 14.5px; } .fg-cart-item-total { font-size: 16px; } .fg-cart-modules { padding: 28px 24px; } } /* ═══ [FG 4 Eyl 2026] ÜST DUYURU ŞERİDİ — kayan yazı (fg-ticker) ══════════════════ Konum: header.twig'de
ETİKETİNİN DIŞINDA ve ÜSTÜNDE. 🔴 Neden dışında: .headerfg `position:sticky; top:0` (ht01-legacy.css:26). Şerit header'ın İÇİNDE olsaydı sticky bloğun parçası olur ve her kaydırmada ~38px viewport'u KALICI yerdi — mobilde kabul edilemez. Dışarıda: sayfa kayınca şerit akıp gider, header top:0'a oturur. Saf CSS animasyon: JS yok, ek istek yok, sabit yükseklik → CLS yok. Kesintisiz döngü: track içinde AYNI liste 2 kez var, animasyon tam -50% kaydırır; ikinci kopya aria-hidden (ekran okuyucu içeriği iki kez okumaz). */ .fg-ticker{ background: var(--cm-brand, #00aacc); color: #fff; overflow: hidden; } .fg-ticker__viewport{ overflow: hidden; } .fg-ticker__track{ display: flex; width: max-content; animation: fg-ticker-run 44s linear infinite; will-change: transform; } .fg-ticker__list{ display: flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; } .fg-ticker__item{ display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; height: 38px; margin: 0; padding: 0; font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: var(--fg-fs-body-sm, 13px); font-weight: 600; letter-spacing: .01em; line-height: 1; } /* Ayraç her öğenin SONUNDA — böylece iki liste birleşim yerinde de ayraç var (dikiş görünmez) */ .fg-ticker__item::after{ content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin: 0 28px; border-radius: 50%; background: rgba(255, 255, 255, .55); } .fg-ticker__item i{ font-size: var(--fg-icon-sm, 13px); opacity: .92; } @keyframes fg-ticker-run{ from{ transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Duraklatma yalnız gerçek imleçte — dokunmatikte :hover TAKILI KALIR (CLAUDE.md §4.3.3) */ @media (hover: hover) and (pointer: fine){ .fg-ticker:hover .fg-ticker__track{ animation-play-state: paused; } } @media (max-width: 767.98px){ .fg-ticker__item{ height: 34px; font-size: var(--fg-fs-caption, 12px); gap: 7px; } .fg-ticker__item::after{ margin: 0 20px; } } /* Hareket hassasiyeti: animasyonu kapat ama İÇERİĞİ KORU — tek liste + parmakla kaydırılabilir şerit */ @media (prefers-reduced-motion: reduce){ .fg-ticker__track{ animation: none; width: auto; } .fg-ticker__list + .fg-ticker__list{ display: none; } .fg-ticker__viewport{ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fg-ticker__viewport::-webkit-scrollbar{ display: none; } .fg-ticker__item:last-child::after{ display: none; } }