/* ==========================================
   KATMAN - MASAÜSTÜ ARAYÜZÜ (ui-desktop.css)
   Açıklama: Cihaz 12 inçten (1024px) büyükse yüklenir.
   İşlev: Klasik üst Header, Hover efektleri.
========================================== */

/* ==========================================
   FAZ 4: LÜKS HEADER VE ZARİF ARAMA ÇUBUĞU
========================================== */

#main-header { 
    position: fixed; top: 0; left: 0; width: 100%; 
    height: calc(var(--y) * 4); /* ZEKÂ: Menü biraz ferahlatıldı, nefes payı verildi */
    background: rgba(0,0,0,0.85); 
    backdrop-filter: blur(calc(var(--y) * 0.75)); 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 calc(var(--y) * 1.5); /* Sağ ve sol kenarlardan lüks boşluk */
    z-index: 1000; 
    border-bottom: 1px solid rgba(255,153,204,0.1); /* Altında çok hafif, zarif bir pembe çizgi */
}

/* ZEKÂ: Sol, Orta ve Sağ bloklar 'flex: 1' ile kusursuz eşitlendi. Logo KESİN olarak ortada kalır */
.header-left, .header-right { display: flex; gap: calc(var(--y) * 1); align-items: center; flex: 1; }
.header-right { justify-content: flex-end; }
.header-center { flex: 1; text-align: center; }

/* ZEKÂ: Masaüstü Header içindeki logonun devasa uzamasını engelleyen zırh */
.brand-logo { 
    height: calc(var(--y) * 2.8); /* Masaüstü Header'ına tam oturan zarif yükseklik */
    width: auto; 
    max-width: calc(var(--y) * 30); /* Maksimum genişlik freni */
    object-fit: contain; 
    cursor: pointer; 
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-logo:hover {
    opacity: 0.8;
}

/* ------------------------------------------
   ZARİF ARAMA ÇUBUĞU ANİMASYONU
------------------------------------------ */
.search-container { display: flex; align-items: center; position: relative; }

.search-input { 
    width: 0; opacity: 0; 
    border: none; border-bottom: 1px solid #ff99cc; 
    background: transparent; color: #fff; 
    font-size: calc(var(--y) * 0.85); 
    padding: calc(var(--y) * 0.25) 0; 
    outline: none; 
    /* ZEKÂ: Açılırken Apple sitelerindeki gibi akıcı ve yumuşak kayması için 'cubic-bezier' eklendi */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; 
    pointer-events: none; 
}

/* ZEKÂ: Hatalı '2calc' typocusu düzeltildi. Arama çubuğu açılınca 12y (tam kıvamında) uzar */
.search-input.active { 
    width: calc(var(--y) * 12); 
    opacity: 1; 
    padding: calc(var(--y) * 0.25) calc(var(--y) * 0.5); 
    margin-right: calc(var(--y) * 0.5); 
    pointer-events: auto; 
}

.search-btn { background: none; border: none; color: #fff; font-size: calc(var(--y) * 1.1); cursor: pointer; transition: 0.3s; display: flex; align-items: center; }
.search-btn:hover { color: #ff99cc; transform: scale(1.1); }

/* Ortak Menü İkonları (Profil, Menü vs.) */
#main-header button { background: none; border: none; color: #fff; font-size: calc(var(--y) * 1.1); cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center;}
#main-header button:hover { color: #ff99cc; }

/* Sepet İkonu ve Üzerindeki Zarif Rakam Bildirimi */
#cart-btn { position: relative; overflow: visible !important; }
#cart-count { 
    position: absolute; 
    top: 0; right: 0; 
    transform: translate(40%, -40%); /* Rozeti sepetin tam çapraz köşesine milimetrik kaydırır */
    background: #ff99cc; color: #000; 
    font-size: calc(var(--y) * 0.65); font-weight: bold; 
    width: calc(var(--y) * 1); height: calc(var(--y) * 1);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; 
    box-shadow: 0 0 calc(var(--y) * 0.25) rgba(0,0,0,0.8); /* İkonla karışmaması için ince bir kara gölge */
}