Dark Mode Media Navigation

<nav class="bg-zinc-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 shadow-lg dark:shadow-xl">
  <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
    <!-- Logo Section -->
    <div class="flex items-center space-x-3 mb-2 md:mb-0">
      <svg class="h-9 w-9 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10l-3-3m0 0l-3 3m3-3V4m3 10h4.876a.625.625 0 01.352 1.157l-1.587 1.587A.625.625 0 0115.124 18H10z" />
      </svg>
      <span class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-green-600">StreamVerse</span>
    </div>

    <!-- Search Bar -->
    <div class="relative flex-grow mx-4 max-w-lg w-full mb-2 md:mb-0">
      <input type="text" placeholder="Search movies, series, and more..." class="w-full py-2 pl-10 pr-4 rounded-full bg-zinc-800 dark:bg-gray-800 text-gray-200 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 ease-in-out">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden lg:flex items-center space-x-6">
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Movies
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Series
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Live TV
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>

    <!-- User Profile and Notifications -->
    <div class="flex items-center space-x-6 ml-auto">
      <button class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 focus:outline-none">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-sm font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </button>
      <div class="relative group">
        <img class="h-10 w-10 rounded-full border-2 border-emerald-500 object-cover cursor-pointer" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-zinc-800 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden z-10">
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
        </div>
      </div>
    </div>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden ml-4">
      <button class="text-gray-300 hover:text-emerald-400 focus:outline-none peer">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      <!-- Mobile Menu Content -->
      <div class="hidden peer-focus:block absolute top-full left-0 w-full bg-zinc-800 dark:bg-gray-800 shadow-lg py-2 mt-1 z-20 transition-all duration-300 ease-out origin-top">
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Home</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Movies</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Series</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Live TV</a>
        <div class="border-t border-gray-700 my-2"></div>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
      </div>
    </div>
  </div>
</nav>