/* Bu kod, 1199px'den KÜÇÜK ekranlarda
  mobil menünün nasıl davranacağını belirler.
*/
@media (max-width: 1199px) {

  /* 1. Normalde (kapalıyken) menü listesini gizle */
  .u-header .u-menu-1 .u-nav-container {
    display: none; /* Menü listesini gizler */

    /* Aşağıdaki kurallar açılan menünün tasarımı içindir */
    /* Bunları kendi tasarımınıza göre düzenleyebilirsiniz */
    position: absolute;
    top: 100%; /* Navbar'ın hemen altında açılmasını sağlar */
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgb(5, 65, 125); /* Arka plan renginiz */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
  }

  /* 2. Butona tıklandığında (ve JS .u-menu-open sınıfını eklediğinde)
       menü listesini GÖSTER
  */
  .u-header .u-menu-1.u-menu-open .u-nav-container {
    display: block; /* Menüyü görünür yapar */
  }

  /* 3. Menüdeki linkleri dikey olarak (alt alta) hizala */
  .u-header .u-menu-1 .u-nav-1 {
    flex-direction: column;
  }

  .u-header .u-menu-1 .u-nav-item {
     width: 100%;
     text-align: center;
  }

  .u-header .u-menu-1 .u-nav-item a {
     padding: 10px 20px;
     display: block;
     /* Gerekirse yazı rengini de burada belirleyin */
  }
}