/** * Loop Card — Elementor Loop Item şablonundaki ürün kartı. * * Kartın DÜZENİ Elementor panelinden yönetiliyor (boşluk, tipografi, hizalama). * Burada yalnız Elementor'un veremeyeceği şey var: shortcode köprülerinin * bastığı TEMA markup'ının (rozet / wishlist kalbi / Quick View) görselin * üstüne doğru oturması. * * 🚨 Buradaki asıl ders — konumlanma bağlamı: * Elementor her shortcode'u iki sarmalayıcıya sarar: * .elementor-element.elementor-widget-shortcode > .elementor-shortcode * ve widget sarmalayıcısı KONUMLANMIŞTIR. Bu yüzden içerideki `absolute` * öğe .ks-loop-media'ya değil, o sarmalayıcıya göre hizalanır — sarmalayıcı * da görselin ALTINDA, sıfır yükseklikli bir flex öğesi olduğu için rozet * kartın dibine düşer (ölçüldü: media alt kenarı 860px, rozet 872px'te). * Çözüm: aradaki tüm sarmalayıcıları `static`e çekip gerçek öğeleri * .ks-loop-media'ya göre konumlandırmak. * * 🚨 Sayfaya özel stillerde var()/token katmanı KURULMAZ — düz, scope'lu * kurallar yeterli (operatör tercihi). */ /* ── Görsel alanı: rozet/kalp/quickview için konumlanma zemini ───────────── */ .ks-loop-card .ks-loop-media { position: relative; overflow: hidden; } .ks-loop-card .ks-loop-media img { display: block; width: 100%; height: auto; } /* Aradaki Elementor sarmalayıcıları konumlanma bağlamı YARATMASIN. */ .ks-loop-card .ks-loop-media > .elementor-element, .ks-loop-card .ks-loop-media .elementor-shortcode, .ks-loop-card .ks-loop-badge, .ks-loop-card .ks-loop-wishlist { position: static; } /* ── İndirim rozeti: sol üst ────────────────────────────────────────────── */ /* ⚠️ v2.299.0'dan beri ÖLÜ KURAL: [ks_loop_badge] artık WooCommerce'in "SALE!" etiketini basmıyor, yerini aşağıdaki yüzde rozeti aldı (ürün sayfasındaki kararın aynısı). Kural duruyor: üçüncü-parti bir kod bu karta yine `.onsale` basarsa kartın dibine düşmesin. */ .ks-loop-card .ks-loop-media .onsale { position: absolute; top: 12px; left: 12px; z-index: 3; margin: 0; pointer-events: none; } /* ── Görsel üstü rozetler: KÜÇÜK HÂLİ (v2.300.0, operatör 17 Ağu 2026) ────── Ürün sayfasındaki rozetlerle AYNI markup, AYNI renk kademesi ve AYNI ORANLAR (frontend.css "GÖRSEL ÜSTÜ BADGE'LER"). Burada değişen tek şey ÖLÇEK — kart görseli ürün sayfasınınkinin yarısından küçük. 🚨 Bu kurallar `.ks-loop-card` içine kilitli: aynı sınıflar ürün sayfasının galerisinde de var, oradaki büyük boy bozulmamalı. */ .ks-loop-card .ks-loop-media .ks-vm-hl-badges { top: 8px; left: 8px; /* Wishlist kalbi (4) ve `.onsale` (3) ile aynı katmanda ama altta: rozetler sol üstte, kalp sağ üstte — çakışmıyorlar. */ z-index: 3; /* ⭐ ÖLÇÜ YAZILI DEĞİL, TÜRETİLİYOR (v2.301.0, operatör: "tek stil kaynağı, yüzde olarak ufaltılmışı loop'ta"): ürün sayfasının taban puntosu × loop oranı. İkisi de frontend.css'in başındaki AYAR KUTUSUNDA (`--ks-hl-badge-size` / `--ks-hl-badge-loop`) — orada büyütünce kart da kendiliğinden büyür, burada hiçbir şey değişmez. Mobilde taban değer düştüğü için kart da otomatik küçülür. Yükseklik/dolgu/ikon/köşe/gölge frontend.css'te em olarak yazılı, yani oranlar iki bağlamda birebir aynı kalır. 🚨 Buraya px ölçü (height/padding/font/ikon) EKLEME: operatör "single ile loop arasında iç dolgu bile farklı" dediğinde sebep tam olarak buydu. */ font-size: calc(var(--ks-hl-badge-size, 12px) * var(--ks-hl-badge-loop, .875)); max-width: calc(100% - 16px); } /* ── Hover galerisi: CSS GEREKTİRMEZ (v2.299.1) ───────────────────────────── 🚨 Burada bir zamanlar mutlak konumlu bir kare KATMANI vardı ve operatör haklı olarak reddetti: "kareler görselin dışına taşıyor, çerçeve ve radius kayboluyor." Kartın görseline Elementor'dan verilen çerçeve/köşe yarıçapı `img`in üstünde duruyor; onu taklit eden ikinci bir kutu o stilleri hiçbir zaman birebir taşıyamaz. Çözüm `assets/js/loop-card.js`te: kare, görselin KENDİ `src`'si olarak yazılıyor — kutu, çerçeve, radius, oran hep aynı öğede kalıyor ve operatör panelden ne ayarlarsa kareler onu izliyor. Geçişte yumuşatma YOK (operatör kararı), o yüzden burada bir `transition` de YOKTUR — eklenirse kare değişimi yumuşar. */ /* ── Wishlist kalbi: sağ üst ────────────────────────────────────────────── */ /* Konumu Botiga'nın kendi kuralı veriyor (position:absolute; top:15px; right:15px; 35×35) — burada sadece görselin üstünde kalmasını garantiliyoruz. Kendi top/right'ımızı YAZMIYORUZ ki operatör Customizer'dan wishlist yerleşimini değiştirdiğinde kart da onu izlesin. */ .ks-loop-card .ks-loop-media .botiga-wishlist-button { z-index: 4; } /* Quick View KULLANILMIYOR (operatör kararı, 15 Ağu 2026) — Customizer'da kapatıldı, kartta da yok. Geri açılırsa buraya konumlandırma kuralı gerekecek: Botiga'nın kuralları `.loop-image-wrap > .button` gibi DOĞRUDAN ÇOCUK seçicileri kullanıyor ve Elementor'un sarmalayıcıları o zinciri kırıyor, yani tema CSS'i kendiliğinden tutmuyor. */ /* ── Başlık ─────────────────────────────────────────────────────────────── */ /* Elementor'un Heading widget'ındaki bağlantı site genelindeki altı-çizili `a` stilini miras alıyor; mağaza kartındaki ürün adı ise çizgisiz. Kart arşivle aynı görünsün diye çizgiyi kaldırıyoruz. Operatör panelden Tipografi → Metin Dekorasyonu ile yine de çizgi verebilir (Elementor daha spesifik bir seçici üretir). */ .ks-loop-card .elementor-heading-title a { text-decoration: none; } /* ── Sepete ekle ────────────────────────────────────────────────────────── */ /* (Kartta adet sayacını gizleyen kural v2.287.0'da kaldırıldı: sayaç site genelinde yok artık — "sepeti güncelle" modeliyle birlikte silindi. Onu üreten iki yer de yok, gizlenecek bir şey kalmadı.) */ .ks-loop-card .ks-loop-cart { display: flex; align-items: center; } /* Kart düğmesi = tekil ürün sayfasındaki sarı "Sepete Ekle" düğmesinin İKONSUZ ve KÜÇÜK hâli (operatör, 15 Ağu 2026). Değerler uydurulmadı, iki yerden alındı: • renk/tipografi → frontend.css'teki `.single_add_to_cart_button, .ks-vm-atc-btn` bloğu (aynı Elementor global'leri kullanılıyor ki operatör rengi değiştirince kart da izlesin), • küçük kutu → frontend.css'teki sticky-bar kompakt reçetesi (min-height 36px / font-size .85em / yatay dolgu 18px). 16 Ağu 2026: operatör kartın düğmesini bir tık daha küçültmek istedi, kutu sticky-bar reçetesinden AYRILDI → 32px / .80em / 14px. Sticky bar değişmedi; oradaki değerleri buradan türetme. 🚨 `.ks-vm-atc-btn` sınıfının KENDİSİ verilmez: cart-aware.js o sınıfa tıklama kancası bağlar ve kanca sayfadaki tekil ürün formunu hedefler — kartta öyle bir form yok. !important: Botiga bu düğmeye `.button` üzerinden, Elementor da kendi buton kurallarıyla renk/dolgu veriyor; taban ATC kuralları da !important taşıyor. Aynı silahla eşitliyoruz. */ /* KUTU + TİPOGRAFİ — kartaki HER düğmeye uygulanır ki kart yükseklikleri ürün tipine göre zıplamasın. */ .ks-loop-card .ks-loop-cart .button.ks-loop-atc { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0; border-radius: 100px !important; text-transform: capitalize !important; font-weight: 600 !important; letter-spacing: 0.3px !important; line-height: 1.4 !important; min-height: 32px !important; font-size: 0.80em !important; padding: 0 14px !important; /* Taban ATC kuralı 185px min-width dayatıyor; kart kolonu dar olabildiği için düğme içeriğine göre daralabilmeli. */ min-width: 0 !important; transition-duration: 0.2s !important; } /* Sarı dolguyu "Seçenekleri Gör" de alır (aşağıdaki blokta): varyasyonlu üründe kartın birincil aksiyonu odur. "Ürünü İncele" (stok yok) almaz. */ /* SARI DOLGU — yalnız GERÇEK sepete-ekle düğmesinde. * * 🚨 `.add_to_cart_button` şartı bilinçli: satın alınamayan üründe (stok dışı * / harici ürün) WooCommerce aynı yere "Devamını oku" LİNKİ basar ve o linkte * bu sınıf YOKTUR (ölçüldü: `button product_type_simple`, add_to_cart_button * yok). Sarıyı ona da verirsek satın alınamayan ürün birincil CTA gibi * görünür — yanıltıcı. O düğme temanın kendi buton görünümünde kalır, kutusu * yukarıdaki kuralla aynı olduğu için kart hizası bozulmaz. * * Renkler tekil ürün sayfasındaki `.ks-vm-atc-btn` ile AYNI Elementor * global'lerinden okunuyor ki operatör rengi değiştirince kart da izlesin. */ .ks-loop-card .ks-loop-cart .button.ks-loop-atc.add_to_cart_button, .ks-loop-card .ks-loop-cart .button.ks-loop-atc.ks-loop-atc--options { background-color: var(--e-global-color-cdea875, #F3C924) !important; color: var(--e-global-color-text, #000000) !important; border-style: none !important; } /* Hover'da YALNIZ arkaplan değişir — tekil sayfadaki davranışın aynısı. */ .ks-loop-card .ks-loop-cart .button.ks-loop-atc.add_to_cart_button:hover, .ks-loop-card .ks-loop-cart .button.ks-loop-atc.add_to_cart_button:focus, .ks-loop-card .ks-loop-cart .button.ks-loop-atc.ks-loop-atc--options:hover, .ks-loop-card .ks-loop-cart .button.ks-loop-atc.ks-loop-atc--options:focus { background-color: var(--e-global-color-9b6e6c7, #FFD73B) !important; color: var(--e-global-color-text, #000000) !important; } /* ── Sepete eklerken loader: etiketin SOLUNDA, sol dolgunun SAĞINDA ─────── */ /* * Halkanın kendisi frontend.css'ten geliyor * (`.add_to_cart_button.loading:not(:has(.ks-vm-icon-swap))::before` — dönen * halka + `ks-vm-btn-spin`); WooCommerce'in sağdaki kendi loader'ı da orada * susturulmuş. Burada yalnız KUTU HESABI var. * * Halka AKIŞTA duruyor: sol dolguya DOKUNULMAZ, halka onun SAĞINDAN başlar — * * 14px (dolgu) + 10px (halka) + 5px (boşluk) + etiket + 14px (dolgu) * * 🚨 Sol dolguyu SPINNER İÇİN kısaltma. Bir kez denendi (18px → 4px) ve amaç butonun * genişlemesini/etiketin kaymasını önlemekti; ama 100px yuvarlak kenarda 4px * inset "spinner sola yapışık dönüyor" olarak görünüyor (operatör bildirdi, * 15 Ağu 2026). Dolgu korunur; bunun bedeli butonun halka+boşluk kadar * genişlemesidir ve bu BİLEREK kabul edildi. * * Halka boyutu taban 1em (13,6px) yerine 10px: operatör "ufak" istedi. */ .ks-loop-card .ks-loop-cart .button.ks-loop-atc.loading::before { width: 10px; height: 10px; margin-right: 5px; } /* İKONSUZ: loop düğmesi normalde ikon basmaz, ama Botiga/Merchant bir gün eklerse kartta görünmesin. * * 🚨 `::before` / `::after` BURAYA EKLENMEZ — bir kez eklenip geri alındı. * Sitenin sepete-ekle LOADER'ı `::before`'a çiziliyor * (frontend.css: `.add_to_cart_button.loading:not(:has(.ks-vm-icon-swap))::before`, * dönen halka + ks-vm-btn-spin) ve `::after`'ı da WooCommerce/tema'nın sağdaki * kendi loader'ını susturmak için frontend.css zaten kullanıyor. Buradan * `display:none` verilirse loader sessizce kaybolur — düğme yükleniyor gibi * görünmez, yalnız ikon değil. */ .ks-loop-card .ks-loop-cart .button.ks-loop-atc .ks-vm-icon, .ks-loop-card .ks-loop-cart .button.ks-loop-atc .ks-vm-icon-swap, .ks-loop-card .ks-loop-cart .button.ks-loop-atc svg { display: none !important; } /* ── [ks_loop_rating] — yıldızlar + puan ───────────────────────────────── */ /* * Yıldızın boyu/rengi ve puanın puntosu BURADA DEĞİL: sarmalayıcı * `.ks-vm-rating-summary` sınıfını taşıdığı için frontend.css'in "ÜRÜN PUAN * ÖZETİ" bölümü aynen uygulanır — ürün sayfasındaki puan neyse kart da o. * Buradaki iş yalnız kart bağlamı. * * 🚨 `.ks-vm-rs-stars`ın GENİŞLİĞİNE dokunma (5.3em, font-size'a bağlı): o * bir maske kabı, esnetilirse 3 yıldızlık ürün 5 yıldız görünür. */ .ks-loop-card .ks-loop-rating { /* Kart tipografisi ürün sayfasından küçük; oran korunsun diye tek ayar noktası burası (yıldız + puan ikisi birden ölçeklenir). */ font-size: 0.8em; } /* Puansız üründe yer tutucu YOK (operatör, 16 Ağu: "veri basılmadığında boşluk oluşmasın"). Shortcode boş döner, widget 0 yükseklikte kalır. Buraya `min-height` / `visibility:hidden` bir yer tutucu EKLEME — bir kez eklendi ve kaldırıldı, kartta 21px'lik görünmez satır olarak geri geliyor. */ /* ── [ks_loop_price] — kartın fiyat alanı ──────────────────────────────── */ /* * Tipografi/renk BURADA TANIMLANMIYOR: rakamların puntosu, üstü çizili * tutarın grisi ve yüzde rozeti frontend.css'in "STICKY BAR FİYAT ALANI" * bölümündeki `.ks-vm-summary-badge / -old / -new` kurallarından geliyor — * tekil ürün sayfasının sticky bar'ı ve mini sepet satırı da aynı üç sınıfı * kullanıyor. Operatör oradan rengi değiştirince üç alan birden izler. * Buradaki iş yalnız KART BAĞLAMI: hizalama, satır kırılması, indirim rengi. */ .ks-loop-card .ks-loop-price { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; /* Bar'daki `justify-content: flex-end` (sağa yaslı) BİLEREK alınmadı: kartta başlık sola yaslı, fiyat onun altında. Elementor'daki konteyner hizası neyse ona uyar. */ line-height: 1.3; } /* İndirimli tutar secondary, indirimsiz normal metin rengi — sitenin `.ks-vm-summary-total-value:has(.ks-vm-summary-new)` kuralının kart karşılığı. Orada :has ile, burada PHP'den gelen `is-sale` ile ayrılıyor: kartta indirimsiz tutar da `.ks-vm-summary-new` taşır (punto tek kuraldan gelsin diye), yani :has ayrımı burada tutmaz. */ .ks-loop-card .ks-loop-price { color: var(--e-global-color-text, #212121); } .ks-loop-card .ks-loop-price.is-sale .ks-vm-summary-new { color: var(--e-global-color-secondary, #d83b3b); } /* Fiyat aralığı ("1.200 ₺ – 3.400 ₺") tek parça okunur; ortadaki tireden satır kırılmasın. Rozet uzun olduğunda (%20'ye varan) rozet ile aralık alt alta düşer — flex-wrap yukarıda bunun için açık. */ .ks-loop-card .ks-loop-price .ks-vm-summary-new { white-space: nowrap; } /* ── PUNTO: kartta fiyat daha küçük (operatör, 16 Ağu 2026) ─────────────── */ /* * Ölçüm: tutar 22,4px basılıyordu (frontend.css'teki TEK punto kuralı, * `.ks-vm-summary-new .woocommerce-Price-amount { font-size: 1.4em }`), kart * başlığı ise 15,2px — fiyat başlıktan %47 büyüktü ve kartın tamamını * bastırıyordu. Kartta 17,6px'e çekiliyor: hâlâ sayfadaki en güçlü öğe ama * başlıkla aynı ölçekte. * * 🚨 Bu kural ÜRÜN SAYFASINI ETKİLEMEZ: seçici `.ks-loop-card` ile kart * bağlamına kilitli. Sticky bar/mini sepet/form tutarı 1.4em'de kalır — * oradaki punto operatörün ayrı kararıydı (frontend.css, 1 Ağu). */ .ks-loop-card .ks-loop-price .ks-vm-summary-new .woocommerce-Price-amount { font-size: 1em; } /* Üstü çizili eski fiyat: güncel tutarın yanında bir dipnot, satır yüksekliği de 1 — frontend.css'ten gelen 1.3, iki satırlı düzende üstte gereksiz boşluk bırakıyordu (rozet de o boşluk kadar uzuyordu, çünkü yüksekliğini bu blok veriyor). */ .ks-loop-card .ks-loop-price .ks-vm-summary-old { font-size: 0.7em; line-height: 1; } /* Rozet: RAKAM fiyatla aynı boy ve kalınlıkta, yüzde işareti (ve aralık rozetindeki "…'ye varan" gibi ekler) küçük. Bu yüzden rozetin TABAN puntosu fiyatınkiyle aynı (1em) ve küçültme işaretin kendi span'inde yapılıyor — tersi (rozet küçük + rakam büyütülmüş) em'leri birbirine bindirir, rozetin boyunu her değiştirişte rakam fiyattan kayardı. Renk/kalınlık/arkaplan frontend.css'teki `.ks-vm-summary-badge`ten geliyor (beyaz yazı korunur). */ .ks-loop-card .ks-loop-price .ks-vm-summary-badge { font-size: 0.9em; padding: 0 5px; line-height: 1; } .ks-loop-card .ks-loop-price .ks-vm-summary-badge .ks-loop-pct-sign { font-size: 0.72em; } /* ── İNDİRİMLİ DÜZEN: rozet solda, tutarlar sağında alt alta ────────────── */ /* * İstenen (operatör): * * ┌──────┐ 2.350 ₺ ← eski (üstü çizili) * │ %20 │ 1.880 ₺ ← yeni * └──────┘ * * Grid, flex değil: rozetin İKİ SATIRI birden kaplaması gerekiyor, flex'te * bunun karşılığı yok (sarmalayıcı bir div eklemek gerekirdi — markup üç * yerde ortak, oraya kart için kutu eklemek istemiyoruz). * * Kapı `:has(.ks-vm-summary-old)`: yalnız ESKİ FİYATI OLAN kart iki satıra * geçer. Aralıklı indirimde (`%20'ye varan 960 ₺ – 2.720 ₺`) üstü çizili * tutar YOKTUR, o yüzden yukarıdaki tek satırlık flex düzeninde kalır — * "is-sale" ile ayırmak yanlış olurdu, o sınıf ikisinde de var. * * Metinler sola yaslı: kap `justify-content: start` (Elementor'daki * konteyner hizası ne olursa olsun blok kendi içinde sola dayanır). */ .ks-loop-card .ks-loop-price:has(.ks-vm-summary-old) { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 6px; row-gap: 0; } /* Rozet İKİ SATIRIN TAMAMI kadar yüksek (operatör, 16 Ağu): grid alanı zaten iki satır, ama kap `align-items: center` verdiği için rozet içeriği kadar kalıp ortalanıyordu — `stretch` onu alana yayar. Yüksekliği artık eski+yeni fiyat bloğunun kendisi belirler, sabit bir yükseklik YAZMA (punto değişince uyumsuz kalır). Yazı, yayılan kutunun içinde kendi flex'iyle ortalanır. */ .ks-loop-card .ks-loop-price:has(.ks-vm-summary-old) .ks-vm-summary-badge { grid-area: 1 / 1 / 3 / 2; /* iki satır boyunca, solda */ align-self: stretch; display: flex; align-items: center; /* İki fiyat satırının toplamından 4px KISA (operatör): rozet tam boy olunca fiyat bloğuyla bitişik duruyordu. Sabit yükseklik yerine dikey marj — rozet yine bloğu izler, yalnız 2+2px içeriden başlar. */ margin: 2px 0; } .ks-loop-card .ks-loop-price:has(.ks-vm-summary-old) .ks-vm-summary-old { grid-area: 1 / 2 / 2 / 3; padding: 0; /* frontend.css'teki yan dolgu satırı sağa kaydırıyordu */ justify-self: start; } .ks-loop-card .ks-loop-price:has(.ks-vm-summary-old) .ks-vm-summary-new { grid-area: 2 / 2 / 3 / 3; justify-self: start; } /* ── İLK YÜKLEME: Swiper init'ten ÖNCE slayt genişliği ──────────────────── */ /* * SORUN (16 Ağu 2026, operatör bildirdi: "thumbnail'lar çok büyük geliyor, * sonra düzeliyor"). Ölçüldü, tahmin değil: * init ÖNCESİ slayt = 1270px (kapsayıcının tamamı) → görsel 422×562 * init SONRASI slayt = 407px → görsel 407×542 * Sebep: swiper.css `.swiper-slide { width: 100% }` veriyor; sütun genişliğini * Swiper JS init olunca inline style ile yazıyor. Arada geçen sürede kart tam * genişlikte boyanıyor. Ölçülen CLS: 0.136 (Google eşiği 0.1 = "kötü"). * * ÇÖZÜM: init öncesi genişliği Swiper'ın kendi formülüyle ÖNCEDEN hesapla: * slayt = (kapsayıcı - boşluk × (sütun - 1)) / sütun * * 🚨 Sütun sayısını BURAYA SABİT YAZMA. Elementor Pro, widget'ın kendi * ayarından `--swiper-slides-to-display` ve `--swiper-slides-gap` * değişkenlerini kırılım noktası başına zaten basıyor * (loop-carousel.php: `'{{WRAPPER}}' => '--swiper-slides-to-display: {{VALUE}}'`). * Değişkenlerin üstüne kurunca operatör Elementor'dan sütun sayısını * değiştirdiğinde bu kural kendiliğinden izler; sabit 3 yazılsaydı ilk boya * ile init sonrası yine ayrışırdı. * * Değişken yoksa (başka bir carousel, eski sürüm) 1 sütun + 0 boşluğa düşer = * bugünkü davranış; yani en kötü ihtimalle nötr. * * `:not(.swiper-initialized)`: init biter bitmez kural düşer, Swiper'ın inline * genişliği devralır — çakışma olmaz. * * ⚠️ Kırılım sınırında (tam 1024px gibi) Elementor'un CSS media query'si ile * Swiper'ın JS breakpoint'i 1px kayabilir; o tek genişlikte ilk boya bir sütun * şaşabilir. Bugünkü 1→3 sıçramasının yanında önemsiz. */ .elementor-widget-loop-carousel .swiper:not(.swiper-initialized) .swiper-slide { width: calc( (100% - var(--swiper-slides-gap, 0px) * (var(--swiper-slides-to-display, 1) - 1)) / var(--swiper-slides-to-display, 1) ); flex-shrink: 0; } /* 🚨 Buraya `margin-right: var(--swiper-slides-gap)` EKLEME. Bir kez eklendi ve * ölçümle geri alındı: init ÖNCESİ boşluğu Elementor zaten veriyor, bizimki * üstüne binip araları 24px yerine 48px yapıyordu → slaytlar x=85/540/996'da * duruyor, Swiper init olunca 85/516/947'ye çekiyordu. Genişlik doğru olsa * bile strip kayıyor ve CLS 0.14'te kalıyordu. Yalnız GENİŞLİK yaz. */ /* ═══════════════════════════════════════════════════════════════════════════ * YATAY KART — .ks-loop-card--row (Loop Item #5930 "Ürün Kartı (Yatay)") * ═══════════════════════════════════════════════════════════════════════════ * "Bunları da beğenebilirsiniz" gibi alt alta dizilen listeler için: görsel * solda küçük, künye sağda. Loop GRID ile kullanılır (carousel değil). * * Kart `ks-loop-card` sınıfını AYNEN taşıdığı için buton kutusu, fiyat * puntosu/indirimli düzeni ve yıldız boyu yukarıdaki kurallardan gelir — * burada YALNIZ yerleşim var. Yani operatör dikey karttaki bir değeri * değiştirdiğinde yatay kart da izler; tek kaynak korunur. * ═══════════════════════════════════════════════════════════════════════════ */ /* Görsel sütunu: 96px sabit, 3:4 oranı görselin kendi ölçüsünden gelir (woocommerce_thumbnail 420×560 → 96×128). Küçülmesin/büyümesin diye flex temel değeri kilitli. */ .ks-loop-card--row .ks-loop-media--row { /* 96 → 80 → 72 → 64px (operatör, 16 Ağu, üç turda): liste satırı iyice kompaktlaştı. Yükseklik yazılmıyor — görselin kendi 3:4 oranından geliyor (64×85). ⚠️ Operatör görsele Elementor'dan 1px çerçeve + 7px köşe yarıçapı ekledi. Genişliği KAP belirliyor, görsel `width:100%` ile ona uyuyor; Elementor `box-sizing: border-box` bastığı için çerçeve bu 64px'in İÇİNDE kalır, satır hizasını kaydırmaz. */ flex: 0 0 64px; width: 64px; max-width: 64px; } .ks-loop-card--row .ks-loop-media--row img { display: block; width: 100%; height: auto; } /* Yıldız + puan liste satırında daha küçük (operatör, 16 Ağu): dikey kartta 0.8em, burada 0.7em. Tek ayar noktası bu — yıldız maskesinin genişliği (5.3em) font-size'a bağlı olduğu için yıldızlar ve puan BİRLİKTE ölçeklenir. 🚨 `.ks-vm-rs-stars`ın width'ine dokunma: maske kabı, esnetilirse 3 yıldızlık ürün 5 yıldız görünür. */ .ks-loop-card--row .ks-loop-rating { font-size: 0.7em; } /* Künye sütunu: kalan genişliği alır. `min-width: 0` ŞART — flex öğesi varsayılan olarak içeriğinden daha dar olamaz, uzun ürün adı taşar. */ .ks-loop-card--row .ks-loop-row-body { flex: 1 1 auto; min-width: 0; } /* Başlık: listede DÖRT satırla sınırlı (operatör, 16 Ağu — 2'den çıkarıldı; KS ürün adları uzun: "Kaynak Saç | %100 Gerçek Özbek | Platin Tonları Keratin Uç, Düz/Doğal, 50 cm, #22 Açık Sarı" gibi), beşinci satıra taşarsa üç nokta. Punto kartın kendi başlığından küçük — burada başlık künye satırı, kart başlığı değil. */ .ks-loop-card--row .ks-loop-row-body .elementor-heading-title { font-size: 0.875em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Buton bu kartta YOK (operatör, 16 Ağu): şablondan [ks_loop_button] çıkarıldı — liste satırının tamamı zaten ürüne götürüyor. Kural yine de duruyor: operatör butonu Elementor'dan geri koyarsa satırda içerik kadar genişlikte kalsın (dikey kartta tam genişlik doğruydu, yatayda değil). */ .ks-loop-card--row .ks-loop-cart { justify-content: flex-start; } /* ── DİKEY BOŞLUĞU SHORTCODE ÜRETMEZ (operatör, 16 Ağu) ─────────────────── */ /* * Künyedeki parçaların arasındaki boşluğu operatör ELEMENTOR'DAN ayarlıyor * (widget marjı / konteyner gap'i). Bizim sarmalayıcılarımız buna hiçbir şey * eklememeli, yoksa Elementor'da 0 yazan boşluk ekranda 0 olmaz ve operatör * "neden kapanmıyor" diye CSS'i kurcalamak zorunda kalır. * * 🚨 Sıfırlanan YALNIZ BİZİM kutularımız. `.elementor-widget-*` sarmalayıcıya * DOKUNULMAZ — ölçüldü, oradaki `margin-top: 4px` operatörün kendi ayarı; * onu da sıfırlarsak boşluk kontrolünü elinden almış oluruz. * * Rozetin kendi 3px dikey dolgusu istisna: o parçalar arası boşluk değil, * chip'in kendi biçimi (operatör "iç paddingi rahatlat" diye ayrıca istedi). */ .ks-loop-card--row .ks-loop-rating, .ks-loop-card--row .ks-loop-price, .ks-loop-card--row .ks-loop-cart { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } /* ── İndirimli fiyat YATAY KARTTA TEK SATIR (operatör, 16 Ağu) ──────────── */ /* * Dikey kartta indirimli fiyat iki satır (rozet solda, eski üstte, yeni * altta). Liste satırında bu dikeyde yer yiyor; burada üçü de yan yana ve * AYNI PUNTODA: [%20] 2.350 ₺ 1.880 ₺ * * Ayrımı ne sağlıyor: eski fiyat üstü çizili + gri, yeni fiyat kalın + * secondary renk. Yani punto eşitlenince bile hangisinin güncel olduğu * okunuyor; boyut farkına gerek yok. * * 🚨 Yukarıdaki grid kuralları `.ks-loop-card ...` kapsamında olduğu için bu * karta da uyuyordu; burada display flex'e döndürülüyor ve grid'e özgü * `align-self: stretch` + dikey marj sıfırlanıyor (flex satırında rozeti * gereksiz uzatıyordu). */ .ks-loop-card--row .ks-loop-price:has(.ks-vm-summary-old) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px; } .ks-loop-card--row .ks-loop-price:has(.ks-vm-summary-old) .ks-vm-summary-badge { align-self: auto; margin: 0; } .ks-loop-card--row .ks-loop-price .ks-vm-summary-new .woocommerce-Price-amount, .ks-loop-card--row .ks-loop-price .ks-vm-summary-old, .ks-loop-card--row .ks-loop-price .ks-vm-summary-badge { font-size: 0.875em; /* künye başlığıyla aynı ölçek */ } /* İndirimli satırın kademesi (operatör, 16 Ağu — son hâli): * * GÜNCEL fiyat : düz fiyatla BİREBİR aynı (14px / 700). Ayrım yalnız RENK — * indirimlide secondary, düzde metin rengi. Yani bir turda * 12,8px'e çekilmişti, geri alındı: satırlar arasında aynı * şeyin iki farklı boyda yazılması tutarsızdı. * ESKİ fiyat : 11,2px — dipnot; üstü çizili + gri zaten okuyucuya * "bu geçmiş" diyor, punto da onu izliyor. * ROZET : 12,8px, dolgu 3px/5px (yanları daraltıldı). * * Not: güncel fiyat için AYRI kural yazılmıyor — yukarıdaki `--row` punto * kuralı (0.875em) zaten onu kapsıyor; buradan çıkarmak yeterliydi. */ .ks-loop-card--row .ks-loop-price:has(.ks-vm-summary-old) .ks-vm-summary-old { font-size: 0.7em; } /* Eski ve güncel fiyat AYNI SATIR KUTUSUNU paylaşsın ki yan yana dikeyde * ortalı dursunlar (operatör). İkisinin puntosu farklı olduğu için birimsiz * bir `line-height` işe yaramaz — o, her elemanın KENDİ puntosuna göre * hesaplanır (11,2px'lik eski fiyat 11,2px, 14px'lik güncel fiyat 14px satır * kutusu alır ve tabanları kayar). * * Çözüm: satır yüksekliğini UZUNLUK olarak kaba yaz (0.875em = kabın 16px'ine * göre 14px). Uzunluk değerler mirasta hesaplanmış hâliyle iner, yani her iki * çocuk da 14px'lik aynı kutuyu alır. Çocukların kendi `line-height: 1` * kuralları (biri frontend.css'ten, biri yukarıdan) `inherit` ile susturuluyor. */ .ks-loop-card--row .ks-loop-price { line-height: 0.875em; } .ks-loop-card--row .ks-loop-price .ks-vm-summary-old, .ks-loop-card--row .ks-loop-price .ks-vm-summary-new { line-height: inherit; } .ks-loop-card--row .ks-loop-price:has(.ks-vm-summary-old) .ks-vm-summary-badge { /* Oran 12,8px → 11,5px (operatör, "içindeki değeri de biraz küçültelim"). İşaretin oranı 0.72 → 0.8'e çekildi ki rozet küçülürken "%" okunaksız hâle gelmesin (9,2px'te kalır). */ font-size: 0.72em; padding: 3px 5px; } .ks-loop-card--row .ks-loop-price .ks-vm-summary-badge .ks-loop-pct-sign { font-size: 0.8em; } /* Boş shortcode (puansız üründe [ks_loop_rating]) künye sütununda da yer kaplamasın — aşağıdaki genel kural `.ks-loop-card` altındaki her sarmalayıcıyı kapsıyor, burada ayrıca bir şey gerekmiyor. */ /* ── Boş shortcode çıktısı kart düzeninde yer kaplamasın ────────────────── */ /* İndirimsiz üründe [ks_loop_badge] hiçbir şey basmaz, ama Elementor widget sarmalayıcısını yine de yazar:
. Sarmalayıcının kendisi :empty DEĞİLDİR (içinde o boş div var), o yüzden :has() ile içeriden bakıyoruz. */ .ks-loop-card .elementor-widget-shortcode:has(> .elementor-shortcode:empty) { display: none; } /* ── Tablet + mobilde carousel OKLARI gizli (operatör, 6 Eyl 2026) ─────── */ /* Elementor Pro Loop Carousel'in "Arrows" anahtarı kırılımsız düz bir SWITCHER (base-carousel-trait.php), panelde tablet/mobil için ayrı aç/kapa yok. Okları Elementor'un tablet kırılımından (≤1024px) itibaren gizliyoruz; dokunmatik kaydırma (Swiper) ve altta nokta sayfalama aynen çalışır. Site genelindeki TÜM loop carousel'ler (ürün sayfası, sepet, anasayfa) kapsanır. Yalnız masaüstü/laptop'ta ok görünür. Özgüllük: Elementor e-swiper.min.css okları `.elementor-element .swiper ~ .elementor-swiper-button` (3 sınıf) ile inline-flex yapar; 2 sınıflık kural yenilir (ölçüldü). Bu yüzden widget sınıfı + .elementor-element birlikte (4 sınıf), !important gerekmez. */ @media (max-width: 1024px) { .elementor-widget-loop-carousel.elementor-element .swiper ~ .elementor-swiper-button, .elementor-widget-loop-carousel.elementor-element .swiper .elementor-swiper-button { display: none; } /* "Arrows position = Outside" ayarı swiper kabını daraltıp (e-swiper.min.css: `.elementor-element.elementor-arrows-position-outside .swiper {width: calc(100% - 60px)}`) iki yana 30px ok payı bırakır. Ok yokken pay da yok: kap tam genişlik. */ .elementor-widget-loop-carousel.elementor-element.elementor-arrows-position-outside .swiper { width: auto; /* kenar boşluklarına saygılı tam genişlik (100% + margin taşardı) */ margin-inline: 0; } } /* ── YARIM KART TAŞMASI: ilk boya (Swiper init öncesi) genişliği ──────── */ /* `ks-peek-yes` widget'ında tablet/mobilde Swiper'a N+0,5 slayt verilir (loop-peek.js). Yukarıdaki genel ilk-boya kuralı N'e göre hesaplar; init sonrası 0,5 slayt fark = CLS. Aynı Swiper formülü, N+0,5 ile: slayt = (kapsayıcı − boşluk × (N + 0,5 − 1)) / (N + 0,5) Masaüstü/laptop'ta (>1024) genel kural geçerli, burası devreye girmez. */ @media (max-width: 1024px) { .elementor-widget-loop-carousel.ks-peek-yes .swiper:not(.swiper-initialized) .swiper-slide { width: calc( (100% - var(--swiper-slides-gap, 0px) * (var(--swiper-slides-to-display, 1) - 0.5)) / (var(--swiper-slides-to-display, 1) + 0.5) ); } /* İlk slayt sol boşluğu (panel: ks_peek_offset → --ks-peek-offset, Elementor post CSS'i). Init sonrası Swiper aynı boşluğu slidesOffsetBefore ile verir; kural init'te düşer, çakışma olmaz. */ .elementor-widget-loop-carousel.ks-peek-yes .swiper:not(.swiper-initialized) .swiper-wrapper { padding-inline-start: var(--ks-peek-offset, 15px); } /* SONSUZ DÖNGÜ (v2.463.0, 7 Eki 2026): ilk-boya boşluğu da JS ile aynı kural → min(offset, kartlar arası boşluk); önceki kartın kuyruğu görünür alana girmez, 6 Eyl'deki clip-path maskesi (ks-peek-moving) KALDIRILDI. `"infinite":"yes"` data-settings'e yazılır (kapalıyken anahtar yok). */ .elementor-widget-loop-carousel.ks-peek-yes[data-settings*='"infinite":"yes"'] .swiper:not(.swiper-initialized) .swiper-wrapper { padding-inline-start: min(var(--ks-peek-offset, 15px), var(--swiper-slides-gap, 0px)); } } /* ── Kaydıracak slayt yoksa ok gösterme (operatör, 6 Eyl 2026; TÜM loop carousel'ler) ── */ /* Swiper sonsuz döngü KAPALIYKEN başta/sonda ilgili oka `swiper-button-disabled`, tüm slaytlar sığıyorsa iki oka birden `swiper-button-lock` verir; sonsuz döngüde bu sınıflar hiç oluşmaz, kural kendiliğinden devre dışı kalır. `visibility` (display değil): okun yeri korunur, kaydırma başlayınca şerit zıplamaz. */ .elementor-widget-loop-carousel.elementor-element .swiper ~ .elementor-swiper-button.swiper-button-disabled, .elementor-widget-loop-carousel.elementor-element .swiper ~ .elementor-swiper-button.swiper-button-lock { visibility: hidden; pointer-events: none; } /* Aynı kuralın İLK BOYA ayağı (operatör, 6 Eyl): Swiper kurulmadan önce disabled/lock sınıfları yok, oklar bir an görünüp kayboluyordu. Sonsuz döngüsü KAPALI widget'ta oklar Swiper kurulana kadar gizli; kurulunca Swiper sınıfları devralır. Sonsuz döngülü carousel'lerde ok baştan görünür kalır. 🚨 Kapalı anahtar data-settings'e YAZILMAZ (Elementor boş değerleri atar, "infinite":"no" diye bir şey yoktur; ölçüldü) → "yes" İÇERMEYEN widget. */ .elementor-widget-loop-carousel.elementor-element:not([data-settings*='"infinite":"yes"']) .swiper:not(.swiper-initialized) ~ .elementor-swiper-button { visibility: hidden; pointer-events: none; } /* ── YARIM KART TAŞMASI, MASAÜSTÜ + LAPTOP (panel: ks_peek_desktop, 6 Eyl 2026) ── */ /* Aynı formülün >1024 ayağı: `ks-peek-desktop-yes` widget'ında Swiper'a N+0,5 verilir (loop-peek.js); ilk boya da N+0,5 ile hesaplanır, ilk slayt --ks-peek-offset-desktop kadar içeriden başlar. "Outside" ok konumunun 60px daraltması kalkar: taşma kenara kadar aksın (oklar şeridin üstünde). */ @media (min-width: 1025px) { .elementor-widget-loop-carousel.ks-peek-desktop-yes .swiper:not(.swiper-initialized) .swiper-slide { width: calc( (100% - var(--swiper-slides-gap, 0px) * (var(--swiper-slides-to-display, 1) - 0.5)) / (var(--swiper-slides-to-display, 1) + 0.5) ); } .elementor-widget-loop-carousel.ks-peek-desktop-yes .swiper:not(.swiper-initialized) .swiper-wrapper { padding-inline-start: var(--ks-peek-offset-desktop, 15px); } /* Sonsuz döngüde ilk-boya boşluğu = min(offset, boşluk) (v2.463.0; maske kalktı). */ .elementor-widget-loop-carousel.ks-peek-desktop-yes[data-settings*='"infinite":"yes"'] .swiper:not(.swiper-initialized) .swiper-wrapper { padding-inline-start: min(var(--ks-peek-offset-desktop, 15px), var(--swiper-slides-gap, 0px)); } .elementor-widget-loop-carousel.elementor-element.elementor-arrows-position-outside.ks-peek-desktop-yes .swiper { width: auto; margin-inline: 0; } } /* ── Oklar yalnız üzerine gelince (panel: ks_arrows_hover, 6 Eyl 2026) ──── */ /* opacity ile: disabled/lock (visibility) ve ≤1024 (display) kurallarına dokunmaz. Klavye odağı içindeyken de görünür (erişilebilirlik). */ .elementor-widget-loop-carousel.ks-arrows-hover-yes .elementor-swiper-button { opacity: 0; transition: opacity .25s ease; } .elementor-widget-loop-carousel.ks-arrows-hover-yes:hover .elementor-swiper-button, .elementor-widget-loop-carousel.ks-arrows-hover-yes:focus-within .elementor-swiper-button { opacity: 1; } /* ── AÇIK METİNLİ KART (ks-loop-card--light): koyu zeminli "Haftanın fırsatları" şeridi, şablon "Ürün Kartı (İndirim)" #7489 (üreteç ks-make-loop-card-discount.php, 6 Eyl 2026). Başlık rengi Elementor'dan (title_color); fiyat/puan shortcode çıktıları kontrol taşımadığından renk burada. Rozet ve yıldızlar kendi renginde kalır. */ .ks-loop-card.ks-loop-card--light, .ks-loop-card.ks-loop-card--light .ks-loop-price, .ks-loop-card.ks-loop-card--light .ks-loop-price .ks-vm-summary-new, .ks-loop-card.ks-loop-card--light .ks-loop-price ins, .ks-loop-card.ks-loop-card--light .ks-vm-rating-summary { color: #fff; } .ks-loop-card.ks-loop-card--light .ks-loop-price .ks-vm-summary-old, .ks-loop-card.ks-loop-card--light .ks-loop-price del { color: rgba(255, 255, 255, .7); } /* ── VİTRİN KARTI varyant satırı (v2.419.0, 7 Eyl 2026) ───────────────── [ks_loop_price] vitrin varyasyonunda fiyatın üstüne "50 cm · 22 Açık Sarı · 0,8 gr · 100 adet" basar. Ana ürün kartında satır yoktur. */ .ks-loop-card .ks-loop-variant { font-size: .78em; line-height: 1.3; color: #6b6b6b; margin: 0 0 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ks-loop-card.ks-loop-card--light .ks-loop-variant { color: rgba(255, 255, 255, .78); } /* Woo mağaza kartı (Botiga): başlığın altında aynı satır. */ .products .product .ks-loop-variant { font-size: .8em; line-height: 1.3; color: #6b6b6b; margin: 2px 0 4px; } /* ── ANASAYFA HERO SATIRI: slider yüksekliği = Haftanın Fırsatları bloğu ── (7 Eyl 2026) Sayfa 14: 883fcde satırı → 308d246 (slides 09a2f45) | 8c29eea (haftanin-firsatlari). Masaüstü + laptop'ta (≥1025px) fırsat bloğu ürün adları yüzünden uzayınca slider onunla eşit uzar; taban = widget'ın Height ayarı (--ks-slides-h, class-ks-vm-loop-card.php slides_height_var; v2.464.1), ayar boşsa 415px. Tablet/mobilde satır alt alta akar, dokunulmaz. */ @media (min-width: 1025px) { /* 🚨 Widget'a display:flex VERME: Swiper sarmalayıcısı sütun flex öğesi olarak 0 genişliğe düşüyor (7 Eyl, ölçüldü). Widget blok kalır, sadece konteyner içinde büyür; sarmalayıcı yüzde yükseklikle onu doldurur. */ .elementor-14 .elementor-element.elementor-element-308d246 > .elementor-element.elementor-element-09a2f45 { --flex-grow: 1; flex-grow: 1; min-height: var(--ks-slides-h, 415px); } .elementor-14 .elementor-element.elementor-element-09a2f45 .elementor-slides-wrapper { height: 100%; min-height: var(--ks-slides-h, 415px); } .elementor-14 .elementor-element.elementor-element-09a2f45 .elementor-slides-wrapper .swiper-wrapper { height: 100%; } body .elementor-14 .elementor-element.elementor-element-09a2f45 .elementor-slides .swiper-slide { height: 100%; min-height: var(--ks-slides-h, 415px); } /* Köşe yuvarlama 12px yalnız laptop + masaüstü (operatör, 7 Eyl). Kırpma sarmalayıcıda (overflow hidden zaten Swiper'dan); Safari'de transform'lu Ken Burns arka planı için isolation + slaytta da radius. */ .elementor-14 .elementor-element.elementor-element-09a2f45 .elementor-slides-wrapper { border-radius: 12px; overflow: hidden; isolation: isolate; } body .elementor-14 .elementor-element.elementor-element-09a2f45 .elementor-slides .swiper-slide { border-radius: 12px; overflow: hidden; } }