/* ==========================================
   KATMAN - MOBİL DİKEY ARAYÜZ (ui-mobile-narrow.css)
   Açıklama: Telefon dikey tutulduğunda yüklenir.
   İşlev: Alt navigasyon barı, tam ekran arama çubuğu.
   Açıklama: Sadece telefon ekranı dikeyken yüklenir.
========================================== */

/* 1. Üst Menü Düzenlemesi (Logo ve Arama Çubuğu Baş Başa Kalır) */
#main-header { 
    position: fixed; top: 0; left: 0; width: 100%; 
    height: calc(var(--y) * 5); padding: 0 calc(var(--y) * 1); 
    background: rgba(0,0,0,0.85); backdrop-filter: blur(calc(var(--y) * 0.75)); z-index: 1000; border-bottom: none;
    display: flex; justify-content: space-between; align-items: center;
}

/* ZEKÂ: Logonun oranını bozmadan, yatay ve dikey hizalamasını kusursuz yapan lüks boyutlandırma */
.brand-logo { 
    height: calc(var(--y) * 3); /* Logonun dikey kaplayacağı alan (tasarımına göre 2.5y veya 3.5y yapabilirsin) */
    width: auto; /* Genişliği orijinal oranına sadık kalarak otomatik ayarlar */
    object-fit: contain; /* Görselin ezilmesini veya sündürülmesini %100 engeller */
    cursor: pointer; 
    transition: opacity 0.3s ease;
}

.brand-logo:active {
    opacity: 0.7; /* Tıklandığında hafifçe solma efekti */
}

.header-left, #profile-btn, #cart-btn { display: none !important; }

/* ZEKÂ: Arama çubuğunun logoya kadar uzaması için flex: 1 verildi */
.header-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; margin-left: calc(var(--y) * 1); transition: margin 0.3s ease; }

/* Dikey Mod Tıklanabilir Mat Arama Kutusu */
.search-container { display: flex; align-items: center; position: relative; width: 100%; justify-content: flex-end; }

/* İkon her zaman üstte kalır ve geçiş animasyonuna sahip olur */
.search-btn { 
    position: absolute; right: calc(var(--y) * 0.5); background: none; border: none; color: #fff; 
    font-size: calc(var(--y) * 1.1); cursor: pointer; 
    z-index: 10; /* ZEKÂ: Her zaman kutunun ve yazıların üstünde (Hakim) */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.search-input { 
    width: 100%; 
    background: #111; border: 1px solid #333; color: #fff; 
    font-size: calc(var(--y) * 0.85); 
    padding: calc(var(--y) * 0.5) calc(var(--y) * 2.5) calc(var(--y) * 0.5) calc(var(--y) * 1); 
    border-radius: calc(var(--y) * 0.5); outline: none; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* ZEKÂ: Kutu açıldığında ferahlar, yüksekliği ve yazı boyutu artar */
.search-input.active {
    padding: calc(var(--y) * 0.9) calc(var(--y) * 3.5) calc(var(--y) * 0.9) calc(var(--y) * 1.5); /* Sağdan 3.5y devasa koruma kalkanı */
    font-size: calc(var(--y) * 1); /* Daha okunabilir büyük font */
    border-color: #555; 
}

/* ZEKÂ: Kutu açıldığında, hemen yanındaki (kardeşi olan) büyüteç ikonu lüks bir şekilde büyür */
.search-input.active + .search-btn {
    transform: scale(1.3); /* İkonu %30 büyüt */
    right: calc(var(--y) * 0.8); /* Büyüdüğü için sağdan biraz içeri alarak dengele */
    color: #fff; /* Tıklanmaya hazır net beyaz */
}

/* ZEKÂ: Logonun Yumuşak Kaybolma Animasyonu (Arama kutusunun yana doğru yumuşak esnemesini sağlar) */
.header-center {
    max-width: 50vw; /* Logonun rahatça sığacağı varsayılan genişlik */
    opacity: 1;
    overflow: hidden;
    white-space: nowrap; /* Logonun daralırken alt satıra kırılmasını engeller */
    /* Arama kutusunun genişleme hızıyla birebir aynı senkronize geçiş */
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Kutu açıldığında logoyu aniden silme, yumuşakça daraltıp görünmez yap */
body:has(.search-input.active) .header-center { 
    max-width: 0; 
    opacity: 0; 
}

/* Sağ kutu da sol boşluğunu yumuşakça kapatıp tüm ekranı doldurur */
body:has(.search-input.active) .header-right { 
    margin-left: 0; 
}

/* ZEKÂ: Dikey modda Arama butonu Header'da olduğu için Alt Menüdekini gizle */
.nav-btn-search { display: none !important; }

/* 2. Alt Navigasyon Barı (Siyah ve İnce Üst Sınır Simetrisi) */
.mobile-bottom-nav { 
    display: flex !important; position: fixed; bottom: 0; left: 0; width: 100%;
    height: calc(var(--y) * 5); /* ZEKÂ: Header ile aynı 5y yüksekliği */
    background: #000; /* ZEKÂ: Header ile aynı tam siyah */ 
    border-top: none; /* ZEKÂ: Header ile aynı ince üst sınır */ 
    justify-content: space-around; align-items: center; z-index: 9999; 
    padding-bottom: env(safe-area-inset-bottom); /* iPhone Güvenli Alan Koruması */
}
.mobile-bottom-nav button { 
    background: transparent; border: none; color: #fff; 
    font-size: calc(var(--y) * 2.2); cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    flex: 1; height: 100%; transition: 0.2s;
}
.mobile-bottom-nav button:active { color: #ff99cc; }

/* ZEKÂ: Sepet Bildirim Balonunun Şeklini Sabitleme */
.mob-cart-badge { 
    position: absolute; 
    top: calc(var(--y) * -0.5); 
    right: calc(var(--y) * -0.5);; 
    background: #ff99cc; color: #000; 
    font-size: calc(var(--y) * 0.85); font-weight: 900; 
    width: calc(var(--y) * 1.6); height: calc(var(--y) * 1.6); 
    display: flex; align-items: center; justify-content: center; 
    border-radius: 50%; border: 2px solid #000; 
    transform: none !important; 
}

/* Sayfa altı ve üstü ezilmesin diye 5y tam simetri */
.main-container { padding-top: calc(var(--y) * 5); padding-bottom: calc(var(--y) * 5); }