/* Menü hero'nun üzerindeyken: zeminsiz, sağa toplanmış, kutusuz.

   Woodmart'ın iki başlık satırı da `whb-with-bg` ile beyaz zeminli ve
   içerik sola/ortaya dağılmış. Siyah hero'nun üstünde o beyaz şerit tam
   ekran hissini kesiyor, arama ve araç düğmelerinin açık renk hapları da
   üç ayrı leke bırakıyor.

   Sınıf gövdeye JS ile giriyor ve menü hero'yu geçer geçmez kalkıyor:
   alt bölümler açık renk, orada krem yazı okunmaz olurdu. Kurallar
   `body.fhr-seffaf-acik:not(.fhr-menu-opak)` olmadan hiçbir şeye dokunmuyor — iç sayfalarda
   ve eklenti kapalıyken tema kendi hâlinde.

   Hepsi !important: Woodmart'ın kendi satır renkleri de öyle yazılmış. */

/* ---- 1. Zemin ---------------------------------------------------------- */

html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .whb-row,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .whb-row.whb-with-bg,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .whb-row.whb-sticked,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-clone,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-clone .whb-row,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-sticky-header,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-sticky-header > div,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-sticky-header .container,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-sticky-header .whb-flex-row,
html body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-main-header{
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header::after{ box-shadow: none !important; }

/* ---- 2. Yazı ve ikonlar ------------------------------------------------ */

body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header a,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .nav-link-text,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .wd-tools-text,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .wd-tools-icon{
  color: #F2EDE3 !important;
}
/* Kendi zemini olan düğmeler kendi rengini korur.
   "Formatek 2025 Katalog" sarı zeminli ve yazısı temada koyu
   (--btn-color:#333). Toplu krem kuralı onu da beyaza çevirince sarının
   üstünde okunmaz oluyordu. */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .btn,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .wd-button-wrapper a{
  color: var(--btn-color, #14110B) !important;
}

/* Açık olan sayfanın menü maddesi sarı kalsın: tek aksan o. */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .current-menu-item > a .nav-link-text,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .current_page_item > a .nav-link-text{
  color: #F0B429 !important;
}

/* Açılır paneller ayrı dünya: kendi zeminleri beyaz, oraya krem yazı
   gidince menü okunmaz oluyordu (hesap menüsü, kategori alt menüsü,
   arama sonuçları). Panelin içi koyu yazıya geri dönüyor. */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header :is(.wd-dropdown, .wd-dropdown-menu,
  .wd-dropdown-results, .wd-sub-menu, .sub-sub-menu),
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header :is(.wd-dropdown, .wd-dropdown-menu,
  .wd-dropdown-results, .wd-sub-menu, .sub-sub-menu)
  :is(a, span, li, p, strong, b, label, input, .nav-link-text){
  color: #2A2620 !important;
}

/* ---- 3. Logo ----------------------------------------------------------- */

/* Hero kendi sarı logosunu taşıyorsa başlıktaki logo gizleniyor:
   aynı marka iki kez, biri okunmaz hâlde görünüyordu. Hero logosu kapalıysa
   bu kural çalışmıyor — hiç logosuz bir başlıkla kalmayalım.

   ÖNCEDEN SÜTUNA GÖRE GİZLİYORDU (`whb-col-center`, `whb-mobile-center`).
   O sırada logo ortadaki sütundaydı ve kural doğru çalışıyordu. Başlık
   iki satırdan tek satıra indirilince Woodmart sütunları yeniden dağıttı:
   logo `whb-col-left`e, menü `whb-col-center`a geçti. Kural o gün
   sessizce yanlış şeyi gizlemeye başladı — ana sayfada MENÜ kayboldu,
   logo ise iki kez göründü (biri hero'nun sarısı, biri temanın beyazı).

   Artık konuma değil şeyin kendisine bakıyor; başlık düzeni değişse de
   doğru kalıyor. */
body.fhr-seffaf-acik:not(.fhr-menu-opak).fhr-hero-logolu .whb-header .site-logo{
  display: none !important;
}

/* Mobilde de sayfa siyahtan başlasın.
   Woodmart'ın mobil başlığı içeriğin üstüne binmiyor, kendi bandında
   duruyor: sayfanın tepesinde beyaz bir şerit kalıyor ve logo iki kez
   görünüyor. Başlığı akıştan çıkarıp hero'nun üstüne bindiriyoruz;
   masaüstünde tema zaten bunu yapıyor.

   SADECE DAR EKRAN. Bir kez bunu tüm genişliklere açtım (1.4.0) ve
   masaüstünü bozdum: `.whb-header` static olunca mutlak konum sayfa
   sarmalayıcısına göre çözülüyor, giriş yapmış kullanıcıda WordPress
   yönetim çubuğu (32px) bandın üstüne biniyor ve logonun tepesini
   kesiyordu. Ölçtüm: band ekranY=-8, logo ekranY=12, çubuk 0–32.
   Masaüstünde bindirmeyi tema yapıyor, oraya karışmıyoruz.

   DOĞRUDAN ÇOCUK şart. Yapışkan başlığın kopyası da `whb-main-header`
   sınıfını taşıyor ve `.whb-header`ın dışında duruyor; sınıfa göre
   seçince kopyayı da mutlak konuma çiviliyordum. Woodmart onu yapışkan
   yapmaya çalışırken çakışıyor, ekranın tepesinde beyaz bir şerit
   belirip kayboluyor ve kaydırma sarsılıyordu.                          */
@media (max-width: 1024px){
  body.fhr-seffaf-acik .whb-header{ position: static; }
  body.fhr-seffaf-acik .whb-header > .whb-main-header{
    position: absolute !important;
    top: 0; left: 0; right: 0; z-index: 390;
  }
}

/* Hero logosu kapalıyken başlıktaki logo kalıyor ama siyah bir yazı
   işareti; siyah zeminde kayboluyor. brightness(0) her rengi siyaha
   indiriyor, invert(1) beyaza çeviriyor: temiz bir siluet çıkıyor. */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .site-logo img{
  filter: brightness(0) invert(1);
}

/* ---- 3b. Menüye taşınan hero logosu ------------------------------------

   Logoyu ölçüp hizalamayı denedim ve farklı ekranlarda tutturamadım:
   başlığın yüksekliği yazı tipine, menünün sarmasına ve yapışkan hâle
   geçmesine göre değişiyor. Artık logo başlığın kendi satırının içine
   taşınıyor (wp-koprusu.js yapıyor) ve menüyle aynı flex kutusunda
   duruyor. Hiza bir hesabın değil, aynı satırda olmanın sonucu.

   Buradaki kurallar taşınmış hâli için: hero'nun kendi yerleşiminden
   (mutlak konum, sahne değişkenleri, giriş animasyonu) tamamen kopuyor. */
.fhr-ust--menude{
  position: static !important;
  height: auto !important;
  width: auto !important;
  inset: auto !important;
  margin: 0 auto 0 0 !important;      /* solda kalsın, gerisi sağa itilsin */
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  order: 0;
  pointer-events: auto !important;

  /* Sahne değişkenleri hero'nun kökünde tanımlı; dışarı çıkınca
     tanımsız kalıyor ve logo rengini kaybediyordu. */
  --sc-accent: #F0B429;
  color: #F0B429 !important;

  /* Giriş animasyonunu motor sürüyordu; dışarıda sürücü yok, görünür
     kalsın. */
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.fhr-ust--menude .marka{
  margin: 0 !important;
  width: clamp(150px, 12vw, 205px) !important;
  color: #F0B429 !important;
}
.fhr-ust--menude .gizli{ position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); }

/* Hero geçilip menü beyaza dönünce sarı logo orada duramaz: sitenin
   kendi logosu geri geliyor (yukarıdaki gizleme kuralı da kalkıyor). */
body.fhr-menu-opak .fhr-ust--menude{ display: none !important; }

/* ---- 4. Tek satır ------------------------------------------------------

   Woodmart başlığı iki satır: üstte arama + logo + araçlar, altta menü.
   Hero'nun üstünde bu iki şerit ortada kocaman bir boşluk bırakıyor ve
   ağır duruyor. Geniş ekranda ikisini tek satıra alıyoruz: solda hero'nun
   sarı logosu, sağda menü ve araçlar tek hizada.

   Yalnızca menü hero'nun üstündeyken ve yalnızca geniş ekranda; dar
   ekranda Woodmart kendi çekmecesini kullanıyor, oraya karışmıyoruz.    */

@media (min-width: 1025px){
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header > .whb-main-header{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.8vw, 40px);
  }
  /* Satırlar DARALABİLİR olmalı. `flex:0 0 auto` iken menü, arama ve
     araçlar toplamı banda sığmayınca taşma sola gidiyor ve ilk öge
     olan logo ekranın dışına çıkıyordu (1280'de -57 px ölçtüm).
     Logo daralmıyor, sağdaki küme daralıyor. */
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header > .whb-main-header > .whb-row{
    flex: 0 1 auto;
    min-width: 0;
    padding-block: 0 !important;
  }
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header > .whb-main-header > .whb-row > .container{
    width: auto !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }
  /* Menü önce, arama ve araçlar en sağda: okuma yönü soldan sağa,
     eylemler kenarda. */
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header-bottom{ order: 1; }
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-general-header{ order: 2; }

  /* Tek satırda band alçalıyor. Yanlardaki boşluk hero'nun kenar boşluğuyla
     birebir aynı (--sc-gutter'ın kendisi): logo başlığın içinde duruyor ama
     sol kenarı aşağıdaki dev afişle aynı çizgiye oturuyor. */
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header > .whb-main-header{
    padding: 14px clamp(1.25rem, 5vw, 5.5rem);
  }
}

/* ---- 5. Sağa toplama --------------------------------------------------- */

/* Woodmart sütunları sol/orta/sağ diye üçe bölüyor ve yanları esnetiyor.
   Hero sayfasında hepsi sağda tek küme hâlinde duruyor; sol üst köşe
   hero'nun sarı logosuna kalıyor. */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-general-header-inner,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header-bottom-inner{
  justify-content: flex-end !important;
  gap: 20px;
}
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-general-header-inner > .whb-column,
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header-bottom-inner > .whb-column{
  flex: 0 0 auto !important;
  width: auto !important;
  justify-content: flex-end !important;
}
/* Ortadaki 200px'lik boşluk elemanı sağa toplanınca anlamsız kalıyor. */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .whb-space-element{ display: none !important; }

/* ---- 6. Arama ve araçlar ----------------------------------------------- */

/* Arama: oval, çok ince çerçeve. Beyaz hap siyah zeminde leke gibi
   duruyordu; alt çizgi ise "buraya yazılır" demeye yetmiyordu. Odakta
   çerçeve sarıya dönüp kutu genişliyor.

   Büyüteç Woodmart'ta formun SOLUNDA ve mutlak konumlu. Genişliğini
   --wd-search-btn-w değişkeninden almıyor, tema başka yerden 46 piksel
   veriyordu ve yazı ikonun altına giriyordu; ölçüyü burada kesin
   yazıyoruz — ikon 34'lük alanın ortasında, yazı 40'tan başlıyor.       */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .searchform{
  --wd-search-btn-w: 34px;
  position: relative;
}
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .searchform .searchsubmit{
  position: absolute !important;
  left: 0 !important; right: auto !important;
  top: 0 !important; bottom: 0 !important;
  width: 34px !important; min-width: 0 !important;
  padding: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  background-color: transparent !important;
  border: 0 !important; box-shadow: none !important;
  color: rgba(242,237,227,.72) !important;
}
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .searchform input.s{
  background-color: rgba(242,237,227,.06) !important;
  border: 1px solid rgba(242,237,227,.20) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 9px 16px 9px 40px !important;
  width: clamp(130px, 13vw, 210px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 14px !important;
  color: #F2EDE3 !important;
  transition: width .22s ease, border-color .22s ease, background-color .22s ease;
}
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .searchform input.s:focus{
  border-color: rgba(240,180,41,.7) !important;
  background-color: rgba(242,237,227,.10) !important;
  width: 280px !important;
  outline: none !important;
}
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .searchform input.s::placeholder{
  color: rgba(242,237,227,.5) !important;
}

/* Dar ekranda arama hero'nun üstünde HİÇ görünmüyor.
   Küçük ekranda bandın solunda hero'nun logosu, sağında menü var; araya
   giren arama kutusu ikisiyle çakışıyor. Ziyaretçi hero'yu geçtiği anda
   (menü opaklaşınca) arama geri geliyor; iç sayfalarda ve mağazada zaten
   hep duruyor. Kaybolan bir işlev yok, sadece yeri değişiyor. */
@media (max-width: 1024px){
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .wd-search-form,
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .searchform{
    display: none !important;
  }
}

/* Karşılaştır / Favoriler / Hesap: açık renk haplar gitti, düz ikon kaldı. */
body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .wd-tools-element > a{
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding-inline: 7px !important;
}

/* ---- 7. Geçiş ---------------------------------------------------------- */

/* Menü hero'yu geçerken renkler yumuşak dönsün.

   DİKKAT: zemin (background-color) bilerek bu listede YOK. Yapışkan
   başlık kaydırma sırasında yeniden belirdiğinde zemini beyazdan saydama
   geçiş süresi boyunca animasyonluyordu; ekranın tepesinde beliren ve
   sonra kaybolan beyazlık buydu. Zemin anında uygulanıyor. */
body .whb-header .site-logo img,
body .whb-header .searchform input.s,
body .whb-header .wd-tools-element > a{
  transition: color .28s ease, border-color .28s ease,
              filter .28s ease, width .2s ease;
}
body .whb-header .whb-row{ transition: color .28s ease; }

@media (prefers-reduced-motion: reduce){
  body .whb-header .whb-row,
  body .whb-header .site-logo img,
  body .whb-header .searchform input.s,
  body .whb-header .wd-tools-element > a{ transition: none; }
}

/* ---- 8. Dar ekran ------------------------------------------------------ */

/* Mobilde Woodmart kendi çekmecesini kullanıyor; sağa toplama orada
   anlamsız, sadece renkler kalsın. */
@media (max-width: 1024px){
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-general-header-inner,
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header-bottom-inner{
    justify-content: space-between !important;
    gap: 10px;
  }
  body.fhr-seffaf-acik:not(.fhr-menu-opak) .whb-header .searchform input.s{ width: 100% !important; }
}

/* ---- 9. İç sayfa kuralları BURADA DEĞİL --------------------------------

   Bu dosya yalnızca hero'nun bulunduğu sayfada sıraya giriyor
   (`FHR_Ayarlar::sayfada_mi()`). Ürün/mağaza sayfasında hiç yüklenmiyor.
   İç sayfaları ilgilendiren her kural `assets/ic-sayfa.css` dosyasına
   yazılır — o dosya site geneline yükleniyor.

   Buraya yazılan bir iç sayfa kuralı sessizce hiç çalışmaz; bir kez
   böyle oldu, not olarak duruyor.                                       */