<nav class="mega-nav">
  <div class="mega-item">
    <button class="mega-trigger">Products ▾</button>
    <div class="mega-panel">
      <div class="mega-col">
        <h4>Design</h4>
        <a href="#">UI Components</a>
        <a href="#">Color Systems</a>
        <a href="#">Typography</a>
      </div>
      <div class="mega-col">
        <h4>Development</h4>
        <a href="#">Grid & Layout</a>
        <a href="#">Animasyon</a>
        <a href="#">Form Patterns</a>
      </div>
    </div>
  </div>
</nav>

<style>
.mega-item { position: relative; }
.mega-panel {
  position: absolute; top: 100%; left: 0; min-width: 480px;
  display: none; grid-template-columns: repeat(2,1fr); gap: 2rem;
  padding: 1.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
.mega-item:hover .mega-panel,
.mega-item:focus-within .mega-panel { display: grid; }
.mega-col h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.75rem; }
.mega-col a  { display: block; padding: 0.375rem 0; font-size: 0.875rem; }
</style>