/* ============================================================ ÜRÜN KARTI — layout'un kendi stil dosyası NEDEN BURADA Kart CSS'i devralınan temada DÖRT dosyada kopya hâlinde duruyor (mods/products/products.css, products.compatible.css, products.special.css, mods/compatible/product.css — her birinde 141 kural) ve bunlar tema CSS'inden SONRA yükleniyor. Ölçüldü (kategori sayfası, sırası): 8–14 tema (tokens, main, header, footer, effect, home, köprü) 16 themes/default/mods/products/products.css 17 themes/default/layouts/products/product-list-item.default.css Yani köprüden kart biçimlendirmek işe yaramıyor; sonra gelen kazanıyor. Layout'un kendi dosyası EN SONDA yüklendiği için kartın tek doğru yeri burası. Tasarımın .pli-* kuralları assets/css/main.css içinde zaten var; burada yalnız devralınan kuralları geri alan ve platformun ürettiği sınıfları (stok rozetleri, sepet düğmesi, beğeni) tasarıma bağlayan kısım var. ============================================================ */ /* Devralınan kart kabuğunu sıfırla — ızgarada eşit yükseklik height: 100% KULLANMAYIN. Kart bir flex öğesi (listelemede .products-list, ana sayfada .row) ve kabın align-items değeri stretch; esnetme ancak öğenin çapraz boyutu AUTO ise çalışır. height:100% kesin bir boyut sayıldığı için esnetmeyi devre dışı bırakıyor, yüzde de yüksekliği belirsiz kaba karşı çözülemeyip içerik yüksekliğine düşüyordu. Ölçüldü (1440px, /Uzaktan-Kumandalar.html): satır içi yükseklikler 398 / 422 / 455 — aynı satırdaki kartlar arasında 57px fark. Kurallardan biri eşit yükseklik için yazılmıştı ve tam tersini yapıyordu. */ .product-list-item.product-list-item_default { display: flex; flex-direction: column; height: auto; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--product-list-item-border-color); border-radius: var(--product-list-item-radius); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .product-list-item.product-list-item_default:hover { border-color: var(--primary-tint-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } /* ---------- görsel ---------- */ .pli-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 14px; background: radial-gradient(120% 120% at 50% 18%, #ffffff 0%, #F4F7FA 70%, #EDF1F6 100%); } .pli-media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .pli-media .product-no-image { width: 42%; opacity: .22; mix-blend-mode: normal; } .pli-gorsel-sayi { position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 4px; background: rgba(6, 25, 61, .72); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); } /* Rozetler (indirim / yeni) — platformun getBadges çıktısı */ .pli-flags { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .pli-flags .badge, .pli-flags .product-badge, .pli-flags span { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .01em; padding: 3px 8px; border-radius: 6px; background: var(--accent-color); color: #fff; } /* ---------- gövde ---------- */ .pli-body { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px 15px; flex: 1; } .pli-brand { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-color); } .product-list-item .pli-title { font-size: var(--product-list-item-title-size); font-weight: var(--product-list-item-title-weight); line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .product-list-item .pli-title a { color: var(--ink); } .product-list-item .pli-title a:hover { color: var(--primary-color); } .pli-rating { display: flex; align-items: center; gap: 6px; } .pli-rating .rating-stars { color: var(--rating-stars-color); } /* Uyumluluk çipi — bu mağazanın asıl satış argümanı */ .pli-compat { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--primary-color); background: var(--primary-tint); padding: 4px 9px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pli-compat i { color: var(--success-color); flex: 0 0 auto; } /* Stok rozetleri — devralınan sınıf adları, tasarımın dili */ .in-stock-badge, .critical-stock-badge, .next-stock-badge, .out-stock-badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; margin: 0; } .in-stock-badge { color: var(--success-color); background: #E8F6EE; } .critical-stock-badge { color: var(--accent-color); background: var(--accent-tint); } .next-stock-badge { color: var(--muted); background: var(--light-gray); } .out-stock-badge { color: var(--muted); background: var(--light-gray); } /* ---------- fiyat ---------- */ .product-list-item .pli-price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; line-height: 1.2; } .pli-price { font-family: var(--font-head); color: var(--product-list-item-price-color); font-weight: var(--product-list-item-price-weight); font-size: var(--product-list-item-price-size); } .pli-price-del { color: var(--product-list-item-price-del-color); text-decoration-color: var(--product-list-item-price-del-line-color); font-weight: var(--product-list-item-price-del-weight); font-size: var(--product-list-item-price-del-size); } /* ---------- eylemler ---------- */ .pli-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .pli-actions .btn:not(.btn-product-social) { flex: 1; border-radius: var(--radius-sm); font-weight: 700; background: var(--accent-color); border-color: var(--accent-color); color: #fff; } .pli-actions .btn:not(.btn-product-social):hover { background: var(--accent-color-600); border-color: var(--accent-color-600); } /* Beğeni düğmesi tasarımdaki yuvarlak .pli-fav biçimine */ .pli-actions .btn-product-like { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; background: #fff; color: #A9B6C3; border: 1px solid var(--seperator-color); box-shadow: var(--shadow-xs); } .pli-actions .btn-product-like:hover { color: var(--accent-color); } .pli-actions .btn-product-like.active { color: var(--danger-color); } .pli-actions .btn-product-like .count { font-size: 10px; font-weight: 700; } .pli-actions .btn-product-like .count:empty { display: none; } /* ---------- stokta yok ---------- */ .product-list-item-out-of-stock .pli-media { opacity: .5; } .product-list-item-out-of-stock .pli-price { color: var(--muted); } /* ---------- indirim sayacı ---------- */ .pli-sayac { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--seperator-color); } .pli-sayac .counter-caption { font-size: 10.5px; color: var(--muted-soft); margin-bottom: 3px; } .pli-sayac .counter_number { font-family: var(--font-head); font-weight: 800; color: var(--accent-color); font-size: 13px; } .pli-sayac .counter_label { font-size: 9.5px; color: var(--muted-soft); margin-left: 1px; } .pli-sayac .counter_spr { color: var(--seperator-dark-color); margin: 0 4px; } /* ---------- devralınan karuselden arta kalanlar ---------- Kart artık tek görsel basıyor; eski karusel kuralları görünürde kalmasın. */ .product-list-item .carousel-control-prev, .product-list-item .carousel-control-next, .product-list-item .carousel-indicators { display: none !important; } /* ============================================================ KARTIN KENDİ GENİŞLİĞİ — kolon sarmalayıcısı olmayan yerleşimler Kart iki ayrı yerleşimde kullanılıyor: listeleme → Bootstrap kolonu içinde (.col-*), genişliği kolon verir ana sayfa → DOĞRUDAN .row'un çocuğu, kolon YOK İkinci durumda karta genişlik verilmezse flex öğesi olarak içeriğine göre büzülüyor. Ölçüldü (1440px, ana sayfa): kısa başlıklı iki kart 110px, diğerleri 245–250px — aynı satırda birbirini tutmayan kartlar. Kategori sayfasında görünmüyordu çünkü orada kolon var. Çözüm flex-basis: yüzde + boşluk payı. :has() kullanılmadı, eski tarayıcılarda da çalışsın. ============================================================ */ .row > .product-list-item_default, .product-grid > .product-list-item_default { flex: 0 0 calc(25% - 18px); max-width: calc(25% - 18px); margin: 0 9px 18px; } @media (max-width: 1199px) { .row > .product-list-item_default { flex-basis: calc(33.333% - 18px); max-width: calc(33.333% - 18px); } } @media (max-width: 991px) { .row > .product-list-item_default { flex-basis: calc(50% - 18px); max-width: calc(50% - 18px); } } @media (max-width: 479px) { .row > .product-list-item_default { flex-basis: calc(100% - 18px); max-width: calc(100% - 18px); } } /* Izgara yerleşiminde (bulucu, benzer ürünler) genişliği ızgara verir; kartın kendi flex-basis'i karışmasın. */ .product-grid > .product-list-item_default { flex: 1 1 auto; max-width: none; margin: 0; }