/*
Theme Name: Lenco Pikap
Theme URI: https://lencopikap.com/
Author: Osman Yalçın Gülmez
Author URI: https://lencopikap.com/
Description: Lenco Türkiye distribütörü — lencopikap.com için özelleştirilmiş WooCommerce teması.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glozin
Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
Template: glozin
*/

/* ⚠️ `Template:` ve `Text Domain:` DEĞİŞTİRİLEMEZ.
   Template  → child'ı parent'a bağlar; başka bir değer = site beyaz ekran.
   Text Domain → parent temanın çeviri dosyalarını (languages/*.mo) bulan anahtar;
                 değişirse tüm tema metinleri İngilizce'ye döner.
   Görünen ad (Theme Name) ise serbest — panelde "Lenco Pikap" olarak görünür.
   Klasör adı da `glozin-child` KALIR: ayarların tamamı (renkler, menü, header,
   ürün promosyonları) `theme_mods_glozin-child` option'ında yaşıyor — klasör
   yeniden adlandırılırsa WordPress o option'ı bulamaz ve HEPSİ sıfırlanır. */
/* ═══════════════════════════════════════════════════════════════════════
   LENCO — child tema özelleştirmeleri
   Kaynak: build/05-menus-logo.php inline SVG logoyu basar (logo_type=svg).
   ═══════════════════════════════════════════════════════════════════════ */

/* Logo boyutu.
   SVG'de viewBox VAR, sabit width/height YOK (build/05-menus-logo.php kaldırır).
   Yüksekliği CSS'ten veriyoruz, genişlik `auto` → tarayıcı oranı viewBox'tan
   hesaplar: oran bozulmaz, yer önceden bilindiği için layout kaymaz (CLS yok).

   ⚠️ ÖZGÜLLÜK NOTU — burası `!important` istiyormuş gibi görünür, İSTEMEZ.
   Glozin şunu basıyor:
       .header-logo > a img, .header-logo > a svg { width: auto; height: auto; }
   Özgüllüğü (0,1,2). Bizim ilk denememiz `.header-logo__svg svg` idi → (0,1,1),
   tema kazandı. Ve `height:auto` + intrinsic boyutu OLMAYAN bir SVG (width/height
   attribute'u yok, sadece viewBox var) = **0×0**: logo DOM'da durur ama görünmez.
   Ölçüldü (CDP): computed height 0px, kutu 0×0 — ekran görüntüsünde header boştu.
   Çözüm !important değil, ZİNCİRİ UZATMAK: (0,2,2) > (0,1,2). */
.header-logo > a .header-logo__svg {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.header-logo > a .header-logo__svg svg {
  height: 32px;
  width: auto;
  display: block;
}

@media (max-width: 991.98px) {
  .header-logo > a .header-logo__svg svg { height: 26px; }
}

/* Marka renkleri — kaynak: build/06-brand-colors.php (theme_mod).
   Buradaki tek iş, temanın theme_mod ile ULAŞILAMAYAN sabit renklerini markaya
   bağlamak. Sabit hex YAZILMAZ, hep token (`var(--gz-color-primary)`) kullanılır:
   ana renk bir gün değişirse burası kendiliğinden takip eder. */

/* İNDİRİM ROZETİ ("-5%").
   Glozin rozetleri SEMANTİK bir renk setiyle boyar ve bunlar CSS'te SABİTTİR
   (woocommerce.css:1674) — hiçbir theme_mod'a bağlı değiller:
       .onsale → #d0473e   ·   .featured → #ff7402   ·   .new → #3357D8
   Yani "primary'yi yazdım, rozet de değişir" varsayımı YANLIŞ. Ölçüldü: fiyat
   #EA5605 olduktan sonra bile rozet #D0473E kaldı.
   İndirim rozeti sitenin en görünür vurgusu → markaya bağlanıyor.
   Diğer rozetler (yeni / tükendi) semantik kalır, dokunulmuyor.

   ⚠️ 2026-08-06'dan beri KARŞILIKSIZ: `lenco-core` BÖLÜM 23.2 indirim
   rozetini hiç bastırmıyor (Osman kararı — üstü çizili fiyat kalkınca
   "-%12" neye göre olduğu belirsiz kalıyordu). Kural BİLEREK siliniyor
   değil: rozet geri açılırsa (bölüm 23.2 kaldırılır) rozet tema
   varsayılanı #d0473e ile döner, marka turuncusu sessizce kaybolurdu.
   Yani bu "ölü kod" değil, bölüm 23.2 geri alınırsa devreye giren eş. */
.woocommerce-badge.onsale {
  --gz-badge-background-color: var(--gz-color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   MARKA HİKÂYESİ BANTLARI — metin okunabilirliği (ana sayfa bölüm 8 + 9)
   Kaynak: build/20-marka-hikayesi.php
   ═══════════════════════════════════════════════════════════════════════

   SORUN: Banner carousel beyaz metni (`text-light`) doğrudan fotoğrafın
   üstüne basıyor ve widget'ın HİÇBİR overlay/gradient ayarı YOK (ölçüldü:
   banner-carousel.php'de `overlay`/`gradient` kontrolü hiç geçmiyor —
   kategori carousel'inde olan `gradient_image_color_secondary` burada yok).
   İlk render'da ölçüldü: açık ahşap zeminli kartlarda (1946, 50 ülke,
   Sorumluluk) açıklama metni okunamıyordu.

   NEDEN CSS, neden görsele "bake" edilmedi: gradient fotoğrafa gömülseydi
   görsel değiştiğinde karartma sabit kalırdı. Burada kontrast, fotoğraftan
   BAĞIMSIZ olarak garanti altına alınıyor — 6. oturumdaki kategori kartı
   kararının aynısı ("fotoğraf değişse de korunur").

   `!important` YOK: tema bu pseudo-element'i hiç tanımlamıyor, çakışma yok.
   DOM sırası (ölçüldü): .glozin-banner__image (z-1) → .glozin-banner__summary
   (z-2). Gradient image'in ::after'ı olduğu için metnin ALTINDA kalır. */

.glozin-banner-carousel__slide .glozin-banner__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* dikey kartlar: metin altta → alttan yukarı koyuluk.

     DURAKLAR ÖLÇÜMLE BELİRLENDİ, göz kararı değil. İlk deneme (82/55/12) gözle
     düzgün görünüyordu ama WCAG ölçümü 3.13–3.21 verdi (AA 4.5 ister): metin
     bloğunun ÜST kenarında alfa 0.43'e düşüyordu ve tam orada fotoğraflarda
     pencere ışığı var (ham rgb 250–255).
     Hesap: beyaz metnin 4.5'i tutturması için arka plan ≤ rgb(123),
     yani en parlak pikselde (255) alfa ≥ 0.52 → güvenlik payıyla 0.62.
     Metin bloğu kartın alt yarısında (y ≥ %50) → orada alfa 0.62'nin altına inmez. */
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 88%) 0%,
    rgb(0 0 0 / 62%) 50%,
    rgb(0 0 0 / 10%) 100%
  );
}

/* Geniş bantlarda (bölüm 9) metin dikey ORTADA ve solda duruyor
   (vertical_position=middle) → alttan gradient işe yaramaz, soldan gelir. */
.elementor-element-15342485 .glozin-banner__image::after {
  background: linear-gradient(
    to right,
    rgb(0 0 0 / 88%) 0%,
    rgb(0 0 0 / 62%) 60%,
    rgb(0 0 0 / 15%) 100%
  );
}

/* ══════════════════════════════════════════════════════════════════════════
   GEZİNME KONTROLLERİ — marka rengi (Osman, 9. oturum)
   Talep: "scroll-top ve carousel oklarının hover rengi turuncu olsun."

   ÖNCE TEMA AYARI ARANDI (Osman'ın uyarısı: "CSS ile ezerek değil, panelden"):
   171 theme_mod tarandı → ok/scroll-top RENGİ için ayar YOK
   (`mobile_single_product_gallery_arrows` sadece göster/gizle).
   Marka rengi ayarı ise VAR ve doğru: `primary_color_custom_color = #EA5605`
   → tema bunu `body { --gz-color-primary }` olarak basıyor.
   Bu yüzden burada SABİT HEX YAZILMAZ, temanın kendi token'ına bağlanır:
   panelden marka rengi değişirse bu kurallar kendiliğinden takip eder.

   ⚠️ Token `body` üzerinde tanımlı, `:root`/`html` üzerinde DEĞİL.
   `html`'de temanın demo varsayılanı (#d0473e) durur. Bir ölçüm/denetim
   `getComputedStyle(document.documentElement)` ile bakarsa YANLIŞ renk görür
   ve "marka rengi bozuk" diye yanlış alarm üretir (9. oturumda tam bu oldu).
   Doğru okuma: getComputedStyle(document.body).

   Kontrast (WCAG 2.2 SC 1.4.11 — metin-dışı UI bileşeni, eşik 3:1):
     #EA5605 ↔ beyaz = 3.60 ✓  (bunlar ikon/kenarlık; metin eşiği 4.5 uygulanmaz)
   ══════════════════════════════════════════════════════════════════════════ */

/* Yukarı çık butonu — varsayılan nötr, hover/focus'ta marka rengi */
#gotop.gz-button-go-top:hover,
#gotop.gz-button-go-top:focus-visible {
  background-color: var(--gz-color-primary);
  border-color: var(--gz-color-primary);
  color: #fff;
}
#gotop.gz-button-go-top:hover .glozin-svg-icon,
#gotop.gz-button-go-top:focus-visible .glozin-svg-icon {
  color: #fff;
}

/* Carousel okları.
   Özgüllük notu: temanın kendi hover kuralı okları koyuya (#111) çekiyor ve
   tek sınıflı bir seçici onu yenemiyor (ölçüldü: hover'da rgb(17,17,17)).
   `!important` yerine seçici zincirle güçlendirildi — proje kuralı.
   `:focus-visible` de kapsanıyor → klavye kullanıcısı aynı geri bildirimi alır. */
.swiper-button.swiper-button-next:hover,
.swiper-button.swiper-button-prev:hover,
.swiper-button.swiper-button-next:focus-visible,
.swiper-button.swiper-button-prev:focus-visible,
.swiper-arrows .swiper-button-next:hover,
.swiper-arrows .swiper-button-prev:hover {
  background-color: var(--gz-color-primary);
  border-color: var(--gz-color-primary);
  color: #fff;
}
.swiper-button.swiper-button-next:hover .glozin-svg-icon,
.swiper-button.swiper-button-prev:hover .glozin-svg-icon,
.swiper-arrows .swiper-button-next:hover .glozin-svg-icon,
.swiper-arrows .swiper-button-prev:hover .glozin-svg-icon {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. OTURUM — Osman'ın maddeleri (2026-07-19)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── M2 · Katalog filtreleri varsayılan KAPALI ──────────────────────────
   Ölçülen sorun: masaüstünde dört filtre de AÇIK açılıyordu, ama başlıktaki
   gösterge "kapalı" durumunu çiziyordu — yani içerik ile ikon birbirini
   yalanlıyordu (Osman: "+ - durumları doğru çalışmıyor").

   Kök sebep: Glozin bu akordeonu yalnız MOBİL için tasarlamış. JS
   (products-filter.js `collapseFilterWidgetMobile`) <768px'te her filtreye
   `glozin-active` ekliyor; masaüstünde hiçbir başlangıç durumu yok ve
   temanın CSS'inde "kapalıyken gizle" diye bir kural bulunmuyor → panel
   hep açık kalıyor.

   Burada `glozin-active` = AÇIK olarak tanımlanıyor ve varsayılan kapalı
   yapılıyor. Tema JS'inin `toggleClass` + `slideToggle` ikilisiyle
   uyumludur: ilk tıklamada element gizli olduğu için jQuery slideDown
   yapar ve aynı anda sınıfı ekler — ikisi aynı yöne bakar.
   (Mobil JS'i, `filter_section_mobile` ayarı build/55 ile boşaltılarak
   devre dışı bırakıldı; aksi hâlde mobilde tam tersi çalışırdı.)  */
.products-filter-widget .has-collapse .products-filter__filter > .products-filter__filter-control {
  display: none;
}
.products-filter-widget .has-collapse .products-filter__filter.glozin-active > .products-filter__filter-control {
  display: block;
}

/* Gösterge: kapalıyken "+", açıkken "−".
   Tema iki çizgi kullanıyor (:before yatay, :after dikey) ve :after'ı
   şeffaflıkla saklıyor. Kurallar burada TERSİNE çevriliyor, çünkü tema
   `glozin-active`'i "kapalı" saydığı için ikon da ters bağlanmıştı.
   `!important` yok — seçici zinciri temanınkinden bir sınıf uzun. */
.products-filter-widget .has-collapse .products-filter__filter .filter-name::after {
  background-color: currentColor;
  transform: rotate(-90deg);
}
.products-filter-widget .has-collapse .products-filter__filter.glozin-active .filter-name::after {
  background-color: transparent;
  transform: none;
}

/* ── M6 · Tekil üründe sekmeler ile "İlgili ürünler" arası boşluk ───────
   Ölçüm (1440px): sekme bitişi 688 → "İlgili ürünler" başlığı 933 = 245px.
   Üç kaynaktan besleniyordu: .product-gallery-summary'nin 90px alt boşluğu,
   .related'in 80px üst dolgusu ve galeri sütunu daha uzun olduğu için
   oluşan ~75px'lik yapısal artık (bu sonuncusu düzeltilemez — iki sütunlu
   yerleşimin doğal sonucu).

   Dokunulabilir iki değer küçültülüyor. Kardeş bölümler (üst satış,
   son incelenenler) aynı ölçüyü paylaşıyor — biri değişip diğeri kalırsa
   sayfa boyunca ritim bozulurdu, o yüzden üçü birlikte.  */
/* ⚠️ `div.product` seçicide BİLEREK var: temanın kuralı
   `.single-product div.product .product-gallery-summary{margin-bottom:90px}`
   ve bir sınıf daha özgül. İlk denemede `.single-product .product-gallery-summary`
   yazılmıştı — ölçümde değerin 90px'te kaldığı görüldü (kural sessizce
   eziliyordu). `!important` yerine özgüllük eşitlendi. */
.single-product div.product .product-gallery-summary {
  margin-bottom: 40px;
}
.single-product .related.products,
.single-product .upsells.products,
.single-product .recently-viewed-products {
  padding-top: 44px;
}

/* Dar ekranda dikey boşluk daha da pahalıdır: sütunlar alt alta düştüğü
   için aynı boşluk oransal olarak çok daha büyük görünür. */
@media (max-width: 767px) {
  .single-product div.product .product-gallery-summary {
    margin-bottom: 28px;
  }
  .single-product .related.products,
  .single-product .upsells.products,
  .single-product .recently-viewed-products {
    padding-top: 32px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VİDEOLU ÜRÜNLERDE OYNAT DÜĞMESİ (Osman, 23. oturum — 2026-07-27)
   Talep: "TT-120 gibi videolu ürünlerde play ikonu çok küçük, göze gelmiyor."

   ÖNCE TEMA AYARI ARANDI (proje kuralı, Osman'ın uyarısı: "panelden"):
   Glozin'in video modülünün panelde TEK ayarı var — `glozin_product_video`
   aç/kapa checkbox'ı (glozin-addons/modules/product-video/settings.php,
   tamamı okundu). Boyut / renk / konum için ayar YOK → panelden çözülemez.
   Bu yüzden burada, eklenti ve parent tema dosyalarına DOKUNMADAN çözülüyor
   (ikisi de güncellemede ezilir).

   ÖLÇÜLEN DURUM (1440px, /urun/tt-120/):
     ana galeri düğmesi 40×30 px · düz #363636 · köşe 3px · gölge yok
       → 540×540 görselin %0,4'ü. TT-120'de tam plak kapağının siyah zeminine
         denk geldiği için zeminle eriyordu — sorun yalnız boyut değil, KONTRAST.
     küçük resim şeridi rozeti 22×22 px, sağ üst köşe.

   SEÇİM: üç varyant (beyaz cam / marka turuncusu / koyu cam) İKİ farklı
   zeminde render edilip karşılaştırıldı → Osman "marka turuncusu".
   Beyaz cam varyantı beyaz fonlu SCD-24'te KAYBOLUYORDU; 42 videolu ürünün
   çoğu beyaz fonlu olduğu için elendi. Tek ürüne bakılsaydı seçilirdi.

   Kontrast (WCAG 2.2 SC 1.4.11 — metin-dışı UI bileşeni, eşik 3:1):
     #EA5605 ↔ beyaz = 3.60 ✓   #EA5605 ↔ siyah = 5.83 ✓
   İki uç zeminde de geçiyor → her ürün görselinde okunur kalır.

   ⚠️ ÖZGÜLLÜK: temanın kuralı (woocommerce.css:5328)
     .single-product div.product .woocommerce-product-gallery.has-video
     .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video
   yani (0,7,1). İlk denemede daha kısa bir zincir yazıldı ve ölçüm şunu
   gösterdi: renk + köşe uygulandı ama BOYUT 40×30'da kaldı — kural sessizce
   eziliyordu. `!important` yerine zincir temanınkiyle eşitlendi (proje kuralı).

   SABİT HEX YAZILMIYOR: `var(--gz-color-primary)` panelden gelir
   (primary_color_custom_color = #EA5605) → marka rengi değişirse düğme takip
   eder. ⚠️ Token `body` üzerinde tanımlı, `:root`ta temanın demo değeri
   (#d0473e) durur; ölçüm getComputedStyle(document.body) ile yapılır.
   ══════════════════════════════════════════════════════════════════════════ */

.single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video {
  width: 66px;
  height: 66px;
  border-radius: var(--gz-rounded-full, 9999px);
  background-color: var(--gz-color-primary);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Üçgen düğmeyle birlikte büyür — 7px'lik ok 66px dairenin içinde kaybolurdu. */
.single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video:after {
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-inline-start: 18px solid #fff;
}

/* Hover/odak: `translate(-50%,-50%)` temanın konumlandırması — scale eklenirken
   KORUNMAK zorunda, aksi hâlde düğme merkezden kayar. */
.single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video:hover,
.single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
}

/* Klavye odağı görünür olmalı (SC 2.4.7). Düğme turuncu olduğu için odak
   halkası BEYAZ + koyu dış hat: hem açık hem koyu ürün görselinde seçilir. */
.single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Küçük resim şeridi: hangi karenin video olduğu belli olsun.
   22×22 köşeli kutu → 26px daire + beyaz halka; şeritteki kareler 50×50 (mobilde
   64×64) olduğu için rozet karenin yarısını geçmiyor.

   Rozet de ana düğmeyle AYNI rengi kullanıyor: ikisi aynı işlevi gösteriyor,
   iki farklı renk kullanmak kullanıcıya bunları ayrı şeyler sanmasına yol açar.
   Beyaz halka sayesinde pembe/açık ürün görsellerinde de ayrışıyor (ölçüldü:
   /urun/scd-24-pembe/). */
.single-product div.product .woocommerce-product-gallery.has-video .glozin-product-gallery-thumbnails .woocommerce-product-gallery__image .glozin-i-video {
  width: 26px;
  height: 26px;
  top: 4px;
  right: 4px;
  border-radius: var(--gz-rounded-full, 9999px);
  background-color: var(--gz-color-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.single-product div.product .woocommerce-product-gallery.has-video .glozin-product-gallery-thumbnails .woocommerce-product-gallery__image .glozin-i-video:after {
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-inline-start-width: 6px;
}

/* Dar ekranda galeri 540→360 px'e iner (ölçüldü, 390px viewport).
   66px orada görselin %18'ini kaplardı; 56px hem orana yakın hem de
   dokunmatik hedef minimumunun (WCAG 2.5.8 → 24px) çok üstünde. */
@media (max-width: 767px) {
  .single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video {
    width: 56px;
    height: 56px;
  }
  .single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video:after {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-inline-start-width: 15px;
  }
}

/* Hareket hassasiyeti olan kullanıcı büyüme animasyonunu almasın (SC 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video {
    transition: none;
  }
  .single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video:hover,
  .single-product div.product .woocommerce-product-gallery.has-video .woocommerce-product-gallery__image.glozin-product-video .glozin-i-video:focus-visible {
    transform: translate(-50%, -50%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   YAPIŞKAN FİLTRE PANELİ — BAŞLIK ÇAKIŞMASI (25. oturum, 2026-07-29)

   Osman bildirdi: "sol taraftaki alan sticky menünün altında kalıyor,
   normalde orada en üstte ürün kategorisi alanı vardı."

   ÖLÇÜM (gerçek Chrome, 1440×950, scrollY=1200):
     · site başlığı  : position fixed, 0 → 70 px
     · filtre paneli : position sticky, tema `top-30` sınıfı → top 30 px
     ⇒ panelin ilk 40 px'i başlığın ALTINDA kalıyor; panel üç blok taşıyor
       (Ürün Kategorisi · Fiyat · Stok Durumu) ve gizlenen tam da ilki oluyor.
       Kullanıcı "kategori filtresi kayboldu" diye görüyor — silinmiş değil,
       örtülmüş.

   Tema yükseklik için CSS değişkeni TANIMLAMIYOR (yalnız renk değişkenleri
   var — arandı), o yüzden ölçülen değeri burada tek kaynak olarak tutuyoruz.
   Başlık yüksekliği değişirse DEĞİŞECEK TEK YER burasıdır.

   `!important` YOK: tema `.top-30` tek sınıf (0,1,0); buradaki seçiciler
   iki/üç sınıf olduğu için specificity ile kazanıyor.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --lenco-sabit-baslik: 70px;   /* ölçüldü: .header-sticky yüksekliği */
  --lenco-yapiskan-ust: calc(var(--lenco-sabit-baslik) + 30px);
  /* Ölçüldü (390×844): temanın mobil gezinme çubuğu
     (`.glozin-mobile-navigation-bar`, position:fixed) 65px.
     Tema bunun için CSS değişkeni tanımlamıyor — arandı, yok. Üstüne
     oturan her öğe (Pikabını Bul'un filtre tetikleyicisi) buradan okur;
     çubuk yükseklik değiştirirse DEĞİŞECEK TEK YER burasıdır. */
  --lenco-alt-cubuk: 65px;
}

/* Panel yalnız geniş ekranda yapışkan (tema: `position-sticky-lg` ≥992px);
   dar ekranda normal akışta olduğu için kural oraya hiç girmiyor. */
@media (min-width: 992px) {
  .widget-area.primary-sidebar.position-sticky-lg,
  .catalog-filters-sidebar.position-sticky-lg {
    top: var(--lenco-yapiskan-ust);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   "PİKABINI BUL" — DÜĞME + SAYFA BAŞLIĞI (26. oturum, 2026-07-29)

   Osman: masaüstünde düğme sağdaki ikonların olduğu yerde İLK SIRADA olsun;
   mobilde hamburger menüsünün altına (Favorilerim/Hesabım'ın yanına) insin.

   25. oturumun `.nav-menu .lenco-cta-oge` kuralları SİLİNDİ — düğme artık
   menü şeridinde değil. Üstüne yazılmadı, kaldırıldı: ölü seçici bırakmak
   sonraki oturumda "hangisi geçerli?" sorusunu doğurur.

   Neden child temada, mu-plugin'de değil: header HER sayfada basılıyor.
   Sihirbazın kendi stili yalnız kendi sayfasında yükleniyor (has_shortcode
   koşulu) — düğme oraya yazılsaydı diğer 190 sayfada stilsiz kalırdı.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ortak düğme görünümü — iki konum da aynı kaynaktan besleniyor. */
.lenco-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gz-color-primary, #EA5605);
  color: #fff;
  border-radius: 999px;
  /* 44px: projenin dokunma hedefi disiplini (WCAG 2.5.5). 25. oturumdaki ilk
     ölçümde 38px çıkmıştı — fareyle sorunsuz ama dokunmatikte küçük. */
  min-height: 44px;
  padding: 11px 22px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  transition: background .15s;
}
.lenco-cta:hover,
.lenco-cta:focus-visible {
  /* Marka turuncusunun koyusu — ayrı bir hex tanımlamamak için karışım. */
  background: color-mix(in srgb, var(--gz-color-primary, #EA5605) 84%, #000);
  color: #fff;
}
.lenco-cta:focus-visible {
  outline: 2px solid var(--gz-color-dark, #363636);
  outline-offset: 2px;
}

/* --- Masaüstü: ikon grubunun ilk sırası ---
   Düğme artık `header-right-items` kabının İÇİNDE (mu-plugin 22.11a öğeyi
   listenin başına koyuyor, tema child şablonu basıyor). Kap `gap: 5px`
   uyguladığı için hizalama ve boşluk temadan geliyor — burada konumlandırma
   kuralı YOK. Eskiden `margin-inline-start: auto` gerekiyordu çünkü düğme
   ayrı bir kaptaydı (menü şeridi); artık gerekmiyor.

   Sağdaki ilk öğe olarak sepet/favori ikonlarından biraz nefes alsın diye
   tek kenar boşluğu: ikonlar 40px kare, düğme metinli. */
.header-right-items > .lenco-cta--header { margin-inline-end: 7px; }

/* ⚠️ METİN RENGİ — tema header'daki BÜTÜN bağlantıların rengini eziyor:
       .header-items > a:not(:hover) { color: inherit; }
   Bu seçicinin ağırlığı (0,2,1); yalın `.lenco-cta` (0,1,0) olduğu için
   kaybediyordu ve düğme turuncu zeminde rgb(17,17,17) — neredeyse siyah —
   çıkıyordu (Osman bildirdi, gerçek Chrome'da ölçüldü).

   `!important` YOK: seçici ağırlığı (0,3,1)'e çıkarılarak çözüldü
   (iki sınıf + eleman + `:not()` içindeki pseudo-class). Düğme menü
   şeridindeyken bu sorun yoktu, çünkü oradaki seçici zaten üç parçalıydı —
   yani sorun taşınmayla doğdu, yeni bir tema kuralı değil. */
.header-right-items > a.lenco-cta--header,
.header-right-items > a.lenco-cta--header:hover,
.header-right-items > a.lenco-cta--header:focus-visible { color: #fff; }

/* --- Mobil: hamburger panelinin alt menüsü ---
   Panelde "Favorilerim / Hesabım" listesinin (`mobile-custom-menu`) son
   öğesi. Ölçüldü (25. oturum sonrası, 390px): eski yolda düğme burada
   STİLSİZ basılıyordu — 16px'lik düz metin satırı. Sebebi: hamburger
   menüsünün kabı `.nav-menu` sınıfı taşımıyor, eski seçici hiç tutmuyordu.

   Panelde tam genişlik: dar ekranda 44px yükseklikli dar bir hap yerine
   basılabilir bir şerit daha okunur. */
.mobile-custom-menu .lenco-cta-oge--mobil { margin-top: 14px; }
.mobile-custom-menu .lenco-cta-oge--mobil > .lenco-cta {
  display: flex;
  width: 100%;
  padding: 13px 22px;
  font-size: 15px;
}
/* Tema her menü satırının altına ayırıcı çiziyor:
       .hamburger-panel ul.menu li { border-bottom: 1px solid ... }   (0,2,2)
   Düğme bir liste satırı değil; altındaki çizgi "devamı var" izlenimi
   veriyordu (ekran görüntüsünde görüldü). İlk denemem
   `.mobile-custom-menu .lenco-cta-oge--mobil` (0,2,0) idi ve TUTMADI —
   ölçüm yakaladı (hesaplanan hâlâ `1px solid`). `!important` yerine
   temanın kendi seçici şekliyle eşleşip bir sınıf fazlası: (0,3,2). */
.hamburger-panel ul.menu li.lenco-cta-oge--mobil { border-bottom: none; }

/* Temanın menü altı çizgi/kayan vurgu efekti düğmenin içinde tuhaf duruyor. */
.lenco-cta::before,
.lenco-cta::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lenco-cta { transition: none; }
}

/* Sihirbaz sayfasında başlık bloğu (dev başlık + breadcrumb) basılmaz.
   Gövde sınıfı mu-plugin 22.10'da kısa kodun varlığından türetiliyor —
   sayfa ID'si ortamdan ortama değiştiği için ID'ye bağlanmadı. */
.lenco-sihirbaz-sayfasi #page-header { display: none; }