/** * KS Variation Manager — Frontend CSS. * * Styles for variation cards in product loops and any frontend visual adjustments. * * @package KS_Variation_Manager */ /* ────────────────────────────── * Variation Cards in Loop * ────────────────────────────── */ /* * Variation cards in the shop/archive loop should look identical to * regular product cards. These rules provide subtle differentiators * and ensure proper display without conflicting with the Botiga theme. */ /* Variation badge — subtle indicator that this is a specific variation. */ ul.products li.product.type-product_variation .ks-vm-variation-badge { display: inline-block; font-size: 11px; font-weight: 500; background: #f0f0f1; color: #50575e; padding: 2px 8px; border-radius: 3px; margin-bottom: 6px; } /* Variation title — may be longer, so allow wrapping. */ ul.products li.product.type-product_variation .woocommerce-loop-product__title { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } /* "Sepete Ekle" button — variation cards get a direct add-to-cart. */ ul.products li.product.type-product_variation a.add_to_cart_button { /* Already styled by theme — just ensure it's not hidden. */ display: inline-block !important; opacity: 1 !important; } /* Hide "Select options" text that WooCommerce may show for variable products. */ ul.products li.product.type-product_variation a.product_type_variable { display: none; } /* ────────────────────────────── * Single Product — Variation URL * ────────────────────────────── */ /* No additional styling needed for single product pages. * The variation pre-selection is handled via JavaScript. * Existing theme + VillaTheme Swatches styles apply. */ /* ────────────────────────────── * Single Product — Dynamic Price * ────────────────────────────── */ /* Smooth transition when price updates. */ .product .summary .price.ks-vm-price-updated, .product .entry-summary .price.ks-vm-price-updated, .elementor-widget-wl-single-product-price .price.ks-vm-price-updated, .elementor-widget-woocommerce-product-price .price.ks-vm-price-updated { transition: opacity 0.2s ease; } /* Quantity breakdown note shown when qty > 1. */ .ks-vm-qty-note { display: block; font-size: 0.75em; font-weight: 400; color: #666; margin-top: 4px; line-height: 1.4; } /* Sale price styling within the updated summary price. */ .price.ks-vm-price-updated del { opacity: 0.6; font-size: 0.9em; margin-right: 6px; } .price.ks-vm-price-updated ins { text-decoration: none; font-weight: 700; } /* Hide WooCommerce's default variation price that renders inside the add-to-cart * area (just above the button) once a variation is chosen. The live price now * always lives in our summary block (#ks-vm-summary "Tutar"), so this WC copy is a * duplicate. Unconditional + scoped-specific so it beats the theme/Elementor/ * VillaTheme rules without depending on the JS style injection having run. */ .woocommerce div.product .single_variation_wrap .woocommerce-variation-price, .woocommerce div.product .single_variation .woocommerce-variation-price { display: none !important; } /* ────────────────────────────── * Botiga Theme Compatibility * ────────────────────────────── */ /* Botiga quick-view: disable for variation cards (they link directly). */ .type-product_variation .botiga-quick-view-button { display: none !important; } /* ────────────────────────────── * Responsive * ────────────────────────────── */ @media screen and (max-width: 768px) { ul.products li.product.type-product_variation .woocommerce-loop-product__title { font-size: 14px; } } /* ══════════════════════════════════════════ * v2.0.0 — Reset Button Removal * ══════════════════════════════════════════ */ /* Hide "Clear/Temizle" reset variations link (CSS fallback for PHP filter). */ .reset_variations { display: none !important; } /* ══════════════════════════════════════════ * v2.0.0 — Variation Page: Hide-Until-Ready * ══════════════════════════════════════════ */ /* Hide variation selectors until JS confirms correct state. */ .ks-vm-variation-page .variations_form:not(.ks-vm-ready) .variations { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } /* Reveal when ready. */ .ks-vm-variation-page .variations_form.ks-vm-ready .variations { opacity: 1; pointer-events: auto; } /* Bypass WC slideDown animation on variation pages — show price/add-to-cart immediately. */ .ks-vm-variation-page .single_variation { display: block !important; animation: none !important; } .ks-vm-variation-page .single_variation_wrap { display: block !important; } /* ══════════════════════════════════════════ * (KALDIRILDI) Loop mini adet sayacı — v2.287.0 * ══════════════════════════════════════════ * `.ks-vm-loop-qty-wrap` / `.ks-vm-qty-minus` / `.ks-vm-qty-plus` / * `.ks-vm-qty-input` kuralları buradaydı. Sayaç, "sepeti güncelle" modeliyle * birlikte kaldırıldı (operatör, 16 Ağu 2026); markup'ı üreten iki yer de yok: * KS_VM_Cart::loop_add_to_cart_link (silindi) ve cart-aware.js::buildStepperHtml * (silindi). `.ks-vm-cart-updating` DURUYOR — onu sepet sayfası da kullanıyor. * ══════════════════════════════════════════ */ .ks-vm-cart-updating { opacity: 0.6; pointer-events: none; } /* Disable-state only for add-to-cart buttons (no loader/check visuals). */ .add_to_cart_button[disabled], .single_add_to_cart_button[disabled], .add_to_cart_button.loading, .single_add_to_cart_button.loading { opacity: 0.6; pointer-events: none; } /* "Hemen Satın Al" disabled until a full variation is chosen — same behaviour * as the WooCommerce add-to-cart button (toggled from cart-aware.js). */ .ks-vm-buy-now-btn:disabled, .ks-vm-buy-now-btn.ks-vm-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Hide WooCommerce injected "View cart / Sepetim" forward link. */ a.added_to_cart.wc-forward { display: none !important; } /* Hide the theme/WC loader/check pseudo-elements (they sit on the RIGHT); we draw * our own spinner on the LEFT of the label instead (below). */ .add_to_cart_button.loading::after, .single_add_to_cart_button.loading::after, .ks-vm-atc-btn.loading::after, .add_to_cart_button.added::after, .single_add_to_cart_button.added::after { display: none !important; content: none !important; } /* Spinner shown immediately to the LEFT of the button label while an add / update * is in flight. The add-to-cart button carries `.loading` for the whole ajax add * (Woolentor sets it on click, removed on added_to_cart) — and since an update is * just an add with the set-qty flag, the same spinner covers "Sepeti Güncelle". */ /* 🚨 YALNIZ İKONSUZ butonlarda. İkonu olanlarda spinner ikonun KENDİ KUTUSUNA * çizilir (aşağıdaki `.ks-vm-icon-swap::before` bloğu) — yoksa kutu boyutu * değişir ve etiket yerinden oynar. */ .add_to_cart_button.loading:not(:has(.ks-vm-icon-swap))::before, .single_add_to_cart_button.loading:not(:has(.ks-vm-icon-swap))::before, .ks-vm-atc-btn.loading:not(:has(.ks-vm-icon-swap))::before, .ks-vm-buy-now-btn.ks-vm-buy-now-loading:not(:has(.ks-vm-icon-swap))::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; /* not: flex butonlarda bu margin aşağıda sıfırlanır (gap zaten var) */ vertical-align: -0.15em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; box-sizing: border-box; animation: ks-vm-btn-spin 0.6s linear infinite; } /* Ürün sayfası butonları flex + gap:0.5em — spinner'ın kendi margin'i gap'le * ÜST ÜSTE binip 1em'lik boşluk yaratıyordu; flex olanlarda margin gereksiz. */ .single_add_to_cart_button.loading::before, .ks-vm-atc-btn.loading::before, .ks-vm-buy-now-btn.ks-vm-buy-now-loading::before { margin-right: 0; } @keyframes ks-vm-btn-spin { to { transform: rotate(360deg); } } /* ── Button icons (KS_VM_Icons — Lucide/Feather inline SVG) ── */ /* Product-page buttons render icon + label as a centred flex row, so the icon is * always vertically centred with the text (an inline vertical-align is only ever * approximate). !important to win over the theme/Elementor button display. */ .single_add_to_cart_button, .ks-vm-atc-btn, .ks-vm-buy-now-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Sync the add-to-cart button's hover COLOUR change with the icon cross-fade (0.2s): * Elementor/theme give this button a 0.3s transition, so its colours lagged the icon. * transition-duration only touches timing, leaving the transitioned properties intact. */ .single_add_to_cart_button, .ks-vm-atc-btn { transition-duration: 0.2s !important; } /* ⭐ OPTİK ORTALAMA — etiket "1-2px aşağıda" görünüyordu (operatör, 15 Ağu 2026). * * Ölçüm (canvas TextMetrics, Plus Jakarta Sans 600/700): metrik kutu * ascent 1.04em / descent 0.22em, büyük harf yüksekliği 0.745em. CSS bir satırı * ortalarken METRİK kutuyu ortalar; o kutu yukarı doğru şişkin olduğu için * harflerin kendisi merkezin ALTINA düşüyor: * * (1.04 − 0.22 − 0.745) / 2 = 0.0375em → 15.2px yazıda 0.57px * * Ekran 1x iken bu sapma 1px'e yuvarlanıyor, yani gözle görülüyor. Aşağıdaki * transform tam o farkı geri alır: büyük harf kutusunun merkezi butonun * merkezine oturur, ikonun 1em kutusuyla da hizalanır. * * 🚨 Sabit px DEĞİL em: sapma yazı boyutuyla ölçekleniyor (13.6px etikette * 0.51px). 🚨 vertical-align DEĞİL transform: flex satırında vertical-align * etkisizdir ve komşulardan etkilenir (aynı ders KDV notunda alınmıştı). * 🚨 Yalnız ETİKET kaydırılır; ikon zaten kendi kutusunda ortalı. * * Metin uzunluğuna/harflerine göre DEĞİŞMEZ: düzeltme yazı tipinin sabiti, * dizginin değil. "Buy Now"daki y'nin kuyruğu etiketi yukarı ittirmez. */ .ks-vm-btn-label { transform: translateY(-0.0375em); } /* THE simple-vs-variable difference: Botiga sizes the add-to-cart button UP on * variable products only — a variable-scoped rule * (.single-product .woocommerce-variation-add-to-cart .button{font-size:1.6rem; * padding-top:1.55rem;padding-bottom:1.59rem}) that a simple product never matches, * because the .woocommerce-variation-add-to-cart element only exists for variable * products. So the button — and, through the row's align-items:stretch, every button's * height and label position — came out different on the two product types. Pin the * button to the SAME box as the buy-now button on BOTH types (!important to beat that * theme rule), so simple and variable render identically. */ /* `.ks-vm-atc-btn` (the detached [ks_add_to_cart_buttons] proxy) shares this * declaration rather than repeating the numbers: it stands in for the real * button, so the two must be the same box. Measured before adding it, everything * already matched EXCEPT font-size (15.2px vs 14px) and min-height. */ .single_add_to_cart_button, .ks-vm-atc-btn { min-height: 46px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 0.95em !important; line-height: 1.4 !important; min-width: 185px !important; } /* Sized to the text and coloured with it. fill:currentColor is set explicitly (not * just via the SVG attribute) so the icon tracks the label's colour — including the * button's hover colour transition — identically. */ .ks-vm-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; vertical-align: middle; transition: fill 0.2s ease; } /* Force the icon to the button's own text colour — i.e. exactly the label's colour * (currentColor === the button's `color`) — overriding the svg's fill presentation * attribute and any stray fill rule. Targets the svg AND its path. */ .single_add_to_cart_button .ks-vm-icon, .single_add_to_cart_button .ks-vm-icon path, .ks-vm-atc-btn .ks-vm-icon, .ks-vm-atc-btn .ks-vm-icon path, .ks-vm-buy-now-btn .ks-vm-icon, .ks-vm-buy-now-btn .ks-vm-icon path, .ks-btn .ks-vm-icon, .ks-btn .ks-vm-icon path { fill: currentColor !important; color: inherit; } /* ⭐ LOADER ETİKETİ OYNATMAZ — spinner İKONUN KUTUSUNUN İÇİNE çizilir. * * Operatör iki kez bildirdi (önce Sepete Ekle, 15 Ağu'da Hemen Satın Al): * "loader açılınca ikon ile label arası bir anda açılıyor". Önceki çözüm * ikonu ve sarmalayıcısını `display:none` yapıp spinner'ı BUTONUN ::before'una * çiziyordu; ölçüm o yaklaşımın KÖKTEN kusurlu olduğunu gösterdi: * * ikon sarmalayıcısı 17.47px (`.ks-vm-icon-swap{font-size:1.15em}`) * buton ::before 15.19px (butonun 1em'i) * → içerik 2.28px daralıyor, ortalanmış satırda etiket 1.14px kayıyor * * Doğru çözüm kutuya HİÇ DOKUNMAMAK: sarmalayıcı yerinde ve aynı boyutta * kalır, içindeki ikonlar `visibility:hidden` olur (yer kaplamaya devam * ederler), spinner de sarmalayıcının içine mutlak konumla çizilir. Böylece * düzen bir piksel bile değişmez. * * 🚨 Sarmalayıcının `font-size:1.15em`i sayesinde buradaki `1em` ikonun * boyutunun TA KENDİSİ — spinner ikonla birebir aynı yeri kaplar. İkon * boyutu değişirse spinner kendiliğinden uyar. * 🚨 İkonsuz butonlar (loop'taki `.add_to_cart_button`, mini sepet footer'ı) * eski yolu kullanmaya devam eder: yukarıdaki `:not(:has(.ks-vm-icon-swap))`. */ .single_add_to_cart_button.loading .ks-vm-icon, .add_to_cart_button.loading .ks-vm-icon, .ks-vm-atc-btn.loading .ks-vm-icon, .ks-vm-buy-now-btn.ks-vm-buy-now-loading .ks-vm-icon, .ks-vm-notify-btn.ks-vm-notify-loading .ks-vm-icon { /* Depoya talep gönder: aynı spinner (7 Eyl 2026) */ visibility: hidden; } .single_add_to_cart_button.loading .ks-vm-icon-swap::before, .add_to_cart_button.loading .ks-vm-icon-swap::before, .ks-vm-atc-btn.loading .ks-vm-icon-swap::before, .ks-vm-buy-now-btn.ks-vm-buy-now-loading .ks-vm-icon-swap::before, .ks-vm-notify-btn.ks-vm-notify-loading .ks-vm-icon-swap::before { content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; box-sizing: border-box; animation: ks-vm-btn-spin 0.6s linear infinite; } /* Regular → filled on hover, CROSS-FADED (not instantly swapped) so the icon changes * in step with the button's 0.2s colour transition instead of popping first. KS_VM_Icons * wraps the two weights in .ks-vm-icon-swap; the filled svg is stacked on top of the * regular one, and hover fades one out while the other fades in over the same 0.2s. */ .ks-vm-icon-swap { position: relative; display: inline-flex; flex: 0 0 auto; vertical-align: middle; } /* Yalnız `opacity` geçişli — `fill` BİLEREK yok (27 Tem 2026). * İkonlar `fill: currentColor` kullanıyor, yani butonun `color` geçişini zaten * birebir takip ediyorlar. Üstüne bir de `fill` geçişi koymak, hâlihazırda * animasyonlu bir değeri ikinci kez yumuşatıyor ve ikon rengi label'ın birkaç * kare gerisinde kalıyordu. Operatör isteği: ikon ve label rengi AYNI ANDA * değişsin. Cross-fade (regular→filled) opacity üzerinden sürüyor. */ .ks-vm-icon-swap .ks-vm-icon { transition: opacity 0.2s ease; } .ks-vm-icon-swap .ks-vm-icon--fill { position: absolute; top: 0; left: 0; margin: 0; opacity: 0; } .single_add_to_cart_button:hover .ks-vm-icon--reg, .ks-vm-atc-btn:hover .ks-vm-icon--reg, .ks-vm-buy-now-btn:hover .ks-vm-icon--reg, .ks-vm-notify-btn:hover .ks-vm-icon--reg, .ks-btn:hover .ks-vm-icon--reg { opacity: 0; } .single_add_to_cart_button:hover .ks-vm-icon--fill, .ks-vm-atc-btn:hover .ks-vm-icon--fill, .ks-vm-buy-now-btn:hover .ks-vm-icon--fill, .ks-vm-notify-btn:hover .ks-vm-icon--fill, .ks-btn:hover .ks-vm-icon--fill { opacity: 1; } /* ── İKON ↔ ETİKET BOŞLUĞU ── * The gap lives on the CONTAINER as a flex gap, never as a margin on * .ks-vm-icon. The same icon markup is used by buttons AND by the panel * headings, which want different spacing: a global margin on the icon forces * every other consumer to un-set it, and tightening one place silently empties * the others — exactly how the Sepete Ekle / Hemen Satın Al gap disappeared when * the panel heading was tightened. * Each container now owns its own value, so they cannot affect each other: * .ks-panel-head → 8px (declared with the panel) * buttons → 0.5em, scaling with the button's own font-size * Icon-only buttons (wishlist) are single-child flex boxes, so a gap has * nothing to apply to and they stay unaffected. */ .single_add_to_cart_button, .ks-vm-atc-btn, .ks-vm-buy-now-btn, .ks-vm-notify-btn, .ks-btn { gap: 0.5em; } /* ═══════════════════════════════════════════════ * Buy Now Button — Single Product Page * ═══════════════════════════════════════════════ */ /* (The add-to-cart + buy-now 50/50 row lives in one consolidated block further * down — search "share the row 50/50". Old conflicting layout rules removed.) */ .ks-vm-buy-now-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; min-height: 46px; /* Typography matched to the WooCommerce add-to-cart button (Elementor widget: * 0.95em / capitalize) so the two buttons read as a set. * * ⚠️ AĞIRLIK 600, 500 DEĞİL (operatör, 27 Tem 2026). Bu yorum eskiden "500" * diyordu ama Sepete Ekle o değeri kullanmıyor: onun 600'ü, devralınan * Elementor widget bloğundaki `font-weight: 600 !important` kuralından * geliyor (dosyada "ELEMENTOR WIDGET'INDAN DEVRALINAN STİLLER"). İkisi * yıllardır 500/600 diye ayrışmıştı — ölçüldü, tipografide başka HİÇBİR fark * yoktu (15.2px, Plus Jakarta Sans, 0.3px letter-spacing, capitalize, * line-height 15.2px hepsi eşitti). * * Sepete Ekle'nin ağırlığını değiştirirseniz burayı da güncelleyin; iki değer * ayrı yerlerde duruyor çünkü biri Elementor'dan devralınan blokta. */ font-family: inherit; font-size: 0.95em; font-weight: 600; /* Sepete Ekle ile aynı buton ailesi kuralı (operatör 15 Ağu: etiket * "Buy Now" — sözcük başları büyük). Etiketin kendisi de öyle yazılı, * yani capitalize kalksa bile görünüm değişmez. */ text-transform: capitalize; line-height: 1.4; letter-spacing: 0.3px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; white-space: nowrap; vertical-align: middle; /* Outline in the Elementor Global "Button Tertiary" (#DA6900), filled with it * on hover. Retune from Elementor → Site Ayarları → Renkler → Button Tertiary. * * ⚠️ 27 Tem 2026: bu kural ESKİDEN `--e-global-color-9b6e6c7` kullanıyordu ve * o global o tarihte **Button Primary Hover (#FFD73B)** olarak yeniden * tanımlandı — yani buton sessizce SARIYA döndü (ölçüldü: border ve metin * rgb(255,215,59), ekran görüntüsüyle de doğrulandı). Elementor global'leri * ID ile referanslandığı için yeniden adlandırma sessiz bir kaymaya yol açıyor; * bu dosyada o ID'yi kullanan HER yer gözden geçirildi. */ background: transparent !important; border: 2px solid var(--e-global-color-f410e05, #DA6900) !important; border-radius: 100px !important; color: var(--e-global-color-f410e05, #DA6900) !important; } /* Hover: Button Tertiary ile DOLAR, ikon ve label saf beyaz. * Beyaz bilerek `#fff` — bir global değil: turuncu dolgunun üstünde okunurluğu * garanti eden tek değer bu, ve marka paletindeki bir renge bağlansaydı operatör * onu değiştirdiğinde kontrast sessizce bozulabilirdi. */ .ks-vm-buy-now-btn:hover, .ks-vm-buy-now-btn:focus { background: var(--e-global-color-f410e05, #DA6900) !important; color: #fff !important; outline: none; } .ks-vm-buy-now-btn:active { opacity: 0.85; } /* Loading state — same visual as the add-to-cart button: the icon is replaced by * a spinner (::before) and the label stays. */ .ks-vm-buy-now-btn.ks-vm-buy-now-loading { opacity: 0.6; pointer-events: none; } /* Spinner + ikon gizleme ARTIK ORTAK KURALLARDA (bkz. `.loading::before` * bloğu ~270. satır). Burada kopyası duruyordu ve o kopyada `margin-right` * sıfırlanmıyor, `.ks-vm-icon-swap` de gizlenmiyordu → loader açılınca * spinner ile etiket arası bir anda açılıyordu. */ /* Shake animation when no variation is selected */ @keyframes ks-vm-shake { 0%, 100% { transform: translateX(0); } 15%, 45%, 75% { transform: translateX(-4px); } 30%, 60%, 90% { transform: translateX(4px); } } .ks-vm-shake { animation: ks-vm-shake 0.5s ease; } /* ── Adet products: the adet dropdown IS the quantity, so hide the native box ── * Body flag `ks-vm-adet-active` is set by KS_VM_Adet::body_class only when the * product actually has adet options (post-migration: pa_adet non-variation). * The stays in the DOM so it still submits — the server * (force_adet_quantity) and adet.js both keep it equal to the chosen adet. We * target the `.quantity` wrapper wherever the theme puts it (standard WC, the * variation grouping, and Elementor's add-to-cart holder), never the holder * itself (that also contains the add-to-cart button). Tune from Additional CSS. */ body.ks-vm-adet-active form.cart .quantity, body.ks-vm-adet-active .woocommerce-variation-add-to-cart .quantity, body.ks-vm-adet-active .e-atc-qty-button-holder .quantity { display: none !important; } /* ── "İstek Listesine Ekle" (wishlist) — icon-only button next to Buy Now ── * Styled like the buy-now button FOR NOW (transparent + accent border, filled on * hover) — a single standalone rule so its look can be differentiated later without * touching Buy Now. It carries only the Phosphor bookmark-simple icon: regular by * default, filled on hover AND while the product is in the wishlist * (.ks-vm-in-wishlist, toggled + persisted by cart-aware.js). */ .ks-vm-wishlist-btn { display: inline-flex; align-items: center; justify-content: center; /* Always a square: aspect-ratio ties width to height, padding:0 keeps the box * square, and min-width == min-height so it never collapses to a sliver. In the * button row align-self:stretch (grid rule above) makes the height match the other * buttons, so the square scales with them. border-radius:100px on a square = a * circular icon button, echoing the pill buttons. */ aspect-ratio: 1 / 1; padding: 0; min-height: 47px; min-width: 47px; box-sizing: border-box; font-size: 1.1em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; vertical-align: middle; background: transparent !important; /* #ddd = eski --ks-sc-border token'ının değeri; token side cart'la birlikte * kaldırıldı (v2.182.0), görünüm birebir aynı kalsın diye sabitlendi. */ border: 2px solid #ddd !important; border-radius: 100px !important; color: var(--e-global-color-primary) !important; } .ks-vm-wishlist-btn:hover, .ks-vm-wishlist-btn:focus { background: var(--e-global-color-primary) !important; border: 2px solid #ddd !important; color: #fff !important; outline: none; } .ks-vm-wishlist-btn:active { opacity: 0.85; } /* Icon-only: no label gap; sized to sit comfortably centred in the square. */ .ks-vm-wishlist-btn .ks-vm-icon { margin: 0; width: 1.8em; height: 1.6em; padding-left: 2px; } /* Regular by default; filled on hover AND once the product is in the wishlist. The * in-wishlist state keeps the outlined button (filled bookmark in the accent colour), * so "saved" reads differently from a hover (filled bookmark on the filled bg). */ .ks-vm-wishlist-btn:hover .ks-vm-icon--reg, .ks-vm-wishlist-btn.ks-vm-in-wishlist .ks-vm-icon--reg { opacity: 0; } .ks-vm-wishlist-btn:hover .ks-vm-icon--fill, .ks-vm-wishlist-btn.ks-vm-in-wishlist .ks-vm-icon--fill { opacity: 1; } /* ── Mobilde KÜÇÜLTME YOK (27 Tem 2026, operatör) ── * Burada eskiden ≤480px için `padding:0 14px; font-size:13px; min-height:42px` * vardı. İki sorunu birden yaratıyordu: * • Dokunmatik hedef 46px'ten 42px'e iniyordu — mobil tam tersini ister. * • YALNIZ buy-now'a uygulanıyordu; Sepete Ekle'de karşılığı yoktu, yani iki * buton mobilde 15.2px/46px ve 13px/42px diye AYRIŞIYORDU (ölçüldü). * Wishlist'in 42px'i de aynı sebeple kaldırıldı; artık her yerde tek ölçü. * * Aynı turda VillaTheme'in swatch küçültmesi de kapatıldı — ama o CSS'ten değil, * eklentinin kendi ayarından: WooCommerce → Variation Swatches → (her tasarım) * → "Reduce size / Mobile %". 85 idi, BOŞ bırakıldı. CSS'le ezilmedi çünkü o * blok ayarlardan üretiliyor ve boşken hiç basılmıyor; 100 yazmak da işe * yaramazdı (oran kodda iki kez uygulanıyor, iç kutu masaüstündeki 34px yerine * 46px olurdu). Eski değer: ["85","85","85"]. */ /* ══════════════════════════════════════════ * Elementor header ↔ Botiga gap fix * ══════════════════════════════════════════ * Botiga reserves space for its sticky header with a body padding-top even when * an Elementor Theme Builder header replaces it (Botiga renders no header, but * the padding stays) — leaving a big empty gap above the Elementor header. * The body class is added server-side only on pages whose conditions resolve to * an Elementor header (see KS_VM_Frontend::elementor_header_body_class). */ body.ks-vm-elementor-header-active:not(.header-transparent) { padding-top: 0 !important; } /* ══════════════════════════════════════════ * EPro MİNİ CART (header hover sepeti, v2.183.0) * ══════════════════════════════════════════ * Widget'ın kendi görünüm ayarları Elementor'da (header şablonu → Menu Cart); * buradakiler yalnız KS ekleri: panel başlığı + × butonunun başlıkla aynı * satıra alınması + tek-fiyat satırının okunurluğu. */ /* İLK BOYAMA FLASH'I — KÖK ÇÖZÜM PHP'DE (v2.183.4): EPro "improved CSS * loading" widget CSS'ini + şablon değişken dosyasını (post-4991.css) gövdede * geç basıyordu; KS_VM_Frontend::enqueue_assets ikisini artık HEAD'e alıyor — * operatör Elementor'dan stili değiştirse de ilk boyama hep güncel. (v2.183.1-2'nin * buradaki değer-kopyası yaklaşımı terk edildi: operatör widget'ı yeniden * stilleyince kopya bayatlayıp kendisi flash kaynağı oluyordu.) * Aşağıdaki tek kural DEĞER İÇERMEYEN yapısal emniyet kemeri: enqueue yolu bir * gün kırılırsa bile panel ilk boyamada açık BOYANAMAZ. */ body.elementor-default .elementor-widget-woocommerce-menu-cart:not(.elementor-menu-cart--shown) .elementor-menu-cart__container { transform: scale(0); } /* ═══════════════════════════════════════════════════════════════════ * SEPET TOGGLE (cart ikonu) + SAYAÇ ROZETİ — TEK KAYNAK BU BÖLÜM * (operatör kararı, v2.191.0) * ═══════════════════════════════════════════════════════════════════ * Toggle'ın ve sayacın TÜM görünümü buradan yönetilir; kurallar Elementor * widget kontrollerini (post-4991 şablon CSS'i) BİLİNÇLİ ezer — Elementor'dan * yapılacak toggle/sayaç stil değişiklikleri artık UYGULANMAZ, buradan yapın. * 🚨 Sayaç dairesi EPro'da EM tabanlıdır: font-size'ı değiştirmek daireyi ve * ofsetleri orantılı büyütür; sabit px width/height YAZMAYIN (yenilir). */ /* — NORMAL durum: buton kabuğu — * (geçiş süresi ikon+sayaçla AYNI olmalı; farklı süreler durum geçişinde * renklerin farklı anlarda değişmesine yol açıyordu — kötü UX, v2.191.1) */ .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button, .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button:hover { background-color: transparent !important; width: 42px !important; height: 42px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-radius: 100px !important; transition: background-color 0.2s ease !important; } /* — NORMAL durum: ikon — * translate = eski asimetrik padding'in optik ortalaması; KAP'a uygulanır ki * sayaç rozeti ikonla birlikte kaysın. 🚨 i'ye transform VERME: rozet DOM'da * ikondan ÖNCE duran absolute kardeş — i'ye transform stacking context açıp * ikonu rozetin ÜSTÜNE boyuyor (yaşandı). */ .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon { transform: translate(0.5px, 1.5px); } .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon i { font-size: 30px !important; color: var(--e-global-color-primary, #000) !important; transition: color 0.2s ease !important; } /* — NORMAL durum: sayaç rozeti — * Boyut = font-size (daire em ile türer). Konum/dikey hiza da BURADAN: * top = dikey, inset-inline-end = yatay ofset, line-height = rakamın daire * içindeki dikey oturuşu (hepsi em → font-size ile orantılı ölçeklenir). */ .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] { font-size: 11px; font-weight: 600; min-width: 18px; max-width: 18px; height: 18px; line-height: 18px; top: -0.75em; inset-inline-end: -0.75em; background-color: #DA6900; color: #fff; transition: background-color 0.2s ease, color 0.2s ease; text-align: center; padding-left: 1px; } /* — AKTİF durum (panel açık, --shown): Elementor'da bu durumun kontrolü yok. * Kaynak sırası gereği bu kurallar normal+hover kurallarından SONRA durmalı. */ .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button, .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown .elementor-menu-cart__toggle .elementor-menu-cart__toggle_button:hover { background-color: var(--e-global-color-secondary, #F27A1A) !important; } .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown .elementor-menu-cart__toggle .elementor-button-icon i { color: #fff !important; } .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--shown.elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] { background-color: var(--e-global-color-primary, #000); color: #fff; } /* 🚨 Elementor STICKY SPACER hayaleti (v2.188.4): header sabitlenirken * Elementor yerini korumak için header'ın visibility:hidden DERİN KLONUNU * basar (.elementor-sticky__spacer) — panel açıkken klon --shown sınıfıyla * kopyalanır ve aşağıdaki stepper kurallarının `visibility:visible!important` * force'u klonda da çalışıp SADECE −/+ oklarını hayalet gibi gösteriyordu * (sayfayla birlikte kayan çift oklar). Klondaki panel layout'a katkısız * (dropdown absolute) → komple kapat; tıklama/delege handler sızıntısı da * biter. */ .elementor-sticky__spacer .elementor-menu-cart__container { display: none !important; } /* YÜKLENİYOR durumu (operatör, v2.193.0): sayfa açılışında WC fragment * teyidi gelene dek panel içeriği güvenilir değil — mini-cart.js widget'a * .ks-vm-mc-loading basar (teyit/5sn emniyetinde kalkar); içerik gizli, * ortada spinner. Başlık satırı görünür kalır (content div'inin dışında). */ .elementor-menu-cart--cart-type-mini-cart.ks-vm-mc-loading .elementor-menu-cart__main { position: relative; min-height: 300px; } .elementor-menu-cart--cart-type-mini-cart.ks-vm-mc-loading .widget_shopping_cart_content { visibility: hidden; } .elementor-menu-cart--cart-type-mini-cart.ks-vm-mc-loading .elementor-menu-cart__main::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; box-sizing: border-box; border: 2px solid rgba(0, 0, 0, 0.12); border-top-color: var(--e-global-color-secondary, #F27A1A); border-radius: 50%; animation: ks-vm-btn-spin 0.6s linear infinite; } /* BOŞ SEPET (operatör, v2.189.1): panel 300px; ph-smiley (regular) ikonu + * "Sepetiniz henüz boş…" metni (gettext penceresi, TR/EN) panelde dikey+yatay * ortalı. İkon CSS ::before — şablon metni esc_attr ile bastığından HTML * enjekte edilemez, glyph doğrudan Phosphor font'undan basılır. */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__main:has(.woocommerce-mini-cart__empty-message) { min-height: 300px; display: flex; flex-direction: column; } .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__main:has(.woocommerce-mini-cart__empty-message) .widget_shopping_cart_content { flex: 1 1 auto; display: flex; } .elementor-menu-cart--cart-type-mini-cart .woocommerce-mini-cart__empty-message { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; /* Panelin iç padding'i asimetrik (sol 20 / sağ 8, Elementor cart_padding) * — sağdan 12px daraltarak blok merkezi PANEL merkezine oturur. */ margin: 0 12px 0 0; padding: 0 80px; text-align: center !important; line-height: 1.4em; /* Kit MUTED rengi (operatör) — EPro mesaj rengini kendi (0,3,0) * kuralında --empty-message-color değişkeninden okur, düz color burada * yenilir; değişkeni beslemek her özgüllükte kazanır. ::before ikonu * currentColor'dan devralır. */ --empty-message-color: var(--e-global-color-01631af, #727272); } /* İkon = Phosphor smiley LIGHT ağırlık (operatör "daha ince" istedi; sitede * yalnız regular font seti yüklü → tek ikon için font ailesi eklemek yerine * light SVG'si data-URI MASK olarak basılıyor, renk currentColor'dan). */ .elementor-menu-cart--cart-type-mini-cart .woocommerce-mini-cart__empty-message::before { content: ""; width: 54px; height: 54px; opacity: 0.8; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.19,155c-9.92,17.16-26.39,27-45.19,27s-35.27-9.84-45.19-27a6,6,0,0,1,10.38-6c7.84,13.54,20.2,21,34.81,21s27-7.46,34.81-21a6,6,0,1,1,10.38,6ZM230,128A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128ZM92,118a10,10,0,1,0-10-10A10,10,0,0,0,92,118Zm72-20a10,10,0,1,0,10,10A10,10,0,0,0,164,98Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.19,155c-9.92,17.16-26.39,27-45.19,27s-35.27-9.84-45.19-27a6,6,0,0,1,10.38-6c7.84,13.54,20.2,21,34.81,21s27-7.46,34.81-21a6,6,0,1,1,10.38,6ZM230,128A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128ZM92,118a10,10,0,1,0-10-10A10,10,0,0,0,92,118Zm72-20a10,10,0,1,0,10,10A10,10,0,0,0,164,98Z'/%3E%3C/svg%3E") no-repeat center / contain; } /* Metin bir tık ince (600→400). Ayrı (0,3,0) kural: post-4991 şablon CSS'i * aynı (0,2,0) özgüllükle weight bastığından kaynak sırasına bırakmıyoruz. */ .elementor-menu-cart--cart-type-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart__empty-message { font-weight: 400; } /* Ara Toplam satırı GİZLİ (operatör, v2.188.6) — satır toplamları zaten * görünür, panel sade kalsın. mini-cart.js'in mc_subtotal_html yaması div'i * güncellemeye devam eder (zararsız); geri istenirse bu kuralı sil. */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__subtotal { display: none; } /* Footer butonlarında tıklama sonrası loader (operatör, 4 Ağu) — sepete ekle * butonundaki .loading::before halkasının aynısı (currentColor ile buton * yazı rengini alır). Durumu mini-cart.js basar (yalnız navigasyon gerçekten * başlıyorsa; ks-auth kapısı popup açtıysa basılmaz), pageshow/20sn temizler. * * 🚨 8 Ağu 2026: kanca artık 'de (`.ks-vm-mc-navigating` + * `data-ks-mc-nav`), butonun kendisinde DEĞİL. EPro paneli * wc_fragments_refreshed'te baştan basıyor ve butonu değiştiriyor; sınıf * butondayken loader navigasyon bitmeden sönüyordu. Ayrıntı: mini-cart.js. * * Navigasyon sürerken footer butonları tıklanamaz — ikinci bir tıklama * yarışan bir navigasyon başlatmasın; imleç de "çalışıyor" desin. */ html.ks-vm-mc-navigating .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__footer-buttons a { pointer-events: none; cursor: progress; } html.ks-vm-mc-navigating[data-ks-mc-nav="checkout"] .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout::before, html.ks-vm-mc-navigating[data-ks-mc-nav="cart"] .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.15em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; box-sizing: border-box; animation: ks-vm-btn-spin 0.6s linear infinite; } /* Kapanış fade'inde ürün görselleri bir an "büyüyor" gibi görünüyordu * (v2.188.5): kapanış saf opacity animasyonu (ölçüldü — boyut/transform * kare kare sabit), görülen şey animasyon BAŞINDA tarayıcının paneli kendi * compositing katmanına alıp yeniden rasterize etmesi (özellikle tarayıcı * zoom'u %100 değilken bir karelik boyut/netlik kayması). Panel kalıcı kendi * katmanında tutulur → animasyon başında re-raster olmaz. */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container { will-change: transform, opacity; } /* Panel başlığı — PHP'de widget_shopping_cart_content'in DIŞINA basılıyor * (KS_VM_Frontend::inject_mini_cart_title), fragment tazelemesi silemez. */ .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--e-global-color-primary, #000); line-height: 1.3; } /* Başlık satırı: [Alışveriş Sepeti ........ kapat] — mini-cart.js başlıkla * kapatma butonunu bu sarmalayıcıda birleştirir (buildTitleRow); flex dikey * ortalama sayesinde operatör kapatma ikonunun boyutunu/paddingi Elementor'dan * değiştirse de hiza bozulmaz. Kapatma butonu iki sınıfla gelebilir: EPro'nun * çizili ×'i (close-button) ya da özel ikon (close-button-custom). */ .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; } .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-head .elementor-menu-cart__close-button, .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-head .elementor-menu-cart__close-button-custom { position: static; margin: 0; align-self: auto; flex: 0 0 auto; } /* Alt satır: [miktar kontrolü][spinner] ....... [fiyat] — tek flex hizası * (operatör). Fiyatı sağa auto-margin iter; böylece spinner kontrolün hemen * sağında durur (space-between olsaydı ortaya savrulurdu). EPro'nun fiyat * hücresine (product-price) filtreden basılıyor. */ .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 12px; } /* Satır yüksekliğini SOL kolon (3:4 görsel + altındaki Kaldır) belirler; sağ * kolon ondan kısa. EPro fiyat hücresini satır dibine yaslar (align-self:end) * ve görselin taşan boyu grid'in 1. satırına da dağılır → ad ile qty/fiyat * arasında kocaman boşluk (v2.188.1'de rozet kalkınca görünür oldu). Fix: * 1. satır = ad kadar (auto), artan boy tamamen 2. satıra (1fr) + fiyat * hücresi üste — qty/fiyat satırı adın hemen altında (aradaki 6px, * .ks-vm-mc-row'un bilinçli margin'i). */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product { grid-template-rows: auto 1fr; } .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product .elementor-menu-cart__product-price { align-self: start; } .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-row .ks-vm-mc-price { margin-inline-start: auto; } /* Satır fiyatı = [ks_bar_price] dili (rozet + üstü çizili + yeni; kargo * rozeti YOK — sunucu basmıyor), mini cart için küçültülmüş, satırın sağına * yaslı. Renk/ağırlık .ks-vm-bar-total'dan (secondary, 600) gelir. */ .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-price { font-size: 12px; overflow: visible; text-overflow: clip; flex: 0 0 auto; } /* İndirimsiz satır fiyatı kit TEXT renginde (operatör, v2.193.3) — secondary * yalnız indirimli fiyata kalır. İndirimsizde value tek çocuk taşır * (.ks-vm-summary-new); indirimlide rozet+del+ins kardeşler → kural düşmez. */ .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-price .ks-vm-bar-total-value > .ks-vm-summary-new:only-child { color: var(--e-global-color-text, #000); /* OPTİK orta hizası (operatör, 5 Ağu): kutu merkezleri stepper'la birebir * aynı ÖLÇÜLDÜ ama rakamlarda alt çıkıntı (descender) olmadığından glyph * görsel merkezi kutu merkezinin ~1px üstünde kalıyor; indirimli satırda * dolu rozet göz çapası olduğundan fark yalnız TEK fiyatlı satırda seziliyor. * 1px aşağı nudge = optik düzeltme; :only-child dışına SIZDIRMA. */ position: relative; top: 1px; } /* (Kargo Bedava rozeti mini cart'tan KALDIRILDI — v2.188.1, operatör. * Ürün sayfası bar'ındaki/panellerdeki rozet aynen duruyor.) */ /* ── Satır içi MİKTAR KONTROLLERİ (v2.185.0) — sepet sayfası kontrollerinin * kompakt kopyası: perakende −/+ stepper, pack adet dropdown'ı. Ölçüler * .woocommerce-cart-form'daki 40px/130px kalıbın 28px/96px küçültmesi; * görsel dil (pill, tipografi, disabled durumu) birebir aynı. ── */ .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-qty { flex: 0 1 auto; min-width: 0; } /* Kaldır — ürün görselinin HEMEN ALTINDA ortalı METİN linki (operatör, * v2.188.0; önceki köşe ×-chip'inden dönüştürüldü, sepet sayfasındaki * .ks-vm-cart-remove diliyle aynı). mini-cart.js kaldırma hücresini her * çizimde görsel hücresine taşır (placeRemoveChips); metin sunucudan * anchor'ın içine basılır (mini_cart_remove_link). Burada EPro'nun chip * iskeleti nötrlenir: mutlak konum + yuvarlak çerçeve + pseudo × çizgileri. */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product-image .elementor-menu-cart__product-remove { position: static; width: auto; height: auto; margin-top: 6px; border: 0; border-radius: 0; background: none; overflow: visible; text-align: center; line-height: 1; } .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product-image .elementor-menu-cart__product-remove::before, .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product-image .elementor-menu-cart__product-remove::after { content: none; } /* Görünmez kaplama anchor → görünür metin. display'e DOKUNMA: EPro aktif * anchor'ı (remove_from_cart_button / elementor_…) kendi CSS değişkenleriyle * seçiyor, ikisi de etiketli basılır ama yalnız aktifi görünür. :visited pin * ŞART — Botiga çıplak a:visited'ı #212121 boyuyor. */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product-image .elementor-menu-cart__product-remove > a, .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product-image .elementor-menu-cart__product-remove > a:visited { position: static; opacity: 1; width: auto; height: auto; overflow: visible; font-size: 11px; font-weight: 400; line-height: 1.2; color: #999; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; } .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product-image .elementor-menu-cart__product-remove > a:hover { color: #e74c3c; } /* Kaldırma hücresi görselin altına taşındığı için satırın sağında pay gereksiz. */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product { padding-inline-end: 0; } .elementor-menu-cart--cart-type-mini-cart .ks-vm-mc-qty .ks-vm-cart-qty { max-width: 110px; min-width: 110px; } /* Pack satırı: retail ile aynı kompakt −/+ sayaç (paket sayısı) — ek stil yok. */ .elementor-menu-cart__products div.quantity { box-sizing: border-box !important; display: flex !important; width: 100% !important; max-width: 104px !important; height: 34px !important; min-height: 34px !important; align-items: center !important; justify-content: space-between !important; /* Pack dropdown'la aynı pill kimliği (tema bağlamı dışında da garanti). */ border: 1px solid #ccc; border-radius: 100px; background: #fff; } .elementor-menu-cart__products div.quantity .botiga-quantity-minus, .elementor-menu-cart__products div.quantity .botiga-quantity-plus { /* Botiga anchor'ları .show sınıfı JS'le gelene dek gizler * (opacity:0 + visibility:hidden + display:none). Botiga'nın JS'i burada * bilinçli kilitli (data-qty-initialized) → .show hiç gelmez; üçünü de * kendimiz açıyoruz. */ opacity: 1 !important; visibility: visible !important; flex: 0 0 auto; width: 26px !important; height: 100% !important; padding: 0 0 3px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 16px !important; color: #212121; text-decoration: none; } .elementor-menu-cart__products div.quantity input.qty { flex: 1 1 auto; width: auto !important; min-width: 0; height: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent; text-align: center; font-size: 13px !important; font-weight: 500 !important; font-family: inherit !important; line-height: 1 !important; color: #212121 !important; } .elementor-menu-cart__products div.quantity input.qty[readonly] { cursor: default; background: transparent; } .elementor-menu-cart__products .botiga-quantity-plus.ks-vm-qty-disabled, .elementor-menu-cart__products .botiga-quantity-minus.ks-vm-qty-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } /* Pack dropdown: cart sayfası pill'inin (40px) 34px kompakt kesimi; metin * dikeyde ortalı (line-height + simetrik dikey padding). */ .elementor-menu-cart__products select.ks-vm-cart-qty-select { min-width: 110px; max-width: 110px; height: 34px; min-height: 34px; padding: 5px 25px 5px 12px; font-size: 13px; line-height: 1.4; background-position: calc(100% - 12px) 50%; background-size: 10px; } /* Açılan panel — adet-dropdown.js paneli scroll kabından kaçırmak için * __main'e taşır (satır-içi scroll hatası); kompakt option stilleri artık o * scope'ta. */ .elementor-menu-cart__main > .ks-vm-adet-panel .ks-vm-adet-option { font-size: 13px; padding: 8px 12px; } /* Güncelleme yolda: yalnız DEĞİŞEN satırın tutarı soluklaşır ve kontrolün * sağındaki spinner döner — diğer satırlar net kalır (operatör). Kontroller * kilitlenmez; istekleri mini-cart.js kuyruğu tekilleştirir. */ .elementor-menu-cart__product.ks-vm-mc-line-busy .ks-vm-mc-price { opacity: 0.45; transition: opacity 0.15s ease; } .ks-vm-mc-spin { display: none; flex: 0 0 auto; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid rgba(0, 0, 0, 0.12); /* Fiyatlarla aynı renk: kit SECONDARY (operatör, 3 Ağu — eski 9b6e6c7 * sarısı değil; .ks-vm-bar-total ile aynı değişken, otomatik izler). */ border-top-color: var(--e-global-color-secondary, #d83b3b); border-radius: 50%; animation: ks-vm-btn-spin 0.6s linear infinite; } .elementor-menu-cart__product.ks-vm-mc-line-busy .ks-vm-mc-spin { display: inline-block; } /* SEPET SAYFASINDA panel açılmaz (operatör, 2 Ağu): ikon + sayaç durur ama * hover/tık hiçbir şey yapmaz. pointer-events:none → fare olayları toggle'a * hiç ulaşmaz (EPro'nun mouseover/click handler'ları tetiklenmez, imleç de * default kalır); konteyner gizleme de klavyeyle (Tab+Enter) açılma ihtimalini * kapatan emniyet kemeri. Eski KS side cart'taki v2.96.2 kararının devamı. */ body.woocommerce-cart .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle { pointer-events: none; } body.woocommerce-cart .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container { display: none !important; } /* Görsel kolonu — EPro varsayılanı %28; operatör iki kademede küçülttü * (2 Ağu: 22% → 17%). Oran korunur: img aşağıda aspect-ratio ile kendini * kolona göre boyutlar, metin kolonu kazanılan yeri alır. */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product { grid-template-columns: 17% auto; } /* Ürün görseli = ürün sayfası galeri thumbnail'ının tıpkısı (operatör): * 3:4 + cover + 1px Elementor "Border" global rengi + 8px radius — değerler * "ÜRÜN GALERİSİ — DAİMA 3:4" bölümündeki thumbnail kurallarıyla birebir. * Kaynak dosya da zaten 3:4 (woocommerce_thumbnail 420×560). */ .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__product-image img { aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: cover; object-position: center; display: block; border: 1px solid var(--e-global-color-dcb0b6a, #d1d1d1); border-radius: 8px; box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════ * HESAP MENÜSÜ — header user dropdown (v2.195.0) — TEK KAYNAK BU BÖLÜM * ═══════════════════════════════════════════════════════════════════ * Eski "Hesabım" butonunun yerini alan user-ikonlu toggle + mini cart'ın * birebir görsel dilinde küçük menü paneli. Toggle görünümü yukarıdaki * "SEPET TOGGLE" kurallarının eşidir ve aynı sözleşme geçerlidir: Elementor * button kontrolleri (post-4991 CSS'i) BİLİNÇLİ ezilir — buton stili * Elementor'dan değil buradan değiştirilir. Panel mekaniği EPro mini cart * container/main ikilisinin KS kopyası (scale kapısı + 0.3s translateY * fade; kart: beyaz, 8px radius, 0 0 20px gölge, 10px üst boşluk). Markup * wp_footer'da basılır (KS_VM_Frontend::render_account_menu_source), * account-menu.js butonun içine taşır. */ /* Panel butona demirlenir. */ .elementor-widget-button.ks-vm-account { position: relative; } /* — Toggle: buton kabuğu (mini cart toggle ile aynı değerler) — */ .elementor-widget-button.ks-vm-account .elementor-button, .elementor-widget-button.ks-vm-account .elementor-button:hover, .elementor-widget-button.ks-vm-account .elementor-button:focus, .elementor-widget-button.ks-vm-account .elementor-button:visited { background: transparent !important; width: 42px !important; height: 42px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-radius: 100px !important; box-shadow: none !important; transition: background-color 0.2s ease !important; } /* Buton metni ("Hesabım") yalnız ekran okuyucuya — ikon-only görünüm ama * erişilebilir ad korunur; icon_indent boşluğu da anlamsızlaşır. */ .elementor-widget-button.ks-vm-account .elementor-button .elementor-button-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .elementor-widget-button.ks-vm-account .elementor-button .elementor-button-icon { margin: 0 !important; } /* — Toggle: ikon — (translate = eski asimetrik padding'in optik ortalaması) */ .elementor-widget-button.ks-vm-account .elementor-button .elementor-button-icon i { font-size: 28px !important; color: var(--e-global-color-primary, #000) !important; display: inline-block; transform: translate(0.5px, 1.5px); transition: color 0.2s ease !important; } /* — AKTİF durum (panel açık) = mini cart --shown eşi. Kaynak sırası gereği * normal+hover kurallarından SONRA durmalı. — */ .elementor-widget-button.ks-vm-account.ks-vm-am-open .elementor-button, .elementor-widget-button.ks-vm-account.ks-vm-am-open .elementor-button:hover { background: var(--e-global-color-secondary, #F27A1A) !important; } .elementor-widget-button.ks-vm-account.ks-vm-am-open .elementor-button .elementor-button-icon i { color: #fff !important; } /* — Panel mekaniği: container = konum + scale kapısı (kapanış fade'i bitene * dek yerinde kalır — EPro'nun 0s 0.4s gecikme hilesi), main = görünen kart * (0.3s opacity + translateY). Toggle gibi sağ kenara demirli. — */ .ks-vm-account .ks-vm-am-container { position: absolute; top: 100%; inset-inline: auto 0; z-index: 9998; transform: scale(0); transition: transform 0s 0.4s; } .ks-vm-account.ks-vm-am-open .ks-vm-am-container { transform: scale(1); transition: transform 0s; } .ks-vm-am-main { background: #fff; border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin-top: 10px; min-width: 220px; padding: 16px 0 8px; opacity: 0; transform: translateY(-10px); transition: 0.3s; will-change: transform, opacity; } .ks-vm-account.ks-vm-am-open .ks-vm-am-main { opacity: 1; transform: translateY(0); } /* Başlık satırı — mini cart .ks-vm-mc-head'in eşi: [Hesabım ..... kapat], * dikey ortalı; kapatma ikonu başlıkla aynı satırda sağ kenarda. */ .ks-vm-am-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 10px; } /* Başlık — mini cart panel başlığıyla aynı dil (.ks-vm-mc-title). */ .ks-vm-am-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--e-global-color-primary, #000); line-height: 1.3; } /* Kapatma — mini cart'ın custom close'uyla birebir (canlıdan ölçüldü): * ph-arrow-up 27px, resting #B4B4B4, hover secondary, 0.3s renk geçişi. * İkon rengi currentColor'dan iner. */ .ks-vm-am-close { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; line-height: 1; color: #B4B4B4; transition: color 0.3s; } .ks-vm-am-close i { display: block; font-size: 27px; line-height: 1; } .ks-vm-am-close:hover { color: var(--e-global-color-secondary, #F27A1A); } /* Öğeler — tam satır tıklanır; :visited pin ŞART (Botiga çıplak a:visited'ı * #212121 boyuyor). Hover: hafif zemin + secondary metin (ikon currentColor * ile birlikte döner). */ .ks-vm-am-nav { display: flex; flex-direction: column; } .ks-vm-am-nav .ks-vm-am-item, .ks-vm-am-nav .ks-vm-am-item:visited { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--e-global-color-primary, #000); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .ks-vm-am-nav .ks-vm-am-item:hover { background: rgba(0, 0, 0, 0.04); color: var(--e-global-color-secondary, #F27A1A); } .ks-vm-am-nav .ks-vm-am-item i { font-size: 19px; line-height: 1; flex: 0 0 auto; } /* Çıkış üstü ayraç — kit Border rengi. */ .ks-vm-am-sep { margin: 6px 0; border-top: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1); } /* Sticky spacer klonunda panel ölü kalmalı (v2.188.4 dersi — klon görünmez * ama visibility force'ları/absolute paneller sızabilir). */ .elementor-sticky__spacer .ks-vm-am-container { display: none !important; } /* ═══════════════════════════════════════════════════════════ * Adet — "how many strands in the package" selector * * The row lives inside WooCommerce's own .variations table and reuses its * th.label / td.value markup, so the theme styles it exactly like the length, * colour and gramaj rows. Deliberately almost no CSS here: anything we add is * something that can drift away from the rows above it. * ═══════════════════════════════════════════════════════════ */ /* Pack-info line: ℹ "Bu ürün 100 × 0.8 gr = 80 gr ağırlığında" (operatör, * 1 Eyl 2026): başta info ikonu, {agirlik} KALIN, font 0.875em. Satır YALNIZ * [ks_pack_info] shortcode'uyla basılır (otomatik form-içi basım operatör * kararıyla kaldırıldı) → konum ve boşluk Elementor'un işi, burada marj yok. * (Eski form-içi hiza kuralları — 123px sol + row-gap'e bağlı negatif calc — * otomatik basımla birlikte silindi.) JS display'i show() ile açar → flex * geçerli olur. */ .ks-vm-paket-info, .ks-vm-stock-info { display: flex; /* Operatör: ikon metne göre TAM ORTALI (önceki flex-start + ofset denemesi * "biraz üstte" durdu — geri alındı). */ align-items: center; gap: 6px; margin: 0; font-size: 0.875em; /* opacity DEĞİL renk: parent opacity'si strong'u da soluklaştırıyordu, * kalın değer tam koyu basılabilsin diye yumuşaklık renkten geliyor. */ color: #777; } .ks-vm-paket-info .ks-vm-paket-info-ic, .ks-vm-stock-info .ks-vm-paket-info-ic { flex: none; width: 1.2em; height: 1.2em; color: var(--e-global-color-secondary); } .ks-vm-paket-info strong { font-weight: 700; color: #212121; } /* ═══════════════════════════════════════════════════════════════════════════ * KS PANEL — ÜRÜN SAYFASI BİLGİ BLOKLARININ ORTAK KABUĞU * * ⭐ TEK KONTROL NOKTASI. `[ks_delivery_info]` (Teslimat Bilgileri) ve * `[ks_volume_discounts]` (Ürün İndirimleri) aynı kabuğu paylaşır: kutu, * başlık, ikon, iç boşluk BURADAN yönetilir. Bir bloğun görünümünü tek başına * değiştirmek isterseniz aşağıdaki `.ks-panel--delivery` / `.ks-panel--discounts` * istisna bloklarını kullanın; ortak görünüm için burayı düzenleyin. * * Markup (KS_VM_Panel::open/close): * .ks-panel.ks-panel--{slug}.{bloğun-kendi-sınıfı} * └ .ks-panel-head → svg.ks-vm-icon + span.ks-panel-title * └ .ks-panel-body → bloğa özel satırlar * * Yeni bir bilgi bloğu eklerken KS_VM_Panel::open() çağırın; kutuyu, başlığı ve * çeviriyi hazır devralır. * ═══════════════════════════════════════════════════════════════════════════ */ /* The BOX itself carries no inner spacing — its two sections do (below). That is * what lets the heading's separator run edge to edge on its own, with no * negative margins and no value that has to be kept in sync with another. */ .ks-panel { margin: 0; padding: 0; border: 1px solid var(--e-global-color-dcb0b6a); border-radius: 8px; background: transparent; font-size: 0.9em; line-height: 1.45; } /* ⭐ İÇ BOŞLUK — TEK DEĞER, TEK YER. Both sections are inset by the same amount, * so the heading and the content line up and the box reads as one. Change this * one declaration to retune every panel's padding. */ .ks-panel-head { display: flex; align-items: center; gap: 6px; /* The head is a full-width block, so its bottom border already spans the box * edge to edge — no pulling out and pushing back needed. Same colour as the * row separators inside the panels, so it reads as one ruled list rather * than a title stuck on top of a table. */ border-bottom: 1px solid var(--e-global-color-dcb0b6a); font-size: .9em; font-weight: 700; padding: 12px 12px 9px; line-height: 1em; } /* Accent, not primary: Elementor's primary global on this site is near-black * (what the solid buttons use), so the mark would read as plain text. 9b6e6c7 * is the orange accent the buy-now button and focus rings already use. */ .ks-panel-head .ks-vm-icon { flex: 0 0 auto; font-size: 1.25em; color: var(--e-global-color-secondary, #DA6900); } .ks-panel-title { min-width: 0; } .ks-panel-body { padding: 14px 14px 10px; } /* The two blocks fill the body themselves; it exists so the head can never be * caught by a descendant rule meant for the content. */ .ks-panel-body > :first-child { margin-top: 0; } .ks-panel-body > :last-child { margin-bottom: 0; } /* Stacked in the same column, the panels need one rhythm between them — the * first one hugs whatever is above it (buttons / add-to-cart). */ .ks-panel + .ks-panel { margin-top: 12px; } /* ══════════════════════════════════════════ * Merchant Volume Discounts — sade bilgi listesi (KS override) * * Bu blok artık kendi tablosunu KURMUYOR: satırları "Gönderim Seçenekleri" * panelinin satırlarının AYNISI (`.ks-vm-delivery-row` / `-name` / `-time`, * yukarıdaki teslimat bölümünde tanımlı). Yani adet kolonu kargo adıyla, * indirim kolonu kargo süresiyle birebir aynı — değerler kopyalanmadığı için * biri elle değişince ikisi ayrışamaz (operatör isteği, 26 Tem 2026). * * Kolon başlığı satırı da kaldırıldı; "N+ adet → %X" satırı kendini anlatıyor. * * Botiga'nın genel tablo kenarlıklarını (`table th, table td, table tr`) * sıfırlayan ~40 satır da bu yüzden GİTTİ — artık tablo yok, sıfırlanacak * kenarlık da yok. * ══════════════════════════════════════════ */ /* Tek fark: eşik metni asla satır atlamasın ("100+ adet"). */ .ks-vd-qty { white-space: nowrap; } /* ═══════════════════════════════════════════════════════════ * Simple products — quantity shown as a variation-style row * * KS_VM_Frontend::open_simple_qty_row wraps a simple product's quantity box in * WooCommerce's own table.variations markup. Botiga styles `table.variations` * unscoped, so the label/field already look like the variation rows. These * rules only (a) replicate the label column Botiga scopes to `.variations_form` * (which a simple product's form is NOT) and (b) let the row sit full-width * above the add-to-cart button inside Elementor's flex holder. * Fine-tune from Customizer → Additional CSS. * ═══════════════════════════════════════════════════════════ */ /* ⚠️ Dikey boşluk BURADA DEĞİL: satır aralıkları tek bir `gap`ten geliyor * (bkz. "SATIR RİTMİ" bölümü, --ks-atc-row-gap). Buraya margin eklemek o tek * kontrol noktasını böler. */ .ks-vm-simple-qty-table { margin: 0; border-collapse: collapse; } /* Match the label column width used by a variable product's rows (100px — * see the LABEL COLUMN WIDTH block near the summary table). */ .ks-vm-simple-qty-table th.label { width: 115px; text-align: start; padding: 0 15px 0 0; vertical-align: middle; } .ks-vm-simple-qty-table th.label label { margin: 0; vertical-align: middle; } .ks-vm-simple-qty-table td.value { vertical-align: middle; } /* Elementor Pro wraps [quantity + button] in a flex .e-atc-qty-button-holder; * let our full-width row break onto its own line so the button drops below it, * exactly as the variations table sits above the button on a variable page. * (Harmless if the holder is not flex — the block table is full-width anyway.) */ body.ks-vm-simple-qty .e-atc-qty-button-holder { flex-wrap: wrap; } /* Both the quantity row AND the summary block take a full line of their own, * so the add-to-cart button never shares a flex line with the (tall) summary * block — otherwise align-items:stretch blows the button up to its height. */ body.ks-vm-simple-qty .ks-vm-simple-qty-table, body.ks-vm-simple-qty #ks-vm-summary { flex: 1 0 100%; width: 100%; } /* ── Add-to-cart + Buy-now: share the row 50/50 on tablet & desktop, stack to * full width on mobile. ── * * VERIFIED live DOM (browser DevTools + faithful CLI render). The BOTIGA theme wraps * the add-to-cart area in .botiga-single-addtocart-wrapper (a flex COLUMN, width:100%) * on woocommerce_before/after_add_to_cart_button — NOT Elementor's holder. That real * parent is the same on both product types; only its contents differ: * * VARIABLE (#643): SIMPLE (#5123): * .woocommerce-variation-add-to-cart form.cart * input[hidden] input[hidden] * .botiga-single-addtocart-wrapper .botiga-single-addtocart-wrapper * .quantity (none on adet) table.ks-vm-simple-qty-table (quantity) * .single_add_to_cart_button #ks-vm-summary (stock/total) * .ks-vm-buy-now-btn .single_add_to_cart_button * input[hidden] × 3 .ks-vm-buy-now-btn * * Making the wrapper a 2-col grid gives 50/50 buttons on the variable/adet product * (only the two buttons are visible). But on a simple product the SAME wrapper also * holds the quantity table and the summary block, so a naive 2-col grid tiled the * summary next to a button and pushed buy-now onto its own row. * * Robust fix: in every button container, EVERYTHING spans the full width by default, * and ONLY the two buttons are pulled back to one column each. So any child — the * quantity, the summary, a nested wrapper, or something added later — automatically * takes its own full-width row, and the two buttons are always the lone 50/50 pair. * !important beats the theme/Elementor/Botiga display+flex+width on these elements. */ .botiga-single-addtocart-wrapper, .e-atc-qty-button-holder, .woocommerce-variation-add-to-cart { display: grid !important; /* Sepete Ekle (1fr) | Hemen Satın Al (1fr) | wishlist (auto, icon-only). With no * wishlist button the trailing auto column collapses to 0, leaving the two 1fr * buttons at a clean 50/50. */ grid-template-columns: 1fr 1fr auto; align-items: stretch; /* One uniform, tight gap between every button (column-gap between the three on a * row, row-gap between the add-to-cart row and the buy-now/wishlist row on mobile). * !important is REQUIRED: Botiga sets the gap with a more specific selector * (.product-gallery-summary .botiga-single-addtocart-wrapper{gap:20px} = 0,2,0), * which out-specifies a plain .botiga-single-addtocart-wrapper rule, so without * !important our value is ignored and the gap stays at Botiga's 20px. * * ⚠️ `gap` KISALTMASI DEĞİL, iki ayrı bildirim: bu ızgara yalnız butonları * değil, ürün tipine göre Adet tablosunu ve Tutar bloğunu da barındırıyor * (aşağıdaki şemaya bak). Dolayısıyla DİKEY boşluğu satır ritmi yönetmeli * (--ks-atc-row-gap), yatay boşluk ise butonlara ait 8px olarak kalmalı. * Fallback 8px: bu sarmalayıcı [ks_add_to_cart_form] dışında da (Elementor * widget'ıyla) kullanılabiliyor, orada değişken tanımlı değil. */ column-gap: 8px !important; row-gap: var(--ks-atc-row-gap, 8px) !important; } /* Default: every direct child spans the full row. Covers the quantity box/table, the * summary block, a nested Botiga-wrapper/Elementor-holder, Botiga headings, hidden * inputs — no enumeration needed. */ .botiga-single-addtocart-wrapper > *, .e-atc-qty-button-holder > *, .woocommerce-variation-add-to-cart > * { grid-column: 1 / -1; } /* Exception: the two labelled buttons each take one 1fr column — add-to-cart + buy-now * share the halves. Also strips the width/margin the theme/Elementor/Botiga forces * (Botiga sets .button{width:100%}); min-width:0 lets a long label shrink to its cell. */ .botiga-single-addtocart-wrapper > .single_add_to_cart_button, .botiga-single-addtocart-wrapper > .ks-vm-buy-now-btn, .e-atc-qty-button-holder > .single_add_to_cart_button, .e-atc-qty-button-holder > .ks-vm-buy-now-btn, .woocommerce-variation-add-to-cart > .single_add_to_cart_button, .woocommerce-variation-add-to-cart > .ks-vm-buy-now-btn { grid-column: auto; width: auto !important; max-width: none !important; min-width: 0; margin: 0 !important; box-sizing: border-box; } /* The wishlist icon takes the trailing auto column and stays a PERFECT SQUARE: * align-self:stretch fills the row height, and aspect-ratio:1 (on .ks-vm-wishlist-btn) * ties its width to that height → width == height, matched to the other buttons. */ .botiga-single-addtocart-wrapper > .ks-vm-wishlist-btn, .e-atc-qty-button-holder > .ks-vm-wishlist-btn, .woocommerce-variation-add-to-cart > .ks-vm-wishlist-btn { grid-column: auto; align-self: stretch; margin: 0 !important; } @media screen and (max-width: 767px) { .botiga-single-addtocart-wrapper, .e-atc-qty-button-holder, .woocommerce-variation-add-to-cart { grid-template-columns: 1fr auto; /* Hemen Al (1fr) | wishlist (auto) */ } /* Sepete Ekle takes the full first row; Hemen Al + the wishlist icon share the * next row, so the icon button stays next to Buy Now on mobile. */ .botiga-single-addtocart-wrapper > .single_add_to_cart_button, .e-atc-qty-button-holder > .single_add_to_cart_button, .woocommerce-variation-add-to-cart > .single_add_to_cart_button { grid-column: 1 / -1; } } /* ═══════════════════════════════════════════════════════════ * DAR KONTEYNER (< 400px) — @container, viewport DEĞİL * * The add-to-cart widget is not always as wide as the screen: it can be placed * in a narrow Elementor column, a two-column split or a sidebar, and there it * needs the compact layout even on a 1440px desktop. So this responds to the * FORM's OWN inline size rather than the viewport: * * - every variation label moves ABOVE its options instead of sitting beside * them (a 100px label column would leave almost nothing for the swatches) * - "Sepete Ekle" gets a full row to itself; "Hemen Satın Al" + the wishlist * icon share the row underneath * * `form.cart` is the container (named `ks-atc`). The ≤767px media query above * is kept as the no-@container fallback: it sets the SAME button layout, so the * two can never disagree — on a phone both apply and agree. * * Eşiği değiştirmek isterseniz: aşağıdaki tek `400px` değeri. * ═══════════════════════════════════════════════════════════ */ form.cart { container-type: inline-size; container-name: ks-atc; } @container ks-atc (max-width: 400px) { /* ── Etiketler seçeneklerin ÜSTÜNE ── * 🔑 These rows are NOT laid out as table cells. VillaTheme Swatches turns * every variation into `display: grid !important` with * `grid-template-columns: 2fr 8fr` (label | options) and `gap: 8px` — the * markup is vestigial. So stacking is one declaration: collapse the * row to a single column and the row's own 8px gap becomes the space * between the label and its options. (Unwinding the table with * `display:block` does NOT work — VillaTheme's `display:grid` carries * !important and wins.) * The label also drops its fixed width, which otherwise keeps reserving a * fifth of the row for a one-word label. */ form.cart table.variations:not(.ks-vm-summary-table) tr { grid-template-columns: 1fr; /* Side by side the 8px is a COLUMN gap; stacked it becomes the space * between a label and ITS OWN control — a different (and deliberately * smaller) distance than the row-to-row gap, so it has its own knob. * GRUPLAMA: bu değer --ks-atc-row-gap'ten KÜÇÜK kalmalı, yoksa etiket * kendi seçeneklerine değil ÜSTTEKİ satıra ait gibi okunur. */ row-gap: var(--ks-atc-label-gap); } /* ⚠️ Hücrelerin dikey dolgusu ARTIK YOK (bkz. "SATIR RİTMİ" bölümü), o yüzden * buradaki eski `th.label { padding-bottom: 0 !important }` yaması kaldırıldı: * gruplama farkını artık yalnız yukarıdaki row-gap üretiyor. * `width` / `padding-inline` de burada DEĞİL — onlar (0,3,0)'lık * `.variations_form.cart .variations .label` tarafından eziliyordu ve ikinci * `@container` bloğuna taşındı (v2.119.2). */ /* Tutar stays on one line — its value is short — but the label hugs its * text instead of holding a 2fr column, so the row still lines up at x=0 * with the stacked options above it. * * ⚠️ Bu satırın GEOMETRİSİ ARTIK BURADA DEĞİL — hem `grid-template-columns` * hem th genişliği/padding'i ikinci `@container ks-atc` bloğuna taşındı: * burada yazılan hâlleri (0,2,2) v2.118.1'in devralınan-Elementor bloğu * (0,4,3) ve bu dosyanın "LABEL COLUMN WIDTH" kuralı (0,3,0) tarafından * eziliyordu, yani sessizce ölüydüler. Değiştirmeden önce oradaki notu * okuyun; buraya geri yazmak işe YARAMAZ. */ /* ── Butonlar: Sepete Ekle üstte tek, altında Hemen Al + wishlist ── */ form.cart .botiga-single-addtocart-wrapper, form.cart .e-atc-qty-button-holder, form.cart .woocommerce-variation-add-to-cart { grid-template-columns: 1fr auto; /* Hemen Al (1fr) | wishlist (auto) */ } form.cart .botiga-single-addtocart-wrapper > .single_add_to_cart_button, form.cart .e-atc-qty-button-holder > .single_add_to_cart_button, form.cart .woocommerce-variation-add-to-cart > .single_add_to_cart_button { grid-column: 1 / -1; } } /* ═══════════════════════════════════════════════════════════ * Single-product template — stay centred when the summary is sparse * * Botiga renders the single product as a flex child of `.main-row` * (`.row.main-row > .product`), and that `.product` has no width set, so it * sizes to its CONTENT. A rich product (wide variations/volume table) fills * the row and reads as centred; a sparse product ([ks_volume_discounts] empty * when no discount applies, no description) shrinks to its narrow content and, * with the flex row's default justify-content:flex-start, collapses hard-left * ("içerik yoksa tüm iç şablon sola yaslı"). Forcing the wrapper to full width * makes every product fill the row; the Elementor boxed container inside then * centres its own max-width via margin:auto, exactly like a full product. * Scoped to the single-product wrapper (direct child of .main-row), so shop * archives and related-products grids are untouched. * ═══════════════════════════════════════════════════════════ */ .single-product .main-row > .product { width: 100%; flex: 1 1 100%; } /* Headline WL: Product Price widget — hidden when the product has no price * range (a single-price/simple product); the live total lives in the block below. */ .ks-vm-price-hidden { display: none !important; } /* ═══════════════════════════════════════════════════════════ * Add-to-cart summary block — stock + live total (or "select options") * * Printed by KS_VM_Frontend::render_summary_block below the options/quantity * and above the buttons; filled live by frontend.js. Colours reuse the shared * KS tokens, so they can be retuned from Customizer → Additional CSS. * ═══════════════════════════════════════════════════════════ */ /* No extra margin/padding of our own: the row spacing must come from the SAME * source as the option rows (VillaTheme's 10px swatch-row margin, copied onto * our rows in JS) so the block sits flush with the variations, not one gap * further down. */ .ks-vm-summary { margin: 0; } .ks-vm-summary-table { width: 100%; border-collapse: collapse; margin: 0; } /* Elementor's add-to-cart widget puts margin-bottom:24px on EVERY .variations * table (spacing before the buttons). Our summary block now sits between the * options and the buttons, so on the OPTIONS table that 24px opens a big gap * right above our block — drop it there. Our own summary table keeps its 24px, * which is now exactly the space before the buttons. !important because the * widget's selector (tied to its element id) far outweighs a plain rule. */ form.cart .variations:not(.ks-vm-summary-table) { margin-bottom: 0 !important; } /* ── LABEL COLUMN WIDTH (add-to-cart bloğu) ───────────────── * The label column ("Renk", "Uzunluk", "Adet", "Tutar" …) is 100px wide. * * THREE rules feed that one column and they must not drift apart: * 1. Botiga's own `.variations_form.cart .variations .label` (woocommerce.min.css, * hardcoded 125px) — covers the real attribute rows on a VARIABLE product. * 2. `.ks-vm-summary-table th.label` — our Tutar row. * 3. `.ks-vm-simple-qty-table th.label` — the simple/retail-variable Adet row * (declared further up, kept in step). * Botiga's rule is overridden below with the same selector rather than a heavier * one: ks-vm-frontend.css is enqueued AFTER botiga-woocommerce-style, so equal * specificity wins on order and no !important is needed. * Değeri değiştirmek isterseniz: aşağıdaki iki kural + yukarıdaki * .ks-vm-simple-qty-table th.label — üçü birlikte. * * ⚠️ Bu 100px YALNIZ geniş görünüm içindir. `@container ks-atc (max-width:400px)` * altında iptal ediliyor (th metnine yapışır) — çünkü dar bir kolonda 100px'lik * etiket kolonu "Tutar"ın yanında koca bir boşluk bırakıyordu. Dikkat: buradaki * ilk seçici `.variations_form` içerdiği için (0,3,0) yalnız VARIABLE üründe * eşleşir ve dar-görünüm kurallarını EZER; o yüzden oradaki iptal (0,5,4) * yazılmak zorunda kaldı. Bu bloğa dokunacaksanız orayı da kontrol edin. * ─────────────────────────────────────────────────────────── */ .variations_form.cart .variations .label, .ks-vm-summary-table th.label { width: 115px; text-align: start; /* Logical padding, matching what Botiga declares on its own rows, so the * override changes the width and nothing else. */ padding-block: 0; padding-inline: 0 15px; vertical-align: middle; } .ks-vm-summary-table th.label label { margin: 0; vertical-align: middle; } .ks-vm-summary-table td.value { padding: 0; text-align: start; vertical-align: middle; } /* ⚠️ Eskiden burada basit ürüne özel bir `padding-top:10px` vardı ("swatch * satırı olmadığı için boşluk kaybolmasın"). KALDIRILDI: satır arası boşluk artık * ürün tipinden bağımsız olarak tek bir gap'ten geliyor (bkz. "SATIR RİTMİ"), * o yama basit üründe Tutar satırını 10px aşağı iten TEK ürün-tipine-bağlı * istisnaydı — yani "düzen standart değil" şikâyetinin kaynaklarından biri. */ /* ═══════════════════════════════════════════════════════════════ * SINGLE PRODUCT — Tutar bloğu fiyat parçaları (.ks-vm-summary-*) * YALNIZ ürün sayfasının add-to-cart özetinde kullanılır. Sepet sayfasının * fiyat bloğu AYRI sınıflar taşır (.ks-vm-cart-price-*, dosyanın sonundaki * CART PAGE bölümü) — burada yapılan değişiklik sepeti ETKİLEMEZ. * Fiyatı büyütmek/küçültmek için: .ks-vm-summary-total-value font-size. * ═══════════════════════════════════════════════════════════════ */ /* The "select options" placeholder and the real total read identically — same * size, colour and weight. Flex centring keeps every piece (badge, struck old * price, current price, "(KDV Dahil)") on ONE vertical axis: with plain inline * flow the KDV note hung off the parent baseline while del/ins were * middle-aligned, so its height depended on which siblings were present — * measured 1.5px low on sale prices but 4.4px low on regular ones. */ .ks-vm-summary-total-value { font-size: 0.9em; font-weight: 500; display: inline-flex; align-items: center; flex-wrap: wrap; column-gap: 4px; } /* Fiyatın PUNTOSU — TEK KURAL (operatör, 1 Ağu akşam: "indirimliyken büyük, * indirimsizken normal yazıyordu; eşitlensin, iki ayrı kurala bağlı olmasın"). * Liste iki yolu da kapsar: düz tutar (kabın doğrudan çocuğu) ve indirimli * tutarın içindeki rakamlar. Çizili eski tutar BİLEREK dışarıda — o kendi * küçük boyutunu (.ks-vm-summary-old) korur. .ks-vm-summary-new'e AYRICA * font-size verme: buradakiyle bileşir ve indirimliyi yine büyütür. */ .ks-vm-summary-total-value > .woocommerce-Price-amount, .ks-vm-summary-new .woocommerce-Price-amount { font-size: 1.4em; font-weight: 700; } /* `.ks-vm-summary-vat` (the "(KDV Dahil)" note) KALDIRILDI — 27 Tem 2026, * operatör isteği. Kuralı da sildik: markup'ı üreten tek yer * frontend.js::renderSummary() idi, orası da temizlendi. */ /* Sale markup nests the amounts in del/ins; centre their contents too so the * current price sits on exactly the same axis as a plain (non-sale) price. */ .ks-vm-summary-total-value del, .ks-vm-summary-total-value ins { display: inline-flex; align-items: center; } /* Volume-discount deal: struck normal total + campaign total + rate badge. */ .ks-vm-summary-old { /* [ks_bar_price] .ks-vm-bar-price-old'dan KOPYA (operatör, 1 Ağu akşam: * "bar stillerini form tutarına kopyala") — iki alan aynı görünür. * line-height açık: bar'da kaptan 1.3 geliyor, formda kap 1.85'ti. */ color: #999; font-weight: 600; text-decoration: line-through; padding: 0 3px; font-size: 1em; line-height: 1.3; } .ks-vm-summary-new { /* [ks_bar_price] .ks-vm-bar-price-new'den KOPYA (operatör, 1 Ağu akşam). * WP'nin ins sarı vurgusu kapalı kalır (31 Tem). */ font-weight: 700; text-decoration: none; vertical-align: middle; /* font-size YOK: rakamların boyutu yukarıdaki TEK kuraldan gelir. */ background: transparent; letter-spacing: -0.3px; line-height: 1; padding: 0; /* bar'la aynı: yan padding yok */ } /* Tutar rengi KOŞULLU (operatör, 1 Ağu akşam — 31 Tem'deki "daima secondary" * kararının revizyonu): İNDİRİM VARSA secondary, YOKSA Elementor text rengi. * Ayrım :has ile — indirimli içerik .ks-vm-summary-new taşır, düz tutar * taşımaz (basit ürünün JS-yazımı düz metni dahil). Çizili eski tutar kendi * grisini korur; is-prompt (yönlendirme cümlesi) normal renge döner. Bar * tarafı aynı kuralı zaten uyguluyor (--plain modifier'ı). */ .ks-vm-summary-total-value { color: var(--e-global-color-text, #212121); } .ks-vm-summary-total-value:has(.ks-vm-summary-new) { color: var(--e-global-color-secondary, #d83b3b); } .ks-vm-summary-total-value.is-prompt { color: inherit; } .ks-vm-summary-badge { /* [ks_bar_price] .ks-vm-bar-price-badge'den KOPYA (operatör, 1 Ağu akşam). * Renk Elementor Global Secondary — marka değişince otomatik uyar. */ display: inline-block; margin: 0 2px; padding: 4px; line-height: 1; font-size: 1em; font-weight: 700; color: #fff; background: var(--e-global-color-secondary, #d83b3b); border-radius: 4px; white-space: nowrap; vertical-align: middle; } /* Single warning shown above the buttons on an incomplete add-to-cart click. */ .ks-vm-summary-warning { margin: 10px 0 0; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #a94442; background: #fdecea; border: 1px solid #f5c6cb; border-radius: 8px; } .ks-vm-summary-warning[hidden] { display: none; } /* Eksik-seçim uyarısının BALONU KALDIRILDI (27 Tem 2026, operatör isteği). * Uyarı artık KSToast ile veriliyor (cart-aware.js::warnIncompleteSelection); * seçeneklerin shake efekti korundu. Balon butona `position:fixed` ile * sabitleniyordu ve ayrık butonlar sayfanın başka yerine taşınabildiğinden * bazen seçeneklerden kopuk kalıyordu. `.ks-vm-tooltip` kuralları da silindi — * markup'ı üreten tek yer o metottu. (Teslimat ipuçlarındaki `.ks-vm-tip` * BAŞKA bir bileşendir, ona dokunulmadı.) */ /* ═══════════════════════════════════════════════════════════════════════════ * ⚠️ ELEMENTOR WIDGET'INDAN DEVRALINAN STİLLER (26 Tem 2026, v2.118.1) * * Add-to-cart alanı Elementor'un `woocommerce-product-add-to-cart` widget'ıyla * basılırken, o widget'ın 29 stil ayarı `post-775.css` içine WIDGET ID'SİNE * bağlı olarak yazılıyordu (`.elementor-element-8689351 …`). Widget şablondan * kaldırılıp yerine [ks_add_to_cart_form] konduğunda o CSS de yok oldu → * sarı Sepete Ekle butonu, 100px pill dropdown'lar ve varyasyon tipografisi * tema varsayılanına düştü. * * Aşağıdakiler o kuralların BİREBİR karşılığı. Değerler tahmin değil: widget * geçici olarak geri konup Elementor'a CSS'i yeniden ürettirildi ve üretilen * bildirimler buraya taşındı. Elementor global renk değişkenleri korundu * (`--e-global-color-*`), böylece operatör Site Ayarları'ndan marka rengini * değiştirdiğinde burası da takip ediyor; fallback'ler o değişken bir gün * kaybolursa diye. * * 🔑 Bu blok artık TEK KAYNAK: değeri Elementor'dan değil buradan değiştirin. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Sepete Ekle: altın dolgu / siyah etiket, hover'da turuncu + beyaz ── * Elementor kuralı `.cart button, .cart .button` idi (formdaki TÜM butonlar); * buy-now ve wishlist kendi KS stillerini zaten daha yüksek özgüllükle * kazandığı için burada yalnız Sepete Ekle'yi ve onun ayrık vekilini boyuyoruz. * !important: Botiga bu butona `.single-product .woocommerce-variation-add-to-cart * .button` (0,2,1) ile renk veriyor ve yalnız variable üründe eşleşiyor — * !important olmadan simple/variable arasında renk farkı doğuyor. */ .single_add_to_cart_button, .ks-vm-atc-btn { background-color: var(--e-global-color-cdea875, #F3C924) !important; color: var(--e-global-color-text, #000000) !important; border-style: none !important; text-transform: capitalize !important; font-weight: 600 !important; letter-spacing: 0.3px !important; } /* Hover'da YALNIZ arkaplan değişir (operatör, 27 Tem 2026): dolgu Button Primary * → Button Primary Hover'a geçer, yazı ve ikon Text renginde KALIR. * * `--e-global-color-9b6e6c7` burada doğru: o global artık "Button Primary Hover" * (#FFD73B) ve istenen de bu. Aynı ID'nin başka yerlerde turuncu anlamında * kullanılıyor olması ayrı bir sorundu, o kullanımlar f410e05'e taşındı. * * Eski `color:#FFFFFF` KALDIRILDI — sarı üstünde beyaz yazı hem okunmuyordu hem * de "sadece arkaplan değişsin" kuralını bozuyordu. */ .single_add_to_cart_button:hover, .single_add_to_cart_button:focus, .ks-vm-atc-btn:hover, .ks-vm-atc-btn:focus { background-color: var(--e-global-color-9b6e6c7, #FFD73B) !important; } /* ── Varyasyon satırları ── * Seçiciler `.variations_form.cart .variations .label` kuralını (0,4,0) geçmek * ZORUNDA — Elementor'un kendi kuralı da 0,4,4 idi ve satır dolgusunu o * kazanıyordu. `form.cart.variations_form` iki sınıfı birlikte kullanmak * sayıyı 4'e çıkarıyor. */ /* ── Varyasyon tablosu TAM GENİŞLİK ── * `table.variations`'a genişlik veren HİÇBİR kural yok (tema, WooCommerce, * Elementor — üçünde de grep'ledim). Tablolar shrink-to-fit olduğundan genişlik * tamamen içeriğe kalıyor: ön yüzde VillaTheme satırları `display:grid` + * `2fr 8fr` ile 516px'e ulaşıyor, ama **Elementor editöründe tablo ~110px'e * çöküyor** → seçenek kolonu 40px → her swatch alt alta düşüyor ve "50 cm" iki * satıra kırılıyor (operatörün editör ekran görüntüsü). Formun kendisi geniş, * çöken yalnız tablo. * * Belirli bir genişlik vermek her iki bağlamı da aynı yapıyor: ön yüzde zaten * 516px'ti, orada no-op. */ .ks-vm-atc-form form.cart table.variations { width: 100%; /* ⚠️ `display:block` on the TABLE and TBODY — measured from the operator's * Elementor editor, where the layout collapsed: * * tablo 565px · tr 160px · grid-template-columns: 100px 52.28px * * VillaTheme makes every variation a `display:grid` with `2fr 8fr`. A * grid box inside table internals gets wrapped in an anonymous table-cell, * and in the editor that cell's inline size comes out INDEFINITE — so the * `fr` tracks resolve like max-content and the options column shrinks to * ~52px, one swatch per line. (Front end it happened to be definite: the * form is a block there, while Elementor's stylesheet makes a non-variable * form `display:flex`, and a table flex-item keeps auto table layout for its * columns — that is the whole difference between the two contexts.) * * Taking table + tbody out of the table formatting context removes the * anonymous cell entirely: the grid rows become plain block children with a * definite 100% width, so `fr` resolves the same way everywhere. Rows that * are NOT grid (our simple-product Adet row) are block children too, which * is what they already looked like. `border-collapse` etc. are irrelevant — * every border in these tables was reset long ago. */ display: block; } /* tbody = SATIRLARIN KABI → satır arası boşluk buradan gelir (blok değil ızgara; * bkz. "SATIR RİTMİ"). Grid tek kolonlu olduğu için satırlar eskisi gibi tam * genişlikte kalır, yalnız aralarına gap girer. */ .ks-vm-atc-form form.cart table.variations > tbody { display: grid; width: 100%; row-gap: var(--ks-atc-row-gap); } /* ── KS'İN KENDİ SATIRLARININ GEOMETRİSİ — CSS'te, JS'te DEĞİL ── * VillaTheme her varyasyon ``'sini `display:grid; 2fr 8fr; gap:8px` yapıyor. * KS'in kendi satırları (Adet, Tutar, basit ürünün Adet'i) o sınıfı ALMIYOR; * `adet.js` / `frontend.js` içindeki matchSwatchRowLayout() onu bir komşudan * KOPYALIYOR — yani satır geometrisi JS'e bağlıydı. * * 🚨 Elementor editöründe o JS sırasını hiç almıyor (widget AJAX ile yeniden * render ediliyor) → satırlar grid olmuyor → değer kolonları swatch satırlarına * göre ~20px sola kayıyor (operatörün editör ekran görüntüsü). Basit üründe ise * kopyalanacak komşu HİÇ yok, orada blok tbody içinde anonim tabloya düşüp * td 100px'e daralıyor ve `.quantity{max-width:25%}` yüzünden stepper 25px * çiziliyordu. * * Bu yüzden geometri artık burada, açıkça. Değerler VillaTheme'inkiyle birebir * aynı, dolayısıyla JS sınıfı geldiğinde de bir şey değişmiyor — o kopya artık * yalnız swatch'ın yatay/dikey varyantını taşıyor (bizim satırlarda swatch yok, * o varyantın etkisi de yok). */ .ks-vm-atc-form form.cart table.variations > tbody > tr.ks-vm-adet-row, .ks-vm-atc-form form.cart table.variations > tbody > tr.ks-vm-option-row, .ks-vm-atc-form form.cart table.variations > tbody > tr.ks-vm-summary-row, .ks-vm-atc-form form.cart table.variations > tbody > tr.ks-vm-simple-qty-row { display: grid; grid-template-columns: 2fr 8fr; column-gap: 8px; align-items: center; /* This row carries ~10px inline padding of its own (the swatch rows have it * reset by VillaTheme). Left in, it pushed the whole row 10px right and made * its tracks 20px narrower than the Tutar row above it — measured thSol 602 * vs 592. Zero it so all rows share one left edge. */ padding-inline: 0; } /* ── Opsiyon satırlarının DİKEY padding'i (27 Tem 2026, v2.121.5 → 28 Tem'de * KALDIRILDI) ── * Buradaki `padding-block: 0 4px` artık YOK: satır arası boşluk tek bir gap'ten * geliyor (bkz. "SATIR RİTMİ"), satırın kendi dolgusu sıfırlanıyor. Aşağıdaki * teşhis, aynı tuzağa bir daha düşülmesin diye duruyor. * * Operatör: "Uç Tipi ve Form satırlarının alt-üst padding'i diğerleri gibi * değil". Doğru — ölçüldü: opsiyon satırları 10px/10px, diğer HEPSİ 0/4px. * * Zinciri Chromium'un eşleşen-kural dökümüyle çıkardım (tahminle değil): * 1. tema `table th, table td, table tr { padding: 10px }` ← kaynak * 2. VillaTheme `.vi-wpvs-variation-style { padding: 0 !important }` ← sıfırlar * 3. Additional CSS (operatör) * `.vi-wpvs-variation-style-horizontal { padding-bottom: 4px !important }` * * Adet ve Tutar satırları o VillaTheme sınıflarını JS ile bir swatch komşusundan * KOPYALADIKLARI için 2 ve 3'ü alıyorlar; opsiyon satırları kopyalamıyor, o * yüzden 1'de kalmışlardı. Yukarıdaki blok yalnız `padding-inline`'ı sıfırlıyordu * — dikey olan aynen duruyordu. * * Çözüm neden CSS, neden JS class-kopyası DEĞİL: bu dosyanın hemen üstteki * kararı gereği KS satırlarının geometrisi açıkça CSS'te duruyor, çünkü Elementor * editöründe o kopyalama JS'i hiç sırasını almıyor ve satırlar orada kayıyor. * * ⚠️ O 4px operatörün Customizer → Additional CSS'inden geliyordu (Botiga onu * `uploads/botiga/custom-styles.css` içine derliyor). Aşağıdaki sıfırlama onu da * eziyor; Additional CSS'teki * `.vi-wpvs-variation-style.vi-wpvs-variation-style-horizontal{padding-bottom:4px}` * satırı artık ETKİSİZ, silinebilir. */ /* Widget'ın "Variations Spacing" 29px'i BİLEREK taşınmadı: yukarıdaki * `form.cart .variations:not(.ks-vm-summary-table){margin-bottom:0 !important}` * kuralı onu zaten eziyordu (Tutar bloğu araya girdiğinden o boşluk seçeneklerin * hemen altında koca bir aralık açıyordu). Yani widget'lı hâlde de efektif değer * 0'dı — ölçümle teyitli. Geri eklemek eski bir kararı bozardı. * * ⚠️ Sarmalayıcı sınıf BİLEREK iki kez yazıldı: `.variations_form.cart * .variations .label` kuralı (0,4,0) bu satır dolgusunu yenerdi. Sınıfı * tekrarlamak sayıyı 4'e çıkarıp (0,4,4) yapıyor — Elementor'un kendi * özgüllüğünün aynısı. `form.cart.variations_form` yazmak daha temiz görünürdü * AMA o sınıf yalnız variable üründe var; BASİT ürünün Adet satırı da * `table.variations` (ks-vm-simple-qty-table) olduğu ve widget onu da * stillediği için basit ürün stilsiz kalıyordu. */ .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations tr th, .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations tr td { /* Elementor "Space Between" 15px'ini satırın altına ve üstüne yarı yarıya * dağıtıyordu (calc(15px/2) = 7.5px). ARTIK 0: satır arası boşluğun TEK * kaynağı `--ks-atc-row-gap` (bkz. "SATIR RİTMİ"). Hücre dolgusu ile gap * birlikte çalışırsa aralıklar satırın içeriğine göre değişir — şikâyetin * kökü tam olarak buydu. * Kural SİLİNMİYOR: silinirse temanın `table th, table td { padding: 10px }` * kuralı geri gelir. */ padding-block: 0; } .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations label { color: var(--e-global-color-text, #000000); font-size: 0.9em; line-height: 36px; } .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations td.value select, .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations td.value:before, /* Yorum sıralaması aynı kutuyu kullanıyor (operatör, 30 Tem): tek kaynak. */ .ks-vm-reviews-toolbar select.botiga-reviews-orderby { font-size: 0.9em; font-weight: 500; border-radius: 100px; } /* ── BASİT ürün: Adet satırı tam genişlik ── * Elementor'un stylesheet'i variable OLMAYAN formu `display:flex` yapıyor ve * yönü SATIR bırakıyordu; formun tek esnek çocuğu Botiga'nın sarmalayıcısı ve * `flex-grow:0` olduğu için içeriğine göre 308px'te kalıyordu → Adet tablosu * daralıyor → Additional CSS'teki `.quantity{max-width:25%}` de onun %25'i * olduğundan stepper 104px yerine 52px çiziliyordu. Ölçüldü. Basit ve variable * ürünün aynı görünmesi bu projede açık bir karar (bkz. .single_add_to_cart_button * bloğu). * ⓘ Formun yönünü aşağıdaki "SATIR RİTMİ" bloğu artık HER ürün tipinde `column` * yapıyor; sütun düzeninde çapraz eksen zaten geriyor, yani genişlik kendiliğinden * %100. Taban `auto` bırakıldı: `100%` bir sütun flex'inde YÜKSEKLİĞE bakar. */ .ks-vm-atc-form form.cart:not(.variations_form) > .botiga-single-addtocart-wrapper { flex: 0 0 auto; } /* ═══════════════════════════════════════════════════════════════════════════ * ⭐ SATIR RİTMİ — TÜM SATIR ARALIKLARI TEK BİR `gap` DEĞERİNDEN (28 Tem 2026) * * Operatör: "varyasyon satırları, adet dropdown'ı ve Tutar satırı arasındaki * boşluklar iç padding'ler yüzünden standart değil; hepsi tek bir gap ayarıyla * yönetilsin." * * ÖNCEKİ DURUM (ölçüldü, 3 ürün tipi) — aralığı ÜÇ farklı mekanizma üretiyordu: * • hücre dolgusu th/td padding-block 7.5px (Elementor "Space Between") * • satır dolgusu tr padding-bottom 4px (Customizer Additional CSS) * tr padding-block 10px (tema `table tr{padding:10px}`, * VillaTheme'in dokunmadığı * KS satırlarında canlı kalıyordu) * • sarmalayıcı gap'i .botiga-single-addtocart-wrapper gap:8px * • ürün tipine özel yama body.ks-vm-simple-qty …{padding-top:10px} * Sonuç: seçenek↔seçenek 19px, seçenek↔Adet 29px, Adet↔Tutar 33px — ve değerler * satırın hangi eklentiden geldiğine göre değişiyordu. * * ŞİMDİ: satırların ve hücrelerin KENDİ dikey dolgusu/marjı YOK; boşluk yalnız * satırları TAŞIYAN kapların `row-gap`'inden gelir. Kaplar (ürün tipine göre * farklı iç içe geçmeler, hepsi aynı değişkeni kullanır): * * form.cart seçenek tablosu ↔ Tutar ↔ varyasyon sarmalayıcı * table.variations > tbody seçenek satırı ↔ seçenek satırı ↔ Adet satırı * .ks-vm-summary Tutar tablosu ↔ uyarı satırı * .botiga-single-addtocart-wrapper Adet tablosu ↔ Tutar bloğu (perakende/basit) * .woocommerce-variation-add-to-cart (aynı, bir üst katman) * * 🔑 AYAR NOKTASI — TEK YER: aşağıdaki `--ks-atc-row-gap`. * Customizer → Additional CSS'ten de ezilebilir, !important gerekmez: * .ks-vm-atc-form { --ks-atc-row-gap: 20px; } * * `--ks-atc-label-gap` AYRI bir ölçüdür: dar konteynerde (<400px) etiket kendi * kontrolünün ÜSTÜNE geçtiğinde aradaki mesafe. Gruplamanın doğru okunması için * satır aralığından KÜÇÜK kalmalı — yoksa etiket üstteki satıra ait görünür. * ═══════════════════════════════════════════════════════════════════════════ */ .ks-vm-atc-form { --ks-atc-row-gap: 20px; --ks-atc-label-gap: 6px; } /* ── MOBİL RİTİM (18 Ağu 2026, operatör) ── * Etiketler seçeneklerin ÜSTÜNE geçtiği anda masaüstünün ritmi ters okunuyordu: * ölçüm → etiket ile kendi kutusu arası 7px, grup ile grup arası 24px. Etiket * neredeyse kutusuna yapışık, gruplar ise gereğinden uzaktı; form parça parça * görünüyordu. Operatör kararı: iç boşluk 10px, gruplar arası 16px. * * Buradaki DEĞİŞKENLER 9/12; ekranda ölçülen boşluklar 10/16 çıkıyor. Fark * sabit: etiket metninin üstünde `th`ın satır yüksekliğinden gelen ~4px, altında * ~1px ölü alan var. Yani bir sonraki ayarda hedefi değişkene çevirmek için * "iç = değişken + 1", "gruplar arası = değişken + 4" diye hesaplayın. * * Neden @media, neden @container DEĞİL: kap `form.cart`'ın KENDİSİ, ve bir * `@container` kuralı kabın kendisini seçemez — değişkeni orada tanımlayamıyoruz. * Masaüstünde dar bir Elementor kolonuna konursa 20/6 devam eder; oran hâlâ * doğru yönde olduğu için bu bir gerileme değil. * * ⚠️ GRUPLAMA KURALI korunuyor: label-gap < row-gap (9 < 12). İkisini eşitlemek * ya da ters çevirmek etiketi ÜSTTEKİ gruba aitmiş gibi gösterir. */ @media (max-width: 767px) { .ks-vm-atc-form { --ks-atc-row-gap: 12px; --ks-atc-label-gap: 9px; } } /* ── 1) Satırların ve hücrelerin KENDİ dikey boşluğu sıfır ── * `!important` + (0,4,3): yenmesi gereken en yüksek bildirim, Customizer'dan gelen * `.vi-wpvs-variation-style.vi-wpvs-variation-style-horizontal{padding-bottom:4px * !important}` (0,2,0 !important) — özgüllük farkıyla yeniliyor. Yatay dolguya * DOKUNULMUYOR: etiket kolonunun sağındaki 15px oradan geliyor. */ .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations > tbody > tr { padding-block: 0 !important; margin-block: 0 !important; } /* ── 2) Satır bloklarının (tablo / özet kutusu) kendi marjı sıfır ── * Elementor'un add-to-cart widget'ı HER `.variations` tablosuna margin-bottom:24px * basıyor; Botiga da `.ks-vm-simple-qty-table` gibi tablolara margin veriyor. */ .ks-vm-atc-form form.cart table.variations, .ks-vm-atc-form form.cart .ks-vm-summary { margin-block: 0 !important; } /* ── 3) Boşluğu ÜRETEN kaplar ── * form.cart: Botiga zaten `.variations_form.cart{flex-direction:column}` diyor ama * BASİT üründe yön `row` kalıyordu (Elementor) ve ≤1024px'te form blok oluyordu — * yani kap her ürün tipinde/genişlikte aynı davranmıyordu. Burada tek bir sütun * flex'ine sabitleniyor; `row-gap`i başka hiçbir kural bildirmediği için * !important gerekmedi. */ .ks-vm-atc-form form.cart { display: flex; flex-direction: column; row-gap: var(--ks-atc-row-gap); } .ks-vm-atc-form form.cart .ks-vm-summary { display: grid; row-gap: var(--ks-atc-row-gap); } /* ── 4) İçi tamamen boşalan sarmalayıcı gap YEMESİN ── * #643 gibi ürünlerde (adet satırı ana varyasyon tablosunda + butonlar ayrık) * `.single_variation_wrap` sıfır yükseklikte kalıyor ama yine de bir flex ögesi * olduğu için formun sonuna bir satır boşluğu kadar ölü alan ekliyor. * Koşullar bilerek dar: YALNIZ butonlar ayrıkken (form içindekiler gizli) VE adet * modu aktifken (WC'nin kendi `.quantity` kutusu da gizli) VE içinde satır taşıyan * bir tablo yokken. İçindeki gizli input'lar (variation_id vb.) `display:none` * altında da gönderilir ve JS onları okumaya devam eder. * `!important` ŞART: WooCommerce'in varyasyon JS'i init'te * `$singleVariationWrap.show()` diyerek satır-içi `display:block` basıyor. */ body.ks-vm-adet-active.ks-vm-detached-atc .ks-vm-atc-form form.cart > .single_variation_wrap:not(:has(table.variations)), body.ks-vm-adet-active:has(.ks-vm-detached-buttons) .ks-vm-atc-form form.cart > .single_variation_wrap:not(:has(table.variations)) { display: none !important; } /* ── DAR KONTEYNER: Adet satırı da üste alınır, kontrol TAM GENİŞLİK ── * Bu blok, dosyanın başındaki `@container ks-atc` bloğunun DEVAMI; buraya * konması zorunlu çünkü hemen yukarıdaki açık grid kuralı (0,4,4) oradaki genel * kuralı (0,3,3) yeniyor — o yüzden v2.118.8'den sonra swatch satırları dar * görünümde üste geçerken Adet satırı iki kolonda kalıyordu (ölçüm: swatch * `1fr` iken Adet `74.8px 299.3px`). * * Sarmalayıcı sınıf iki kez yazılı: yukarıdaki kuralla EŞİT değil, ONDAN YÜKSEK * olması gerekiyor. Aynı özgüllükte kalıp sıraya güvenmek, ileride kurallar * yeniden sıralanırsa sessizce bozulurdu. * * Operatör isteği: bu görünümde Adet kontrolü — dropdown da olsa +/- stepper da * olsa — satırın tamamını kaplasın. Bu yüzden hem select'in 155px tavanı hem * stepper'ın `max-width:25%`'i (Additional CSS) burada kaldırılıyor. */ @container ks-atc (max-width: 400px) { .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations > tbody > tr.ks-vm-adet-row, .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations > tbody > tr.ks-vm-option-row, .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations > tbody > tr.ks-vm-simple-qty-row { grid-template-columns: 1fr; /* Etiket ↔ kendi kontrolü; satır↔satır aralığı DEĞİL (bkz. SATIR RİTMİ). */ row-gap: var(--ks-atc-label-gap); /* Kontrol satırı doldurunca ortalamak yerine gerdirmek gerekiyor. */ align-items: stretch; } /* ── Etiket ↔ kendi içeriği arasındaki boşluk (operatör: fazlaydı) ── * Ölçüm: görünen boşluk 17px iken satır↔satır boşluğu 15px'ti — neredeyse * eşit, o yüzden etiket kendi seçeneklerine ait gibi okunmuyordu. İki * kaynağı vardı: * • Elementor'dan devralınan `table.variations label{line-height:36px}` — * yan yana düzende dikey ortalama için gerekli, ama üst üste geçince * metnin ALTINDA ~11px ölü alan bırakıyor; * • hücrenin 7.5px üst padding'i. * İkisi de yalnız bu görünümde kısıldı → ~7px. Satır↔satır 15px'te kaldığı * için gruplama artık doğru yönde (7 < 15). * * `!important`: devralınan kural (0,5,4) ile bu blok aynı özgüllükte, sıraya * güvenmek istemiyoruz. Özet tablosu hariç tutuldu — Tutar satırı bu * görünümde hâlâ yan yana duruyor, onun ritmi değişmemeli. */ .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations:not(.ks-vm-summary-table) th.label, .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations:not(.ks-vm-summary-table) th.label label { line-height: 1.4 !important; } /* ── Tutar satırı: etiket DEĞERİNE yapışsın (27 Tem 2026, v2.119.0) ── * Operatör: dar görünümde "Tutar" ile tutarın arası fazla. * * 🚨 Bu kural, dosyanın başındaki `@container` bloğunda ZATEN yazılmıştı * (`form.cart .ks-vm-summary-table tr {grid-template-columns: auto 1fr}`, * 0,2,2) ama v2.118.1'de eklenen devralınan-Elementor bloğu KENDİ satır * geometrisini 0,4,3 ile bastırdığından (yukarıdaki * `… > tbody > tr.ks-vm-summary-row {grid-template-columns: 2fr 8fr}`) o * kural sessizce ölüydü — yani Tutar satırı dar görünümde de 2fr/8fr * kolonda kalıyordu. Etiket kolonu satırın %20'sini tutuyor, "Tutar" onun * yarısını doldurmuyor; görülen boşluğun büyük kısmı 8px gap DEĞİL, o boş * track'ti. Adet satırında aynı tuzağa v2.118.8'de düşülmüş ve bu blokta * çözülmüştü; Tutar satırı atlanmış. * * `auto` = etiket kendi metni kadar, `1fr` = kalan her şey değere. Geriye * yalnızca satırın kendi 8px column-gap'i kalır — AMA bu tek başına yetmedi, * hemen aşağıdaki th genişlik kuralı olmadan `auto` track 100px'te kalıyor. * * Sarmalayıcı sınıf yine iki kez: (0,5,4) > devralınan bloğun (0,4,3)'ü. * Aralığı ayarlamak isterseniz TEK değer: aşağıdaki column-gap. */ .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations.ks-vm-summary-table > tbody > tr { grid-template-columns: auto 1fr; column-gap: 8px; } /* ── th.label GENİŞLİĞİ: 100px'i bırak, metnine yapış (v2.119.2) ── * Operatör: "dar görünümde th yine 100px alıyor, o yüzden hâlâ uzak." * Doğru gözlem — `auto` track'i yukarıda vermek YETMEZ, çünkü bir grid * ögesinin `auto` track'e katkısı kendi belirtilmiş genişliğidir; th 100px * dediği sürece track de 100px oluyor. * * 🚨 Suçlu Botiga DEĞİL, bu dosyanın kendi "LABEL COLUMN WIDTH" bloğu: * .variations_form.cart .variations .label → width:100px; padding-inline:0 15px * Özgüllüğü (0,3,0), bloğun başındaki `form.cart .ks-vm-summary-table * th.label {width:auto; padding-inline:0}` kuralından (0,2,2) YÜKSEK → * o kural da sessizce ölüydü. Aynı sebeple 15px'lik son-padding de duruyordu, * yani metinden sonra 15px + 8px gap = 23px ölü alan vardı. * Not: o seçici `.variations_form` içerdiği için yalnız VARIABLE üründe * eşleşiyor — basit üründe zaten sorun yoktu, şikâyetin ürüne göre * değişmesinin sebebi bu. * * ⓘ İstenen "30px" yerine `auto`: "Tutar" kelimesi 0.9em'de ~38px, yani * 30px kendi metninden DAR — kutu ya taşar ya kelime kırılır. `auto` bu * bağlamda 30px'ten de sıkı sonuç verir: etiket tam metni kadar, ardından * yalnız 8px gap. Gerçekten sabit bir değer isterseniz buradaki `auto` * yerine yazın (ve gerekirse `white-space:nowrap` ekleyin). * * Özet tablosu HARİÇ TUTULMADI: kural iki tabloyu da kapsıyor. Üst üste * dizilen varyasyon satırlarında etiket zaten tek kolonun solunda, orada * görsel etkisi yok — ama iki satır tipi tek kuralda kaldığından bir daha * ayrışamazlar. */ .ks-vm-atc-form.ks-vm-atc-form form.cart table.variations th.label { width: auto; padding-inline: 0; } /* Dropdown: ürün sayfası select'i + adet select'i + onu barındıran hücre * (masaüstü panel `left:0;right:0` ile hücreye bağlı, ikisi ayrışmasın). */ .ks-vm-atc-form.ks-vm-atc-form form.cart .variations select, .ks-vm-atc-form.ks-vm-atc-form form.cart .ks-vm-adet-select, .ks-vm-atc-form.ks-vm-atc-form form.cart .ks-vm-adet-host { max-width: none; } /* +/- stepper: kutu tam genişlik, ortadaki input boşluğu yutar. * `!important` şart — Additional CSS'te `form.cart .quantity{max-width:25% * !important}` (0,2,1) ve bizim `input.qty{width:34px !important}` var. */ .ks-vm-atc-form.ks-vm-atc-form form.cart div.quantity { max-width: none !important; width: 100% !important; } .ks-vm-atc-form.ks-vm-atc-form form.cart div.quantity input.qty { flex: 1 1 auto; width: auto !important; } } /* Detached add-to-cart / buy-now buttons ([ks_add_to_cart_buttons]) — placeable * anywhere; they drive the single product form on the page. Fine-tune the look * from Elementor / Additional CSS. */ .ks-vm-detached-buttons { display: flex; flex-wrap: wrap; gap: 10px; /* Its OWN container, so the stacking below reacts to the width this block * actually has — see the @container note under the flex rules. */ container-type: inline-size; container-name: ks-atc-buttons; } /* Equal halves (flex-basis:0 → both grow from nothing to the same size), matching * the main add-to-cart / buy-now pair. min-width:0 lets a long label shrink to its * half instead of pushing past 50%. * * Targeted by the buttons' OWN classes, not `.button`: the detached buy-now no * longer carries the theme's `button alt` classes (they made it read uppercase / * 14px / 2px letter-spacing while the in-form button it stands for is capitalize * / 15.2px / 0.3px — 6 measured differences). */ /* ⚠️ Taban `0` DEĞİL, `calc(50% - 5px)` (5px = 10px gap'in yarısı) — v2.123.0. * `flex-basis:0` + `box-sizing:border-box` ile taban genişlik, kutunun * padding+border zeminine KIRPILIYOR: Sepete Ekle 16+16+0 = 32px, Hemen Al * 24+24+2+2 = 52px. Serbest alan eşit bölüşülse bile o 20px'lik fark sonuna * kadar taşınıyordu — ölçüldü: 255,28px vs 275,28px, farkı tam 20px. * Yüzdeli taban ikisini de aynı kesin değere sabitliyor: 50%+50% - 10px = tam * konteyner genişliği, yani dağıtılacak serbest alan sıfır ve padding farkı * sonuca sızamıyor. * Alt alta düzende bu taban aşağıdaki `flex-basis:100%` kurallarıyla eziliyor * (kaynak sırası: onlar sonra geliyor). */ .ks-vm-detached-buttons .ks-vm-atc-btn, .ks-vm-detached-buttons .ks-vm-buy-now-btn { flex: 1 1 calc(50% - 5px); min-width: 0; margin: 0; } @media screen and (max-width: 767px) { .ks-vm-detached-buttons .ks-vm-atc-btn, .ks-vm-detached-buttons .ks-vm-buy-now-btn { flex-basis: 100%; /* stack full width on mobile, like the main pair */ } } /* ── DAR GÖRÜNÜM: butonlar da alt alta (27 Tem 2026, v2.119.0) ── * * Operatör isteği: [ks_add_to_cart_form] dar görünüme geçip etiketleri * seçeneklerinin ÜSTÜNE aldığı ANDA, bu ayrık butonlar da yan yana değil alt * alta dizilsin. * * 🔑 Neden `ks-atc` DEĞİL de kendi container'ı: container query yalnızca * container'ın SOYUNA uygulanır. `ks-atc` container'ı `form.cart`; bu blok * formun içinde değil, ayrı bir Elementor widget'ı — yani `@container ks-atc` * buraya HİÇBİR ZAMAN ulaşmaz (yazılsa sessizce ölü kural olurdu). * * Bunun yerine blok kendi kendinin container'ı oluyor ve AYNI 400px eşiği * kullanılıyor. İkisi şablonda (775) aynı Elementor container'ının kardeş * çocukları — `#ca1cf02 > shortcode#98df73f` (form) ve `> shortcode#2464339` * (butonlar) — dolayısıyla satır-içi genişlikleri birebir eşit ve iki blok * TAM AYNI anda dar düzene geçiyor. Butonlar bir gün başka genişlikte bir * kolona taşınırsa, eşiği orada kendi genişliğine göre uygular; yine doğru * davranış, sadece formla eşzamanlılık garantisi kalkar. * * Eşiği değiştirirseniz yukarıdaki `@container ks-atc` bloğundaki 400px ile * birlikte değiştirin — ikisi eşleşmezse düzenler ayrışır. * * Üstteki ≤767px media query'si @container'sız tarayıcılar için fallback * olarak duruyor ve AYNI sonucu veriyor, ikisi çelişemez. */ @container ks-atc-buttons (max-width: 400px) { .ks-vm-detached-buttons > .ks-vm-atc-btn, .ks-vm-detached-buttons > .ks-vm-buy-now-btn { flex-basis: 100%; } } .ks-vm-atc-btn.loading { opacity: 0.6; pointer-events: none; } /* When the detached buttons are on the page, hide the ones inside the form — * whichever renders it: Elementor's add-to-cart widget, or our own * [ks_add_to_cart_form] (.ks-vm-atc-form). The real add-to-cart button stays in * the DOM (just hidden) so the detached button can still proxy it. * * The wishlist is in this list too: render_buy_now_button() prints buy-now AND * wishlist on the same hook, so without it the page showed TWO bookmark icons * once the detached shortcode was used. Since v2.119.0 the detached block no * longer prints one at all, which makes this rule the ONLY thing keeping the * bookmark icon off the add-to-cart area — don't drop it as "redundant". */ /* 🔑 `body:has(…)` FIRST, `body.ks-vm-detached-atc` only as the fallback. * * The body class is added by cart-aware.js on DOM-ready, so for one paint the * form's own three buttons were VISIBLE and then vanished — the operator saw * the buttons flash in at the top of the page on every first load. `:has()` is * evaluated during the first style pass, so with it there is no frame in which * they exist. The JS class stays for browsers without :has() (pre-2023), where * the flash is the lesser evil versus duplicate buttons. */ body:has(.ks-vm-detached-buttons) .ks-vm-atc-form :is(.single_add_to_cart_button, .ks-vm-buy-now-btn, .ks-vm-wishlist-btn), body:has(.ks-vm-detached-buttons) .elementor-widget-woocommerce-product-add-to-cart :is(.single_add_to_cart_button, .ks-vm-buy-now-btn, .ks-vm-wishlist-btn), body:has(.ks-vm-detached-buttons) .e-atc-qty-button-holder :is(.single_add_to_cart_button, .ks-vm-buy-now-btn, .ks-vm-wishlist-btn), body.ks-vm-detached-atc .ks-vm-atc-form :is(.single_add_to_cart_button, .ks-vm-buy-now-btn, .ks-vm-wishlist-btn), body.ks-vm-detached-atc .elementor-widget-woocommerce-product-add-to-cart :is(.single_add_to_cart_button, .ks-vm-buy-now-btn, .ks-vm-wishlist-btn), body.ks-vm-detached-atc .e-atc-qty-button-holder :is(.single_add_to_cart_button, .ks-vm-buy-now-btn, .ks-vm-wishlist-btn) { display: none !important; } /* Our block shows stock now, so hide WooCommerce's own variation availability * line to avoid a duplicate (and, on adet products, a misleading per-strand * "1 in stock"). */ .single_variation_wrap .woocommerce-variation-availability { display: none; } /* ═══════════════════════════════════════════════════════════ * Stock Notify — "Gelince haber ver" * * When the requested quantity exceeds available stock on a notify-backorder * product, JS reveals .ks-vm-notify-btn and puts .ks-vm-notify-mode on the * form, which hides the add-to-cart/buy-now/wishlist buttons. Same box as the * other buttons (46px pill) but SOLID Elementor Global Primary + white label, * bell-ringing icon (regular → filled on hover, via the shared swap rules). * Retune the colour from Customizer → Additional CSS. * ═══════════════════════════════════════════════════════════ */ .ks-vm-notify-btn[hidden] { display: none; } .ks-vm-notify-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; min-height: 46px; font-family: inherit; font-size: 0.95em; /* 600 — Sepete Ekle ve Hemen Satın Al ile aynı (operatör, 27 Tem 2026). * Bu buton stok yetersizken o ikisinin YERİNE geçiyor, farklı ağırlıkta * olması aynı yerde iki farklı tipografi demekti. */ font-weight: 600; text-transform: capitalize; line-height: 1.4; letter-spacing: 0.3px; cursor: pointer; white-space: nowrap; vertical-align: middle; transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; /* !important beats Elementor's `.cart button` rule (this is a button in form.cart). */ background: var(--e-global-color-primary, #111) !important; border: 2px solid var(--e-global-color-primary, #111) !important; border-radius: 100px !important; color: #fff !important; } .ks-vm-notify-btn:hover, .ks-vm-notify-btn:focus { opacity: 0.9; outline: none; } .ks-vm-notify-btn:active { opacity: 0.8; } /* Gönderim sırasında (operatör, 7 Eyl 2026): düğme disabled, ikon yerinde * spinner (ortak kural ~370. satır), etiket OLDUĞU GİBİ kalır; yanıt gelince * eski hâline döner. Sepete Ekle / Hemen Satın Al ile aynı görünüm. */ .ks-vm-notify-btn.ks-vm-notify-loading { opacity: 0.6; pointer-events: none; } .ks-vm-notify-btn .ks-vm-icon, .ks-vm-notify-btn .ks-vm-icon path { fill: currentColor !important; color: inherit; } /* Notify mode: the notify button (and its confirmation) replace the buy buttons; * the WISHLIST stays visible in its trailing column — a customer filing a * back-in-stock request is exactly who wants to bookmark the product. The class * goes on form.cart AND on any .ks-vm-detached-buttons container * ([ks_add_to_cart_buttons] shortcode), whose add-to-cart uses .ks-vm-atc-btn. */ .ks-vm-notify-mode .single_add_to_cart_button, .ks-vm-notify-mode .ks-vm-atc-btn, .ks-vm-notify-mode .ks-vm-buy-now-btn { display: none !important; } /* The live "Tutar" row hides with the buy buttons: an over-stock request is a * back-in-stock enquiry, and the restock may be sold at a different price — so * no price promise while the notify button is up. The second selector mirrors * VillaTheme's high-specificity grid rule on the copied swatch row classes. */ .ks-vm-notify-mode .ks-vm-summary-total-line, .woocommerce div.product.elementor form.cart.ks-vm-notify-mode .ks-vm-summary-table tr.ks-vm-summary-total-line { display: none !important; } /* Satır gizlenince onu saran özet bloğu 0px yükseklikte formda KALIYORDU ve * form.cart'ın 20px satır aralığı (gap) ona da uygulanıyordu → Adet satırı ile * paket bilgisi arasında boş bir şerit (operatör, 7 Eyl 2026: "tutar alanında * boşluk kalıyor"). Tek satırı Tutar olan özet bloğu notify modunda bütünüyle * çekilir; başka bir satırı (indirim vb.) varsa blok kalır, yalnız Tutar gizlenir. */ .ks-vm-notify-mode .ks-vm-summary:not(:has(tr:not(.ks-vm-summary-total-line))) { display: none !important; } /* With the buy buttons display:none they leave the grid, and auto-placement * would drop the wishlist into column 1 with the notify button wrapping to a * second row (measured in a real render). Pin the wishlist to the trailing * column explicitly, and let the grid backfill (dense) so the notify button * takes columns 1-2 of the SAME row — sparse flow cannot step back to the * hole the wishlist leaves, because the wishlist precedes it in the DOM. */ .ks-vm-notify-mode .ks-vm-wishlist-btn { grid-column: -2 / -1; } .ks-vm-notify-mode .botiga-single-addtocart-wrapper, .ks-vm-notify-mode .e-atc-qty-button-holder, .ks-vm-notify-mode .woocommerce-variation-add-to-cart { grid-auto-flow: dense; } /* Ayrık düğmeler ([ks_add_to_cart_buttons]) sayfadaysa formun kendi düğme kabı * `.single_variation_wrap` kuralıyla GİZLİ; stock-notify.js haber-ver düğmesini * ve onay mesajını init'te bu kaba TAŞIR (7 Eyl 2026 — aksi hâlde notify modunda * sayfada hiç düğme kalmıyordu). Flex kapta tam satır. */ .ks-vm-detached-buttons > .ks-vm-notify-btn { flex: 1 1 100%; min-width: 0; margin: 0; } /* Stokta olmayan seçim (notify modu): dört bilgi paneli sayfadan ÇEKİLİR * (operatör, 7 Eyl 2026). Panelin kendisi değil, onu taşıyan Elementor * widget'ı gizlenir — yoksa 0px'lik widget konteynerin gap'ini yemeye devam * eder (Tutar satırındaki aynı tuzak). Ürün bütünüyle stoksuzsa PHP zaten * basmaz (ks_vm_product_unavailable); bu kural varyasyon bazlı hâl içindir. */ body.ks-vm-out-of-stock .elementor-widget-shortcode:has(.ks-panel--handover), body.ks-vm-out-of-stock .elementor-widget-shortcode:has(.ks-panel--shipping), body.ks-vm-out-of-stock .elementor-widget-shortcode:has(.ks-panel--discounts), body.ks-vm-out-of-stock .elementor-widget-shortcode:has(.ks-panel--payments), body.ks-vm-out-of-stock .ks-panel--handover, body.ks-vm-out-of-stock .ks-panel--shipping, body.ks-vm-out-of-stock .ks-panel--discounts, body.ks-vm-out-of-stock .ks-panel--payments { display: none !important; } /* Stoksuz seçim ÖNERİLERİ: `ks-vm-oos-only` konteynerleri (Loop Grid * "Şu an stokta olanlar" / "Benzer ürünler") yalnız stoksuz düzende görünür; * body sınıfını notify modu (JS) ya da ürün bütünüyle stoksuzsa PHP basar. */ /* Editör önizlemesi de bu CSS'i yükler; orada konteynerler HEP görünür kalsın * (operatör 7 Eyl: "editörde belirmiyor") → `.elementor-editor-active` istisnası. */ body:not(.ks-vm-out-of-stock):not(.elementor-editor-active) .ks-vm-oos-only { display: none !important; } .ks-vm-notify-mode .ks-vm-notify-btn { /* Span the add-to-cart + buy-now columns and leave the trailing auto column * to the wishlist square, which stays visible in notify mode. */ grid-column: 1 / -2; width: 100%; /* Theme spacing between the paired buttons adds margin-left:10px; at full * row width that margin pushed the button 10px past the container's right * edge (measured in a real render). The grid gap provides all spacing. */ margin: 0 !important; } /* ── Compact quantity controls (operator request) ── * The retail +/- stepper (~48px) and the adet pill (~50px) both read a size * larger than the rest of the form; trim them to ~40/42px. Scoped to form.cart * so the loop mini-stepper and cart-page inputs keep their own sizing. */ form.cart div.quantity { height: 42px !important; min-height: 42px !important; } form.cart div.quantity .botiga-quantity-minus, form.cart div.quantity .botiga-quantity-plus { width: 32px !important; height: 100% !important; font-size: 20px !important; } form.cart div.quantity input.qty { width: 34px !important; height: 100% !important; font-size: 0.9em !important; } /* `.ks-vm-option-select` (varyasyon-dışı ürün opsiyonları, KS_VM_Product_Options) * bu kutuyu Adet ile PAYLAŞIR — operatör: "tüm dropdown'lar Adet'teki gibi * olmalı". Aşağıdaki padding'ler onlarda da şart: chevron'a yer açan kural * yalnız `.ks-vm-adet-select`'e yazılıydı, o yüzden "Uç Tipi"nde ok metnin * üstünden geçiyordu (operatörün ekran görüntüsü). Tek fark max-width; onu * bir sonraki blok anlatıyor. */ form.cart .ks-vm-adet-select, form.cart .ks-vm-option-select, form.cart .ks-vm-tone-select, /* Ton Grubu dropdown'ı (2 Eyl 2026) */ form.cart .variations .vi-wpvs-variation-wrap-wrap[data-swatch_type="viwpvs_default"] > select, /* Set Tipi: swatches 'varsayılan' tipi = WC select (5 Eyl 2026) */ .ks-vm-reviews-toolbar select.botiga-reviews-orderby { padding-top: 8px !important; padding-bottom: 8px !important; /* ⚠️ Chevron'a YER AYIRIR. Tema ok işaretini arka plan görseli olarak * `background-position: calc(100% - 18px) 50%` ile basıyor ama sağ padding'i * 16px bırakıyor — yani metin okun ALTINDAN geçiyor. Ölçüm: kutu 140px, * "Bir seçim yapın" 105px, metin x=121'de bitiyor, ok x≈112'de başlıyor. * 18px (okun sağdan uzaklığı) + ~10px (ok genişliği) + 6px nefes = 34px. */ padding-right: 34px !important; cursor: pointer !important; } /* ── Select genişliği (operatör isteği) ──────────────────────────────────── * Hücreyi doldurmaya devam ediyor (width:100% temadan geliyordu, artık burada * açıkça yazılı) ama 205px'i geçmiyor: geniş bir kolonda tek satırlık bir * dropdown'ın 400px'e uzaması formu dengesiz gösteriyordu. * * `.ks-vm-adet-host` de aynı tavanı alıyor. O sınıf ayrı bir sarmalayıcı DEĞİL, * doğrudan `
` hücresinin kendisi; masaüstü * seçenek paneli `position:absolute; left:0; right:0` ile ona bağlı. Hücre 406px * kalsaydı kapalı kutu 205px, açılan panel 406px olur ve ikisi hizasız görünürdü. * Ölçüldü: ikisi de 205px, sol kenar 711/711. * * Tema `select{width:100%}` + jenerik `max-width:100%` bastığı için buradaki * seçiciler onları özgüllükle geçiyor; !important gerekmiyor. */ /* ⚠️ 140px → 155px (26 Tem): 140'ta en uzun etiket kutuya SIĞMIYOR. Aritmetik, * ölçülen değerlerle: 16px sol padding + 105px "Bir seçim yapın" + 34px sağ * padding (chevron alanı dahil, yukarıya bak) = **155px minimum**. 140'ta metin * kırpılıyordu. Daha dar istersen bu değeri düşürmek yetmez — placeholder * metnini de kısaltmak gerekir. */ form.cart .variations select, form.cart .ks-vm-adet-select, form.cart .ks-vm-adet-host { width: 100%; max-width: 200px; } /* ── Ürün opsiyonları: aynı kutu, SABİT 200px tavan (operatör, v2.121.3) ── * Kutunun geri kalanı (yükseklik, padding, pill radius, tipografi) Adet ile * ortak — bkz. yukarıdaki padding bloğu ve `td.value select` kuralı. Değişen * TEK şey genişlik tavanı. * * İki ayrı değer olmasının sebebi: Adet'in 155px'i "200 adet" gibi kısa * etiketlere göre hesaplanmıştı (16 sol + 105 metin + 34 chevron) ve operatör * onu ÖYLE İSTİYOR. Opsiyon terimleri ise uzun ("Permalı/Kıvırcık", "Boncuk * Kaynak"), 155px'te kırpılıyorlardı. * * 200 SABİT bir karar, 155'in türevi DEĞİL (bir ara "iki katı" olarak 310px * yazılmıştı, operatör 200'de karar kıldı). Yani Adet'in tavanı değişirse * burası kendiliğinden takip ETMEMELİ. * * ⚠️ Seçici `.variations select` İÇERMEK ZORUNDA: yukarıdaki 155px kuralı * (0,2,2) bu select'lere de uyuyor ve düz `form.cart .ks-vm-option-select` * (0,2,1) ondan DÜŞÜK kalır — tavan sessizce 155px'e yenilirdi. Buradaki hâli * (0,3,2). Basit üründe satırlar `.ks-vm-options-table` içinde ama o tablo da * `variations` sınıfını taşıyor, dolayısıyla iki ürün tipinde de eşleşiyor. * * DAR GÖRÜNÜM DEĞİŞMEZ: `@container ks-atc (max-width:400px)` bloğundaki * `max-width:none` (0,5,3) buradan yüksek, yani etiket üstte + kontrol tam * genişlik düzeni aynen korunuyor. * * 🚨 HÜCRE DE OLMAK ZORUNDA — v2.121.2'nin sessizce çalışmamasının sebebi buydu. * `adet-dropdown.js` formdaki HER dropdown'ı geliştiriyor ve ana hücresine * `ks-vm-adet-host` sınıfını basıyor; o sınıf da yukarıdaki 155px tavanını * taşıyor. Yani select'e 200px vermek hiçbir şey değiştirmiyordu: hücre 155px'te * kalıyor, `width:100%` olan select de onu geçemiyordu. Ölçümle saptandı * (kolon izi 426px, hücre 155px, computed max-width 200px — üçü birden). * Statik CSS aramasıyla görünmez, çünkü sınıfı JS ekliyor. * * Hücre ile kutunun EŞİT kalması ayrıca şart: masaüstü seçenek paneli hücreye * `left:0; right:0` ile bağlı, ikisi ayrışırsa panel kutudan geniş açılır. */ form.cart .variations select.ks-vm-option-select, form.cart .variations select.ks-vm-tone-select, form.cart .variations td.ks-vm-option-host { max-width: 200px; } /* ── Adet dropdown: desktop styled panel ── * The native select stays the (already pill-styled) closed control; on * fine-pointer devices adet-dropdown.js suppresses the unstylable native * option list and opens this panel instead. Touch devices never see it — * they get the platform's own picker. */ .ks-vm-adet-host { position: relative; } .ks-vm-adet-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e3e3e3; border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); max-height: 320px; overflow-y: auto; } .ks-vm-adet-panel[hidden] { display: none; } .ks-vm-adet-option { padding: 8px 14px; border-radius: 10px; cursor: pointer; /* Kapalı kutudaki değerle AYNI punto (operatör, 30 Tem): tetikleyici * `0.9em` = 14.4px iken panel seçenekleri 0.95em ile 15.2px çıkıyordu, * açılan liste kutudan iri duruyordu. Panelin kabı da 16px olduğu için * aynı çarpan ikisini eşitliyor (ölçüldü: hem ATC hem sıralama). */ font-size: 0.9em; color: #222; transition: background 0.12s ease; } .ks-vm-adet-option:hover { background: #f5f5f5; } .ks-vm-adet-option.is-selected { background: var(--e-global-color-primary, #111); color: #fff; } /* While the panel is open the select's chevron flips to signal state. */ .ks-vm-adet-open .ks-vm-adet-select { border-color: #bbb; } /* ═══════════════════════════════════════════════════════════════════════════ * ⭐ KS DROPDOWN — SİTENİN TEK DROPDOWN GÖRÜNÜMÜ (27 Eyl 2026) * * Operatör: "tüm dropdown'lar için referansımız aynı olmalı, hepsi aynı look * and feel". REFERANS = ürün formundaki varyasyon select'i (ölçüldü, * ks-tests/probe-dd-reference.mjs): hap kutu 42px, 1px #ccc, 100px köşe, * 16/34px yatay dolgu, 18px'te 12px chevron, Plus Jakarta Sans 14.4px/500. * Açılan liste = yukarıdaki `.ks-vm-adet-panel` (adet-dropdown.js; masaüstü * ince imleç), dokunmatikte platformun native seçicisi. * * KULLANIM: select'e `ks-dd` sınıfı ver (sonradan üretiliyorsa ardından * `$(document.body).trigger('ks_vm_dropdowns_refresh')`). Yeni kopya deri * YAZMA — değer değişecekse BURADA değişir. * Kapsam (27 Eyl): Dil ve Konum popup'ı, Hesabım adres defteri + sipariş * filtreleri. Checkout/eski teslimat penceresi hâlâ select2 (operatör kararı). * * 🚨 `.ks-vm-co` (ks-fields.css) içindeki select'ler `border-width * !important` alıyor → ikinci seçici (0,2,2) + !important ile geçiliyor. * ═══════════════════════════════════════════════════════════════════════════ */ body select.ks-dd, body .ks-vm-co select.ks-dd { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 8px 34px 8px 16px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14.4px; font-weight: 500; line-height: 1.68; letter-spacing: normal; color: var(--e-global-color-text, #000000); background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23212121' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z' /%3E%3C/svg%3E") no-repeat calc(100% - 18px) 50%; border: 1px solid #cccccc; border-radius: 100px; box-shadow: none; outline: none; cursor: pointer; } body .ks-vm-co select.ks-dd { border-width: 1px !important; } /* POPUP İÇİNDE (Elementor popup'ları + adres defteri penceresi) kutu yanındaki metin * kutularıyla AYNI BOY (operatör, 27 Eyl: "popup içlerindeki dropdown'lar biraz daha * yüksek"). Yükseklik input'un KENDİ ölçülerinden türetilir (ks-tokens --ks-field-*): * satır × punto + 2 × dikey dolgu + 2 × 1px (input'un 1.5px token'ı tarayıcıda 1px * çiziliyor — ölçüldü: input 48.39px, DPR 1 ve 2). Ürün formu / sıralama / Hesabım * sipariş filtreleri popup DEĞİL → referansın 42px'i. */ body .elementor-popup-modal select.ks-dd, body .ks-vm-ab-ov select.ks-dd { height: calc(var(--ks-field-font-size, 16px) * var(--ks-field-line-height, 1.4) + 2 * var(--ks-field-pad-y, 12px) + 2px); padding-top: 0; padding-bottom: 0; } body select.ks-dd:has(option[value=""]:checked) { color: var(--e-global-color-01631af, #727272); } body select.ks-dd option[value=""] { color: var(--e-global-color-01631af, #868686); } body select.ks-dd option:not([value=""]) { color: var(--e-global-color-text, #000000); } /* Odak: referansla aynı — kenarlık değişmez (ortak form derisinin turuncu odak halkası * .ks-vm-co içinde (0,2,2) geliyordu; bu (0,3,2) onu geçer). */ body select.ks-dd:focus, body .ks-vm-co select.ks-dd:focus { border-color: #cccccc; box-shadow: none; outline: none; } body select.ks-dd:disabled { cursor: default; opacity: .6; } /* Paneli taşıyan kap: panel `left:0; right:0` ile ona bağlı, seçenek puntosu * (0.9em) referanstaki gibi 16px tabandan 14.4px çıksın diye taban sabit. */ .ks-dd-host { position: relative; display: block; font-size: 16px; } /* Uzun listelerde (≥15 seçenek) panelin üstünde arama — kutuyla aynı hap dili. * Panel kayarken üstte kalır (sticky; panel dolgusu 6px olduğu için top:-6px). */ .ks-vm-adet-search { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 6px; padding: 6px 6px 0; background: #fff; list-style: none; } /* 🚨 Tema (Botiga) metin kutularına kare köşe + odakta kalın siyah kenarlık basıyor — seçici * `input[type="text"]` + body önekiyle (0,2,2) onu geçer (ölçüldü: önce 0px köşe, 2px siyah). */ body .ks-vm-adet-search input[type="text"] { box-sizing: border-box; width: 100%; height: auto; min-height: 0; margin: 0; padding: 7px 14px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14.4px; font-weight: 500; line-height: 1.5; color: #222; background: #fff; border: 1px solid #e3e3e3; border-radius: 100px; box-shadow: none; outline: none; } body .ks-vm-adet-search input[type="text"]:focus { border: 1px solid #cccccc; box-shadow: none; outline: none; } .ks-vm-adet-empty { padding: 8px 14px; font-size: 0.9em; color: var(--e-global-color-01631af, #727272); list-style: none; } .ks-vm-adet-option[hidden], .ks-vm-adet-empty[hidden] { display: none; } /* Kalan stok satırı: YALNIZ [ks_stock_info] shortcode'u (operatör, 7 Eyl 2026; * adet kutusunun içindeki/sağındaki eski `.ks-vm-stock-left` notu kaldırıldı). * Görünüm [ks_pack_info] ile birebir — kurallar aşağıda ortak seçiciyle. */ /* Metin ikonla AYNI renk (operatör, 7 Eyl 2026): Elementor secondary; paket * satırının gri #777'sini burada ezer (o kural yukarıda, ortak seçicide). */ .ks-vm-stock-info, .ks-vm-stock-info strong { color: var(--e-global-color-secondary); } .ks-vm-stock-info strong { font-weight: 700; } /* Keep it on the SAME line as the retail/free stepper (it's a narrow pill, so * there is room to its right). A full-width adet dropdown has none, so the note * naturally wraps beneath it there — the only sensible spot. */ .ks-vm-simple-qty-table td.value { white-space: nowrap; } .ks-vm-simple-qty-table td.value .quantity { display: inline-flex; vertical-align: middle; } /* ═══════════════════════════════════════════════════════════ * Merchant one-step checkout — KS düzenlemeleri * ═══════════════════════════════════════════════════════════ */ /* Logged-in checkout: the whole "Contact Information" block is redundant — * the popup gate funnels shoppers through login, and for a logged-in customer * Merchant renders the account e-mail as a HIDDEN billing_email input (which * still POSTs when the block is display:none) plus a mere greeting line. * GUESTS keep the block: the visible e-mail field there is REQUIRED for their * order. :has() is safe in every 2024+ browser; where unsupported the block * simply stays visible (graceful). */ body.logged-in .merchant-pro-sc .merchant-pro-sc-content-item-block:has(.merchant-pro-sc-contact-information) { display: none; } /* ═══════════════════════════════════════════════════════════ * Dil değiştirici (.ks-lang) — KS_VM_Frontend::render_language_switcher * Native
: TIKLAMA ile açılır (hover değil), JS yok (kapatma * ks-lang.js). Tetikleyicide bayrak + SVG caret; dil İSİMLERİ açılan menüde; * menüde tüm diller, mevcut DISABLED. Radius 6px, her şey dikeyde tam ortalı. * NOT: tema/Elementor ve img kurallarını ezmek için !important * (ks-auth.css'in Botiga'yı ezme deseni) — toggle olduğundan şart. * ═══════════════════════════════════════════════════════════ */ .ks-lang { display: flex; } /* reset — varsayılan disclosure üçgenini kaldır. */ .ks-lang > summary { list-style: none; } .ks-lang > summary::-webkit-details-marker { display: none; } .ks-lang > summary::marker { content: ""; display: none; } /* Tetikleyici — küçük pill (bayrak + caret), her ikisi dikeyde tam ortalı. */ .ks-lang .ks-lang__toggle { display: inline-flex !important; align-items: center !important; justify-content: center; gap: 7px; margin: 0; padding: 0; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; transition: border-color 0.15s ease, background 0.15s ease; -webkit-appearance: none; appearance: none; } .ks-lang:not(.ks-lang--solo) .ks-lang__toggle:hover, .ks-lang[open] .ks-lang__toggle { border-color: var(--ks-accent, #da6900) !important; } .ks-lang--solo .ks-lang__toggle { cursor: default; } /* Bayrak — sabit boyut (tema img{height:auto}'yu ez), dikeyde ortalı blok. */ .ks-lang .ks-lang__flag { display: block; flex-shrink: 0; width: 24px; height: 16px; max-width: none; border-radius: 2px; object-fit: cover; } .ks-lang .ks-lang__name { display: inline-block; line-height: 1; white-space: nowrap; } /* Caret — SVG chevron, viewBox'ta merkezli → align-items ile tam ortalı. Açılınca 180° döner. */ .ks-lang .ks-lang__caret { display: block; flex-shrink: 0; width: 13px; height: 12px; color: var(--ks-muted, #6a6a6a); transition: transform 0.15s ease; } .ks-lang[open] .ks-lang__caret { transform: rotate(180deg); } /* Açılan menü — beyaz kart, düşük radius + yumuşak gölge, sağa hizalı. */ .ks-lang .ks-lang__menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 100; min-width: max-content; margin: 0 !important; padding: 4px !important; list-style: none !important; border: 1px solid var(--ks-line, #e0e0e0); border-radius: 8px; background: var(--ks-surface, #fff); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } .ks-lang .ks-lang__menu li { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Menü satırları — bayrak + isim, dikeyde tam ortalı. */ .ks-lang .ks-lang__item { display: flex !important; align-items: center !important; gap: 7px; margin: 0; padding: 8px 10px !important; border-radius: 4px; color: var(--ks-ink, #1a1a1a); font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .ks-lang a.ks-lang__item:hover, .ks-lang a.ks-lang__item:focus { background: var(--ks-accent, #da6900); color: #fff; } /* Mevcut dil — disabled: muted, tıklanamaz, hover yok. */ .ks-lang .ks-lang__item--current { color: var(--ks-muted, #6a6a6a); font-weight: 600; cursor: default; opacity: 0.7; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ * CART PAGE (KS_VM_Cart_Page) — Botiga layout2 restyle * * TAMAMEN BAĞIMSIZ bölüm: sepetin fiyat bloğu kendi sınıflarını taşır * (.ks-vm-cart-price-value/-badge/-old/-new) ve bütün stiller burada, düz * değerlerle durur. Ürün sayfasının Tutar bloğu (.ks-vm-summary-*, yukarıda * SINGLE PRODUCT bölümü) ile hiçbir paylaşım yok — orada fiyatı büyütmek, * burada küçültmek birbirini etkilemez. * Sepette fiyat boyutu: .ks-vm-cart-price-value font-size. * ═══════════════════════════════════════════════════════════════ */ /* ── Product images: the mini cart thumbnail's bigger twin (operator, 4 Ağu: * satırlar mini cart düzeninin büyüğü) — 3:4 + cover + 1px Elementor Border * global rengi + 8px radius, galeri thumbnail'larıyla aynı dil. Kolon * genişliği Botiga'da 100px'ti; 14 Ağu (operatör: biraz küçült) kolonu 84px'e * çektik → görsel 84×112 (oran korunur, aspect-ratio hesaplar). ── */ .woocommerce-cart .shop_table td.product-thumbnail { width: 84px; } .woocommerce-cart .shop_table td.product-thumbnail img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: center; height: auto; display: block; border: 1px solid var(--e-global-color-dcb0b6a, #d1d1d1); border-radius: 8px; box-sizing: border-box; } /* Satır dikey boşluğu — Botiga her hücreye 30px üst+alt basıyor, operatör: * çok fazla (14 Ağu) → 18px (satır ~194→170px). Yalnız dikey; yatay padding * Botiga'da kalır. tr.cart_item kapsamı: başlık satırı ve td.actions * (güncelle butonu, zaten gizli) etkilenmez. * vertical-align: ad + fiyat yığını küçük resimle ORTADAN hizalı (operatör, * 14 Ağu; Botiga top basıyordu). Görsel hücresi normal table-cell → middle * yeter; AD hücresi layout2'de display:flex KOLON → vertical-align'ı YOK * SAYAR, ortalama justify-content'ten gelir. (v2.276.0: Kaldır görselin * altından çıkınca hücrede yalnız görsel kaldı → eski 48px alt-padding * telafisi de gitti; iki hücre ortası artık kendiliğinden çakışır.) */ .woocommerce-cart .shop_table tr.cart_item td { padding-top: 18px; padding-bottom: 18px; vertical-align: middle; } .shop-table-layout2 .shop_table tr.cart_item td.product-name { justify-content: center; } /* ("Alışveriş Sepeti" sayfa başlığı v2.276.0'da kaldırıldı — başlık artık * Elementor'dan; .ks-vm-cart-title kuralları da onunla gitti.) */ /* Drop the left column's top gap (the form carries a 25px margin-top) so the * heading sits flush with the top of the content area (operator). */ .woocommerce-cart .woocommerce-cart-form { margin-top: 0 !important; padding-right: 50px !important; } /* Unit-price column retired — the line price lives under the title now. */ .woocommerce-cart .shop_table th.product-price, .woocommerce-cart .shop_table td.product-price { display: none !important; } /* Name-cell stack (td.product-name is a flex column in Botiga layout2): * head row (title, order 1) → qty/fiyat satırı adın HEMEN altında (3) — mini * cart'taki gibi (eski margin-top:auto dip-yaslaması kalktı, 4 Ağu). */ .shop-table-layout2 .shop_table .product-name .ks-vm-cart-head { order: 1; } .shop-table-layout2 .shop_table .product-name .ks-vm-cart-bottom { order: 3; } /* Paket bilgi satırı: adın hemen altı, qty/fiyat satırının üstü. */ .shop-table-layout2 .shop_table .product-name .ks-vm-cart-paket-info { order: 2; } .ks-vm-cart-paket-info { margin-top: 0; } /* ── Head row: yalnız başlık (fiyat alt satıra indi — mini cart düzeni) ── */ .woocommerce-cart .product-name .ks-vm-cart-head { display: flex; align-items: flex-start; gap: 24px; width: 100%; } /* ── Title ── */ .woocommerce-cart .shop_table .product-name .ks-vm-cart-item-name { flex: 1 1 auto; min-width: 0; font-size: 1em; font-weight: 600; color: inherit; line-height: 1.4em; } /* ── Bottom row = mini cart'ın .ks-vm-mc-row'unun büyüğü: [miktar kontrolü] * ....... [fiyat] tek flex hizası; fiyatı sağa .ks-vm-cart-price'ın * margin-left:auto'su iter (spinner ::after kontrolün hemen sağında kalır). ── */ .ks-vm-cart-bottom { display: flex; align-items: center; flex-wrap: wrap; /* narrow screens: price drops below, stays right */ gap: 8px 12px; margin-top: 14px !important; } /* ── Line price block — mini cart fiyatının (bar dili) büyütülmüş kopyası, * sepetin KENDİ sınıflarıyla: İNDİRİMLİYSE secondary, DÜZSE text rengi; * rozet + üstü çizili eski + 1.4em yeni tutar. Satırın sağına yaslı. ── */ .ks-vm-cart-price { display: flex; flex: 0 0 auto; margin-left: auto; /* satır sağına (mini cart'taki margin-inline-start:auto) */ text-align: right; color: var(--e-global-color-secondary, #d83b3b); } /* Fiyat parçalarını tek eksende toplayan konteyner — sepet fiyat BOYUTU burada. * flex + align-items:center → rozet, eski ve yeni fiyat TEK yatay çizgide, * ortadan hizalı (farklı font-size'lara rağmen). line-through, aşağıda * amount/bdi seviyesinde AÇIKÇA tanımlandığı için flex içinde de görünür * (flex konteyner decoration'ı çocuklarına GEÇİRMEZ; o yüzden her parçaya * ayrı ayrı verilir). */ .ks-vm-cart-price-value { font-size: 0.8em; /* 12.8px taban → yeni tutar ~18px (14 Ağu, operatör: * biraz küçült; önceki 0.9em/20px). Tüm blok buradan * ölçeklenir (rozet/eski/yeni em-oranlı). */ font-weight: 600; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; column-gap: 6px; } /* İndirimsiz satır fiyatı text renginde — mini cart'taki :only-child kuralının * eşi (indirimsizde value TEK çocuk taşır; indirimlide rozet+del+ins kardeş). */ .ks-vm-cart-price-value > .ks-vm-cart-price-new:only-child { color: var(--e-global-color-text, #212121); /* Optik orta hizası — mini cart'taki :only-child nudge'ının eşi (rakam * descender'sızlığı; kutu merkezi stepper'la birebir, glyph ~1px yukarıda). */ position: relative; top: 1px; } /* Üstü çizili eski (indirimsiz) satır toplamı. line-through'un fiyat rakamının * ÜSTÜNDE görünmesi için amount/bdi INLINE kalmalı ve decoration onlara da * doğrudan verilmeli. */ .ks-vm-cart-price-old, .ks-vm-cart-price-old .woocommerce-Price-amount, .ks-vm-cart-price-old bdi { text-decoration: line-through !important; } .ks-vm-cart-price-old .woocommerce-Price-amount, .ks-vm-cart-price-old bdi { display: inline; } .ks-vm-cart-price-old { font-size: 1em; /* mini cart oranı: eski tutar = taban boyut */ font-weight: 600; color: #999; line-height: 1; padding: 0; } /* Ödenen satır toplamı — mini cart oranı (1.4em), renk kapsayıcıdan * (indirimliyse secondary, düzse yukarıdaki :only-child text'i). Sepette * HİÇBİR fiyatta highlight (arka plan) yok. */ .ks-vm-cart-price-new { font-size: 1.4em; font-weight: 700; color: inherit; background: none; text-decoration: none; letter-spacing: -0.3px; line-height: 1; padding: 0; } /* İndirim oranı rozeti — mini cart'taki .ks-vm-summary-badge ile aynı oranlar. */ .ks-vm-cart-price-badge { display: inline-flex; align-items: center; font-size: 1em; font-weight: 700; line-height: 1; color: #fff; background: var(--e-global-color-secondary, #d83b3b); border-radius: 4px; padding: 4px; white-space: nowrap; } /* ── Quantity controls ── * Both controls share ONE width: the wrapper is capped at 130px and each control * fills it 100% (operator: dropdown and +/- stepper must be equal, width:100% * max-width:130px). The wrapper's definite basis is what lets the children's * width:100% resolve to 130px. */ .ks-vm-cart-qty { position: relative; /* hosts the adet panel (.ks-vm-adet-host) */ flex: 0 1 130px; width: 100%; max-width: 130px; } /* Pack satırı (operatör, 1 Eyl 2026): boy dropdown'u YOK — satır kontrolü * retail ile AYNI görünümde tek −/+ sayaç (kaç paket), .ks-vm-cart-qty-stepper * kalıbını olduğu gibi kullanır. Tek fark: sarmalayıcı data-qty-initialized * taşıdığı için Botiga'nın JS'i .show sınıfını HİÇ basmaz (tema anchor'ları * .show gelene dek opacity:0+visibility:hidden tutar) — mini cart'taki çözümün * aynısıyla ikisini de kendimiz açıyoruz. */ .woocommerce-cart-form .ks-vm-pack-count .botiga-quantity-minus, .woocommerce-cart-form .ks-vm-pack-count .botiga-quantity-plus { opacity: 1 !important; visibility: visible !important; } /* Retail stepper (!important: wins over Botiga's own sizing). 40px compact * height (border-box → a true 40px); fills the 130px wrapper with the +/- * pinned to the ends and the number cell flexing to fill the middle; * align-items:center vertically centres all three cells. */ .woocommerce-cart-form div.quantity { box-sizing: border-box !important; width: 100% !important; /* !important beats Botiga's `.shop-table-layout2 .shop_table .quantity` * (0,3,0) max-width:105px, which otherwise wins over our 130px. */ max-width: 130px !important; height: 40px !important; min-height: 40px !important; align-items: center !important; justify-content: space-between !important; } /* −/+ glyphs: flex-centre the character, with a 4px bottom padding that lifts * the ink onto the number's optical centreline. The value is measured, not * guessed — with it the −, the digit and the + share one horizontal line (ink * midpoints 50.0 / 50.3 / 50.9 % of the 40px box). Botiga's own asymmetric * .show padding (2px/6px, tuned for its taller 50px stepper) is overridden. */ .woocommerce-cart-form div.quantity .botiga-quantity-minus, .woocommerce-cart-form div.quantity .botiga-quantity-plus { flex: 0 0 auto; width: 30px !important; height: 100% !important; padding: 0 0 4px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 20px !important; } .woocommerce-cart-form div.quantity input.qty { flex: 1 1 auto; width: auto !important; min-width: 0; height: 100% !important; text-align: center; /* Match the pack dropdown's text exactly (operator): size, weight, family and * colour. WooCommerce/theme force a system font stack + weight 400 on qty * inputs; the dropdown inherits the theme font at weight 500, so without this * the number renders in a different typeface. */ font-size: 0.9em !important; font-weight: 500 !important; font-family: inherit !important; color: #212121 !important; } /* Read-only value box (JS makes it +/- only): no text caret, no editing tint. */ .woocommerce-cart-form div.quantity input.qty[readonly] { cursor: default; background: transparent; } /* A +/- button at the line's min (1) or stock max: greyed and inert (operator: * "gerekirse + iconunu disabled yaparak"). pointer-events:none also stops * Botiga's own step handler, so the line can never pass its stock ceiling. */ .woocommerce-cart-form .botiga-quantity-plus.ks-vm-qty-disabled, .woocommerce-cart-form .botiga-quantity-minus.ks-vm-qty-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } /* Pack line: the adet dropdown as the quantity — same pill as the product * page's add-to-cart adet select (100px radius, 1px #ccc, SVG chevron), a * touch smaller (operator). Values measured from the live product-page select; * the desktop styled panel (.ks-vm-adet-panel) is shared, so only the closed * control needs matching here. */ select.ks-vm-cart-qty-select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 130px; height: 40px; /* Override the theme's blanket min-height:51px on every yerine geçen (replaced) bir eleman, * pseudo-element'leri güvenilir biçimde render etmiyor — swatch tarafındaki * çözümün burada karşılığı yok. * * Renk kaynağı swatch halkasıyla aynı: Elementor global'i doğrudan. */ select.ks-vm-calc-pulse { outline: 2px solid var(--e-global-color-secondary, var(--ks-accent, #da6900)); outline-offset: 0; animation: ks-vm-calc-ring-select 900ms ease-out infinite; } @keyframes ks-vm-calc-ring-select { 0% { outline-offset: 0; outline-color: var(--e-global-color-secondary, var(--ks-accent, #da6900)); } 100% { outline-offset: 7px; outline-color: transparent; } } /* Hareket hassasiyeti: halka nabız atmayı bırakır ama SABİT kalır — geri bildirim * kaybolmasın, yalnız animasyon dursun. Noktalar da sabitlenir. */ @media (prefers-reduced-motion: reduce) { .vi-wpvs-option-wrap.ks-vm-calc-pulse::after { animation: none; opacity: 0.9; } select.ks-vm-calc-pulse { animation: none; outline-offset: 3px; } .ks-vm-calculating .ks-vm-summary-total-value::after { animation: none; content: "..."; } } .ks-vm-detached-buttons > .ks-vm-atc-btn, .ks-vm-detached-buttons > .ks-vm-buy-now-btn { /* Tema butonlara `width:100%` veriyor; flex tabanı yüzdeli olduğu için bu * artık sonucu değiştirmiyor ama niyeti açık tutmak için sıfırlıyoruz. * `min-width:0` şart: varsayılan `auto`, uzun etiketli butonun kendi * min-content genişliğinin altına inmesini engelliyor. */ min-width: 0 !important; width: auto !important; box-sizing: border-box !important; } /* ── Mağaza butonlarının ikon boyutu (operatör: "çok az daha büyütelim") ── * İkonlar `1em` çizilir, yani ölçü FONT-SIZE üzerinden verilir — bu dosyadaki * yerleşik desen (`.ks-panel-head .ks-vm-icon{font-size:1.25em}`, * `.ks-vm-tip .ks-vm-icon{font-size:1.1em}`). Ölçek `.ks-vm-icon-swap`'e * uygulanıyor: içindeki iki SVG (regular + hover'da beliren filled) 1em olduğu * için ikisi birden aynı anda büyüyor, cross-fade sırasında zıplama olmuyor. * * 1.15em → 15.2px yerine ~17.5px. Buton yüksekliğine (46px) ve label ağırlığına * (600) göre denendi; daha büyüğü label'ı bastırmaya başlıyor. * * ⚠️ Büyütmek dikey optik hizayı da etkiliyor: Phosphor çizimleri kutularının * içinde aşağıda oturduğundan (bkz. yukarıdaki optik merkez bloğu) o sapma * boyutla ORANTILI büyüyor. Bu değeri değiştirirseniz -1.15px'lik nudge'ı * yeniden ölçün. */ .ks-vm-atc-btn .ks-vm-icon-swap, .ks-vm-buy-now-btn .ks-vm-icon-swap, .ks-vm-notify-btn .ks-vm-icon-swap, .single_add_to_cart_button .ks-vm-icon-swap { font-size: 1.15em; } /* ═══════════════════════════════════════════════════════════════════════════ * SELECT PLACEHOLDER'LARI — "gerçek seçenek" gibi görünmesinler (v2.125.0) * * Operatör: "Bir seçenek seçin" vb. satırlar gerçek seçeneklerden farklı, * placeholder gibi yazılsın. Formda İKİ ayrı metin dolaşıyor (ikisi de * `value=""` taşıyor, seçici o yüzden metne değil DEĞERE bakıyor): * • "Bir seçenek seçin" → KS_VM_Product_Options (Uç Tipi, Form) * • "Bir seçim yapın" → Adet + WooCommerce'in kendi varyasyon select'leri * (ikisi de WooCommerce'in "Choose an option" dizgisini kullanıyor) * * Renk Elementor'un **Muted** global'i (#868686). Doğrudan global'e bağlı, * `--ks-muted` token'ı üzerinden DEĞİL: o token `:root`'ta tanımlı, Elementor * global'leri ise `body.elementor-kit-639`'da — token global'i göremiyor ve * sessizce kendi hex yedeğine düşüyor (bu dosyada daha önce ölçülmüştü). * ═══════════════════════════════════════════════════════════════════════════ */ /* 1) KAPALI kutu: seçili olan placeholder ise metin solgun. * `:has()` şart — kapalı select'in metni seçili option'dan geliyor ve CSS'in * o durumu görmesinin başka yolu yok. Desteklenmeyen bir tarayıcıda kural * düşer, kutu normal renginde kalır: bilgi kaybı yok, yalnız vurgu yok. */ form.cart .variations select:has(option[value=""]:checked) { color: var(--e-global-color-01631af, #868686); } /* 2) AÇIK listede placeholder satırı. * ⚠️ Native `