/* Mobil görünümde logo stilleri */
/* Sticky Navbar Styles - Masaüstü ve Mobil için */
nav.s-12.grid.background-none.background-primary-hightlight {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Header altındaki içeriğe padding ekleyerek fixed navbar'ın altında kalmamasını sağlıyoruz */
header + main {
  padding-top: 80px;
}
.mgr{
  display: none;
}

@media screen and (max-width: 768px) {
  .mff{
    height: 300px;
  }
  .mgr{
    display: block;
  }
  .dgr{
    display: none !important;
  }
  /* Mobil görünümde navbar stillerini devre dışı bırak */
  nav.s-12.grid.background-none.background-primary-hightlight {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    z-index: auto;
    background-color: transparent !important;
    box-shadow: none;
  }
  
  /* Mobil görünümde header padding'i kaldır */
  header + main {
    padding-top: 0;
  }

  /* Logo container */
  .logo {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: #fff !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  }
  
  /* Logo image */
  .logo img {
    max-width: 150px !important;
    max-height: 40px !important;
    margin: 0 !important;
    margin-left: 30px !important;
    display: block !important;
  }
  @media screen and (max-width: 768px) {
      .logo img {
        max-width: 260px !important;
        margin: 0 !important;
        margin-left: 10px !important;
        display: block !important;
    }
  }
  
  /* Navbar menü butonunun konumunu ayarla */
  .nav-text {
    right: 0 !important;
    left: auto !important;
    z-index: 1001 !important;
    background-color: #005881 !important;
  }
  
  /* Hamburger ikonunun rengini değiştir */
  .nav-text:after, .nav-text:before, .nav-text span {
    background-color: #fff !important;
  }
  
  /* Menü açıldığında hamburger ikonunun dönüşümünü düzenle */
  .show-menu .nav-text:before {
    transform: translateY(9px) rotate(135deg) !important;
    -moz-transform: translateY(9px) rotate(135deg) !important;
    -webkit-transform: translateY(9px) rotate(135deg) !important;
    background-color: #fff !important;
  }
  
  .show-menu .nav-text:after {
    transform: translateY(-9px) rotate(-135deg) !important;
    -moz-transform: translateY(-9px) rotate(-135deg) !important;
    -webkit-transform: translateY(-9px) rotate(-135deg) !important;
    background-color: #fff !important;
  }
  
  .show-menu .nav-text span {
    transform: scale(0) !important;
    -moz-transform: scale(0) !important;
    -webkit-transform: scale(0) !important;
    background-color: #fff !important;
  }
  
  /* Menü açıldığında logo görünür kalması için */
  body.show-menu .logo {
    z-index: 1001 !important;
  }
  
  /* Menü açıldığında menü öğelerinin görünümünü düzelt */
  .top-nav > ul {
    padding-top: 60px !important;
  }
  
  /* Menü açıldığında logo ve menü butonunun görünümünü düzelt */
  body.show-menu .nav-text {
    right: 0 !important;
    background-color: #005881 !important;
  }
  
  /* Menü arka planını değiştir */
  .top-nav {
    background-color: #005881 !important;
  }
  
  /* Menü öğelerinin rengini değiştir */
  .top-nav li a, .background-white .top-nav li a {
    background-color: #005881 !important;
    color: #fff !important;
  }
  
  /* Menü öğelerinin hover durumunu düzenle */
  .top-nav li a:hover, .background-white .top-nav li a:hover {
    background-color: #00425e !important;
    color: #fff !important;
  }
  
  /* Alt menü öğelerinin rengini değiştir */
  .top-nav li ul li a {
    background-color: #005881 !important;
    color: #fff !important;
  }
  
  /* Alt menü öğelerinin hover durumunu düzenle */
  .top-nav li ul li a:hover {
    background-color: #00425e !important;
    color: #fff !important;
  }
  
  /* Aktif menü öğesinin stilini düzenle */
  .top-nav .active-item > a {
    background-color: #00425e !important;
    color: #fff !important;
  }
  
  /* Mobilde "Trends" ve "Create" kelimelerindeki animasyonu kaldır */
  .animated-underline::before {
    display: none !important;
    animation: none !important;
  }
  
  .animated-underline {
    padding: 0 !important;
    display: inline !important;
  }
  
  /* Mobilde jumbotron yazısının stilini düzenle */
  .text-s-size-30 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  
  /* Jumbotron'un üst kısmına padding ekle (navbar'ın altında kalmaması için) */
  .item.background-image {
    padding-top: 70px !important;
  }

  /* Core Services bölümlerinde mobil görünümde sıralama değişikliği */
  
  /* Grid içindeki elementlerin flex düzenini etkinleştir */
  body.primary-color-red.background-dark main section.grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Section 1 ve 3 için (yazı solda, resim sağda olan bölümler) */
  body.primary-color-red.background-dark main section.grid .m-12.l-6:first-child {
    order: 1;
  }
  
  body.primary-color-red.background-dark main section.grid img.m-12.l-6:last-child {
    order: 2;
  }
  
  /* Section 2 ve 4 için (resim solda, yazı sağda olan bölümler) */
  body.primary-color-red.background-dark main section.grid img.m-12.l-6:first-child {
    order: 2;
  }
  
  body.primary-color-red.background-dark main section.grid .m-12.l-6:last-child {
    order: 1;
  }
} 

/* Services, About-us ve Choice sayfaları için mobil görünüm düzenlemeleri */
@media screen and (max-width: 768px) {
  /* Core Services, About-us ve Choice bölümlerinde mobil görünümde sıralama değişikliği */
  
  /* Grid içindeki elementlerin flex düzenini etkinleştir */
  body.primary-color-red.background-dark main section.grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Section 1 ve 3 için (yazı solda, resim sağda olan bölümler) */
  body.primary-color-red.background-dark main section.grid .m-12.l-6:first-child {
    order: 1;
  }
  
  body.primary-color-red.background-dark main section.grid img.m-12.l-6:last-child {
    order: 2;
  }
  
  /* Section 2 ve 4 için (resim solda, yazı sağda olan bölümler) */
  body.primary-color-red.background-dark main section.grid img.m-12.l-6:first-child {
    order: 2;
  }
  
  body.primary-color-red.background-dark main section.grid .m-12.l-6:last-child {
    order: 1;
  }
  
  /* Mobil görünümde resimlerin yüksekliğini ayarla */
  body.primary-color-red.background-dark main section.grid img.m-12.l-6 {
    height: 350px !important;
  }
}