/* ==========================================
   KATMAN - MOBİL YATAY ARAYÜZ (ui-mobile-wide.css)
   Açıklama: Telefon/Tablet yan çevrildiğinde yüklenir.
   İşlev: Yüksekliği daraltılmış ekrana özel menü dizilimi.
========================================== */

/* ==========================================
   1. ÜST MENÜ VE ARAMA KUTUSU (Hayalet Katman Düzeltildi)
========================================== */
#main-header { 
    position: fixed; top: calc(var(--y) * 1); right: calc(var(--y) * 16); left: calc(var(--y) * 2);
    height: 0; width: auto; background: transparent; border: none; padding: 0; backdrop-filter: none;
    display: flex; justify-content: flex-end; align-items: flex-start;
    z-index: 10000; pointer-events: none; 
}

/* ZEKÂ: Sadece eski ARAMA BUTONU gizlenir, container (kutu) grid'in emrine amade kalır */
.header-left, .header-center, #profile-btn, #cart-btn, .search-btn { display: none !important; }
.header-right { flex: 1; display: flex; justify-content: flex-end; width: 100%; pointer-events: auto; }

/* ==========================================
   2. SAĞ NAVİGASYON BARI
========================================== */
.mobile-bottom-nav { 
    display: grid !important;
    align-content: center; justify-items: center; 
    gap: calc(var(--y) * 0.5) 0; /* Dikeyde nefes boşluğu, yatayda sıfır (ortalanır) */
	padding: 0;
    
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: calc(var(--y) * 5); height: 80vh; 
    background: transparent; border: none;
    z-index: 9999; 
}

/* ZEKÂ: 100vh HAYALET KALKAN (Arka Plan ve Beyaz Çizgi) */
.mobile-bottom-nav::before {
    content: '';
    position: absolute; 
    top: 0; right: 0;
    width: 100%; height: 100vh; 
    background: #000; 
    border-left: 2px solid rgba(255, 255, 255, 0.2); /* Lüks Çizgi */
    z-index: -1; /* İkonların arkasında durur */
    pointer-events: none; /* Tıklamaları engellemez */
}

/* İkonların Taşıp Şekil Bozmasını Engelleyen Sabit Kasa */
.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;
    width: 100%; height: calc(var(--y) * 5); transition: 0.2s;
}
.mobile-bottom-nav button:active { color: #ff99cc; }

/* ZEKÂ: Geniş modda Favoriler butonu tamamen gizlenir, 1 sütunlu şerit ferahlar */
.nav-btn-fav { display: none !important; }

/* ZEKÂ: Sepet Bildirim Balonunun Şeklini Sabitleme (Wide Mod İçin Eklendi) */
.mob-cart-badge { 
    position: absolute; 
    top: calc(var(--y) * -0.5); /* ZEKÂ: Eksi işareti içeride olmalı */
    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; /* Flexbox kaymasını %100 durdurur */
}

/* 3. ARAMA ÇUBUĞUNUN MERKEZLENMESİ VE SİMETRİK ESNEMESİ */
.search-container { 
    /* ZEKÂ: Üst menüdeki karmaşık hizalamalardan koparıp tüm ekrana göre özgürleştiriyoruz */
    position: fixed; 
    top: calc(var(--y) * 2); /* Ekranın üstünden ne kadar aşağıda duracağı */
    padding-right: calc(var(--y) * 5);
	left: 50%; /* Ekranın solundan tam ortaya gelir */
    transform: translateX(-50%); /* Kendi genişliği ne kadar artarsa artsın onu hep tam merkezde tutar */
    display: flex; 
    justify-content: center; 
    z-index: 10005; /* Her şeyin üstünde çıksın */
    pointer-events: none; /* Şeffaf kapsayıcı görünmez olsun, altındaki ürün tıklamalarını engellemesin */
}

.search-input { 
    position: relative; /* Artık container'ın içinde tam ortada duracak */
    right: auto; /* Eski sağdan itme mantığını siliyoruz */
    background: #111; 
    color: #fff;
    border: 1px solid #333;
    border-radius: calc(var(--y) * 0.5);
    height: calc(var(--y) * 4);
    
    /* ZEKÂ: Kutu merkeze geldiği için gölgeyi de yana doğru değil, tam merkezden yayılacak şekilde güncelledik */
    box-shadow: 0 calc(var(--y) * 1) calc(var(--y) * 3) rgba(0,0,0,0.8);
    
    width: 0;
    opacity: 0;
    padding: 0;
    /* Açılırken sağa-sola simetrik genişlemesi için padding de transition'a dahil edildi */
    transition: min-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, padding 0.4s ease;
}

.search-input.active { 
    width: auto;
    min-width: calc(var(--y) * 25); /* Tıklandığında açılacağı ilk başlangıç boyutu */
    field-sizing: content; /* Modern CSS! Yazı yazıldıkça kutuyu bir lastik gibi otomatik uzatır */
    max-width: 60vw; /* Ekrandan taşmaması için sınır freni */
    opacity: 1; 
    padding: 0 calc(var(--y) * 1.5);
    pointer-events: auto; /* Sadece yazma alanına tıklanabilsin */
}

/* 4. İÇERİK ALANI DÜZENLEMESİ (Üst Boşluk Sıfırlandı) */
.main-container { 
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
	padding-right: calc(var(--y) * 5) !important;
}

/* ZEKÂ: Scrollbar'a özel izole boşluk yaratıldı, gridi ezmesi kesin olarak engellendi */
.scrollable-area { padding-right: calc(var(--y) * 1) !important; }
.scrollable-area::-webkit-scrollbar { width: calc(var(--y) * 0.5) !important; }

/* ==========================================
   5. PWA (TAM EKRAN) ÖZEL GÖRÜNÜMÜ
========================================== */
@media (display-mode: standalone) {
    /* AÇIKLAMA: Tam ekran modunda 70vh kısıtlaması kalkar, menü doğal 100vh değerine döner. */
    .mobile-bottom-nav {
        height: 100vh !important;
    }

    /* AÇIKLAMA: Alan 100vh'ye çıktığı için Favoriler (Kalp) butonu şeritte görünür yapılır. */
    .nav-btn-fav {
        display: flex !important;
    }
}