/* ==========================================================================
   BenomShop — Header yerleşim stilleri
   --------------------------------------------------------------------------
   Şablon tek; düzeni `.header-main-div[data-header-stil="…"]` kurar.
   Katalog: includes/config/header_stil.php

   Yüklenme sırası ÖNEMLİ: bu dosya `site_style.css`ten (panelden üretilen
   dinamik stil) SONRA gelir. Yine de çakışan kurallarda seçici özgüllüğü
   zaten yüksek ([data-header-stil] + sınıf = 0,2,0 > 0,1,0), yani sıraya
   bağımlı değiliz — sıra yalnız okunabilirlik için.

   Kurallar YALNIZ masaüstü header'a dokunur. Mobil header ayrı şablon
   (`header_items/mobile_menu.php`) ve kendi teması var (`mobiltema`);
   yerleşim stilleri onu ETKİLEMEZ — mobilde tek doğru düzen var.
   ========================================================================== */

/* ── Geniş Arama ─────────────────────────────────────────────────────────
   Arama kutusu kalan genişliği kaplar. Varsayılan `min-width:430px` sabit
   genişlik dayatıyor; `flex:1` ile birlikte 0'a çekilmesi gerekiyor. */
.header-main-div[data-header-stil="genis-arama"] .header-desktop-search1 {
    flex: 1 1 auto;
}
.header-main-div[data-header-stil="genis-arama"] .header-desktop-search1 form input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;   /* padding 0 25px kabi asmasin */
}
.header-main-div[data-header-stil="genis-arama"] .header-desktop-search1.mx-auto {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

/* ── İki Satır ───────────────────────────────────────────────────────────
   Üst satır logo + düğmeler, alt satır tam genişlikte arama.
   `display:contents` sağ alanı ŞEFFAFLAŞTIRIR: çocukları (arama, çağrı,
   düğmeler) doğrudan ana flex kabına girer, böylece arama kendi satırına
   inebilir. Sağ alanın `flex:1`i kaybolduğu için itme görevi logoya geçer. */
.header-main-div[data-header-stil="iki-satir"] .header-desktop-main-div-in {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
}
.header-main-div[data-header-stil="iki-satir"] .header-desktop-right-area {
    display: contents;
}
.header-main-div[data-header-stil="iki-satir"] .header-desktop-logo-div {
    order: 1;
    flex: 1 1 auto;
}
.header-main-div[data-header-stil="iki-satir"] .header-desktop-call,
.header-main-div[data-header-stil="iki-satir"] .header-desktop-navbutton-box {
    order: 2;
}
.header-main-div[data-header-stil="iki-satir"] .header-desktop-search1 {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
}
.header-main-div[data-header-stil="iki-satir"] .header-desktop-search1 form input {
    min-width: 0;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;   /* padding 0 25px kabi asmasin */
}

/* ── Ortalanmış ──────────────────────────────────────────────────────────
   Logo kendi satırında ortada; arama ve düğmeler altında ortalanmış. */
.header-main-div[data-header-stil="ortali"] .header-desktop-main-div-in {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
}
.header-main-div[data-header-stil="ortali"] .header-desktop-logo-div {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
}
.header-main-div[data-header-stil="ortali"] .header-desktop-right-area {
    flex: 0 0 100%;
    justify-content: center;
}
.header-main-div[data-header-stil="ortali"] .header-desktop-search1 form input {
    margin-left: 0;
}
/* Ortalı düzende ilk düğmenin sol boşluğu ortalamayı kaydırıyordu. */
.header-main-div[data-header-stil="ortali"] .header-desktop-search1.mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Sade ────────────────────────────────────────────────────────────────
   Arama kutusu HTML'e hiç girmez (stil `search_tip`i 2'ye zorlar); geriye
   logo ve düğmeler kalır. Düğmeler biraz daha ferah dursun. */
.header-main-div[data-header-stil="sade"] .header-desktop-navbutton-box {
    margin-left: 38px;
}

/* ── Kompakt ─────────────────────────────────────────────────────────────
   Alçak header, küçük logo ve ikonlar. `.header-desktop-main-div` padding'i
   panelden ÜRETİLİYOR (site_style.css); burada bilerek eziliyor — kompakt
   seçildiğinde "iç boşluk" ayarı geçerliliğini yitirir. */
.header-main-div[data-header-stil="kompakt"] .header-desktop-main-div {
    padding-top: 6px;
    padding-bottom: 6px;
}
.header-main-div[data-header-stil="kompakt"] .header-desktop-logo-div img {
    max-height: 52px;
    max-width: 200px;
}
.header-main-div[data-header-stil="kompakt"] .header-desktop-search1 form input {
    min-width: 320px;
    height: 38px;
    font-size: 12px;
    padding: 0 18px;
}
.header-main-div[data-header-stil="kompakt"] .header-desktop-search1 form button {
    font-size: 21px;
    margin-top: 1px;
}
.header-main-div[data-header-stil="kompakt"] .header-desktop-navbutton-box {
    margin-left: 20px;
}
.header-main-div[data-header-stil="kompakt"] .header-desktop-navbutton-box i {
    font-size: 22px;
}
.header-main-div[data-header-stil="kompakt"] .header-desktop-call {
    margin-right: 18px !important;
}

/* ── Dar masaüstünde ortak güvenlik ──────────────────────────────────────
   1300px sabit kap 1400px altı ekranlarda taşıyordu; sabit genişlikli arama
   kutusu olan stillerde bu daha erken oluyor. */
@media screen and (max-width: 1380px) {
    .header-main-div[data-header-stil="genis-arama"] .header-desktop-search1.mx-auto,
    .header-main-div[data-header-stil="klasik"] .header-desktop-search1.mx-auto {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
    .header-main-div[data-header-stil="klasik"] .header-desktop-search1 form input {
        min-width: 300px;
    }
}


/* ── Tam genişlikte arama: büyüteç düğmesi ──────────────────────────────
   Düğme `position:absolute` ama `top` VERMİYOR — yani statik konumunu
   kullanıyor (girdiden hemen sonra). Girdi `width:100%` olunca o satırda
   yer kalmıyor ve düğme ALT SATIRA düşüyor. Dikey ortalama vererek
   statik konuma bağımlılığı kaldırıyoruz. Kapsayıcı (.header-desktop-search1)
   zaten `position:relative`. */
.header-main-div[data-header-stil="genis-arama"] .header-desktop-search1 form button,
.header-main-div[data-header-stil="iki-satir"] .header-desktop-search1 form button {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}