/*
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. */
.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;
  }
}