<header class="w-full sticky top-0 z-50 px-4 md:px-8 py-3 flex items-center justify-between bg-[#eff7ff]/80 dark:bg-slate-950/80 backdrop-blur-md border-b border-white/50 dark:border-white/5 shadow-sm transition-colors duration-300">
    
    <!-- 1. LEFT SIDE: LOGO & LOGO NAME -->
    <a href="#" class="flex items-center gap-3 cursor-pointer group">
        
        <!-- Logo Icon (logo.webp) -->
        <div class="w-[45px] h-[45px] md:w-[50px] md:h-[50px] rounded-xl overflow-hidden shadow-inner dark:shadow-black/50 border-2 border-white dark:border-slate-700 transition-transform duration-300 group-hover:scale-105 bg-white dark:bg-slate-800 flex items-center justify-center">
            <img src="logo.webp" alt="Logo" class="w-full h-full object-cover" />
        </div>
        
        <!-- Logo Name (logoname.webp) -->
        <div class="h-[25px] md:h-[30px] transition-transform duration-300 group-hover:translate-x-1">
            <img src="logoname.webp" alt="My Website Name" class="h-full w-auto object-contain" />
        </div>

    </a>

    <!-- 2. RIGHT SIDE: THEMED HAMBURGER BUTTON -->
    <label class="group relative cursor-pointer z-50">
        <!-- Hidden Checkbox for Toggle Magic without JS -->
        <input type="checkbox" class="peer hidden" />
        
        <!-- Neumorphic Button Box -->
        <div class="w-[45px] h-[45px] md:w-[50px] md:h-[50px] flex flex-col items-center justify-center gap-[5px] rounded-xl flex-shrink-0 bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4)] transition-all duration-300 border border-transparent dark:border-white/5 hover:scale-105 peer-active:scale-95 z-10 overflow-hidden">
            
            <!-- Hover light glow effect inside -->
            <div class="absolute inset-0 bg-white/20 dark:bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl pointer-events-none"></div>

            <!-- Hamburger Line 1 -->
            <span class="w-[24px] md:w-[28px] h-[3px] bg-[#7faeed] dark:bg-slate-400 rounded-full transition-all duration-500 origin-center peer-checked:rotate-[45deg] peer-checked:translate-y-[8px] group-hover:bg-[#4f9ce8] dark:group-hover:bg-slate-200"></span>

            <!-- Hamburger Line 2 -->
            <span class="w-[24px] md:w-[28px] h-[3px] bg-[#7faeed] dark:bg-slate-400 rounded-full transition-all duration-500 peer-checked:opacity-0 peer-checked:translate-x-6 group-hover:bg-[#4f9ce8] dark:group-hover:bg-slate-200"></span>

            <!-- Hamburger Line 3 -->
            <span class="w-[24px] md:w-[28px] h-[3px] bg-[#7faeed] dark:bg-slate-400 rounded-full transition-all duration-500 origin-center peer-checked:-rotate-[45deg] peer-checked:-translate-y-[8px] group-hover:bg-[#4f9ce8] dark:group-hover:bg-slate-200"></span>
            
        </div>
    </label>
</header>

<div class="relative w-full max-w-[300px] mx-auto p-2.5 rounded-full bg-gradient-to-br from-[#b3d0fd] to-[#a4caf8] dark:from-slate-700 dark:to-slate-800 flex items-center justify-center transition-colors duration-500">

    <!-- Inner Search Container (With 3D Shadows mimicking ::before & ::after) -->
    <!-- Shadow Breakdown: Top-left white line (-1px), Bottom-right soft blue shadows -->
    <div class="relative w-full rounded-full p-1.5 flex items-center bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7),5px_5px_20px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4),5px_5px_20px_0px_rgba(0,0,0,0.5)] group/search focus-within:scale-[1.02] transition-all duration-300">

        <!-- Input Field -->
        <!-- Focus hone par background thoda aur light hoga bilkul original CSS ki tarah -->
        <input 
            type="text" 
            placeholder="Search..." 
            class="flex-1 px-3 py-2 w-full text-[20px] rounded-full text-[#9EBCD9] dark:text-slate-300 placeholder-[#9EBCD9]/80 dark:placeholder-slate-500 outline-none bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 focus:from-[#eff7ff] focus:to-[#d6e5f7] dark:focus:from-slate-700 dark:focus:to-slate-800 transition-colors duration-300"
        />

        <!-- Search Icon Button -->
        <!-- Same CSS borders: left solid, top/bottom transparent -->
        <button class="w-[45px] h-[45px] ml-2 flex items-center justify-center rounded-full border-l-2 border-t-[3px] border-b-[3px] border-transparent border-l-white dark:border-l-slate-500 hover:border-l-[3px] transition-all duration-300 flex-shrink-0 group-hover/search:shadow-[inset_2px_0px_5px_rgba(255,255,255,0.5)] dark:group-hover/search:shadow-[inset_2px_0px_5px_rgba(255,255,255,0.1)] cursor-pointer">
            <i class="fa-solid fa-magnifying-glass text-white dark:text-slate-400 text-lg transition-transform duration-300 hover:scale-110 active:scale-95"></i>
        </button>

    </div>
    
</div>

<header class="w-full bg-gray-800/60 backdrop-blur-lg border border-gray-700 shadow-2xl rounded-2xl px-6 py-4 flex justify-between items-center min-w-[320px] max-w-4xl mx-auto">
    <!-- Logo Section -->
    <div class="flex items-center gap-3 cursor-pointer group">
        <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-600 to-purple-600 flex items-center justify-center font-bold text-white shadow-[0_0_15px_rgba(59,130,246,0.5)] group-hover:rotate-12 transition-transform duration-300">
            <i class="fas fa-code"></i>
        </div>
        <h1 class="text-xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">CSS Market</h1>
    </div>
    
    <!-- Navigation -->
    <nav class="hidden md:flex gap-8 text-sm font-medium text-gray-400">
        <a href="#" class="hover:text-blue-400 transition-colors relative after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-blue-400 after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left">Home</a>
        <a href="#" class="hover:text-blue-400 transition-colors">Elements</a>
        <a href="#" class="text-blue-400">Pro Code</a>
    </nav>
    
    <!-- Action Button -->
    <button class="bg-white/10 hover:bg-white/20 border border-gray-600 text-white px-5 py-2 rounded-lg text-sm font-semibold transition-all">
        Login
    </button>
</header>