/** * B2B Suite — Ürün Sayfası 3 Sütunlu Grid (Faz 0: İskelet). * * Sadece yerleşim/konum kuralları var burada — hiçbir buton/kutu rengi, * yazı tipi vb. görsel zenginleştirme Faz 0 kapsamında değil (bkz. Faz 3). * * ÖNEMLİ (canlı DOM incelemesiyle doğrulandı): WoodMart, galeri + özet * alanını kendi "wd-grid-g" (12 kolonluk) grid sistemiyle `.product-image-summary-inner` * içinde iki doğrudan çocuk olarak diziyor: `.product-images` (galeri, * --wd-col-lg:6) ve `.summary.entry-summary` (özet, --wd-col-lg:6). * b2b-product-layout.js, sağ sütun kabımızı (`.b2b-col-right`) bu grid'in * İÇİNE, ÜÇÜNCÜ doğrudan çocuk olarak taşıyor. Burada WoodMart'ın kendi grid * tanımını (12 kolon + span tabanlı genişlik) bu konteynere özel olarak 3 * sabit sütuna eziyoruz — bu yüzden !important gerekiyor. * * KIRILGANLIK NOTU: Bu seçiciler (.product-image-summary-inner, .product-images) * WoodMart'ın "Ürün Sayfası Tasarımı" tema ayarının ŞU ANKİ (varsayılan) * yapılandırmasına göre doğrulandı. Bu ayar değişirse (örn. farklı bir ürün * sayfası şablonuna geçilirse) markup değişebilir, canlı ortamda tekrar * kontrol edilmesi gerekir. */ :root { /* Sağ sütunun sticky durduğu üst boşluk. WoodMart header'ın scroll'da sabit kalıp kalmadığına ve gerçek yüksekliğine göre canlı ortamda TEK SATIRDA ayarlanması gereken değer budur. */ --b2b-sticky-top-offset: 20px; --b2b-col-gap: 30px; --b2b-right-col-width: 360px; /* Native galeri küçük resimlerinin (sol dikey şerit) kare boyutu — canlıda ölçülen yüksekliğe göre ayarlanmalı. */ --b2b-thumb-size: 60px; } /* Sol (galeri) : orta (özet) oranı — ilk 1fr:2fr dardı, 1.2fr:1.5fr'de galeri hâlâ biraz dardı, şimdi 1.4fr:1.4fr'e (eşit pay) çekildi. Sağdaki sabit 360px'ten arta kalan alanı bu oranla paylaşırlar. (CSS custom property'lere doğrudan "fr" birimi eklenemediği için — minmax(0, var(--x)) geçersiz olurdu — oranlar burada doğrudan yazılıyor, değiştirmek istersen bu satırı düzenle.) */ body.b2b-product-3col-page .product-image-summary-inner { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, var(--b2b-right-col-width)) !important; column-gap: var(--b2b-col-gap) !important; /* ÖNEMLİ (sticky için şart): "start" değil "stretch" — align-items:start ile kısa kalan sağ sütun hücresi KENDİ İÇERİĞİ kadar kısa kalıyordu, yani .b2b-col-right'ın kendisi .b2b-col-right-inner ile AYNI yükseklikte oluyordu; position:sticky'nin kayabileceği boş alan sıfırlanıyordu. "stretch" ile sağ sütunun kabı sol/orta sütun kadar uzuyor (görsel fark yok, sol/orta zaten daha uzun), içinde sticky elemanın kayacağı boşluk oluşuyor. */ align-items: stretch !important; } /* WoodMart'ın kendi 12-kolonluk span değerlerini (--wd-col-lg üzerinden) iptal ediyoruz ki üç öğe de yukarıdaki 3 sabit sütuna, DOM sırasına göre (galeri / özet / sağ sütun) otomatik dizilsin. */ body.b2b-product-3col-page .product-image-summary-inner > .product-images, body.b2b-product-3col-page .product-image-summary-inner > .summary.entry-summary, body.b2b-product-3col-page .product-image-summary-inner > .b2b-col-right { grid-column: auto !important; min-width: 0; /* iç görsel/tablo taşmalarını grid hücresine sığdırır */ } /* Sol sütuna (galeri + örnek çalışmalar galerisi) hafif bir "kart" görünümü — çıplak WooCommerce görselinin sayfaya sadece yapıştırılmış değil, tasarlanmış hissettirmesi için. Renk/gölge kasıtlı olarak nötr tutuldu, Faz 3'te admin ayarlarına bağlanabilir. */ body.b2b-product-3col-page .product-images { background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 16px; } /* Native galerinin renk/varyasyon küçük resimleri (sol dikey şerit) — WoodMart hem genişliği hem yüksekliği kendi CSS'iyle (JS ile hesaplanan inline height dahil) ayrıca belirlediği için aspect-ratio tek başına işe yaramıyordu (bir boyut zaten "belirli" olunca aspect-ratio devre dışı kalır). Bu yüzden genişliği DOĞRUDAN yükseklikle eşitliyoruz — canlıda ölçülen ~60px değeri kullanıldı; görünüm farklıysa aşağıdaki tek değişkeni ayarlaman yeterli. Böylece kalan yatay boşluk otomatik olarak ana görsele geçer (galeri flex/grid ile genişliyor). */ body.b2b-product-3col-page .wd-gallery-thumb .wd-carousel-item { width: var(--b2b-thumb-size) !important; height: var(--b2b-thumb-size) !important; } body.b2b-product-3col-page .wd-gallery-thumb .wd-carousel-item img { width: 100% !important; height: 100% !important; object-fit: cover; } /* Örnek Çalışmalar Galerisi'nin Swiper ok butonları — varsayılan 40px boyutuyla kenardaki görselin üzerine biniyordu; küçültüp kenara (görselin dışına yakın) çekiyoruz ki resimle görsel çakışması azalsın. (Kaynak stil class-b2b-shortcodes.php içinde # ID seçiciyle geliyor, buradaki override'ın kazanması için !important gerekiyor.) */ body.b2b-product-3col-page .b2b-sample-gallery-container .b2b-slider-arrow { width: 28px !important; height: 28px !important; } body.b2b-product-3col-page .b2b-sample-gallery-container .b2b-slider-arrow:after { font-size: 12px !important; } body.b2b-product-3col-page .b2b-sample-gallery-container .swiper-button-prev { left: 2px !important; } body.b2b-product-3col-page .b2b-sample-gallery-container .swiper-button-next { right: 2px !important; } /* ===================== ORTA SÜTUN (özet alanı) sadeleştirme ===================== Breadcrumb'ın yanındaki "önceki/sonraki ürün" gezinmesi, kısa açıklama (özellik listesi) ve "X kişi ... satıldı" aciliyet rozeti kaldırıldı — bu 3 blok WoodMart/WooCommerce'in kendi varsayılan çıktısı, admin panelden yönetilmiyor, bu yüzden hook ile çıkarmak yerine görünürlüğü kapatıyoruz. */ body.b2b-product-3col-page .summary.entry-summary .wd-products-nav, body.b2b-product-3col-page .summary.entry-summary .woocommerce-product-details__short-description, body.b2b-product-3col-page .summary.entry-summary .wd-sold-count { display: none !important; } /* Faz 2 (bağlantılı, Faz 3 ile birlikte tamamlandı): native adet kutusu (-10/-/adet/+/+10) DOM'da KALIYOR — form gönderiminde ve JS'in input.qty'yi okuyup yazmasında hâlâ kullanılıyor — sadece görsel olarak gizleniyor. Tek görünür adet seçimi artık anlık fiyat tablosunun satırları (bkz. b2b-instant-price.css / .b2b-ipt-row). */ body.b2b-product-3col-page .summary.entry-summary .quantity { display: none !important; } /* WoodMart'ın "Karşılaştır" ve "Favorilere Ekle" butonları — bu akışta B2B ürünler doğrudan sepete eklendiği için gereksiz, kaldırıldı. */ body.b2b-product-3col-page .summary.entry-summary .wd-compare-btn, body.b2b-product-3col-page .summary.entry-summary .wd-wishlist-btn { display: none !important; } /* WoodMart'ın "Paylaş" (sosyal medya ikonları) bloğu — Minimum Sipariş kutusunun altında duruyordu, bu akışta gereksiz/dikkat dağıtıcı, sayfayı sadeleştirmek için kaldırıldı. */ body.b2b-product-3col-page .summary.entry-summary .product-share { display: none !important; } /* Breadcrumb: yukarıdaki gezinme kaldırılınca tüm genişliği kendi alıyor, tekrarlanan ürün adını (zaten hemen altında H1 olarak duruyor) gizleyip daha sade/küçük bir iz bırakıyoruz. */ body.b2b-product-3col-page .summary.entry-summary .wd-breadcrumbs { font-size: 13px; color: #999; } body.b2b-product-3col-page .summary.entry-summary .wd-breadcrumbs a { color: #999; } body.b2b-product-3col-page .summary.entry-summary .wd-breadcrumbs .wd-last { display: none; } /* "Liste Fiyatı" gösterimi: etiket + tutar iç içe/sıkışık duruyordu, ayrı bir blok gibi biraz nefes aldırıp alttaki içerikten ince bir çizgiyle ayırıyoruz. Etiketin rengi/boyutu PHP tarafında satır-içi style ile geliyor (modify_price_display()) — override için !important gerekiyor. */ body.b2b-product-3col-page .summary.entry-summary p.price { margin: 6px 0 16px 0 !important; padding-bottom: 14px; border-bottom: 1px solid #eee; } body.b2b-product-3col-page .summary.entry-summary p.price .b2b-list-price-label { font-size: 12px !important; color: #999 !important; text-transform: uppercase; letter-spacing: .4px; display: block !important; margin: 0 0 4px 0 !important; line-height: 1.2 !important; } body.b2b-product-3col-page .summary.entry-summary p.price .woocommerce-Price-amount { font-size: 26px; font-weight: 700; } /* Baskı özellikleri grup başlıklarındaki tekrar: "Baskı Yönü: (Sadece Arka)" — parantez içindeki kısım JS ile dolduruluyor ama seçim zaten hemen altındaki turuncu/tikli kutuda görünüyor, aynı bilgi iki kere veriliyordu. JS tarafına dokunmadan (mantığı başka bir yerde işe yarıyor olabilir), sadece yeni şablonda görünürlüğünü kapatıyoruz. */ body.b2b-product-3col-page .summary.entry-summary .b2b-print-group-label .selection-label { display: none !important; } /* Hizalama düzeltmesi: baskı seçenekleri kutusu (.b2b-print-options-wrapper), product-page-mods.php içinde ESKİ (3 sütunlu olmayan) sayfa düzeninde varyasyonlarla hizalamak için eklenmiş 20px sol boşluğa sahip (kod içindeki yorumda böyle yazıyor). Bizim yeni düzenimizde bu bağlam yok — breadcrumb, başlık, fiyat, renk ve fiyat tablosu zaten doğal sol kenarda duruyor, sadece bu blok 20px sağa kaymış oluyordu. Sadece bu şablonda iptal ediyoruz; eski sayfa düzeninde (bu class ordaki hizalama için hâlâ gerekli olabilir) dokunmuyoruz. */ @media (min-width: 768px) { body.b2b-product-3col-page .summary.entry-summary .b2b-print-options-wrapper { padding-left: 0 !important; } } /* "Seçenekleri Temizle" — İKİ AYRI kaynaktan geliyordu: 1) .reset_variations / .custom-reset-wrapper: WooCommerce'in native varyasyon temizleme linki (bu markup/script bizim eklentimize ait değil, temaya/özel JS'e ait — düzenleyemiyoruz), adet tablosunun ALTINDA çıkıyordu. 2) .b2b-clear-btn: BİZİM KENDİ KODUMUZ (render_print_options_ui(), class-b2b-product-page-mods.php) — baskı özellikleri kutusunun SONUNDA (Baskı Türü/Yönü gruplarından sonra) çıkan "× Seçenekleri Temizle" butonu; adet tablosunun ÜSTÜNDE kalan buydu. İkisi de yeni 3 sütunlu tasarımda gereksiz/dikkat dağıtıcı — hepsi kaldırılıyor. */ body.b2b-product-3col-page .summary.entry-summary .reset_variations, body.b2b-product-3col-page .summary.entry-summary .custom-reset-wrapper, body.b2b-product-3col-page .summary.entry-summary .b2b-clear-btn { display: none !important; } /* Yukarıdaki link kaldırılınca geriye kalan boşluk, aslında linkin kendi payı değil, komşu blokların (baskı seçenekleri kutusu, fiyat tablosu, min. sipariş kutusu) kendi üst/alt margin'lerinin TOPLAMI — o yüzden boşluğu gerçekten azaltmak için üçünü de burada küçültüyoruz. */ body.b2b-product-3col-page .summary.entry-summary .b2b-print-options-wrapper { margin-bottom: 8px !important; } body.b2b-product-3col-page .summary.entry-summary .b2b-instant-price-table { margin-top: 8px !important; margin-bottom: 8px !important; } body.b2b-product-3col-page .summary.entry-summary .b2b-min-order-box { margin-top: 8px !important; } /* Renk/varyasyon seçimi hizalama düzeltmesi: gerçek DOM incelemesiyle bulundu — WooCommerce varyasyon seçimi bir satırı olarak basılıyor:
(gizli "Renk" etiketi) + (görünen "Renk: Seçiniz" yazısı + renk daireleri). "Renk" swatch bloğu bu yüzden aslında tablonun 2. SÜTUNU — th boş/görünmez olsa da hücre olarak yer kaplıyor ve td'yi (dolayısıyla tüm swatch alanını) sağa itiyor. Breadcrumb/ başlık/fiyat ise normal blok eleman olduğu için sol kenarda kalıyor, bu ikisi çakışıyordu. th zaten görünmez ve td içindeki .variation-label-title aynı "Renk:" bilgisini tekrar veriyor — th'i tamamen kaldırıp td'yi tam genişlikte blok elemanına çeviriyoruz. */ body.b2b-product-3col-page .summary.entry-summary table.variations th.label { display: none; } body.b2b-product-3col-page .summary.entry-summary table.variations td.value { display: block; width: 100% !important; padding: 0 !important; } /* position:sticky, kendisiyle scroll konteyneri arasındaki HERHANGİ bir ecdadın overflow'u visible DIŞINDA bir şey (hidden/auto/scroll/clip) olursa tamamen devre dışı kalır. align-items:stretch düzeltmesi tek başına yetmediyse (hâlâ çalışmıyorsa) sebep büyük ihtimalle budur — WoodMart'ın bu ürün-galeri sarmalayıcılarında (gerçek outerHTML'den bilinen zincir) kendi CSS'inde bir yerde overflow:hidden olması. Kaynağı bizim dosyalarımızda değil (grep ile doğrulandı, hiçbiri bu zincire dokunmuyor) — o yüzden WoodMart'ın olası kuralını burada ezip nötrlüyoruz. Görsel bir zararı yok (clip kaldırmak nadiren bir şeyi bozar, genelde sadece gizlenmiş bir şeyi ortaya çıkarır). */ body.b2b-product-3col-page .product-image-summary, body.b2b-product-3col-page .product-image-summary-wrap, body.b2b-product-3col-page .product-image-summary-inner, body.b2b-product-3col-page .b2b-col-right { overflow: visible !important; } /* ÖNEMLİ: canlı ortamda uzun bir teşhis süreciyle doğrulandı — bu sayfada (WoodMart'ın grid yapısıyla, kesin sebebi tespit edilemeyen bir CSS Grid + position:sticky etkileşim sorunu yüzünden) saf CSS sticky HİÇ çalışmıyor; tüm computed style'lar (position:sticky, top:20px, overflow:visible, transform:none, ebeveynde 1250px+ boş alan) doğru çıkmasına rağmen kutu normal (static gibi) scroll ediyordu. Konumlandırma artık TAMAMEN JS'te (bkz. b2b-product-layout.js: initStickyRightColumn — fixed/absolute tabanlı, sticky/top burada YOK). .b2b-col-right'a sadece "orta sütun bitti" durumunda JS'in .b2b-col-right-inner'ı position:absolute ile İÇİNDE doğru noktada durdurabilmesi için position:relative gerekiyor. */ body.b2b-product-3col-page .b2b-col-right { position: relative; } body.b2b-product-3col-page .b2b-col-right-inner { display: flex; flex-direction: column; gap: 14px; } /* ===================== Faz 3: SAĞ SÜTUN — bidolubaski.com kartı ===================== Kaynak: public/class-b2b-instant-price.php::render_right_column_box() — hafif konturlu "sepete ekle" kartı (fiyat kutusu + gerçek sepete ekle butonu + teslimat tahmini), kartın DIŞINDA (altında) Teklif İste + WhatsApp butonları. Butonların kendisi buraya JS ile taşınıyor (bkz. b2b-product-layout.js); burada sadece taşındıkları YUVALARIN ve kartın görünümü tanımlı. */ body.b2b-product-3col-page .b2b-rc-cart-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; } body.b2b-product-3col-page .b2b-rc-price-box { display: flex; flex-direction: column; gap: 2px; } body.b2b-product-3col-page .b2b-rc-price-title { font-size: 13px; font-weight: 700; color: #374151; } body.b2b-product-3col-page .b2b-rc-price-subtitle { font-size: 12px; color: #9ca3af; } body.b2b-product-3col-page .b2b-rc-price-value { margin-top: 4px; font-size: 30px; font-weight: 800; line-height: 1.15; color: #1f2937; } /* Baskı özelliği/varyasyon/farklı adet değişince sunucudan yeni fiyat gelene kadar (recalc() AJAX'ı sürerken) küçük bir nabız efekti — bkz. b2b-product-layout.js'teki 'b2b:price_recalculating' dinleyicisi. */ body.b2b-product-3col-page .b2b-rc-price-value.is-updating { animation: b2b-rc-price-pulse 0.9s ease-in-out infinite; } /* Baskılı modda bir baskı özelliği grubu boşken (bkz. b2b-instant-price.js dispatchPriceSelection()/printOptionsComplete()) fiyat yerine gösterilen uyarı — .b2b-rc-price-value'nun 30px/800 kalın fiyat tipografisini burada ezip normal boyutlu, dikkat çekici bir cümleye çeviriyor. Aynı .html() mobil CTA çubuğuna (.b2b-cta-bar__value) da MutationObserver ile yansıdığından ayrıca bir kural gerekmiyor. */ body.b2b-product-3col-page .b2b-rc-price-value .b2b-rc-print-warning { display: inline-block; font-size: 14px; font-weight: 700; color: #b91c1c; line-height: 1.3; } @keyframes b2b-rc-price-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Anlık fiyat tablosunun "Sepete Ekle" bloğu buraya taşınınca, fiyat tablosunun İÇİNDEKİ bağlama göre yazılmış eski çerçeve/boşluk kurallarını (bkz. b2b-instant-price.css .b2b-ipt-add-to-cart) burada geçersiz kılıp tam genişlikte, büyük bir birincil buton haline getiriyoruz. */ body.b2b-product-3col-page .b2b-rc-add-to-cart-slot .b2b-ipt-add-to-cart { padding: 0 !important; border-top: none !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } body.b2b-product-3col-page .b2b-rc-add-to-cart-slot .b2b-ipt-add-to-cart-btn { width: 100% !important; padding: 14px 20px !important; border-radius: 8px !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: .02em; } body.b2b-product-3col-page .b2b-rc-delivery { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: #6b7280; } body.b2b-product-3col-page .b2b-rc-delivery-icon { flex: 0 0 auto; font-size: 16px; line-height: 1.4; } body.b2b-product-3col-page .b2b-rc-delivery-text strong { color: #374151; } /* Kartın DIŞINDA: Teklif İste (iki satırlı) + WhatsApp — ikincil/üçüncül ağırlıkta, kart kadar öne çıkmayan tam genişlik butonlar. */ body.b2b-product-3col-page .b2b-rc-secondary-actions { display: flex; flex-direction: column; gap: 10px; } body.b2b-product-3col-page .b2b-rc-quote-slot .single_add_to_cart_button { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 10px 16px !important; background: #f8fafc !important; color: #374151 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; text-align: center; line-height: 1.3; } body.b2b-product-3col-page .b2b-rc-quote-btn-top { font-size: 11px; font-weight: 500; color: #6b7280; } body.b2b-product-3col-page .b2b-rc-quote-btn-bottom { font-size: 14px; font-weight: 700; } body.b2b-product-3col-page .b2b-rc-whatsapp-slot #b2b-whatsapp-quick-buy { display: flex !important; align-items: center; justify-content: center; width: 100%; border-radius: 8px !important; } /* WoodMart'ın native "X kişi bugün bu ürün için teklif aldı" widget'ı — metnine/sayacına dokunmuyoruz, sadece dar sağ sütuna sığması için ortalıyor ve WhatsApp butonundan biraz boşluk veriyoruz. */ body.b2b-product-3col-page .b2b-rc-social-proof-slot .wd-visits-count { margin-top: 2px; display: flex !important; align-items: center; justify-content: center; gap: 4px; width: 100%; text-align: center; font-size: 12px; } @media (max-width: 1024px) { body.b2b-product-3col-page .product-image-summary-inner { display: block !important; } body.b2b-product-3col-page .b2b-col-right-inner { position: static; top: auto; margin-top: 20px; } } /* ===================== Faz 4: ALT KISIM — bidolubaski.com referansı ===================== Kapsam: sadece yeni 3 sütunlu şablon (body.b2b-product-3col-page). Eski sayfa düzenindeki ürünlere hiç dokunulmuyor. */ /* GÜNCEL DURUM (canlı DOM ölçümüyle KESİN olarak doğrulandı): WoodMart, woocommerce_after_single_product_summary kancasına bağlı HER ŞEYİ (native sekmeler + bizim alt sekme blokumuz) TEK ORTAK bir .product-tabs-wrapper > .container.product-tabs-inner kutusunun İÇİNE topluyor — yani bizim .b2b-secondary-tabs-wrapper blokumuz, o ORTAK dış kutunun bir ÇOCUĞU, ayrı/kardeş bir kutu DEĞİL. Bu yüzden ".product-tabs-wrapper:not(...)" kuralıyla o dış kutuyu gizlemek, İÇİNDEKİ bizim blokumuzu da (bir display:none ecdadın çocuğu olarak) görünmez yapıyordu — sekmelerin hiç görünmemesinin sebebi buydu. Doğru hedef: sadece NATIVE sekme navigasyon+ içerik bloğu olan .woocommerce-tabs (bizim blokumuzun KARDEŞİ, aynı ortak kutunun içinde) — dış ortak kutuya hiç dokunmuyoruz. */ body.b2b-product-3col-page .product-tabs-wrapper .woocommerce-tabs { display: none !important; } /* --- A) [ARTIK KULLANILMIYOR/ÖLÜ KOD — yukarıdaki notu oku] Sekme navigasyonu: alttaki ikinci sekme bloğuyla (bkz. bölüm D) BİREBİR AYNI görünüm — aynı gap/çizgi/dolgu, aynı font boyutu, aynı harf büyüklüğü (WoodMart'ın kendi tema stili büyük harfe çevirebiliyordu, burada iptal ediliyor). */ /* Sol hizalama: soldan başlayarak TÜM ecdat zincirini (tabs-wrapper > wc-tabs-wrapper > wd-nav-wrapper > ul) padding/margin=0 + text-align:left'e zorluyoruz. Hem "text-center" utility class'ını (WoodMart'ın kendisi ekliyor) tekrar ederek hem de sade tek-class seçiciyi FALLBACK olarak ekleyerek — gerçek class zincirinde küçük bir fark olsa bile en az biri eşleşsin diye. Varsayılan tarayıcı
    padding-left:40px'i de burada iptal ediyoruz — alttaki özel sekme bloğuyla (b2b-secondary-tabs-nav, hiç padding'i yok) aynı noktadan başlaması gereken tam olarak bu. */ body.b2b-product-3col-page .product-tabs-wrapper .woocommerce-tabs, body.b2b-product-3col-page .product-tabs-wrapper .wc-tabs-wrapper, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-wrapper, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-wrapper.text-center { text-align: left !important; padding-left: 0 !important; margin-left: 0 !important; border-top: none !important; box-shadow: none !important; } /* ÖNEMLİ (konsol teşhisiyle bulundu): padding-left'i BURADA veriyoruz, ayrı/daha düşük özgüllükte bir kuralda DEĞİL — çünkü bu seçici (ul.wd-nav.wd-nav-tabs. tabs.wc-tabs, 4 class birden) zaten en yüksek özgüllüğe sahip; aynı özgüllükte başka (daha basit) bir seçiciyle sonradan padding-left ezmeye çalışmak, ikisi de !important olduğu için ÖZGÜLLÜK yarışını kaybediyordu (dosyadaki SIRA değil, ÖZGÜLLÜK belirleyici) — 14px/29px denemelerinin hiç etkisi olmamasının sebebi buydu. */ body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs, body.b2b-product-3col-page .product-tabs-wrapper ul.wd-nav.wd-nav-tabs.tabs.wc-tabs { display: flex !important; flex-wrap: wrap; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; gap: 24px !important; border-bottom: 1px solid #e5e7eb !important; margin: 0 0 24px !important; padding: 0 0 10px 15px !important; } /* "li" ve link'in eşit-genişlikte (flex:1 / width:100%) esnememesi için — aksi halde inline-block olsalar bile ATA'nın zorladığı genişliğe göre büyüyüp altındaki border-bottom çizgisi metinden çok daha geniş (hatta ekran kenarına kadar) uzayabiliyordu. */ body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li { flex: none !important; width: auto !important; margin: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Konsol çıktısı border-bottom'un artık doğru (turuncu, metin genişliğinde) olduğunu doğruladı — ama ekran görüntüsünde uçları yukarı kıvrılan bir "hap/pill" görünümü kalıyordu. Bunun sebebi neredeyse kesin: WoodMart'ın kendi border-radius'u (border-bottom'un köşelerini yuvarlıyor, kenarları kıvrık gösteriyor). Burada sıfırlıyoruz; ayrıca olası background/box-shadow/ üst-yan border kalıntılarını da temizliyoruz ki TEK GÖRÜNEN ŞEY düz bir çizgi olsun (alttaki özel blokla birebir aynı). */ body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs .wd-nav-link { display: inline-block !important; flex: none !important; width: auto !important; color: #9ca3af !important; font-weight: 600 !important; font-size: 14px !important; text-transform: none !important; letter-spacing: normal !important; text-align: left !important; padding: 0 0 14px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 2px solid transparent !important; transition: color .2s ease, border-color .2s ease; } body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs .wd-nav-link .nav-link-text, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs .wd-nav-link .wd-tabs-title { text-transform: none !important; font-size: 14px !important; font-weight: inherit !important; letter-spacing: normal !important; } /* WoodMart'ın "underline-reverse" stili büyük ihtimalle kendi çizgisini bir :before/:after sözde-elemanla (farklı konum/renkte/genişlikte) çiziyor — bizim temiz border-bottom çizgimizle ÇAKIŞIP üst üste bindiği için tüm olası sözde-elemanları burada tamamen kapatıyoruz; TEK görünür aktif-sekme çizgisi aşağıdaki border-bottom kuralı olsun istiyoruz. */ body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li:before, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li:after, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs .wd-nav-link:before, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs .wd-nav-link:after { display: none !important; content: none !important; } body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li.active .wd-nav-link, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li:hover .wd-nav-link { color: #1f2937 !important; } body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li.active .wd-nav-link { border-bottom-color: #ea580c !important; } /* Seçiliyken üstte VE altta iki çizgi görünüyordu — bunun kaynağı, "active" durumuna özel (plain li'den daha spesifik) bir WoodMart kuralının border-top (veya box-shadow) eklemesi olmalı; genel li/link sıfırlamamız bu daha spesifik "active" kuralını yenemiyordu. Burada AÇIKÇA active durumunu hedefleyerek üstteki çizgiyi kapatıyoruz — SADECE border-bottom (aşağıdaki turuncu çizgi) kalsın istiyoruz. */ body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li.active, body.b2b-product-3col-page .product-tabs-wrapper .wd-nav-tabs li.active .wd-nav-link { border-top: none !important; box-shadow: none !important; } /* Konsol ölçümü: li.active/.wd-nav-link/ul.wd-nav-tabs/.wd-nav-wrapper'ın DÖRDÜNDE de border-top "0px none" çıktı — yani üstteki ikinci çizgi bu 4 elemandan gelmiyor. Hiç kontrol etmediğimiz tek üst seviye kalıyor: .product-tabs-wrapper'ın KENDİSİ (WoodMart'ın sekme bloğunu üstündeki içerikten ayırmak için eklemiş olabileceği native bir üst çizgi). Burada sıfırlıyoruz. */ body.b2b-product-3col-page .product-tabs-wrapper { border-top: none !important; box-shadow: none !important; } /* --- A2) İçerik genişliği: TÜM sekme panellerinin (b2b-secondary-tab-panel — artık Ürün Hakkında dahil hepsi bu) içeriği tam genişlikte değil — sağdan/ soldan %10 daraltılmış (padding yüzdesi konteyner genişliğine göre hesaplanır), ortalanmış bir okuma sütunu. NOT: "Ürün Hakkında" panelinin içindeki .wc-tab-inner (sadece "Tümünü Oku" kırpması için var, bkz. bölüm B) BURADA ayrıca hedeflenmiyor — aksi halde 10%+10% çifte daralma olurdu. --- */ body.b2b-product-3col-page .b2b-secondary-tab-panel { padding-left: 10% !important; padding-right: 10% !important; box-sizing: border-box !important; } /* --- B) "Ürün Hakkında" sekmesi: "Tümünü Oku" kırpması. .b2b-collapsible/ .b2b-expanded class'ları ve düğme, b2b-product-layout.js tarafından (SADECE içerik 200px'ten uzunsa) ekleniyor — kısa açıklamalarda bu blok hiç devreye girmiyor. */ body.b2b-product-3col-page #b2b-tab-description .wc-tab-inner.b2b-collapsible { position: relative; max-height: 200px; overflow: hidden; transition: max-height .3s ease; } body.b2b-product-3col-page #b2b-tab-description .wc-tab-inner.b2b-collapsible.b2b-expanded { max-height: none !important; } body.b2b-product-3col-page #b2b-tab-description .wc-tab-inner.b2b-collapsible:not(.b2b-expanded):after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 90%); pointer-events: none; } body.b2b-product-3col-page .b2b-read-more-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 18px; background: #fff; border: 1px solid #d1d5db; border-radius: 999px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; } body.b2b-product-3col-page .b2b-read-more-btn:hover { border-color: #ea580c; color: #ea580c; } /* --- C) Yorumlar sekmesi: sol özet-kartı (ort. puan + dağılım çubukları + "Yorum Yap" düğmesi) + sağ yorum listesi (kart görünümlü, baş harfli avatar). --- */ body.b2b-product-3col-page #b2b-tab-reviews #reviews { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-summary-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 22px; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-summary-heading { text-align: center; } /* Ürünün küçük görseli — b2b-product-layout.js tarafından sidebar'ın en üstüne ekleniyor (ana galeri görselinden klonlanır). */ body.b2b-product-3col-page .b2b-review-product-thumb { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; margin: 0 auto 14px; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-summary-heading .star-rating { margin: 0 auto 8px; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-summary-heading .rating { font-size: 38px !important; font-weight: 800 !important; color: #1f2937 !important; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-summary-total { font-size: 13px; color: #6b7280; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-summary-cont { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-summary-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7280; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-label { flex: 0 0 auto; width: 34px; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-progress-bar { flex: 1 1 auto; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-progress-bar .progress-area { background: #f3f4f6; border-radius: 999px; height: 6px; overflow: hidden; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-progress-bar .progress-bar { background: #ea580c; height: 100%; } body.b2b-product-3col-page #b2b-tab-reviews .wd-rating-count { flex: 0 0 auto; width: 18px; text-align: right; } /* "Yorum Yap" düğmesi — b2b-product-layout.js tarafından sidebar'ın altına ekleniyor. */ body.b2b-product-3col-page .b2b-write-review-btn { display: block; width: 100%; margin-top: 18px; padding: 10px 16px; background: #ea580c; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; text-align: center; cursor: pointer; } body.b2b-product-3col-page .b2b-write-review-btn:hover { background: #c2410c; } /* Yorum kartları — sağ sütun */ body.b2b-product-3col-page #b2b-tab-reviews #comments .commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } body.b2b-product-3col-page #b2b-tab-reviews #comments .comment_container { display: flex; gap: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px; } body.b2b-product-3col-page #b2b-tab-reviews #comments .comment_container > img.avatar, body.b2b-product-3col-page #b2b-tab-reviews #comments .b2b-avatar-initials { width: 44px !important; height: 44px !important; border-radius: 50%; flex: 0 0 auto; object-fit: cover; } body.b2b-product-3col-page #b2b-tab-reviews #comments .b2b-avatar-initials { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; } body.b2b-product-3col-page #b2b-tab-reviews #comments .comment-text .meta { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: #6b7280; margin: 0 0 4px; } body.b2b-product-3col-page #b2b-tab-reviews #comments .comment-text .woocommerce-review__author { color: #1f2937; font-weight: 700; font-size: 14px; } body.b2b-product-3col-page #b2b-tab-reviews #comments .comment-text .star-rating { margin: 4px 0 8px; } body.b2b-product-3col-page #b2b-tab-reviews #comments .comment-text .description p { margin: 0; font-size: 14px; line-height: 1.6; color: #374151; } @media (max-width: 900px) { body.b2b-product-3col-page #b2b-tab-reviews #reviews { grid-template-columns: 1fr; } } /* --- D) İkinci (alt) sekme bloğu: Sık Sorulan Sorular / Yorumlar / Soru Cevap — native tab sisteminden bağımsız, kendi nav+panel yapısı (bkz. B2B_Suite_Product_Template::render_secondary_tabs ve b2b-product-layout.js initSecondaryTabs). Görsel olarak üstteki bilgi sekmeleriyle (A) aynı üslupta (turuncu alt çizgi) ama tamamen ayrı bir ikinci "kutu". */ body.b2b-product-3col-page .b2b-secondary-tabs-wrapper { margin-top: 10px; } body.b2b-product-3col-page .b2b-secondary-tabs-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 24px; padding: 0; border-bottom: 1px solid #e5e7eb; } body.b2b-product-3col-page .b2b-secondary-tab-link { display: inline-block; padding: 0 0 14px; color: #9ca3af; font-weight: 600; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } body.b2b-product-3col-page .b2b-secondary-tab-item.is-active .b2b-secondary-tab-link, body.b2b-product-3col-page .b2b-secondary-tab-link:hover { color: #1f2937; } body.b2b-product-3col-page .b2b-secondary-tab-item.is-active .b2b-secondary-tab-link { border-bottom-color: #ea580c; } body.b2b-product-3col-page .b2b-secondary-tab-panel { display: none; } body.b2b-product-3col-page .b2b-secondary-tab-panel.is-active { display: block; } body.b2b-product-3col-page .b2b-qa-placeholder { color: #6b7280; font-size: 14px; } /* --- Yorumlar: sol sütunda özet kartı; SAĞ sütunda sırayla yorum listesi, "Tüm yorumları gör" düğmesi ve yorum formu (yıldız + metin). --- Mevcut #reviews grid'i (280px + 1fr) korunur; sadece yerleşim satırları belirlenir. */ body.b2b-product-3col-page #b2b-tab-reviews #reviews > .wd-rating-summary-wrap { grid-column: 1; grid-row: 1 / span 3; } body.b2b-product-3col-page #b2b-tab-reviews #reviews > #comments, body.b2b-product-3col-page #b2b-tab-reviews #reviews > .b2b-reviews-more, body.b2b-product-3col-page #b2b-tab-reviews #reviews > #review_form_wrapper { grid-column: 2; min-width: 0; } /* Sıra açıkça belirlenir: Woodmart'ın "form konumu" ayarı (wd-form-pos-before/after) formu listenin önüne alabildiği için otomatik yerleşime güvenilmez. */ body.b2b-product-3col-page #b2b-tab-reviews #reviews > .wd-rating-summary-wrap { order: 0; } body.b2b-product-3col-page #b2b-tab-reviews #reviews > #comments { order: 1; } body.b2b-product-3col-page #b2b-tab-reviews #reviews > .b2b-reviews-more { order: 2; } body.b2b-product-3col-page #b2b-tab-reviews #reviews > #review_form_wrapper { order: 3; } /* Daraltılmış durumda (JS, 3'ten fazla yorum varsa ekler) ilk 3 yorum görünür; diğerleri HTML'de kalır. */ body.b2b-product-3col-page #b2b-tab-reviews #reviews.b2b-reviews-collapsed #comments .commentlist > li:nth-child(n+4), body.b2b-product-3col-page #b2b-tab-reviews #reviews.b2b-reviews-collapsed #comments nav[class*="-pagination"] { display: none; } body.b2b-product-3col-page #b2b-tab-reviews .b2b-reviews-more { text-align: center; } body.b2b-product-3col-page #b2b-tab-reviews .b2b-reviews-more-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #1f2937; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, color .2s ease; } body.b2b-product-3col-page #b2b-tab-reviews .b2b-reviews-more-btn:hover { border-color: #ea580c; color: #ea580c; } @media (max-width: 900px) { body.b2b-product-3col-page #b2b-tab-reviews #reviews > .wd-rating-summary-wrap, body.b2b-product-3col-page #b2b-tab-reviews #reviews > #comments, body.b2b-product-3col-page #b2b-tab-reviews #reviews > .b2b-reviews-more, body.b2b-product-3col-page #b2b-tab-reviews #reviews > #review_form_wrapper { grid-column: 1; grid-row: auto; } } /* Sekme panellerinin başındaki görünmez (ekran okuyucu / arama motoru için) başlıklar. Sekme etiketiyle aynı metni taşır; görünümü ve düzeni etkilemez (akış dışı, 1px). */ .b2b-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ===================== MOBİL / TABLET (≤1024px: tek sütuna düşülen genişlik) ===================== 1) Alt sabit çağrı-eylemi çubuğu (bkz. b2b-product-layout.js → initStickyCtaBar) 2) Sekmeler tek satırda yatay kaydırmalı 3) Dokunma hedefleri (görünüm değişmeden, görünmez genişletme) Masaüstünde (>1024px) hiçbiri devreye girmez. */ .b2b-cta-bar { display: none; } @media (max-width: 1024px) { /* --- 1) Alt sabit çubuk. z-index Woodmart yan panellerinin (500) ve karartma katmanının (400) ALTINDA tutulur; açılan sepet/menü çubuğun üstünde kalır. --- */ body.b2b-has-cta-bar { padding-bottom: var(--b2b-cta-h, 100px); } .b2b-cta-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 340; box-sizing: border-box; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -6px 18px rgba(17, 24, 39, 0.10); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); } .b2b-cta-bar__main { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .b2b-cta-bar__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .b2b-cta-bar__title { font-size: 12px; font-weight: 700; color: #374151; } .b2b-cta-bar__sub { font-size: 11px; color: #9ca3af; } .b2b-cta-bar__value { margin-top: 2px; font-size: 22px; font-weight: 800; line-height: 1.1; color: #1f2937; } .b2b-cta-bar__value.is-updating { animation: b2b-rc-price-pulse 0.9s ease-in-out infinite; } /* Woodmart'ın genel buton stilini ezmek için (mevcut Sepete Ekle butonundaki gibi) !important. */ .b2b-cta-bar .b2b-cta-bar__btn { flex: 0 0 auto; min-width: 140px; min-height: 46px; padding: 0 22px !important; border: none !important; border-radius: 8px !important; background: #ea580c !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .02em; box-shadow: none !important; cursor: pointer; } .b2b-cta-bar .b2b-cta-bar__btn:hover:not(:disabled) { background: #c2410c !important; } .b2b-cta-bar .b2b-cta-bar__btn:disabled { background: #d1d5db !important; color: #6b7280 !important; cursor: not-allowed; } .b2b-cta-bar.is-loading .b2b-cta-bar__btn { opacity: .7; } .b2b-cta-bar__delivery { margin-top: 8px; text-align: center; font-size: 12px; line-height: 1.35; color: #6b7280; } .b2b-cta-bar__delivery:empty { display: none; } .b2b-cta-bar__delivery strong { color: #374151; } .b2b-cta-bar__msg { display: none; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; background: #f3f4f6; color: #374151; font-size: 13px; font-weight: 600; text-align: center; } .b2b-cta-bar__msg.is-visible { display: block; } .b2b-cta-bar__msg.is-success { background: #ecfdf5; color: #059669; } .b2b-cta-bar__msg.is-error { background: #fef2f2; color: #dc2626; } .b2b-cta-bar__msg a { color: inherit; text-decoration: underline; } /* "Yukarı çık" düğmesi çubuğun üstünde kalsın. */ body.b2b-has-cta-bar a.scrollToTop { bottom: calc(var(--b2b-cta-h, 100px) + 12px) !important; } /* Çubuk varken sayfa içindeki "Sepete Ekle" kartı (fiyat + buton + teslimat) gereksiz: aynı bilgiler çubukta. Kart DOM'da KALIR (çubuk fiyatı/mesajı ondan yansıtır ve düğmesine tıklar); yalnızca görünmez. Teklif İste / WhatsApp butonları ayrı kutuda, yerinde kalır. Çubuk kurulamazsa (body.b2b-has-cta-bar yoksa) kart görünür kalır. */ body.b2b-has-cta-bar .b2b-rc-cart-box { display: none !important; } /* --- 2) Sekmeler: tek satır, yatay kaydırma (kaydırma çubuğu gizli). --- */ body.b2b-product-3col-page .b2b-secondary-tabs-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 22px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.b2b-product-3col-page .b2b-secondary-tabs-nav::-webkit-scrollbar { display: none; } body.b2b-product-3col-page .b2b-secondary-tab-item { flex: 0 0 auto; } body.b2b-product-3col-page .b2b-secondary-tab-link { white-space: nowrap; } /* --- 3) Dokunma hedefleri: görünüm/yerleşim aynı kalır, tıklanabilir alan büyür. Renk dairelerinin alt çizgisi Woodmart'ta :after ile çizildiği için :before kullanılır. --- */ body.b2b-product-3col-page .summary.entry-summary .wd-swatch::before { content: ""; position: absolute; inset: -9px; } body.b2b-product-3col-page .wd-breadcrumbs a, body.b2b-product-3col-page .woocommerce-review-link { display: inline-block; padding-block: 12px; margin-block: -12px; } }