/* -----------------------------------------------------------
   Zen Guitar & Picks - Özel Tasarım CSS'i
   -----------------------------------------------------------
   Bu dosya functions.php tarafından otomatik yükleniyor.
   Renk değişkenleri functions.php içinde tanımlı:

   --zen-dark          #130F0C  Header / footer / nav zemini
   --zen-wood-brown    #5F4734  Ana butonlar
   --zen-maroon-brown  #4B3827  "KEŞFET" butonları
   --zen-bronze        #6A4F39  Kategoriler barı zemini
   --zen-cream         #F0EBE5  Sayfa arka planı
   --zen-off-white     #EAE4DE  Kart / ürün alanı zemini
   --zen-gold          #D6C4B0  Vurgu metinleri

   NOT: Woodmart sürümüne ve Header Builder ayarlarınıza göre
   aşağıdaki class isimleri küçük farklılıklar gösterebilir.
   Bir kural etkilemiyorsa: F12 (DevTools) > o alanın üzerine
   sağ tık > "İncele" (Inspect) diyerek gerçek class adını görüp
   burada güncelleyin.
   ----------------------------------------------------------- */


/* ============ 1) GENEL SAYFA ARKA PLANI ============ */
body,
.page-wrapper,
.site-content {
	background-color: var(--zen-cream);
}


/* ============ 2) HEADER (üst bar + logo + arama + ikonlar) ============ */
.whb-header,
.whb-general-header,
.whb-main-header {
	background-color: var(--zen-dark) !important;
}

/* Header içindeki linkler / ikonlar açık renk kalsın */
.whb-header a,
.whb-header .wd-tools-icon,
.whb-header .site-logo,
.whb-top-bar-nav a {
	color: var(--zen-text-light);
}


/* ============ 3) KATEGORİLER BARI (Anasayfa | Shop | Sanatçılar ... satırı) ============ */
/* Woodmart genelde bu satırı ayrı bir "navigation" satırı olarak render eder */
.whb-row.whb-general-header2,
.woodmart-navigation,
.navigation-out,
.main-nav-wrap {
	background-color: var(--zen-bronze) !important;
}
.woodmart-navigation a,
.main-nav-wrap a {
	color: var(--zen-text-light) !important;
}


/* ============ 4) FOOTER ============ */
.wd-footer,
footer.footer,
#footer {
	background-color: var(--zen-dark) !important;
	color: var(--zen-text-light);
}
.wd-footer a {
	color: var(--zen-gold);
}


/* ============ 5) BAŞLIKLAR ============ */
h1, h2, h3,
.wd-section-title-inner,
.page-title {
	font-family: 'Playfair Display', serif;
	color: var(--zen-dark);
}

/* Hero banner başlık altındaki açıklama metni (gold vurgu) */
.hero-subtitle,
.wd-slide-caption p {
	color: var(--zen-gold);
}


/* ============ 6) ANA VURGU BUTONLARI (örn. "AHŞAP PENALARI KEŞFET") ============ */
.btn.wd-style-fill,
.wd-primary-btn,
a.button.wd-style-fill {
	background-color: var(--zen-wood-brown) !important;
	border-color: var(--zen-wood-brown) !important;
	color: var(--zen-text-light) !important;
}
.btn.wd-style-fill:hover,
.wd-primary-btn:hover,
a.button.wd-style-fill:hover {
	background-color: var(--zen-maroon-brown) !important;
	border-color: var(--zen-maroon-brown) !important;
}


/* ============ 7) "KEŞFET" (kategori kartları içindeki küçük butonlar) ============ */
/* Bu butonlar genelde kategori/ürün grid widget'ının kendi class'ını kullanır. */
.wd-cats-collection .btn,
.product-category .btn,
.wd-shortcode-inner .btn-outline {
	background-color: var(--zen-maroon-brown) !important;
	border-color: var(--zen-maroon-brown) !important;
	color: var(--zen-text-light) !important;
}
.wd-cats-collection .btn:hover,
.product-category .btn:hover {
	background-color: var(--zen-wood-brown) !important;
	border-color: var(--zen-wood-brown) !important;
}


/* ============ 8) KART / ÜRÜN ALANLARI (kırık beyaz zemin) ============ */
.product-element-top,
.wd-product-cat,
.card,
.wd-cats-collection-item,
.products .product {
	background-color: var(--zen-off-white);
}


/* ============ 9) ÖZELLİK ŞERİDİ (Ücretsiz Kargo / Taksit / %10 İndirim / Handmade) ============ */
.wd-promo-block,
.woodmart-promo-blocks-widget {
	background-color: var(--zen-cream);
}
.wd-promo-block .promo-title,
.wd-promo-block strong {
	color: var(--zen-dark);
}


/* ============ 10) ANA SAYFAYA ÖZEL EK KURALLAR ============ */
.zen-homepage .wd-tabs-titles a.active {
	color: var(--zen-wood-brown);
	border-color: var(--zen-wood-brown);
}


/* ============ 11) HERO BANNER TAM KAPLAMA (güvence CSS) ============ */
/* Admin panelinden "Full width / Stretch row" ayarı tutmazsa bu kural
   devreye girer. Eğer hero satırınızın gerçek class'ı farklıysa
   (F12 > İncele ile bulun), aşağıdaki .zen-hero-row kısmını o class
   ile değiştirin. */
.zen-homepage .wpb_row.zen-hero-row,
.zen-homepage .vc_row.zen-hero-row,
.zen-homepage .wd-slider-row {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.zen-homepage .wd-slider-row .wpb_column,
.zen-homepage .wd-slider-row .vc_column_container {
	width: 100% !important;
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
.zen-homepage .wd-slider-row img,
.zen-homepage .wd-slider-row .wd-slide-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ============ 12) KATEGORİ PANELİ (devre dışı) ============ */
/* Bu blok "Kategoriler" panelinin üzerine gelince açılmama sorununa
   sebep oluyordu: display:none !important her zaman kazanıyordu çünkü
   açma kuralındaki class adları (.opened / :hover hedefi) Woodmart'ın
   gerçek DOM yapısıyla eşleşmiyordu. Woodmart bu paneli kendi JS/CSS'i
   ile zaten yönetiyor, bu yüzden kural tamamen kaldırıldı. Panel hâlâ
   açılmıyorsa sorun büyük ihtimalle WP Rocket'ın CSS/JS
   birleştirme-küçültme ayarındadır (bkz. sohbet).
.wd-nav-vertical-holder .wd-nav-vertical-dropdown {
	display: none !important;
}
.wd-nav-vertical-holder.opened .wd-nav-vertical-dropdown,
.wd-nav-vertical-holder:hover .wd-nav-vertical-dropdown {
	display: block !important;
}
*/



/* ============ KART GENEL GÖRÜNÜMÜ ============ */
.wpb-pena-kutu {
	border-radius: 6px;
	overflow: hidden;
}

.wpb-pena-kutu .wd-cat-inner.wrapp-category {
	position: relative;
	background-image: url('{{THEME_URL}}/images/pena_arkaplan.png') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	padding: 18px 10px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: none !important; /* categories-with-shadow'un varsayılan gölgesini kaldırır */
}

/* ============ ÜRÜN FOTOĞRAFI ============ */
.wpb-pena-kutu .wd-cat-thumb.category-image-wrapp {
	background: transparent !important;
	width: 100%;
	max-width: 170px;
	margin: 0 auto 18px;
}

.wpb-pena-kutu .wd-cat-thumb.category-image-wrapp img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	filter: drop-shadow(0 18px 20px rgba(0,0,0,.45));
}

/* ============ BAŞLIK ============ */
.wpb-pena-kutu .wd-cat-content {
	background: transparent !important;
	position: static !important;
}

.wpb-pena-kutu .wd-entities-title {
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 8px !important;
}

/* Şimdilik "14 ürün" yazısını gizliyoruz — yerine gerçek açıklama/buton gelecek */
.wpb-pena-kutu .wd-cat-count.more-products {
	display: none;
}

/* ==========================================================================
   PENA KOLEKSİYONLARI kutuları – sabit boyut + görsel arka plan + gradient
   + başlık + açıklama + "KEŞFET" butonu
   Sadece bu bölümü etkiler (kapsam: .wpb-pena-kutu)
   ========================================================================== */

/* 1) Eski "çerçeve/gölge" efektini kaldır (Sedef ve diğer kutularda görülen
      köşeli çerçeve buradan geliyordu) */
.wpb-pena-kutu .wd-cat-thumb,
.wpb-pena-kutu .wd-cat-inner {
  box-shadow: none !important;
  border: none !important;
  filter: none !important;
}
.wpb-pena-kutu .wd-cat-thumb::before {
  content: none !important;
}

/* 2) Kart çerçevesi - köşeler yuvarlak, görsel de bu köşeye göre kırpılır
      (temanın kendi "categories-with-shadow" stili daha spesifik olduğu için
      !important şart, yoksa köşe düz kalıyor) */
.wpb-pena-kutu .wd-cat-inner {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* 3) Sabit kutu boyutu (oranı koru, tüm ekranlarda aynı görünüm) */
.wpb-pena-kutu .wd-cat-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 5 / 8 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* 4) Görseli kutuya tam doldur / ortala / kırp
      (WooCommerce'in kendi "img{height:auto!important}" kuralı resmi
      kutunun tamamına değil, karenin üstüne küçük bırakıyordu -> bu yüzden
      burada da !important kullanıyoruz) */
.wpb-pena-kutu .wd-cat-thumb picture,
.wpb-pena-kutu .wd-cat-thumb img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .4s ease;
}
.wpb-pena-kutu .wd-cat-inner:hover .wd-cat-thumb img {
  transform: scale(1.05);
}

/* 5) Alt kısımda koyu gradient (yazının her görselde okunması için) */
.wpb-pena-kutu .wd-cat-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 14, 10, 0) 35%,
    rgba(20, 14, 10, .55) 68%,
    rgba(20, 14, 10, .88) 100%
  );
  pointer-events: none;
}

/* 6) Görsel linkini tüm karta yay -> her yere tıklanınca kategoriye gitsin */
.wpb-pena-kutu .wd-cat-image {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 7) Metin bloğu: görselin/gradyanın üstüne bindir, kutunun altına sabitle
      (temanın "hover-mask" sınıfı bunu normal akışta, resmin ALTINDA
      tutuyordu -> gradyanın sadece ortayı kaplaması buradan kaynaklanıyordu) */
.wpb-pena-kutu .wd-cat-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  z-index: 3;
  padding: 18px 14px 20px;
  text-align: center;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none; /* tıklama alttaki görsel linkine geçsin */
}

/* 8) Başlık */
.wpb-pena-kutu .wd-entities-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.wpb-pena-kutu .wd-entities-title a {
  color: inherit;
}

/* 9) Açıklama satırı
      Kategori "Açıklama" alanına yazı girip kategori kutuları öğesinde
      "Kategori açıklamasını göster" seçeneği açılınca burada görünür.
      Woodmart'ın kullandığı olası sınıf adlarının hepsini kapsıyoruz. */
.wpb-pena-kutu .wd-cat-desc,
.wpb-pena-kutu .term-description,
.wpb-pena-kutu .wd-cat-content p {
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 12px;
}

/* 10) Ürün sayısı linkini "KEŞFET" butonuna çevir (mevcut linki kullanır,
       yeni bir buton eklemeye gerek yok) */
.wpb-pena-kutu .wd-cat-count {
  margin: 0;
  pointer-events: auto;
}
.wpb-pena-kutu .wd-cat-count a {
  display: inline-block;
  font-size: 0;
  padding: 7px 20px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 3px;
  transition: background .25s ease, border-color .25s ease;
}
.wpb-pena-kutu .wd-cat-count a::after {
  content: "KEŞFET";
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
}
.wpb-pena-kutu .wd-cat-count a:hover {
  background: #fff;
  border-color: #fff;
}
.wpb-pena-kutu .wd-cat-count a:hover::after {
  color: #2b1b12;
}